---
# System prepended metadata

title: 14. května ’25
tags: [frontendisti]

---

---
title: "14. května ’25"
tags: frontendisti
---

{%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %}

<style>
    svg {
        padding: 1em;
        background-color: #000021;        
        color: #00baff;
    }
</style>

<svg xmlns="http://www.w3.org/2000/svg" width="226.634" height="80" viewBox="0 0 59.964 21.167" id="frontendisti-logo">
  <path fill="#fff" d="M17.587 4.913V3.744h-5.499V9.43h1.38V7.277h3.55V6.108h-3.55V4.913Zm2.519 4.517V7.82h2.324l.861 1.609h1.576l-1.032-1.933c.626-.374.942-.958.942-1.755 0-.593-.203-1.08-.6-1.446-.407-.365-.95-.552-1.633-.552h-3.818V9.43zm0-4.509h2.438c.487 0 .78.317.78.837 0 .553-.293.886-.78.886h-2.438Zm9.042-1.323c-2.177 0-3.29 1.014-3.29 2.989 0 1.974 1.113 2.99 3.29 2.99h1.057c2.177 0 3.29-1.016 3.29-2.99 0-1.975-1.113-2.99-3.29-2.99zm.244 4.801c-1.398-.008-2.097-.617-2.097-1.812 0-1.21.7-1.812 2.097-1.812h.569c1.397 0 2.096.601 2.096 1.812 0 1.195-.699 1.804-2.096 1.812zm6.783 1.03V5.597l3.738 3.834h1.38V3.744h-1.38v3.834l-3.738-3.834h-1.38V9.43zm9.668 0V4.922h2.193V3.744H42.27v1.177h2.194V9.43z"/>
  <path fill="currentColor" d="M50.242 10.94h-1.38v5.686h1.38zm-4.521 1.177h2.194V10.94h-5.768v1.177h2.194v4.51h1.38zm-8.937.358c0-.44.236-.56 1.618-.56h.162c1.138 0 1.536.275 1.536.966h1.453c0-1.39-.877-2.087-2.623-2.087h-.813c-1.008 0-1.714.138-2.128.414-.414.284-.617.714-.617 1.307 0 .512.219.91.527 1.162.155.122.35.228.601.317.488.171.959.252 1.617.317h.016c.577.057.951.098 1.317.163.52.105.788.252.788.585 0 .235-.106.398-.309.471-.21.082-.642.122-1.3.122h-.163c-1.527-.032-1.763-.276-1.77-.983h-1.454c.008 1.495.617 2.07 2.859 2.103h.812c1.958 0 2.746-.6 2.746-1.713-.008-.74-.244-1.154-.747-1.414a3.53 3.53 0 0 0-.918-.276c-.422-.065-.715-.09-1.276-.147-1.275-.122-1.934-.292-1.934-.747m-4.101 4.151h1.38V10.94h-1.38zm-1.159-2.843c0-1.893-1.096-2.843-3.281-2.843H24.88v5.686h3.363c2.234 0 3.281-1.047 3.281-2.843m-1.437 0c0 .593-.146 1.016-.447 1.276-.3.268-.853.398-1.641.398H26.26v-3.348h1.739c.788 0 1.34.13 1.641.39.301.268.447.69.447 1.284m-8.277 2.843h1.38V10.94h-1.38v3.834l-3.738-3.834h-1.38v5.686h1.38v-3.834zm-12.088 0h5.5V15.45h-4.12v-1.147h3.477v-1.168h-3.477v-1.017h4.12V10.94h-5.5z"/>
  <path fill="currentColor" d="M6.51 19.184h-.535c-.59 0-1.01-.116-1.26-.348-.25-.232-.374-.679-.374-1.34v-4.555c0-.84-.193-1.428-.577-1.768-.384-.34-.888-.51-1.513-.51v-.16c.625 0 1.13-.17 1.513-.51.384-.338.577-.928.577-1.767V3.67c0-.66.124-1.108.375-1.34.25-.232.67-.348 1.259-.348h.536V0h-.429C4.814 0 3.885.313 3.296.938c-.59.625-.884 1.492-.884 2.599v4.662c0 .518-.103.87-.309 1.058-.205.188-.585.281-1.138.281H0v2.09h.965c.553 0 .933.094 1.138.282.206.187.309.54.309 1.058v4.662c0 1.108.294 1.974.884 2.599.59.625 1.518.938 2.786.938h.429ZM53.453 19.184h.536c.59 0 1.009-.116 1.259-.348.25-.232.375-.679.375-1.34v-4.555c0-.84.192-1.428.576-1.768.384-.34.889-.51 1.514-.51v-.16c-.625 0-1.13-.17-1.514-.51-.384-.338-.576-.928-.576-1.767V3.67c0-.66-.125-1.108-.375-1.34-.25-.232-.67-.348-1.26-.348h-.535V0h.428c1.269 0 2.197.313 2.787.938.59.625.884 1.492.884 2.599v4.662c0 .518.103.87.308 1.058.206.188.586.281 1.139.281h.965v2.09h-.965c-.553 0-.933.094-1.139.282-.205.187-.308.54-.308 1.058v4.662c0 1.108-.295 1.974-.884 2.599-.59.625-1.518.938-2.787.938h-.428Z"/>
</svg>


## Praha, Mews<br> 14. května ’25<!-- .element: class="text-center" -->

<small>Brno dnes: GoodData</small><!-- .element: class="fragment" -->
<small>příště: 11. června, Alma career</small><!-- .element: class="fragment" -->

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](https://docs.google.com/forms/d/e/1FAIpQLSe4mba2CAA8eFSaCJtypDkAQzmVmuhSNAP7VwuOIqLj8xEySA/viewform)

---

## Pozwwwánky

- 15. května, OAK’s Labs – [ReactGirls & OAK'S LAB meetup](https://www.meetup.com/reactgirls/events/306828116/?recId=8defb01d-6eef-4420-9130-cb429abc491f&recSource=event-search&searchId=f11f4f98-fd9d-4f7e-82fa-abaf0d39ee6b&eventOrigin=find_page%24all)
<!-- .element: class="fragment" -->
- 21. května, Make – [Animating React: A Fireside Chat with Matt Perry](https://talkbase.io/event/animating-react-a-fireside-chat-with-matt-perry/make-techtalks)
<!-- .element: class="fragment" -->
- 28.–29. května — [Webexpo](https://webexpo.net/)
<!-- .element: class="fragment" -->
- 1. října — [FrontKon](https://www.frontkon.cz/)
<!-- .element: class="fragment" -->

---

## WWW minulém díle jste viděli
<!-- .element: class="text-center" -->

- [Andrej Nemeček - Ako spraviť web dobrým miestom pre všetkých](https://www.youtube.com/watch?v=J3TGKPKF50Q)
<!-- .element: class="fragment" -->
- [Jiří Pudil - Ovládněte čas v JavaScriptu s Temporal API](https://www.youtube.com/watch?v=0jYYpQ_v4kw)
<!-- .element: class="fragment" -->
- [Marcel Veselka - AI Agenti pro Testování softwaru v Playwrightu - Testování na autopilota díky AI](https://www.youtube.com/watch?v=LI_g9tgg4UY&t)
<!-- .element: class="fragment" -->

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_
<!-- .element: class="fragment" -->
**Chrome 136**
_vydán 23. dubna 2025_
<!-- .element: class="fragment" -->
**Safari 18.5**
_vydáno 12. května 2025_
<!-- .element: class="fragment" -->

note:

- FF při inspekci fontu ukáže i jeho licenci
- FF139: Temporal (konec května)
- FF140: [view transitions](https://www.mozilla.org/en-US/firefox/140.0a1/releasenotes/#note-790833)

---

### [Web platform status](https://webstatus.dev/)

---

#### ![štítek Baseline, běžně dostupné](https://hackmd.io/_uploads/rJEtkiR0C.svg =10%x) běžně dostupné: 5/2025

- jednotka `ic`

水
<!-- .element: class="text-center c-text-lg fragment" -->

- animovaný grid (`grid-template-columns` a `grid-template-rows`)
<!-- .element: class="fragment" -->



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`)

---

#### ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =10%x) nově dostupné: 5/2025

- single stop gradients
    ```css!
    .prvok {
        background-image: linear-gradient(crimson);
        background-image: conic-gradient(olive);
        background-image: radial-gradient(aqua);
    }
    ```
<!-- .element: class="c-text-xs fragment" -->
- `RegExp.escape()` 
<!-- .element: class="c-text-xs fragment" -->
- `Float16Array`
<!-- .element: class="c-text-xs fragment" -->


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

---

#### ![štítek Baseline, omezená dostupnost](https://hackmd.io/_uploads/Byn74jCCA.svg =10%x) 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](https://matuzo.at/blog/2025/never-lose-a-z-index-battle-again)

```css!
button {
  position: absolute;
}

button.a {
  z-index: calc(infinity);
  background: green;
}

button.b {
  z-index: 2147483646;
  background: blue;
}
```
<!-- .element: class="c-text-xs" -->

---

### [Konečné nekonečno v CSS](https://matuzo.at/blog/2025/never-lose-a-z-index-battle-again)

```css!
button {
  position: absolute;
}

button.a {
  z-index: calc(infinity);
  background: green;
}

button.b {
  z-index: 2147483647;
  background: blue;
}
```
<!-- .element: class="c-text-xs" -->

---

#### [Víc než nekonečno v CSS?](https://matuzo.at/blog/2025/never-lose-a-z-index-battle-again)

```css!
button {
  position: absolute;
}

button.a {
  z-index: calc(infinity + 1);
  background: green;
}

button.b {
  z-index: 2147483647;
  background: blue;
}
```
<!-- .element: class="c-text-xs" -->

---

### [Masonry v CSS](https://www.smashingmagazine.com/2025/05/masonry-css-should-grid-evolve-stand-aside-new-module/)

1. hodnota `masonry` pro `grid-template-rows`
<!-- .element: class="fragment" -->
2. `display: masonry`
<!-- .element: class="fragment" -->
3. doplňková vlatnost `item-flow` pro flexbox i grid
<!-- .element: class="fragment" -->

note:

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

- [Native CSS Masonry Layout in CSS Grid, Rachel Andrew](https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/)
- [Should Masonry be part of CSS Grid?, Ahmad Shadeed](https://ishadeed.com/article/css-grid-masonry/)
- [CSS Masonry &amp; CSS Grid, Geoff Graham](https://css-tricks.com/css-masonry-css-grid/)
- [Masonry? In CSS?!, Michelle Barker](https://css-irl.info/masonry-in-css/)
- [Native CSS Masonry Layout in CSS Grids, Chris Coyier](https://css-tricks.com/native-css-masonry-layout-in-css-grid/)
- [Item Flow Part 1: A Unified Concept for Layout, WebKit](https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/)

---

### [Jen Simmons: Better typography with text-wrap pretty](https://webkit.org/blog/16547/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](https://piccalil.li/blog/simplify-sharing-with-built-in-apis-and-progressive-enhancement/)

![image](https://hackmd.io/_uploads/ry1oTa1Zgx.png)


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](https://arstechnica.com/ai/2025/03/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.
<!-- .element: class="fragment" -->

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](https://www.theregister.com/2025/04/12/ai_code_suggestions_sabotage_supply_chain/)

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](https://productpicnic.beehiiv.com/p/figma-dreamweaver)

“Figma `div` mode”
<!-- .element: class="fragment" -->

> The problem is that Figma is not a tool for designing websites.
> It is a tool for drawing pictures of websites. 
<!-- .element: class="text-right fragment" -->

[Andreas Møller](https://bsky.app/profile/andreasmoller.dk/post/3loobukvlz22k)
<!-- .element: class="text-right fragment" -->

note:

- výstup je děs, ale třeba to rychle vyladí
- [snesla se kritika](https://www.youtube.com/watch?v=ZsFIvULxkHI), že s takto nehotovým produktem se šlo ven (na úrovni neveřejné alfy)


---

### [Fibonaci místo 4px mřížky](https://medium.com/@disco_lu/saying-bye-to-4px-spacing-and-hello-to-fibonacci-58477e3ecca3)

![image](https://hackmd.io/_uploads/H1vQdTkbex.png)

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?](https://daringfireball.net/2025/04/is_chrome_even_a_sellable_asset)

note:

---

## Nástroje a udělátka

---

### [Nečtěte podmínky](https://tosdr.org/en/)

…AI je přečetla za vás podá vám hlášení

---

### [Smallweb.run](https://www.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

<iframe height="500" style="width: 100%;" scrolling="no" title="Inner box has bigger rounded corners than outer (1 div, pure CSS, no pseudos)" src="https://codepen.io/thebabydino/embed/rNJbEqM?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/thebabydino/pen/rNJbEqM">
  Inner box has bigger rounded corners than outer (1 div, pure CSS, no pseudos)</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

note:

- `clip-path` kouzlí nejvíc

---

### Duhovka od Ryana Mulligana

<iframe height="500" style="width: 100%;" scrolling="no" title="wavy wobbly lava orb" src="https://codepen.io/hexagoncircle/embed/wBBwmqo?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/hexagoncircle/pen/wBBwmqo">
  wavy wobbly lava orb</a> by Ryan Mulligan (<a href="https://codepen.io/hexagoncircle">@hexagoncircle</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

note:

- chytře animovaný kónický gradient

---

[Dokážete se odhlásit?](https://primazon_cancellation.toddle.site/)

---

## Dnes wwwečer

- **Lukáš Kratochvíl**, [Mews](https://www.mews.com/en)
I Know Kung Fu – Jak MCP odemyká skryté síly umělé inteligence
- **Zuzka Pešková**, [FaceUp Technology](https://www.faceup.com/cs) & **[Irena Zatloukalová](https://www.izatlouk.cz/)** & **Marek Velas**, [Edupunk](https://edupunk.cz/)
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:
    - [Daniel Srb – OSVČ vs. zaměstnanec: spočítej si to správně.](https://www.youtube.com/watch?v=iJGjTFDYw9A)
    - [Nenech se sebou vydrbávat! Kolik doopravdy stojí hodina práce freelancera?](https://www.youtube.com/watch?v=2wmi-9J6em4), Petr Jezevec Pouchlý
    - [Fuck You, Pay Me by Mike Monteiro - at CreativeMornings](https://www.youtube.com/watch?v=FKSvdlFO638)

---

Díky, prezentace v komentáři na [Meetup.com](https://www.meetup.com/frontendisti/)
