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