# {𝐅} <br> Hospodský sraz Praha <br> 8. ledna ’20
<small>příště: 12. února v Kavárně Liberál</small>
note:
- Tipy na místo po přednáškách organizátorům.
- nové tagy (k vidění ve výčepu):
- H10 světlá desítka
- H11 světlý ležák
- H12 APA
- H13 polotmavý ležák
- H16 ALE
- H16 Black ALE
---
15/1 Brno (Baroko):
**Tipy a triky, jak rozanimovat SVG**
note:
Vítáme nové spíkry! Máš-li zajímavé téma nebo případovku, nenechávej si ji pro sebe. Využijte hospodský sraz jako generálku na firemní prezentaci.
---
## Letem swwwětem
---
### Responsive Images on the Apple Watch
- [študýrka, kterak stránky pro hodinky připraviti](https://ericportis.com/posts/2018/respimg-apple-watch/)
- Apple představil nový `meta` tag:
```html
<meta name="disabled-adaptations" content="watch">
```
note:
- Chová se obdobně jako `meta viewport`, tj. když chybí (zřejmě většina webů), hodinky předstírají, že mají velkou obrazovku a odzoomují.
- Víte jakou šířku (v px) mají Apple Watch?
- bez `meta` tagu emulují 320px displej + mají DPR 2 => stahjí obrázek 640px (pokud je)!
- S `meta` tagem je šířka 136–184 (CSS) pixelů (podle modelu).
- Rozšíření není velké, lze ignorovat, ale jak dlouho?
---
### Front-End Performance Checklist 2020
- [výživný dokument shrnující postupy ke zrychlování webu](https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages/)
note:
- od Smashing Magazine
- ke stažení i ve formátech k úpravám (Apple Pages, Word)
---
### The State of JavaScript 2019
[Diskuze na FB](https://www.facebook.com/groups/frontendisti/permalink/2415461495332027/)
[The State of JS 2019](https://2019.stateofjs.com/)
note:
- vývoj JS se ubírá správným směrem: 2018 polovina vývojářů rozhodně souhlasí, loni už jen pětina
- loni většina spíše souhlasí
- rozhodně nesouhlasí stálá osmina remcalů
---
### Web almanac
[State of web 2019](https://almanac.httparchive.org/en/2019/table-of-contents) – pro milovníky statistik
1. Page Content
1. User Experience
1. Content Publishing
1. Content Distribution
note:
1. Page Content (JS, CSS, HTML, média, 3. strany, Fonty)
1. User Experience (rychlost, bezpečnost, přístupnost, SEO, PWA, mobily)
1. Content Publishing (e-shopy, CMS)
1. Content Distribution (kompirmace, kešování, CDN, velikost stránky, resource hints, HTTP/2)
- HTTP Archive vychází z 5 790 700 stránek
- v dodatcích je metodologie pro šťouraly
- mrknul jsem na CSS z kapitoly _Page content_
---
### Web almanac: CSS barvy
- nejvíce hex, a RGBA, nejméně HSL
- z pojmenovaných nejvíce
- `white` (41 %)
- `black` (22 %)
- `red` (11 %)
note:
- hex, RGBA na více než 80 % stránek, zbylé jen na méně než čtvrtině
- pojmenované: zbytek pod 10 %
- odstíny šedé (souhrnně) jsou na 4. místě
- zajímavé srovnání UK a US zápisu šedé `gr(a|e)y`, varianta s `a` dvojnásobně (USA)
---
### Web almanac: CSS jednotky
1. `px` na 95 % stránek
2. `em` na 90 %
3. `rem` na 40 %
note:
- minimální rozdíly mezi mobilem a desktopem s výjimkou `vh`, přičemž `vh` je oblíbenějí než `vw` (mezi nimi dokonce `pt`!)
---
### Web almanac: CSS layout + media queries
- flexbox: zhruba na polovině stránek
- polovina stránek má 14 breakpointů
- nejoblíbenšjší breakpoint 768px
note:
- grid: 2 % stránek
- 75 % stránek breakpointy v `px`, 8 % `em`, 1 % `rem`
- breakpointy: je vidět vliv Bootstrapu
---
### Web almanac: CSS fonty
- polovina webů 3 fonty
- nejoblíbenější: Open Sans (přes 20 %), Roboto (16 %), Montserrat (<5 %)
- `font-size`: polovina stránek až 40 různých hodnot
- fonty 3. strany: Google Fonts
note:
- jen desetina je uměřená (8 hodnot)
- 75 % Google Fonts, pak TypeKit 7 %
---
### Web almanac: CSS další
- 5 % stránek používá CSS custom properties
- selektory: třídy převládají, ale na skoro všude jsou i`id`
- počet stylopisů: medián je 6
note:
- třídy (95 % stránek), 90 % `id`
- uvnitř stylopisů je pak 94 % tříd a 8 % `id`
- medián počtu tříd na prvku je 1
- pouze ⅒ stránek vystačí s jedním stylopisem, uvidíme, co s tím udělá rozdělování CSS v rámci optimalizace pro HTTP/2
---
### Web almanac: CSS perličky
- 4. nejčastějším názvem stylopisu (po `style.css`, `font-awesome.min.css` a `bootstrap.min.css`) je **`BfWyFJ2Rl5s.css`**
- Nejvyšší počet fontů na jedné stránce?
- nejvyšší `z-index`
note:
- `style.css` asi 3 % od 4. místa méně než 0,67 webů
- 4 místo: na vině je FB a jeho like button
- 718 a všecky z Google Fonts, zřejmě pokus o netradiční DDoS útok). Na vině údajně rozbitý wordpressový plugin _Above the Page Fold_ (nevím, neznám WP)
---
<pre style="white-space: normal">
999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999
</pre>
---
<pre style="white-space: normal">
999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 !important
</pre>
---
## Přednášky
1. **Jde to i bez javascriptu**, Petr Koláček, Etnetera
2. **FedEx/ShipIt day**, Břetislav Proft, Pipedrive
{"metaMigratedAt":"2023-06-15T03:11:37.049Z","metaMigratedFrom":"YAML","title":"Hospodský sraz Praha, 8. ledna ’20 | {𝐅}rontendisti","breaks":true,"contributors":"[{\"id\":\"772328be-33fa-4edc-bac0-7a7903521fb4\",\"add\":8937,\"del\":2480}]","description":"<small>příště: 12. února v Kavárně Liberál</small>"}