<!-- {% základ %} -->
{%hackmd fxj9ARKoRU6IIXk-sKc75A %}
<!-- {% žlutá %} -->
{%hackmd XN8aYtFESBm-HwgJqXJgXQ %}
## Praha, Pivovar Lajka<br> 12. listopadu ’25<!-- .element: class="text-center" -->
<small>Brno dnes: Přístupný diskuzní večer</small><!-- .element: class="fragment" -->
note:
- 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)
---
## Někdy příštěěě
- [19. listopadu, Bratislava](https://www.meetup.com/frontendisti/events/311852855/)
<!-- .element: class="fragment" -->
- 10. prosince, Brno
<!-- .element: class="fragment" -->
- 11. února, Praha
<!-- .element: class="fragment" -->
---
## WWW minulém díle jste viděli
<!-- .element: class="text-center" -->
- [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" -->
- [Honza Svěrák: JavaScript is dead: 7 příkladů, kde už si vystačíš jen s moderním CSS](https://www.youtube.com/watch?v=vDcmvrWmNsM&list=PLnXfazh66kVcLsOPWazgbnu6irZEomMlS)
<!-- .element: class="c-text-sm fragment" -->
- [Adam Kulhánek: Smart & Kind: psychologie IT mozku](https://www.youtube.com/watch?v=IG1sn25bHvA&list=PLnXfazh66kVcLsOPWazgbnu6irZEomMlS)
<!-- .element: class="c-text-sm fragment" -->
- [Michal Špaček: Pomoz password managerům pomáhat lidem](https://www.youtube.com/watch?v=iG3f8DU05QE&list=PLnXfazh66kVdNTQ4Ivy5NAC2StiHxVtrK)
<!-- .element: class="c-text-sm fragment" -->
note:
- koutpeny od [Honzy Svěráka](https://codepen.io/collection/myZNmP)
---
## Letem swwwětem
---
### Prohlížeče
**Firefox 145**
_vydán 11. listopadu 2025_
<!-- .element: class="fragment" -->
**Chrome 142**
_vydán 22. října 2025_
<!-- .element: class="fragment" -->
**Safari 26.1**
_vydáno 4. listopadu 2025_
<!-- .element: class="fragment" -->
note:
---
### Web platform status
---
####  běžně dostupné: 11/2025
- matematické funkce
<!-- .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" -->
- `inert`
<!-- .element: class="fragment c-text-xs" -->
- konstanty pro `calc()`: `e`, `pi`, `infinity`, `-infinity`, `NaN`
<!-- .element: class="fragment c-text-xs" -->
- JS moduly (ESM) ve workerech
<!-- .element: class="fragment c-text-xs" -->
- `:autofill`
<!-- .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)
<!-- .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čí NEintaraktivní prvky
- matematické fce s výjimkou `abs()` a `sign()`
- `:autofill` – formulářová pole vyplněná prohlížečem
---
####  nově dostupné: 11/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
- `content-visibility` SF od verze 26
---
####  omezená dostupnost: 11/2025
~~stačilo~~ dost!
note:
- dostupné jen v některých prohlížečích
---
## Zachyceno v síti
---
### [Ana Tudor: Super Simple Full-Bleed & Breakout Styles](https://frontendmasters.com/blog/super-simple-full-bleed-breakout-styles/)
note:
- bohatě okomentovaná případovka
- už po několikáté jsem narazil na zmínku o `box-sizing: border-box`
---
### 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/)
---
### Programátorské bludy
- [Falsehoods Programmers Believe About Names](https://www.kalzumeus.com/2010/06/17/falsehoods-programmers-believe-about-names/)
<!-- .element: class="fragment" -->
- [Falsehoods programmers believe about languages
](https://www.lexiconista.com/falsehoods-about-languages/)
<!-- .element: class="fragment" -->
- [Falsehoods programmers believe about time
](https://gist.github.com/timvisee/fcda9bbdff88d45cc9061606b4b923ca)
<!-- .element: class="fragment" -->
---
### [Roma Komarov: Fixing baselines](https://blog.kizu.dev/fixing-baselines/)
<!-- .element: class="fragment" -->
`baseline-source`<!-- .element: class="fragment" -->`: auto|first|last`<!-- .element: class="fragment" -->
<!-- .element: class="fragment" -->
note:
- [`baseline-source`](https://drafts.csswg.org/css-inline/#propdef-baseline-source)
- podpora jedn CH a FF
---
#### [Roma Komarov: Fixing baselines](https://blog.kizu.dev/fixing-baselines/)
```css=
.with-extra-element {
--gap: 0.5em;
gap: var(--gap);
}
.with-extra-element::before {
content: '\a0'; /* */
width: 0;
display: inline-block;
visibility: hidden;
margin-left: calc(-1 * var(--gap, 0));
}
```
<!-- .element: class="c-text-sm" -->
note:
- protože používá `inline-flex` příp. `inline-grid`, pracuje s `gap` a je potřeba ho vyrovnat záporným marginem
- hezký tip: když použijete escapovaný zápis, zapište do komentáře, o jaký znak se jedná
---
## Nástroje a udělátka
---
### DevTools: rozdělit svisle
`chrome://flags#side-by-side`
note:
- Elements a Network současně (_move to drawer_)
---
## KoutPen
---
### [Instant snapport](https://cssence.com/2025/scroll-margin-scroll-padding/)
<iframe height="500" style="width: 100%;" scrolling="no" title="Scroll margin & scroll padding" src="https://codepen.io/cssence/embed/MYKObbV?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true">
See the Pen <a href="https://codepen.io/cssence/pen/MYKObbV">
Scroll margin & scroll padding</a> by Matthias Zöchling (<a href="https://codepen.io/cssence">@cssence</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
note:
- CSSence: Matthias Zöchling
- selektor `[id]` => prvky s id, tj. lze předpokládat kotvu
- vypnout nastavení: odvine se pod záhlaví
- `scroll-margin`: přidává se prvku, na který scrolluji
- `scroll-padding`: přidává se stránce (případně prvku, v němž scrolluji)
---
### Roma Komarov: předávání id
<iframe height="500" style="width: 100%;" scrolling="no" title="inline variables for idreffing" src="https://codepen.io/kizu/embed/QwyZMjj?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true">
See the Pen <a href="https://codepen.io/kizu/pen/QwyZMjj">
inline variables for idreffing</a> by Roman Komarov (<a href="https://codepen.io/kizu">@kizu</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
note:
- atribut `anchor` je zatím experimentální (jen CH Canary)
---
## Dnes wwwečer
- **[Tomáš Litera](https://literat.dev/)**, [Alma career](https://www.almacareer.com/cz)
Kdo ovládá npm závislosti, ovládá JavaScript vesmír
<!-- .element: class="fragment" -->
- **Jiří Cerhan**, SiteOne & Frontendisti
(Ne)tvoříme neexistující aplikace s AI
<!-- .element: class="fragment" -->
- Riskuj
<!-- .element: class="fragment" -->
- Bleskovky akože lightning talks
<!-- .element: class="fragment" -->
note:
---
Díky, prezentace v komentáři na [Meetup.com](https://www.meetup.com/frontendisti/)
{"title":"12. listopadu ’25","breaks":true,"description":"<small>Brno dnes: </small><!-- .element: class=\"fragment\" --><small>příště: kdy, kde</small><!-- .element: class=\"fragment\" -->","contributors":"[{\"id\":\"772328be-33fa-4edc-bac0-7a7903521fb4\",\"add\":9824,\"del\":5301,\"latestUpdatedAt\":1765228692892}]"}