--- title: "10. prosince ’25" tags: frontendisti --- <!-- {% základ %} --> {%hackmd fxj9ARKoRU6IIXk-sKc75A %} <!-- {% modrá %} --> {%hackmd EK-p3-PwShGuDYlmmpvPGQ %} ## Brno, Impact hub<br> 10. prosince ’25<!-- .element: class="text-center" --> <small>Praha dnes: </small><!-- .element: class="fragment" --> <small> v Brně</small><!-- .element: class="fragment" --> <small>příště: 11. února</small><!-- .element: class="fragment" --><small>…</small><!-- .element: class="fragment" --> note: - na úvod [vánoční hra](https://avark.agency/designers-eye-christmas/), rozcvičíme se --- ## WWWánoce! [![image](https://hackmd.io/_uploads/H1xENFHG-g.png =50%x)](https://form.simpleshop.cz/jDEEV/buy/)<!-- .element: class="fragment" --> note: - lístky ranním ptáčatům za 3490 Kč (včera 99 ks – dnes?) --- #### WWWánoce <iframe height="450" style="width: 100%;" scrolling="no" title="Dárek zdarma" src="https://codepen.io/Kout/embed/LENqENg?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true"> See the Pen <a href="https://codepen.io/Kout/pen/LENqENg"> Dárek zdarma</a> by Tomáš Kout (<a href="https://codepen.io/Kout">@Kout</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> --- #### WWWánoce <iframe height="450" style="width: 100%;" scrolling="no" title="Bezplatný dárek zdarma" src="https://codepen.io/Kout/embed/EaKrVNg?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true"> See the Pen <a href="https://codepen.io/Kout/pen/EaKrVNg"> Bezplatný dárek zdarma</a> by Tomáš Kout (<a href="https://codepen.io/Kout">@Kout</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> --- # A to se vyplatí!!! <!-- .element: class="c-text-xl" --> note: - nadílka - tip na vánoční dárek --- ## WWW minulém díle jste viděli <!-- .element: class="text-center" --> - [Milan Herda - Dependency Injection v JavaScript-e](https://www.youtube.com/watch?v=q_bQs5lS6H4) <!-- .element: class="c-text-sm fragment" --> - [Tomáš Litera – Safe navigation through upgrades in npm package minefield](https://literat.dev/blog/2025-12-01/safe-navigation-through-upgrades-in-npm-package-minefield/) <!-- .element: class="c-text-sm fragment" --> - [Stage F](https://www.youtube.com/watch?v=WyLeGYgrVw4&list=PLnXfazh66kVdNTQ4Ivy5NAC2StiHxVtrK) <!-- .element: class="c-text-sm fragment" --> - [Stage E](https://www.youtube.com/watch?v=6gR6Yqd2PSQ&list=PLnXfazh66kVcLsOPWazgbnu6irZEomMlS) <!-- .element: class="c-text-sm fragment" --> - [Partnerská stage](https://www.youtube.com/watch?v=6gR6Yqd2PSQ&list=PLnXfazh66kVcLsOPWazgbnu6irZEomMlS) <!-- .element: class="c-text-sm fragment" --> note: - konečně jsem zjistil, že depenency injection správná věc na rozdíl od třeba SQL injection - Tomáš připomenul nedávné bezpečnostní potíže NPM a nabídl řešení - FrontKon: ať si vyplníte čekání na další sraz tím spíš FrontKon ’26 --- ## Letem swwwětem --- ### Prohlížeče **Firefox 146** _vydán 9. prosince 2025_ <!-- .element: class="fragment" --> **Chrome 143** _vydán 19. listopadu 2025_ <!-- .element: class="fragment" --> **Safari 26.1** _vydáno 3. listopadu 2025_ <!-- .element: class="fragment" --> note: - CH144 až v lednu, SF26.2 jen v betě - [Interop 2025](https://wpt.fyi/interop-2025?stable), dlužníci: - SF, FF Navigation API - FF kotvení CSS anchor positioning, `@scope` - SF Core web vitals, scrollend event, Storage access API, `<details>` --- ### Web platform status --- #### ![štítek Baseline, běžně dostupné](https://hackmd.io/_uploads/rJEtkiR0C.svg =10%x) běžně dostupné: 12/2025 - matematické funkce <!-- .element: class="fragment c-text-xs" --> - konstanty pro `calc()`: `e`, `pi`, `infinity`, `-infinity`, `NaN` <!-- .element: class="fragment c-text-xs" --> - container queries <!-- .element: class="fragment c-text-xs" --> - `@media (23ch < width <= 78ch)` <!-- .element: class="fragment c-text-xs" --> - `:nth-child() of <selector>` <!-- .element: class="fragment c-text-xs" --> - lab, lch, oklab a oklch <!-- .element: class="fragment c-text-xs" --> - funkce `color()` a `color-mix()` <!-- .element: class="fragment c-text-xs" --> - `:autofill` <!-- .element: class="fragment c-text-xs" --> - `inert` <!-- .element: class="fragment c-text-xs" --> - JS moduly (ESM) ve workerech <!-- .element: class="fragment c-text-xs" --> - [a další…](https://webstatus.dev/?q=baseline_date%3A2023-01-01..2023-06-30&columns=name%2Cbaseline_status%2Cavailability_chrome%2Cavailability_edge%2Cavailability_firefox%2Cavailability_safari%2Cstable_chrome%2Cstable_edge%2Cstable_firefox%2Cstable_safari%2Cchrome_usage&column_options=baseline_status_high_date&sort=baseline_status_asc&num=100) <!-- .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 - fičury nově dostupné v prvním pololetí 2023 - atribut `inert`: označí NEinteraktivní prvky - matematické fce s výjimkou `abs()` a `sign()` - `:autofill` – formulářová pole vyplněná prohlížečem --- #### ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =10%x) nově dostupné: 12/2025 - View transitions <!-- .element: class="fragment" --> - `::details-content` <!-- .element: class="fragment" --> - `content-visibility` <!-- .element: class="fragment" --> note: - nově dostupné: aktuální verze CH, FF, SF podporují - FF doplnil základní podporu přechodů v 144, ale pouze v rámci jednoho dokumentu - `content-visibility` SF od verze 26 - bohužel tam není kotvení --- ## Zachyceno v síti --- ### Potřebujeme nastavovat `box-sizing`? ```css= *, &::before, &::after { box-sizing: inherit; } html { box-sizing: border-box; } ``` <!-- .element: class="c-text-sm" --> - [Miriam Suzanne: Don’t Inherit the Box Model](https://www.oddbird.net/2025/09/04/box-model/) <!-- .element: class="fragment" --> - [Kevin Powel: It might be time to rethink `box-sizing: border-box`](https://www.youtube.com/watch?v=PtAcpV6TAGM) <!-- .element: class="fragment" --> note: - podle mnohých už ho neopotřebujeme, protože dávno nenastavujeme prvkům pevné rozměry - dědictví Bootstrapu, jehož rozvržení vycházelo z pevně daných rozměrů ([má to tam](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap-reboot.css#L183-L187) ještě [verze 5](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap-reboot.css#L183-L187), ehm) - tzn. nechat výchozí `box-sizing: content-box` a kde je to potřeba nastavit `border-box` - nicméně Kevin nedoporučuje to vykuchávat z existujících projektů - [There’s no such thing as a CSS reset](https://aaadaaam.com/notes/useful-defaults/) --- ### [Benjamin Anderson: Technická deflace](https://benanderson.work/blog/technical-deflation/) note: - deflace zní sympaticky, ale nese v sobě problém – odloženou spotřebu - je stále jednodušší vyvíjet software (co dříve trvalo měsíce, dnes trvá týdny, lze očekávat, že zanedlouho to budou dny) - využít nabytý čas (i ostatní zdroje) na kšeft, promo, distribuci atd. --- ### [HTMHell Advent Calendar 2025](https://htmhell.dev/adventcalendar/) - [Stephanie Eckles – Top layer troubles: popover vs. dialog](https://htmhell.dev/adventcalendar/2025/1) - [Aubrey Sambor – Controlling dialogs and popovers with the Invoker Commands API](https://htmhell.dev/adventcalendar/2025/7) - [Kilian Valkhof – IDREFs: What they are and how to use them](https://htmhell.dev/adventcalendar/2025/5) note: - ponor do vybraných témat - [`command` a `commandfor`](https://developer.chrome.com/blog/command-and-commandfor) - kazí SF…26.2 🙏🏾 - `<plaintext>` k vychytávání much (debugging) - Manuel Matuzović z předměstí Brna --- ### [Adam Argyle – Co všechno vědí prvky na stránce (dokonce o nás)](https://nerdy.dev/components-can-know) note: - napadne vás, co všechno vědí? - aby byl jasný směr uvažování, tak třeba velikost zařízení a jeho orientaci, zda je dotykové či ne - uživatelské preference: světlé/tmavé téma, kontras tní barvy - směr písma - kolik mají prostoru, kolik obsahují prvků a jaké (`:has()`) - co je a není zrovna vidět (scoll animations) - jestli je formulář vyplněný správně - a další => 23 položek zatím --- ## Nástroje a udělátka --- ### [Andreas Møller – CSS has become too POWERFUL](https://blog.nordcraft.com/css-has-become-too-powerful) - [OKLCH](https://colorpalette.pro/?color=rgb%280%25+72.9%25+100%25%29&paletteType=tas&paletteStyle=square&colorFormat=oklch&effects=0%2C0%2C0%2C0) - [gradienty](https://gradient.style/) - časovací funkce (vč. [lineární interpolace](https://blog.nordcraft.com/approximating-reality-with-css-linear)) - `shape()` note: - CSS už se bez vizuálních nástrojů a udělátek zkrátka neobejde - celá sada jich je v článku na blogu [nástroje Nordcraft](https://nordcraft.com/) – snaží se odpovědět na bolesti Figmy, která nestíhá držet krok s rozvojem CSS --- ## KoutPen --- ### [Interpolace barev v CSS](https://css-tricks.com/what-you-need-to-know-about-css-color-interpolation/) ```css= .prvok { color: color-mix(in lch longer hue, red, blue); } ``` <!-- .element: class="c-text-xs" --> <iframe height="500" style="width: 100%;" scrolling="no" title="What you need to know about Color Interpolation - Example" src="https://codepen.io/monknow/embed/VYvbeaG?default-tab=css%2Cresult" frameborder="no" loading="lazy" allowtransparency="true"> See the Pen <a href="https://codepen.io/monknow/pen/VYvbeaG"> What you need to know about Color Interpolation - Example</a> by Juan Diego - Monknow (<a href="https://codepen.io/monknow">@monknow</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> <!-- .element: class="fragment" --> note: - důležité je to _longer_ (vs výchozí _shorter_) --- [Ještě jedna hra‽](https://color.method.ac/) note: --- Díky, prezentace v komentáři na [Meetup.com](https://www.meetup.com/frontendisti/)