Přejít k navigační liště

Zdroják » JavaScript » CSSConf.eu a JSConf.eu 2017

CSSConf.eu a JSConf.eu 2017

Články JavaScript

Vyvedl se návrat legendy všech frontendových hipsterů po útlumu v roce 2016? Podařilo se sjednat dostatečně různorodé složení speakerů? Narostl Janu Lehnardtovi ještě delší plnovous? A hlavně: teklo Club Mate proudem?

Po dvouleté pauze se do Berlína vrátil cyklus Evropských konferencí o webových technologiích, jmenovitě JSConf.eu a CSSConf.eu. Tyto probíhají v různých mutacích po celém světě v průběhu celého roku, ale v rámci Evropy jsou ty berlínské nejslavnější a nejžádanější. Tomu odpovídá i cena, která za tři dny (první den CSSConf, další dva dny JSConf) představuje ohromných 999€.

Berlín, Spréva, bazén na řece

Arena Berlin

Za hodně peněz dostane návštěvník odpovídající množství muziky: high-end prezentační techniku, špičkový catering, kávu a zmrzlinu v libovolném množství, bombastické audiovizální aranžmá, tři večerní social eventy, několik málo metráků populárního sponsor swagu a další služby. Letošní novinkou bylo profesionální hlídání dětí, nabízené jako doplňková služba pro ty, kdo s sebou potřebovali na konferenci vzít rodinu.

Místo konání se oproti minulým rokům posunulo ještě dále od centra, do undergroundové čtvrti Kreuzberg. Arena Berlin stojí na břehu Sprévy a je pár desítek metrů od Görlitzer Parku, místa s nejvyšší koncetrací dealerů drog v celém Berlíně.

Oběd, rýže

Lehkou kontroverzi způsobilo rozhodnutí organizátorů nabízet po celou dobu konference výhradně vegetariánský (a veganský) catering (oficiálně 100% cruelty-free food). Je však na místě dodat, že tento přístup je dlouhodobě v souladu s celým vyzněním těchto akcí, v nichž nehrají prim technologie, ale komunity, jednotlivci, menšiny, diskriminace, životní prostředí a další ideologicko-politické prvky.

CSSConf.eu

Vstup na CSSConf.eu

CSSConf probíhala během pátku v jednom tracku, bylo tedy možné shlédnout všechny přednášky. Osobně mne tato část dvojkonference zaujala víc než ta následující JavaScriptová. Tu je výčet věcí, které jsem si zapamatoval:

  • První přednáška se netýkala CSS jako takového, ale otázky rychlosti načítání jednotlivých součástí webové stránky (samozřejmě s důrazem na stylopisy). Hlavní problém zde způsobuje skutečnost, že styly načítané přes <link rel="stylesheet"> blokují další činnosti prohlížeče. Pro dobrou analýzu načítání webu se hodí nástroje WebPageTest a Lighthouse (o něm bude ještě zmínka); slajdy z přednášky jsou na Speaker Decku.
  • David Khoursid ukazoval, jaké možnosti přicházejí s technologií CSS Custom Properties. Jeho slajdy jsou k dispozici online a já si z nich odnesl tip na knihovnu hammer.js, která implementuje odálosti pro dotyková gesta.
  • S oblíbeným tématem CSS Grid vystoupila hlavní popularizátorka a standardizátorka této technologie, Rachel Andrew. Tentokrát nepopisovala Grid jako takový, ale osvětlovala celý standardizační proces, který vede ke vzniku nového layoutovacího algoritmu a jemu korespondujících CSS vlastností. Její prezentace je na SlideShare a za zmínku stojí, že první návrhy pro CSS Grid pocházejí už z roku 2011. Pokud jste o Gridu ještě neslyšeli (a to nejnovější, co z CSS znáte, je Flexbox), doporučuji se o něj začít zajímat.
  • Vizuálně strhující byla dvojpřednáška Shirley Wu a Nadieh Bremer, které popisovaly svůj projekt data sketch|es. Jejich cílem je pravidelně vyrábět neotřelé vizualizace (zpravidla pomocí D3) a nutno říci, že s dobrým nápadem a dobrými daty jsou jejich práce skutečný skvost.
  • Velké téma byla otázka psaní CSS v JavaScriptu; o této problematice mluvil Glen Maddern (autor styled-components). Z jeho přednášky jsem si neodnesl žádné jednoznačné závěry, snad jen že CSS v JS k tomuto dni rozhodně není dořešený problém.
  • Konferenci zakončila Una Kravets, která během půlhodinové přednášky vytvořila pure-CSS hru bez JavaScriptu. Použila k tomu široké spektrum různých starších i novějších CSS triků, z nichž nejzajímavější mi přišlo generování pixel artu v SASSu pomocí mnoha pozicovaných hodnot box-shadow.

JSConf.eu

V sobotu a v neděli konference pokračovala JavaScriptovou částí. Ta probíhala v režimu two-track, tedy dvě přednášky naráz. Návštěvníci si tedy mohli (museli) vybrat vždy jednu ze dvou nabízených přednášek. Celá konference byla natáčena a v průběhu několika dnů dojde ke zveřejnění záznamů na YouTube, takže není problém doplnit informace z těch přednášek, které nešly stihnout.

Růžová a srdíčko, insignie JSConf.eu

Obsahem mne JSConf zaujala méně. Možná proto, že mnoho přednášek už bylo k vidění v minulých letech (JSConf.bp 2016, JSConf.eu 2015); možná proto, že řada témat byla soft se zaměřením na komunitní a sociální aspekty (a nikoliv na technologie jako takové). I tak jsem si ale z konference ledacos odvezl. Zejména:

  • Marcin Szczepanski ukázal, jak naprogramovat populární TodoMVC v první implementaci JavaScriptu, tj. v prohlížeči Netscape Navigator 2.0. Ve své historizující přednášce předvedl lesk i bídu vývoje v roce 1995 a u zkušenějších vývojářů v publiku nezůstalo jedno oko suché.
  • Velmi zábavnou přednášku měl Zachary Johnson, který ve svém projektu NESpectre nechal všechny účastníky publika hromadně vzdáleně ovládat a hackovat herní konzoli NES. Jeho systém nabízí vzdálený (WebSocket) read-write přístup do celých dvou kilobajtů RAM tohoto přístroje, zatímco na něm nic netušící uživatel hraje libovolnou hru.
  • Užitečná byla přednáška od Laury Carvajal, která vysvětlila, jak na webu FT.com testovali a vylepšovali přístupnost. Z této přednášky jsem si odnesl tip na automatizovaný testovací nástroj pa11y.
  • Otázka paralelizace je v klientském JavaScriptu stále nedořešená, neboť technika Web Workers dovoluje jen velmi striktní separaci mezi vlákny. Na toto téma mluvil Nidin Vinayakan a uvedl dvě nová API, navržená pro vylepšení stávající situace: SharedArrayBuffer a Atomics.
  • Ben Schwarz představil celou řadu statistik o mizerných rychlostech připojení po celém světě. Dále popsal základní způsoby analýzy úzkých hrdel načítání stránek, nicméně obsahem se víceméně kryl s první zmíněnou přednáškou z bloku CSSConf.
  • Dost možná už jste slyšeli o malinké 3kB knihovně Preact, která nabízí miniaturní API-compatible alternativu k Reactu. Její autor Jason Miller osvětlil základní principy Virtual DOMu a prezentoval některé triky, jak urychlit manipulaci se stromem stránky.
  • Bezkonkurenčně nejvíc mne zaujala přednáška Matta Shottona z BBC, ve které popisoval projekt VideoContext. Jedná se o knihovnu ideologicky podobnou Web Audio API, ale specializovanou na práci s videem. BBC pomocí ní experimentuje s real-time úpravami a skládáním videa přímo ve webovém prohlížeči.
  • Vynikající byla též přednáška od Marji Hölttä z týmu V8 (Google), ve které jsme se dozvěděli o dvou různých parsovacích režimech V8, důvodech jejich existence a způsobech, jak díky nim urychlit zpracování JavaScriptu. Slajdy můžu doporučit každému, kdo se zajímá o vnitřnosti implementací JS.
  • Matt Johnson popsal, kdy (dávno!) a proč (málo času!) se v JavaScriptu objevil objekt Date a jaké problémy (velké!) přináší. V těchto dnech probíhá práce na návrhu nového API pro práci s daty a časy, tak uvidíme, jak to dopadne.

Diskuze s několika členy Ecma TC39

Ještě než skončíme, tak jednu podpultovku: Chrome 60 (toho času Canary) obsahuje vestavěný Lighthouse a já vám prozradím this one weird trick, jak jej zapnout. Nachystáni? Takže: v chrome://flags/ zapnout Developer Tools experiments, restartovat, pustit DevTools, Burger/Settings/Experiments, šestkrát zmáčknout Shift, zaškrtnout Audits 2.0, restartovat, Burger/More Tools/Audits 2.0, hotovo. Není zač!

Všechny mé fotky z dvojkonference jsou k dispozici na webu. Závěrem bych rád poděkoval svému zaměstnavateli za možnost zůčastnit se této velké a nezvyklé akce.

Komentáře

Subscribe
Upozornit na
guest
1 Komentář
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Jirka Kosek

Poznámka pro webové historiky: já jsem o CSS gridu slyšel poprvé někdy v roce 2007 a už z té doby existují návrhy specifikace: https://www.w3.org/TR/2007/WD-css3-grid-20070905/
A už i tehdy v návrhu existovalo něco jako grid-template: https://www.w3.org/TR/2007/WD-css3-layout-20070809/#declaring

Bohužel jsem ta generace, co by zamačkávala slzy ;-)

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.