---
title: 8. března ’23 | {𝐅}rontendisti
tags: frontendisti
---

{%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %}

# { 𝐅 } <br> Hospodský sraz Praha<br> 8. března ’23

<small>příště: 12. dubna, minikonference (místo upřesníme)</small>

note:

- omlouváme se za zmatky, přechytralý Meetup.com
- letošní formát: hospoda střídá minikonferenci
- Brno/Praha
- Plzeň, poslední týden v březnu
- hospoda se nenahrává
- kuřárna
- hotovost (Dan Srb založí)

---

## Přednášky

- Petr Koláček, Etnetera Core a.s.
Open Props
- Adam Kudrna
TwigX: pište PHP šablony jako v Reactu

---

## Letem swwwětem

note:

---

### Prohlížeče

note:

---

#### Microsoft Edge 110
_vydán 9. února 2023_

note:

- 111 tento týden

---

#### Firefox 110
_vydán 14. února 2023_

note:

- container queries a související vlastnosti a jednotky podporovány výchoze
- 111 14. března, nic zásadního

---

#### Chrome 111
_vydán 1. března 2023_

- CSS Root Font Units: `rex`, `rch`, `ric`, `rlh`
- plná podpora CSS Color Module 4 a jedna funkce z modulu 5
- [funkce `color()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color)
- [funkce `color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix)

note:

- všemožné i nemožné zápisy barev, viz [demo od Adama Argyla](https://codepen.io/argyleink/pen/RwyOyeq)
- [proč to chceme](https://2021-hd-color-at-css-camp.netlify.app/)
- obrazovky se zlepšovaly a vyvíjely, zatímco CSS zůstalo v 90.
- lepší pro výkon
- [sjednocují vnímání barev](https://programmingdesignsystems.com/color/perceptually-uniform-color-spaces/)
- zápisy barev založené na míchání RGB jsou nepravidelné
- 
- 

---

- [style queries](https://www.bram.us/2022/10/14/container-queries-style-queries/) `style()`

@container style(--theme: light) {
  
  a {
    background-color: lavender;
  }
}

- `:nth-child(an + b of S)`, kde `S` je selektor

.intro:nth-child(2n + 3) {…} 
:nth-child(2n + 3 of .intro) {…} 

note:

- třída `.intro`, která je 3., 5., 7… potomkem
- 3., 5., 7… potomek pokud má třídu `.intro`
- style queries zatím
- pouze proměnné vlastnosti
- jediný prohlížeč
- a aby toho nebylo málo, 112 přinese zanořování (CSS nesting), byt konsorcium na specifikaci stále pracuje
- obdoba toho, co známe z preprocesorů, ale nepůjde spojovat názvy tříd, jako se někdy zapisuje BEM
- [pískoviště](https://codepen.io/Kout/pen/JjayMzW/164e50fd533dd695f46091a7bf12a178?editors=1100)

---

#### Safari 16.3
_vydáno 28. ledna 2023_

- od 16.4
`@media (100px <= width <= 1900px)`

note:

- 16.3 opravy
- 16.4 někdy(?)
- zjednodušený zápis media queries pomocí rozsahů jako poslední důležitý prohlížeč, i když s křížkem po funuse, media queries už nejsou tak důležitá (tekutý gid, `min()`, `max()` funkce, container queries)

---

## Zachyceno v síti

---

#### [Vše o nahrazování fontů](https://developer.chrome.com/blog/font-fallbacks/)

note:

- věci, co jste snad ani nechtěli vědět (např. výpočty pro vyrovnání rozdílů mezi písmy)
- spousty nástrojů, které to spočítají za vás (NPM balíčky, NextJS, online)
- nástroje, které vysosají metadata z fontů, kdybyste si to přeci jen chtěli počítat sami

---

#### [OpenProps](https://open-props.style/s)

note:

- na minulém srazu představil Petr Koláček z Etnetery
- [demo základ](https://codepen.io/argyleink/pen/KKvRORE?editors=1100)
- [demo komponenta](https://codepen.io/argyleink/pen/KKvRORE?editors=1100)

---

#### 4× Adam Argyle

[Circular gradient stroke chart](https://nerdy.dev/gradient-outline-circular-chart)
[Conic gradient Android spinner](https://nerdy.dev/android-spinner-conic-gradient-animation)
[budoucnost CSS](https://nerdy.dev/i-cant-keep-up-right-now-with-2023-css)

note:

- čtvrtý odkaz na CodePen později

---

#### NodeJS v prohlížeči

- [WebContainers](https://webcontainers.io/)
- [NodeBox](https://www.nodebox.net/)

note:

- zatím(!) dva nástroje
- dovedně pospojovaná API (aneb zatím to nespouští linux v prohlížeči)
- využití pro ukázky nebo výuku… anebo, co vás napadne (mě nic)
- není open source, část se zpracovává na serverech služby, kam není vidět

---

#### [Penpot](https://penpot.app/)

note:

- klon Figmy vzniklý v reakci na akvizici Adobe
- funguje i offline, buď v Dockeru nebo Elestio

---

### CodePen

---

[View Transitions - Text Replace Custom Animation](l)

---

[Container queries](https://codepen.io/web-dot-dev/pen/rNrbPQw)

note:

- změna velikosti okna nemá vliv
- pouze změna velikosti elementu
- nastavit `max-width: 100%`

---

### [Dnes naposled](https://www.zemancuntdown.cz/)

note:

- před časem Máchal vzpomínal, jak před dávnými časy kupoval doménu frontendisti.cz
- tahle je sice o rok mladší, ale odpočítává něco, co trvá už 10 let
- a dnes je konec, na zdraví!

---

Díky, prezentace za chvíli na [@frontendisti](https://twitter.com/frontendisti)