Přejít k obsahu Přejít k hlavnímu menu

SUPERKODERS

Jaký byl FrontKon 2024?

Superkodéři přednášeli, moderovali, spoluorganizovali, ale hlavně jako účastníci si užívali velmi nabitý program.

Eliška Plitzová 14. října 2024 12 min. čtení

Skvělý! FrontKon 2024 opět přinesl dávku inspirace a znalostí pro všechny nadšence (nejen) frontendu. Letošní ročník se odehrával v pražském O2 Universu. Z řad SUPERKODERS vyrazilo na konferenci celkem 12 superkodérů a superkodérek, kteří obohatili program nejen přednáškou, ale i panelovou diskuzí a moderováním. Jak je zvykem, užili jsme si nejen vzdělávání, ale i příležitosti setkat se s kolegy z oboru. V článku vám přinášíme výběr přednášek, které nás letos nejvíce zaujaly.

V pasti Vercelu aneb
za pohodlí se platí

Michal Matuška (SUPERKODERS)

Případová studie o projektu Megaubytovanie.sk a naše strasti ohledně provozu tohoto webu na platformě Vercel. Jak Michal v přednášce zmiňuje, použití Vercelu má spoustu výhod a značně vylepšuje developer experience. Od napojení repozitáře na automatický deploy až po možnost komentování jednotlivých verzí v takzvaném preview módu. Tohle je vše super dokud nenarazíte na limity Vercelu a s tím spojeného pricingu. A vzhledem k tomu, že Megaubytko má miliony page views, jsme přešvihli limity opravdu hodně. Tak, že by provoz webu stál 150 000 Kč / měsíc. Michal popsal postup jak jsme náklady optimalizovali. Zaznělo spoutu tipů, které jsou přenositelné i na projekty, které jsou stejně jako Megaubytko, postavené na serverless přístupu. Pokud vás zajímá strastiplná cesta od vyjednávání s Vercelem o lepší ceně až po finální rozhodnutí přesunout projekt, pusťte si Michalovu přednášku.

Panelová diskuze:
Moje cesta k Web
Accessibility Specialist

Kristýna Marková (SUPERKODERS)
a Martin Michálek (PAGESPEED.CZ)

Panelová diskuze s naší specialistkou na webovou přístupnost, Kristýnou MarkovouMartinem Michálkem byla inspirativním a interaktivním zážitkem, který vyvolal dotazy mnoha posluchačů. Kristýna hovořila o důležitosti webové přístupnosti a také o zkušenosti se získáváním certifikace Web Accessibility Specialist (WAS).

V rámci diskuze byly také probírány nejčastější chyby, jako například chybějící popisky obrázků, problémy s focusem nebo praktiky a nástroje, které pro kontrolu a testování přístupnosti na projektech používá. Zdůrazněn byl také význam testování s reálnými uživateli.

Mýty a blbosti
o webové rychlosti

Martin Michálek (PAGESPEED.CZ)

Martin Michálek, spoluzakladatel PageSpeed.cz, podělil se o svou vizi v přednášce „Mýty a blbosti o webové rychlosti“. V této 20 minutové prezentaci se s humorem zaměřil na odhalení běžných mýtů, které obklopují rychlost webů. Uvedl, že interaktivní metriky se počítají kumulativně a na nové stránce se resetují, což může zkreslovat výsledky. Dále vysvětlil, že Lighthouse score nemá s rychlostí webu nic společného, jelikož se jedná o syntetické měření jedné stránky. Martin také upozornil na to, že WP Rocket může manipulovat s výpočtem Lighthouse score. Zajímavým závěrem bylo, že Android zařízení je reálně pomalejší než iPhone.

S více než dvacetiletou praxí v oblasti webových technologií a zkušenostmi s klienty jako Dr. Max a Footshop, Martin efektivně osvětlil, jak důležité je rozumět skutečným faktům o výkonu webu. Jeho dynamické vystoupení nejenže vyvrátilo zavádějící představy, ale také postavilo solidní základy znalostí, které účastníky motivovaly k optimalizaci jejich vlastních webů.

What I Learned in
1000+ Heads Start-up

Jakub Miskech (Outreach)

Přednáška Jakuba Miskecha na partnerské stage nabídla cenné poznatky o optimalizaci pracovních procesů, které mohou zásadně zefektivnit pracovní postupy. Jakub sdílel své cenné zkušenosti a nabídl účastníkům konkrétní akční body, které mohou okamžitě implementovat:

  • Krátké a efektivní denní scrummity: Organizace 15minutových setkání každé ráno, přičemž je důležité, aby někdo z týmu hlídal časový rámec a vyhnul se zbytečnému zabíhání do detailů.
  • Komplexita úkolů: Podtržená důležitost společného hodnocení komplexity úkolů. Pokud má úkol více než 8 bodů, měl by být rozdělen na menší části, což usnadní správu i pochopení.
  • Definice cílů úkolů: Doporučení jasně definovat cíl každého úkolu, aby se předešlo nedorozuměním. Odkaz do Basecampu nestačí! :-)
  • Prezentace a feedback: Pravidelné ukázky práce od vývojářů, které slouží nejen jako inspirace a rozšíření znalostí v týmu, ale také jako trénink soft-skills a příležitost k získání zpětné vazby.
  • Retrospektivy každé dva týdny: Po každém dvoutýdenním cyklu je vhodné provádět retrospektivu, kde se shrnou úspěchy, neúspěchy a akční body pro zlepšení. Tímto se podporuje otevřená komunikace a týmová soudržnost.
  • Zavedení no-meeting days: Nejefektivnější je mít jeden den v týdnu bez schůzek – pro tým to byla středa. Tento přístup umožňuje soustředit se na důležité úkoly a minimalizovat rozptýlení.
  • Pull requesty a jejich přínosy: Časová investice do pull requestů přináší dlouhodobě hodnotu v podobě zlepšení kvality kódu a snížení času potřebného na opravy.
  • Důležitost testování a feature flags: Ačkoli psaní testů může zabrat více času než samotná implementace funkce, dlouhodobě se to vyplatí pro zajištění kvality a stability kódu. Používání feature flags navíc umožňuje snadné nasazení nových funkcí bez rizika.

10 mini-receptů
ze světa CSS

Ondřej Žára (Seznam.cz)

Ondřej Žára, frontendový vývojář ze Seznamu, se s námi podělil o 10 zajímavých CSS vlastností. Ukázal, jak řešit problémy, které dříve vývojářům způsobovaly potíže, a jakým způsobem moderní CSS zjednodušuje práci oproti minulosti. Přednáška byla zaměřena na praktické příklady, které demonstrovaly výhody nových vlastností CSS, čímž inspiroval vývojáře k tomu, aby je využívali ve svých projektech.

Mezi představenými vlastnostmi, jako jsou has, accent-color, line-clampinset, které už můžete znát z našich článků „Letem frontendovým světem“, nás zaujaly také následující novinky:

  • system-color: Jedná se o CSS datový typ, pomocí kterého je možné definovat v různých částí webu barvy, které prohlížeč používá pro jiné elementy. Můžete tak například říct prohlížeči, aby pro ohraničení použil stejnou barvu jako pro barvy odkazů nebo tlačítek. Tato vlastnost reaguje jak na světlé, tak na tmavé téma.
  • transform-independent: Nová vlastnost, která umožňuje aplikovat jednotlivé transformace na prvky bez nutnosti opakovaného zápisu. Pokud chcete například rozšířit zápis transform: translateY(-50%); na hover o scale(-1), nemusíte přepisovat celý transform, ale stačí použít samostatnou vlastnost scale: -1;.
  • font-variant-numeric: tabular-nums: Tato definice umožňuje, aby se jednotlivé číslice např. ve shrnutí ceny v košíku lícovaly pod sebou. Tím se vyhnete nutnosti stahovat další monospace font, který by byl navíc odlišný od zbytku webu.

Zajímají tě novinky ze světa Frontendu?

Přihlas se k našemu newsletteru nebo nás sleduj na  sociálních sítích Externí odkaz .

Technické dovednosti otevírají dveře,
soft skills je drží otevřené

Marek Velas (EDUpunk)

Marek uvedl důvody proč se na vývojáře ostatní dívají jako na lidi bez soft skills. A proč je od vývojářů soft skills také vyžadováno a proč je důležité je mít. Popsal rozdíl mezi softskills a hard skills.

Možné postupy jak se člověk bez soft skills může prosadit: Základní pravidlo je mluvit řečí daného „kmene“, tedy místa kam se chce dostat. Třeba na pohovoru. Další pomůcka při pohovoru může být třeba metoda STAR. Kdy popíšete nějakou situaci (Situation) - co jste např. řešili. K tomu uvedete úkol (Task) jaký jste měli řešit poté popíšete řešení (Action). Následně se pochlubíte dosaženým výsledky (result). Tohle se bude líbit každému HR :-)

Nowwwinky speciál:
co je nového u prohlížečů?

Tomáš Kout (Lentiamo)

Tomáš začal svoji poutavou přednášku zmínkou o iniciativě Interop, v rámci které se prohlížeče Chrome, Firefox, Safari a Edge domlouvají, jaké nové fíčury v nejbližší době zaimplementují, přičemž každá z nich může být v jednom ze tří stavů:

  • Limited availability: je implementována pouze některými prohlížeči
  • Newly available: je implementována všemi hlavními prohlížeči
  • Widely available: po dalších 2,5 letech podpory

Tyto stavy jsou definované v Baseline. Pro podrobnější přehled můžete navštívit Web Platform Status.

Následoval obsáhlý přehled novinek, o kterých se mluvilo nejvíc za poslední rok.

Nové HTML elementy a atributy:

  • Dialog využijete pro tvorbu modálních oken a oceníte jeho nativní overlay či zavírání pomocí klávesy Escape bez nutnosti psaní hromady JavaScriptu.
  • Popover se hodí na tooltipy.

Novinky v CSS:

  • Díky Cascade Layers můžete docílit toho, že poslední zapsané pravidlo nebude mít nutně tu nejvyšší prioritu.
  • Subgrid se hodí pro tvorbu komplexnějších layoutů.
  • Container queries vám dá svobodu stylovat element na základě rozměrů rodičovského elementu.
  • CSS nesting jsme dosud znali pouze z CSS preprocesorů, nyní můžeme zanořovat selektory již v nativním CSS.
  • Pseudotřída :has pro snadnější selektování elementů, např. pokud potřebujete vybrat nějaký element na základě stavu jeho potomků.
  • Funkce pro práci s barvami: color(), color-mix().
  • Matematické funkce pro nadšence, kteří se při psaní CSS neobejdou bez použití goniometrických funkcí.

Tuto přínosnou přednášku pak Tomáš zakončil sdělením, že není potřeba se omezovat pouze na jednu novinku, když můžete zkombinovat vícero z nich a vytvořit tak něco pozoruhodného.

5 právních f*ckupů,
kterým by se měl vyhnout
každý frontenďák

Karel Navrátil (Svoboda Koubková advokáti)

Úderná přednáška Karla Navrátila utekla velice rychle a nás mrzelo, že skončila již po 10 minutách, a my se tak nedozvěděli více o tomto zajímavém tématu. V první části uvedl, na co si dát pozor při sepisování smlouvy s klientem. Právní listiny jsou založené na slovíčkaření a je proto nutné dát si pozor, jak je ve smlouvě definované, do jaké výše škod nese dodavatel odpovědnost, jaké jsou případné smluvní pokuty či jestli se v nejhorším scénáři nejedná o náhradu škody v plném rozsahu.

Dotazem do publika se potvrdilo, že ne každý vývojář si při použití produktů třetích stran kontroluje, jaké mají definované licence. Pokud provádíte web scraping, tak byste neměli vytěžovat informace z webů, které to mají např. v patičce výslovně zakázané. Povídání uzavřel zmínkou o evropském zákoně o přístupnosti.

Evropský zákon o přístupnosti
optikou frontendu

Radek Pavlíček

Jedním z hlavních témat letošní konference byla přístupnost. Přednášel o ní i Radek Pavlíček, který hned na úvod zmínil, že každý web obsahuje průměrně přes 50 automaticky detekovatelných chyb přístupnosti a tyto problémy se týkají až 96 % webů. S tím by měl bojovat evropský zákon o přístupnosti, který vejde v platnost 28. června 2025. I když jsou jeho obrysy mlhavé a zatím není jasné, jaké postihy by mohly hrozit, je určitě dobré se na něj začít připravovat již dnes.

Webová přístupnost stojí na třech pilířích - kódu, designu a obsahu - a je na nás vývojářích, abychom první pilíř, čili kód, vytvářeli již od začátku s ohledem na přístupnost.

Ve druhé části přednášky Radek zmínil základní chyby na webech, jako je malý barevný kontrast, chybějící alt u obrázků, chybějící labely u formulářových prvků či prázdné odkazy a tlačítka. Dále pak prošel nejčastější chyby u komponent. Jednou ze zmiňovaných komponent je našeptávač, který dost často nelze ovládat pomocí klávesnice. Nebo třeba takové carousely mohou být pro uživatele čteček opravdu oříšek a některé z nich dokonce kradou na stránce focus a uživatel pak ztrácí přehled, kde na stránce se nachází. Důležité je položit si otázku, zda carousel na stránce opravdu potřebujeme. Další problematickou komponentou je modální okno, což je vlastně nová vrstva ve stránce, která by měla dostat focus a měla by se dát zrušit zmáčknutím Escape.

Na závěr bylo zmíněno, že až 90 % chyb by bylo zjištěno již samotným kodérem, kdyby si prošel celý web pomocí klávesnice a na dané problémy by sám narazil. Pokud si chcete usnadnit práci, určitě můžete využít či se inspirovat některou z knihoven přístupných komponent.


Nestihli jste přednášku?

Přednášek na konferenci bylo mnohem více, protože program byl doslova nabitý k prasknutí. I přes náš počet jsme však nedokázali být všude. Záznamy vyjdou na YouTube kanále Frontendisti.cz, takže pokud vás nějaká přednáška zaujala, určitě na ni mrkněte.

Snídaně se SUPERKODERS

Konference začala snídaní se SUPERKODERS. Včasní příchozí si mohli pochutnat na donutech a čerstvém ovoci. Ranní donuty zmizely během dvaceti minut, což jen podtrhlo nadšení do dne nabitého programováním. Kdo přišel včas, nejenže si užil dobrou snídani, ale i chytil tu nejlepší židli na začátek konference.

Animované předěly
a soutěž

I tento rok jsme se na konferenci podíleli jako organizátoři a partneři. A proto ani tentokrát nechyběla celokonferenční soutěž o noc pro dva v brněnském zážitkovém hotelu Anybody . Pravidla byla jednoduchá: Pošli fotku, napiš vzkaz a my vylosujeme vítěze 🤩

Zaslané fotky do soutěže jste mohli následně vidět na plátně v animovaných předělech mezi přednáškovými bloky, které jsme připravili za pomocí webových technologií.

Animace jsou napsané naší oblíbenou knihovnou GSAP, se kterou je radost pracovat a vše šlo jako po másle. Výsledná animace zabrala přesně 30 řádků kódu. Předěly mezi přednáškami jsou k vidění na této stránce.

Velká gratulace patří našemu vítězi, na kterého se usmálo štěstí a může se těšit na nezapomenutelný pobyt v srdci moravské metropole. Všem ostatním, kdo se naší soutěže zúčastnili, děkujeme za účast a skvělé vzkazy!

Po náročném dni plném přednášek následovala afterparty v moderních prostorách Apify v centru Prahy. DJ se postaral o hudbu a mezi pub quizem, fotbálkem a hraním na PlayStationu probíhal všudy přítomný networking. Nechybělo ani občerstvení, milovníci pizzy si přišli na své 🍕.

Konference za námi. Ať žijou meetupy.
Těšíme se, až se zase společně potkáme.

Chceš se bavit s námi?

Hledáme do týmu další zapálené vývojáře.
Mrkněte na kariéru a napište Michalovi.

Michal Matuška | CTO +420 737 770 642

Michal Matuška