Tomáš Kocifaj – Co by měl obsahovat frontend v 2018?

2. Tomáš Kocifaj
Dohlížím na UX a řídím projekty
www.Brilo.cz
Email: Kocifaj@brilo.cz
Twitter: @kocifaj

3. Práce s obrázky

4. LazyLoading
Nenačítá se zbytečně zdroj, který
v danou chvílí není potřeba.
Dá se načítat cokoliv - video,
velké pozadí, jiný JS script.
U projektů s hodně obrázky
značné zrychlení načítání.
Problém s indexací roboty

5. Implementace LL
Nic složitého. U nás používáme inview.

6. Implementace LL
Nic složitého. U nás používáme inview.

7. Implementace LL
Jak nechat roboty indexovat obrázky.

8. Finální implementace
Do JS scriptu + Include jquery.inview.js
V HTML následně ošetřit
Ta nejméně možná

9. O co možné rozšířit LL
Rozšířit o načítání srcestu
Rozšířit o načítání source pro <picture> tag
Místo spinner.gif použít např. base64 obrázek

10. Více práce pro UXáka
srcest a picture
Velikost obrázku, která se
skutečně využije.
Snížení datové velikosti
výsledného HTML.
Možnost kontrolovat poměr stran
na různých zařízeních.
Více práce pro Grafika
Více práce pro Kodéra
Více práce pro programátora

11. srcest a picture

12. srcest a picture

13. SVG Formát
Vždy ostré včetně retina displeje Více práce pro grafika
Možnost měnit velikost
Možnost měnit barvu
Minimální velikosti
Více práce pro kodéra

14. SVG Formát
Dva způsoby implementace
Jako IMG soubor
Jakou “cestu” vektoru

15. HTML5 elementy
<header> - Hlavička nějaké části webu
<footer> - Patička nějaké části webu
<section> - Nějaká část webu
<main> - Hlavní část web
<nav> - Navigace
<article> - Část webu pro obsah, který pokračuje
<aside> - Boční panel
Jen ty hlavní, pro hlavní bloky HTML stránky.

16. HTML5 elementy

18. Schema.org - Microdata
Strojově čitelné a definované
informace na HTML stránce.
Více práce pro programátora
Možnost více informací ve
snippetu v SERPu
Pozitivní dopad na SEO
Možnost předat data i které
nejsou vypsané v HTML
Hodně živé, často se mění

19. Schema.org - Microdata
Implementace přímo v HTML

20. Schema.org - Microdata
Implementace jSON

21. Critical CSS
Stahování CSS souboru v hlavičce brzdí vykreslování stránky.
Dobré by bylo ho mít v patičce. Ale...

22. Critical CSS

23. Flexbox
https://flexboxfroggy.com/#cs
Pokus o dokonalý systém gridu pro prezentaci elementů
Zahrajte si Žabku!
Příjemná práce s gridem bez
nutnosti dalších principů
Na spoustu věcí už nebudete
potřebovat JS
Spoustu magických věcí se stane
skutečností!
Hodně moc parametrů a
možností. Magorárna se to
načuti.
Bude nahrazen CSS gridem

24. Flexbox
Fáma o použití

25. HTTP2
Stahování zdrojů běží souběžní na více vláknech.
HTTP1 Přístup

26. HTTP2
Stahování zdrojů běží souběžní na více vláknech.
HTTP2 Přístup

27. Pár věcí na závěr
Minifikace a compilace
CSS, JS i HTML
Jen ujištění, že tohle už všichni realizujeme :)
Pro animace Transform nebo SVG
Opustili jsme “sprity” Co jde tak z CDNky
Na obrázky aplikujeme
bezeztrátovou kompresi