Hospodský sraz, Pinta
příště: 12. února v Kavárně Liberál
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
- Apple představil nový
metatag:
<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
metatagu emulují 320px displej + mají DPR 2 => stahjí obrázek 640px (pokud je)! - S
metatagem je šířka 136–184 (CSS) pixelů (podle modelu). - Rozšíření není velké, lze ignorovat, ale jak dlouho?
Front-End Performance Checklist 2020
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
The State of JS 2019
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 – pro milovníky statistik
- Page Content
- User Experience
- Content Publishing
- Content Distribution
note:
- Page Content (JS, CSS, HTML, média, 3. strany, Fonty)
- User Experience (rychlost, bezpečnost, přístupnost, SEO, PWA, mobily)
- Content Publishing (e-shopy, CMS)
- 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 sadvojnásobně (USA)
Web almanac: CSS jednotky
pxna 95 % stránekemna 90 %remna 40 %
note:
- minimální rozdíly mezi mobilem a desktopem s výjimkou
vh, přičemžvhje oblíbenějí nežvw(mezi nimi dokoncept!)
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
-
- nejčastějším názvem stylopisu (po
style.css,font-awesome.min.cssabootstrap.min.css) jeBfWyFJ2Rl5s.css
- nejčastějším názvem stylopisu (po
- Nejvyšší počet fontů na jedné stránce?
- nejvyšší
z-index
note:
style.cssasi 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)
999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999
999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 !important
Přednášky
- Jde to i bez javascriptu, Petr Koláček, Etnetera
- FedEx/ShipIt day, Břetislav Proft, Pipedrive