Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

PoSobota 96 ČB 28.4.2018

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

  • Sé el primero en comentar

  • Sé el primero en recomendar esto

PoSobota 96 ČB 28.4.2018

  1. 1. Tomáš Kocifaj Dohlížím na UX a řídím projekty www.Brilo.cz Email: Kocifaj@brilo.cz Twitter: @kocifaj
  2. 2. Práce s obrázky
  3. 3. 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
  4. 4. Implementace LL Nic složitého. U nás používáme inview.
  5. 5. Implementace LL Nic složitého. U nás používáme inview.
  6. 6. Implementace LL Jak nechat roboty indexovat obrázky.
  7. 7. Finální implementace Do JS scriptu + Include jquery.inview.js V HTML následně ošetřit Ta nejméně možná
  8. 8. 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
  9. 9. 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
  10. 10. srcest a picture
  11. 11. srcest a picture
  12. 12. 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
  13. 13. SVG Formát Dva způsoby implementace Jako IMG soubor Jakou “cestu” vektoru
  14. 14. 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.
  15. 15. HTML5 elementy
  16. 16. 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í
  17. 17. Schema.org - Microdata Implementace přímo v HTML
  18. 18. Schema.org - Microdata Implementace jSON
  19. 19. Critical CSS Stahování CSS souboru v hlavičce brzdí vykreslování stránky. Dobré by bylo ho mít v patičce. Ale...
  20. 20. Critical CSS
  21. 21. 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
  22. 22. Flexbox Fáma o použití
  23. 23. HTTP2 Stahování zdrojů běží souběžní na více vláknech. HTTP1 Přístup
  24. 24. HTTP2 Stahování zdrojů běží souběžní na více vláknech. HTTP2 Přístup
  25. 25. 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

×