Hospodský sraz, Pinta 08. 01. 2020

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ý meta tag:

<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

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

1. Page Content
2. User Experience
3. Content Publishing
4. Content Distribution

note:

1. Page Content (JS, CSS, HTML, média, 3. strany, Fonty)
2. User Experience (rychlost, bezpečnost, přístupnost, SEO, PWA, mobily)
3. Content Publishing (e-shopy, CMS)
4. 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 iid
• 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)

999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999

999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 !important

Přednášky

1. Jde to i bez javascriptu, Petr Koláček, Etnetera
2. FedEx/ShipIt day, Břetislav Proft, Pipedrive