---
# System prepended metadata

title: 12. března ’25
tags: [frontendisti]

---

---
title: "12. března ’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, <br> 12. března ’25<!-- .element: class="text-center" -->

<small>Brno dnes: Clubco</small><!-- .element: class="fragment" -->
<small>příště: 9. dubna, <a href="https://www.meetup.com/frontendisti/">Meetup.com</a></small><!-- .element: class="fragment" -->

note: 

- před 5 lety poprvé v Lajce, akorát že vůbec
- z Brna záznamy (pokročilý TypeScript, JS Temporal API)
- představit spolek 
  > Budujeme a vzděláváme komunitu frontendových vývojářů a designérů
- 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)

---

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

- [Tomáš Litera - Jak předcházet chaotické organizaci npm skriptů](https://www.youtube.com/watch?v=RzjNt8vI7m0)
<!-- .element: class="c-text-sm fragment" -->

note:

---

## Pozwwwwánky

---

### Discord: CSS CzechoSlovakia

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

note:

- Lukáš Chylík z Brna

---

### ~~WW~~Webexpo 
28.-29. května

`FRONTENDISTI25`
<!-- .element: class="fragment" -->

note:

- slevový kód: 20% slevu z konferenční vstupenky 

---

### [FronKon ’25](https://form.simpleshop.cz/V5lPb/buy/)

1. října, Hotel Passage Brno 
<!-- .element: class="fragment" -->

note:

- střídáme, tedy Brno
- early birds vyprodáno…
- 2990 Kč

---

## Letem swwwětem

---

### Prohlížeče

**Firefox 136**
_vydán 4. března 2025_
<!-- .element: class="fragment" -->
**Chrome 134**
_vydán 26. února 2025_
<!-- .element: class="fragment" -->
**Safari 18.3**
_vydáno 27. ledna 2025_
<!-- .element: class="fragment" -->

note:

---

### Web platform status

---

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

- `:modal`
- `Array findLast()`, `findLastIndex()`

note:

- běžně dostupné (widely available): 2,5 roku od chvíle kdy fičuru implementoval poslední z trojice CH, FF, SF

---

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

- `contenteditable="plaintext-only"`
- `Intl.DurationFormat`

note:

- nově dostupné: aktuální verze CH, FF, SF podporují
- `Intl.DurationFormat`: převede objekt trvání (duration) do lokalizovaného řetězce

---

#### ![štítek Baseline, omezená dostupnost](https://hackmd.io/_uploads/Byn74jCCA.svg =10%x) omezená dostupnost: 3/2025

- [atribut `closedby` pro dialog](https://matuzo.at/blog/2025/close-requests-dialog)

note:

- jen CH134
- hodnota `any` umožní zavřít dialog kliknutím na backdrop
- [KoutPen](https://codepen.io/matuzo/pen/ByaZdrb)
- související: [Co dostane :focus po otevření dialogu](https://matuzo.at/blog/2023/focus-dialog)

---

### [Interop 2025](https://github.com/web-platform-tests/interop/blob/main/2025/README.md#interop-2025)

---

#### Interop 2025

- anchor positioning
<!-- .element: class="fragment" -->
- view transitions
<!-- .element: class="fragment" -->
- `backdrop-filter`
<!-- .element: class="fragment" -->
- `details`
<!-- .element: class="fragment" -->
- `@scope`
<!-- .element: class="fragment" -->
- událost `scrollend`
<!-- .element: class="fragment" -->
- core web vitals: LCP, INP
<!-- .element: class="fragment" -->
- zastaralou událost `mutation` nahradí Mutation observer API
<!-- .element: class="fragment" -->

note:

- [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) – stále často selhává, opravy
- [`details`](http://developer.chrome.com/blog/styling-details): pseudoelementy k pohodlnějšímu stylování (`::marker`, `::details-content`); skrývání pomocí `content-visibility` místo `display` (umožní animovat); rozbalí se při vyhledávání na stránce
- [view transitions](https://developer.chrome.com/docs/web-platform/view-transitions/same-document) – ve stejném dokumentu, tedy SPA
- `@scope` čeká na FF
- `scrollend` nyní lze jen odhadnout konec scrollování (pomocí `setTimeOut`
- core web vitals: API jednotlivých metrik se dostanou do prohlížečů => ladění; [LCP](https://developer.mozilla.org/en-US/docs/Web/API/LargestContentfulPaint), [INP](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEventTiming)

---

## Zachyceno v síti

---

### [Hexcodle](https://hexcodle.com/)

---

### [Ahmad Shadeed – Relative colours](https://ishadeed.com/article/css-relative-colors/)

```
barevná fce (from původní složka1 složka2 složka3 / průsvitnost)

hsl(from #000 h s l / 0.1)
```
<!-- .element: class="c-text-xs fragment" -->

note:

- původní barva v libovolném formátu (včetně `currentColor`)

---

#### Relative colours

```css!
button {
     background-color: hsl(from #9333ea h s calc(l + 10))
}
```
<!-- .element: class="c-text-xs" -->


note:

- [ukázka](https://ishadeed.com/article/css-relative-colors/#darker-color)
- problém: [při změně odstínu se může výrazně změnit kontrast](https://ishadeed.com/article/css-relative-colors/#lch-colors) (=> a11y)
    - [rozdíl mezi `hsl` a `oklch`](https://ishadeed.com/article/css-relative-colors/#consistent-contrast-ratio)
    - používejme `lch()` či `lab()`, případně ještě lépe `oklch()` či `oklab()`
    - rozdíl je v `l` (`hsl` řeší zobrazení × `lch/lab` naopak vnímání)
    - navíc nové barevné prostory zahrnují širší škálu barev (p3 vs sRGB)
- [Evil Martians – OKLCH in CSS: why we moved from RGB and HSL](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl)
- [OKLCH kapátko](https://oklch.com/)

---

#### Relative colours

```css!
.section {
  --sep-primary-color: oklch(from #5631ea l c calc(var(--h-value)));
  --secondary-color: oklch(
    from var(--sep-primary-color) calc(l + 0.8) calc(c - 0.03) calc(h + 210)
  );

  &:after {
    /* Bottom separator */
    background-color: var(--secondary-color);
  }
}
```
<!-- .element: class="c-text-xs" -->

note:

- [doplňkové barvy](https://ishadeed.com/article/css-relative-colors/#complementary-color)

---

### [ČíJSla](https://www.stefanjudis.com/today-i-learned/parseint-parses-anything-starting-with-a-number/)

```js
parseInt("   123 "); // 123
```
<!-- .element: class="c-text-sm fragment" -->
```js
parseInt("077"); // 77
```
<!-- .element: class="c-text-sm fragment" -->
```js
parseInt("1.9"); // 1
```
<!-- .element: class="c-text-sm fragment" -->
```js
parseInt(015); // 13
parseInt('0x14'); // 20
```
<!-- .element: class="c-text-sm fragment" -->
```js
parseInt('7️⃣'); // 7
parseInt('9️⃣'); // 9
parseInt('6️⃣'); // 6
```
<!-- .element: class="c-text-sm fragment" -->

note:

- Stefan Judis
- JS je předchůce Reactu
- `parseInt()` vypíše číslo až do znaku, na kterém se vybourá
- ignoruje bílé místo, uvozovací nuly
- někdy vypíše číslo v jné soustavě
- [proč rozumí emoji](https://www.aleksandrhovhannisyan.com/blog/parseint-keycap-emoji/)
- [KoutPen](https://codepen.io/Kout/pen/LEYzdGM/a1fa9fde31e0649b92c20005110c38ee)

---

#### ČíJSla

```js
Number('1️⃣');   // NaN
Number('1w');   // NaN
Number('1.5w'); // NaN
Number('a1w');  // NaN
Number('12€')   // NaN
Number('1.2'); // 1.2
```
<!-- .element: class="c-text-sm" -->
```js
new Intl.NumberFormat("ru").format("x") 
// "не число"
```
<!-- .element: class="c-text-sm fragment" -->

note:

- [KoutPen](https://codepen.io/Kout/pen/LEYzdGM)

---

## [Ondřej Žára – JavaScript: řešené úlohy](https://eshop.cvut.cz/simplifyworks/cs/eoc/public/product/392705452-zara-ondrej-javascript-resene-ulohy)

![Zara_JavaScript_obalka](https://hackmd.io/_uploads/rJtoBY6i1x.jpg)

---

### [Floor 796](https://floor796.com/)

note:

- námořníci v.v. stavějí lodě v láhvi, webaři v.v. mohou třeba toto
- vzniká od roku 2018, hotovo 50 %
- megaGIF, proto 769 (pořadí písmen G, I, F v abecedě)

---

## KoutPen

<iframe height="500" style="width: 100%;" scrolling="no" title="CSS Day 2025 Speakers! (hover their name)" src="https://codepen.io/t_afif/embed/raNNbyG?default-tab=result&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/t_afif/pen/raNNbyG">
  CSS Day 2025 Speakers! (hover their name)</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

note:

- [CSS day 2025 (Amsterdam)](https://cssday.nl/)

---

<iframe height="600" style="width: 100%;" scrolling="no" title="Stagger transition with sibling-index()" src="https://codepen.io/Kout/embed/gbOGNJL?default-tab=result&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/Kout/pen/gbOGNJL">
  Stagger transition with sibling-index()</a> by Tomáš Kout (<a href="https://codepen.io/Kout">@Kout</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

note:

- [Adam Argyle](https://nerdy.dev/sibling-index)
    - má to fungovat v CH136+, ale mě to běží ve 134?
- `sibling-index()` pořadí potomka (počítá se od 1)
- `sibling-count()` počet potomků

---

## Dnes wwwečer

- Riskuj

---

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

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