Mews
Brno dnes: GoodData
příště: 11. června, Alma career
note:
- představit spolek
Budujeme a vzděláváme komunitu frontendových vývojářů a designérů
- Brno: záznamy budou, end-to-end testy & automatizované testy a11y
- organizační náležitosti
- Vítáme nové spíkry! Máš-li zajímavé téma nebo případovku, nenechávej si ji pro sebe. Call for papers AKA náležitosti na webu Frontendisti.cz
Pozwwwánky
-
- května, OAK's Labs – ReactGirls & OAK'S LAB meetup
-
- května, Make – Animating React: A Fireside Chat with Matt Perry
- 28.–29. května — Webexpo
-
- října — FrontKon
WWW minulém díle jste viděli
- Andrej Nemeček - Ako spraviť web dobrým miestom pre všetkých
- Jiří Pudil - Ovládněte čas v JavaScriptu s Temporal API
- Marcel Veselka - AI Agenti pro Testování softwaru v Playwrightu - Testování na autopilota díky AI
note:
- Andrej Nemeček ukázal uživatelské testování s nevidomým uživatelem, Paretův princip při odstraňování chyb v přístupnosti
- Jirka Pudil skvělý úvod do Temporal API
- Marcel Veselka: koncept automatizovaného testování v Playwrightu pomocí uměligence
Letem swwwětem
Prohlížeče
Firefox 138
vydán 29. dubna 2025
Chrome 136
vydán 23. dubna 2025
Safari 18.5
vydáno 12. května 2025
note:
- FF při inspekci fontu ukáže i jeho licenci
- FF139: Temporal (konec května)
- FF140: view transitions
Web platform status
běžně dostupné: 5/2025
- jednotka
ic
水
- animovaný grid (
grid-template-columnsagrid-template-rows)
note:
- běžně dostupné (widely available): 2,5 roku od chvíle kdy fičuru implementoval poslední z trojice CH, FF, SF
- délková jednotka – šířka znaku
水(obdobach, která je daná šířkou0)
nově dostupné: 5/2025
- single stop gradients
.prvok { background-image: linear-gradient(crimson); background-image: conic-gradient(olive); background-image: radial-gradient(aqua); } RegExp.escape()Float16Array
note:
- nově dostupné: aktuální verze CH, FF, SF podporují => běžně dostupné v říjnu 2027
RegExp.escape()vrací řetězec s escapovanými znaky- typované pole s 16bitovými čísly
omezená dostupnost: 5/2025
note:
- dostupné jen v některých prohlížečích
- zas někdy příště
Zachyceno v síti
Konečně nekonečno v CSS
button {
position: absolute;
}
button.a {
z-index: calc(infinity);
background: green;
}
button.b {
z-index: 2147483646;
background: blue;
}
Konečné nekonečno v CSS
button {
position: absolute;
}
button.a {
z-index: calc(infinity);
background: green;
}
button.b {
z-index: 2147483647;
background: blue;
}
Víc než nekonečno v CSS?
button {
position: absolute;
}
button.a {
z-index: calc(infinity + 1);
background: green;
}
button.b {
z-index: 2147483647;
background: blue;
}
Masonry v CSS
- hodnota
masonryprogrid-template-rows display: masonry- doplňková vlatnost
item-flowpro flexbox i grid
note:
- součást gridu (umí už FF)
- samostatně
- item-flow – březnový návrh Applu
- Native CSS Masonry Layout in CSS Grid, Rachel Andrew
- Should Masonry be part of CSS Grid?, Ahmad Shadeed
- CSS Masonry & CSS Grid, Geoff Graham
- Masonry? In CSS?!, Michelle Barker
- Native CSS Masonry Layout in CSS Grids, Chris Coyier
- Item Flow Part 1: A Unified Concept for Layout, WebKit
Jen Simmons: Better typography with text-wrap pretty
note:
- detailní rozbor
text-wrap - rozdíly mezi prohlížeči jsou dané specifikací, která nechává na nich, jakým způsobem vyváží délku řádků
Webshare API

note:
- přehledný návod, jak přidat do stránky sdílecí tlačítka s využitím nativních metod
AI coding assistant refuses to write code, tells user to learn programming instead
Nemohu ti vygenerovat kód, protože bych tím práci dokončila za tebe. Zdá se, že kód řeší efekty mizení smykové stopy v závodní hře, ale logiku bys si měl vyvinout sám. Tím prokážeš, že systému rozumíš a dokážeš ho spravovat.
note:
- v listopadu tady Franta Huber ukazoval možnosti Cursor AI, evidentně má své limity
- jak někdo poznamenal: AI dozrává do kvalit Stack overflow…
- Cursor má za sebou i trapas kdy chatbot poháněný uměligencí přiměl uživatele k rušení předplatného
- chyba na backendu (vyjevilo se později) odhlašovala uživatele, kteří se přihlašovali z vícero zařízení
- když se doptávali na podpoře, jestli se změnily obchodní podmínky chatbot to potvrdil
LLMs can't stop making up software dependencies and sabotaging everything
note:
- pozor, blouznění AI může mít nepříjemné následky
- neexistující balíčky lumpové dotvořili a naplnili malwarem
Figma sites
„Figma div mode"
The problem is that Figma is not a tool for designing websites.
It is a tool for drawing pictures of websites.
note:
- výstup je děs, ale třeba to rychle vyladí
- snesla se kritika, že s takto nehotovým produktem se šlo ven (na úrovni neveřejné alfy)
Fibonaci místo 4px mřížky

note:
- skočit?
- fascinuje mě, že to někomu stojí za tu práci
- na konci článku několik užitečných nástrojů ke generování škál rozměrů
Is Chrome Even a Sellable Asset?
Nástroje a udělátka
Nečtěte podmínky
…AI je přečetla za vás podá vám hlášení
Smallweb.run
note:
- prostý self hosting bez složitého nasazování
KoutPen
note:
- mazané použití gradientů
Rámeček jedním prvkem od Any Tudor
note:
clip-pathkouzlí nejvíc
Duhovka od Ryana Mulligana
note:
- chytře animovaný kónický gradient
Dnes wwwečer
- Lukáš Kratochvíl, Mews
I Know Kung Fu – Jak MCP odemyká skryté síly umělé inteligence - Zuzka Pešková, FaceUp Technology & Irena Zatloukalová & Marek Velas, Edupunk
Jak si říct o peníze a nejen o ně (panelová diskuse)
note:
- přestávka po první přednášce
- odkazy k panelové diskusi:
Díky, prezentace v komentáři na Meetup.com