FrontKon 2025 se konal 1. října v Hotelu Passage v Brně a nabídl tři nabité stage – E, F a partnerskou stage. Úvodní Initial Commit zahájili předseda spolku Frontendisti Martin Michálek a koordinátorka Kateřina Macháčková, pak už to vypuklo. My jsme s nadšením vyrazili na stage E.
Tailwind 4 vs CSS 6
Lukáš Trumm rozebral rozdíly mezi Tailwind CSS 4 a moderním CSS 6 jako dva odlišné přístupy vhodné pro různé typy projektů. Tailwind si získává oblibu díky rychlému vývoji, build procesu a podpoře AI generování. Na druhou stranu CSS 6 otevírá nové designové možnosti díky funkcím jako vrstvení, scoping a container queries, které umožňují pokročilé styly bez potřeby JavaScriptu. Rozumný výběr mezi těmito přístupy tak závisí na kontextu a cílech projektu.
JavaScript is dead: 7 příkladů, kde už si vystačíš jen s moderním CSS
Jan Svěrák prezentoval sedm nových vlastností moderního CSS, které postupně nahrazují některé dříve běžně používané JavaScriptové techniky. Patří mezi ně například content-visibility: auto, která funguje jako alternativa k IntersectionObserveru a umožňuje odložené vykreslování obsahu mimo viewport. Dále scroll-snap pro plynulé rolování, selektor :has(), text-wrap: balance; pro lepší zalamování nadpisů bez nutnosti nastavovat max-width, nebo nová barevná funkce color-mix(). Novinkou je také to, že align-content: center; už funguje i na blokových kontejnerech. V přednášce bylo také upozorněno na důležitost testování všech nových funkcí v praxi.
CSS Scroll-State Container Queries
Lukáš Chylík představil, jak nová možnost scroll-state container queries posouvá čisté CSS řešení tam, kde jsme dříve museli sahat po JavaScriptu. Díky této funkcionalitě lze jednoduše rozpoznat, jestli se kontejner právě posouvá, jestli je přilepený pomocí sticky, nebo zda funguje se scroll-snapem.
Velkou výhodou je možnost reagovat na stav přímo v kaskádových stylech. Typickým příkladem je navigační lišta, která při „přilepení“ k hornímu okraji stránky změní svůj vzhled – bez jediné řádky skriptu. Podobně lze řešit i méně nápadné detaily: zvýraznit položky v karuselu, naznačit uživateli, že může rolovat dál, nebo vizuálně odlišit část obsahu podle aktuální pozice.
Scroll-state queries jsou zatím poměrně novinkou, kterou aktuálně podporuje pouze Chrome, zatímco Firefox a Safari ji teprve chystají.
Série AI přednášek
Po obědové pauze následovala série zaměřená na umělou inteligenci a její dopad na design a vývoj. Milan Seitler otevřel téma otázkou, zda AI ohrožuje práci designérů a vývojářů. Ukázal, jak realita zkoumání produktivity v AI době AI často překvapí – vývojáři sice očekávají zvýšení produktivity o 20 %, ale ve skutečnosti může být efekt opačný. AI je podle něj spíše „nabušený junior“, který pomáhá, ale stále vyžaduje lidský dohled.
Matúš Čongrády pak vysvětlil fungování AI editorů kódu a zdůraznil, jak moc důležitý je správný kontext při práci s AI nástroji.
Tomáš Pustelník připomněl, že kvalitní komunikace je stejně důležitá při práci s AI i mezi lidmi. Vysvětlil, jak principy „prompt engineeringu“ z AI lze využít k lepší a efektivnější komunikaci v týmu – například při psaní code reviews nebo zadávání úkolů. Jako příklad zmínil jednoduchou techniku. Když dostaneme odpověď, můžeme výslovně napsat, že jde o „první úroveň“ a požádat o „druhou úroveň odpovědi“ – tedy detailnější pokračování.
CrUX: data, která zrychlí vaše weby
Michal Matuška představil CrUX, rozsáhlou databázi reálných dat o používání webů, která odhaluje mnohem víc než běžné testy jako Lighthouse, jež často ukazují zkreslený obraz. Díky CrUX lze sledovat, jak web funguje u reálných uživatelů po celém světě. Zajímavé je například chování metriky INP, která v USA většinou dosahuje optimálních hodnot, zatímco v Evropě, zejména kvůli širšímu rozšíření Android zařízení, se často pohybuje v oblasti vhodné pro zlepšení. To jen potvrzuje, že výkon webu výrazně ovlivňuje hardware koncových uživatelů.
3D ve webovém vývoji
Markéta Willis předvedla, že 3D grafika na webu už dávno není záležitostí jen herních prostředí. Nejprve nás provedla základy – scéna, objekty, polygony a materiály – abychom pochopili, jak je tento 3D svět postavený. Následovalo praktické předvedení kódu v Three.js, kde jsme viděli, jak se objekty oživují texturami a animacemi, jak WebGL přes canvas přenáší scénu do prohlížeče a jak vše funguje v reálném čase.
Závěr akce patřil stand-up show Tigrana Hovakimyana. Po jeho vystoupení následovala afterparty v Clubu Passage, kde mohli účastníci pokračovat ve společenském setkání.
