Mews 14. 05. 2025

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

1. května, OAK's Labs – ReactGirls & OAK'S LAB meetup
1. května, Make – Animating React: A Fireside Chat with Matt Perry
28.–29. května — Webexpo
1. října — FrontKon

WWW minulém díle jste viděli

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-columns a grid-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 水 (obdoba ch, která je daná šířkou 0)

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 masonry pro grid-template-rows
display: masonry
doplňková vlatnost item-flow pro flexbox i grid

note:

součást gridu (umí už FF)
samostatně
item-flow – březnový návrh Applu

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.

Andreas Møller

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-path kouzlí nejvíc

Duhovka od Ryana Mulligana

note:

chytře animovaný kónický gradient

Dokážete se odhlásit?

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