---
# System prepended metadata

title: 10. prosince ’25
tags: [frontendisti]

---

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