Ako bolo na Front-Trends 2018 vo Waršawe

Máj sme ukončili konferenciou v Poľskej Waršawe zameranú na témy front-end vývoja webových aplikácii. Prestriedali sa speakri veľkých aj menších firiem s témami od grafických prvkov, cez UI optimalizáciu, performance, témy o čistom kóde a znovupoužiteľnosti až po zábavné témy ako sa vyrábala aplikácia Pokémon radar či voľnočasový projekt Stephanie Nemeth ako využiť IoT s módou.

Po rušnom období plnom prebiehajúcich aj nových projektov, hľadania a zaškoľovania nových kolegov, sme sa s Lukášom vybrali na dvojdňovú konferenciu Front-Trends do Waršawy v Poľsku.

 

Výlet začal už v stredu, deň pred konferenciou, kedy sme sa nočnou jazdou vybrali na letisko. S človekom s ktorým pracujete 5 rokov si predsa len máte čo povedať cestou, aj počas celého výletu.

 

Historické centrum Waršawy stojí naozaj za viac času ako jeden deň ak by ste chceli preskúmať všetky zákutia, obzrieť viaceré významné múzeá, alebo spoznať nespočetné množstvo rôznych podnikov, reštaurácii, barov či predajní ktoré u nás nie sú bežne “na ulici”.

 

Letisko BudapešťStaré mesto Waršawa - Mário Babej a Lukáš Reviľak

Park Waršawa

BikesharingVečera vo Waršawe - Žurek, domáce pivo a domáca slivovica 72%


 

Vynikajúcim prepravným prostriedkom sú vďaka bikesharing-u bicykle ktoré sú naozaj takmer na každom rohu v centre mesta. Veľmi rýchlo a ľahko dostupné vďaka appke Verturilo.

 

Prvý dojem z konferencie bol veľmi pozitívny. Priestranná hala, jednoduché a jasné značenie, káva, občerstvenie do bezvedomia celý deň, pohodlné sedačky pre tých ktorý neboli priamo v hlavnej prednáškovej hale a stand-by stoly v celom priestore pre networking ktorého bolo naozaj dostatok.

 

Štvrtok večer pre nás organizátori pripravili párty na najvyššom poschodí z ktorého bol jedinečný vyhľad na mesto. Prebiehali kvízové súťaže cez appku Kahoot (odporúčam na teambuilding) a ako to už býva zvykom, vytvorilo sa viacero menších skupín ktoré diskutovali, zoznamovali sa a bavili do noci.

 

Fotostena Front-trends Waršawa 2018

Stage na konferencii Front-trends Waršawa 2018Welcome screenTicketyKonferencia - vstupná sálaPracujeme keď je to možné - VIP kútik :-)

 

Do the right (to left) thing

Maja Wichrowska prednášala o probléme ktorý zakúsili v airbnb pri nasadzovaní arabských jazykov písaných zprava do ľava. Ktorý frontend developer by si myslel že CSS to rieši jedným riadkom, je na veľkom omyle :-)
Prečo riešiť tento probém?

Lebo 4-5% svetovej populácie hovorí Arabským jazykom, ak sa zameriavate napr. na Qatar, tak tam je to až 58,7%.

Prečo je to zložité?

Lebo inputy, custom css štýly, ikony, tabuľky... Skúste si napr. otočit kalendár na bežnom webe cez dir=”rtl”

 

Maja ukázala ako riešiť tento problém globálne v React-e ak je váš systém postavený z tisícov komponent. Použitím knižníc airbnb/react-with-directions , airbnb/react-with-styles a kentcdodds/rtl-css-js vyriešili hromadné pretypovanie v CSS a JS.

Celá prezentácia:

https://www.slideshare.net/MajaWichrowska/do-the-right-to-left-thing/MajaWichrowska/do-the-right-to-left-thing

 

Fast but not furious: debugging user interaction performance issues

Anna Migas ako front-end developerka priniesla detailnejší pohľad na optimalizáciu UI webu. Čo si odniesť?

  • Každý layer webu “papá” pamäť.

  • Testujte web v prehliadači na Performance, Layers a Rendering (Google chrome alebo Firefox)

 

Potencionálne nebezpečné prvky webu z pohľadu výkonu:

  • Animácie

  • Parallax effect

  • Fixované elementy

  • Eventy nasluchajúce na “scroll”

  • Hover efekty

  • Pripájanie elementov

 

Celá prezentácia:

https://www.slideshare.net/AnnaMigas1/fast-but-not-furious-debugging-user-interaction-performance-issues

 

From Pen & Paper to SVG Animations. An Illustration Adventure

Koho viac zaujímala SVG grafika, prišiel si na svoje pri prednáške od Lini Linhart v ktorej opísala ako ona prenáša svoje kresby do digitálnej SVG podoby s optimalizáciou pre web.

Odporúča používať SVG pre responzívne ilustrácie, preto že sú to malé súbory, je možné ich štýlovať a animovať v CSS, debuggovať v browseri a majú mnoho možností pre animovanie s dobrým výkonom.

Konverziu fotografie kresby rieši v Adobe Illustrator cez funkciu Image Trace kde následne jednotlivé elementy rozdelí na viaceré vrstvy. Export v SVG ešte dodatočne optimalizuje cez službu SVG OMG.

Zapamätali sme si že je fajn používať inline SVG, tiež zapisovať id a aria-labbeledby atribúty a že nie všetky browseri prepočítavajú SVG elementy rovnakým spôsobom čo môže spôsobiť trochu vrásky na čele hlavne pri animáciach.

 

Viac tipov k SVG: https://css-tricks.com/accessible-svgs/

Celá prezentácia:

https://noti.st/lisi/vWbgvW/from-pen-paper-to-svg-animations-an-illustration-adventure

 

High performance web fonts od Peter Müller

Je až neuveriteľné ako je možné optimalizovať načítanie webu redukovaním payloadu jednotlivých fontov na webe.

V tomto príklade Peter ukázal ako je možné zrýchliť renderovanie webu z 6,5s na 2,6s na 3G pripojení (cez 66% zvýšenie výkonu) len s niekoľkými jednoduchými trikmi!

Neoddeliteľnou súčasťou optimalizácie je pochopiteľne prechod na HTTP/2.

Rýchlosť načítania Hello World webu pri použití rôznych systémov načítania fontov

High performance of wesite rendering - HTTP2Mobile web rendering to first pixel

Na dosiahnutie týchto cieľov odporúčal kroky: vlastné hostovanie fontov, Preload, Subsetting, nastaviť “font-display: swap” property.

Peter vytvoril aj CLI nástroj pomenovaný Subfont, ktorý vie analyzovať statické weby a z tých vygenerovať optimálne web font subsety. Nie je to ale vhodné pre dynamické weby.

 

Celá prezentácia:

http://slides.com/munter/high-performance-web-fonts-3#/

 

What’s next in templating by Filip Bech-Larsen

Filip Bech-Larsen podal ukrutne rozsiahlu prednášku o nových cestách ako renderovať dynamický content za použitia ES6 funkcií. Odporúčam si preklikať prednášku, tú sú zopár odkazov na highlight-y:

Ako základ pre každého by mali byť štandardy: Airbnb Javascript Style Guide, Airbnb CSS Style Guide, Verzovanie a branche v GIT , ESLint, krajší kód s Prettier a kopa ďalších ukážok kódov a linkov v prezentácii.

 

Celá prezentácia:

https://silentimp.github.io/codeStyleAndViolence/index.html


Záverom...

Koncom konferencie sme boli už pomerne vyčerpaní, no napriek tomu sme sa večer znova vybrali do mesta spoznávať piatkový život veľkomesta. Stálo za to, veď posúďte sami :-)

PS: v intro texte tohto článku spomínam Stephanie Nemeth s IoT projektom LED oblečenia a doplnkov. Stojí to za pozretie ;-)

 

Ferrari predajňa v meste niekde vedľa obuvi a reštaurácie :-)

Zápas v boxeRušný piatkový večer pri rieke Visla
 

Mário Babej

Mário Babej

CEO WAME s.r.o. | Od 15-tich rokov ako webový vývojár pre frontend a backend ako freelancer, neskôr ako člen rôznych menších tímov. Dnes je mojou hlavnou úlohou budovanie úspešného tímu profesionálov.

14. Jún 2018 | 18:37