---
# System prepended metadata

title: 13. listopadu ’24
tags: [frontendisti]

---

---
title: "13. listopadu ’24"
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, Mews<br> 13. listopadu ’24
<!-- .element: class="c-text-center" -->

<small>Brno dnes: Diskuzní večer o vývoji design systému</small><!-- .element: class="fragment" -->
<small>příště: <strong>11. prosince, Brno</strong></small><!-- .element: class="fragment" -->
<small>[Design Systémy v praxi: SDMK Design](https://friends.figma.com/events/details/figma-czech-republic-presents-design-systemy-v-praxi-sdmk-design/) 20. listopadu 17.30</small><!-- .element: class="fragment" -->
<small>[ReactGirls &amp; Heureka meetup](https://www.meetup.com/reactgirls/events/303523695/) 21. listopadu 18.00</small><!-- .element: class="fragment" -->

note: 

- příště: vánoční dýchánek v Brně, v Praze až v únoru (12/2)
- pozvánka na sraz figmařů
- pozvánka do Heuréky na React Girls

---

# Letem swwwětem

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)


---

## WWW minulém díle jste viděli
<!-- .element: class="text-center" -->

[FrontKon ’24](https://www.youtube.com/@FrontendistiCz/videos)

- [Lukáš Havlíček: Jak jsme se rozloučili s GraphQL](https://www.youtube.com/watch?v=k3zKfpA9CSw) 22 min
<!-- .element: class="c-text-sm fragment" -->
- [Karel Navrátil: 5 právních f ckupů, kterým by se měl vyhnout každý frontenďák](https://www.youtube.com/watch?v=ynxnIsq35Ss) 8 min
<!-- .element: class="c-text-sm fragment" -->
- [Ondřej Žára: 10 mini receptů ze světa CSS](https://www.youtube.com/watch?v=rugYRWQtyTw) 24 min
<!-- .element: class="c-text-sm fragment" -->
- [Lukáš Hosnedl, Ondřej Zmek: Jak jsme zpřístupňovali DrMax](https://www.youtube.com/watch?v=NG3-BQ9gmfc) 27 min
<!-- .element: class="c-text-sm fragment" -->

note:

- záznamy (41 ks) jsou venku!
- skokanem roku je Lukáš Havlíček, který za týden nasbíral 3,3T shlédnutí
- na místě jsem mnoho nestihl
- AI, přístupnost, JS frameworky => vybere si každý 
- Lukáš Hosnedl: zkušenost od narození nevidomého
    - příští sobotu, [Konference INSPO 2024](https://goout.net/cs/konference-inspo-2024/szkoklx/):
        - Čtyřiadvacátý ročník konference INSPO o technologiích pro osoby se specifickými potřebami představí nejnovější technologie a projekty usnadňující život lidem s různým zdravotním postižením.

---


### Prohlížeče

**Firefox 132**
_vydán 29. října 2024_
<!-- .element: class="fragment" -->
**Chrome 131**
_vydán 6. listopadu 2024_
<!-- .element: class="fragment" -->
**Safari 18.0**
_vydáno 21. září 2024_
<!-- .element: class="fragment" -->

note:

- [o Baseline na FrontKonu promluvil Tomáš Kout (já)](https://www.youtube.com/watch?v=svUKwf6Bsho)
    - 97 shlédnutí…
    - běžně dostupné (widely available): 2,5 roku od chvíle kdy fičuru implementoval poslední z trojice CH, FF, SF

---

### Web platform status

![štítek Baseline, široce dostupné](https://hackmd.io/_uploads/rJEtkiR0C.svg =20%x) 11/2024 (běžně dostupné)

- [cascade layers (`@layer`)](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers)
<!-- .element: class="fragment" -->
- [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
<!-- .element: class="fragment" -->
- [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)
<!-- .element: class="fragment" -->
- [`appearance`](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance)
<!-- .element: class="fragment" -->
- [`contain`](https://developer.mozilla.org/en-US/docs/Web/CSS/contain)
<!-- .element: class="fragment" -->

note:

- výběr od září

---

### Web platform status

![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =20%x) 11/2024 (nově dostupné)

- [`requestVideoFrameCallback()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/requestVideoFrameCallback)
<!-- .element: class="fragment" -->
- [Color management for WebGL & WebGL2](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawingBufferColorSpace)
<!-- .element: class="fragment" -->

note:

- nově dostupné: aktuální verze CH, FF, SF podporují

---

### [Návrh verzování CSS (RFC)](https://github.com/CSS-Next/css-next/discussions/92)

![image](https://hackmd.io/_uploads/r1zK24GMyl.png =40%x)

CSS4
: vlastnosti a funkce představené cca 2013–2018.
<!-- .element: class="fragment" -->

CSS5
: vlastnosti a funkce představené cca 2019–2024.
<!-- .element: class="fragment" -->

Future/Next
: vlastnosti a funkce momentálně ve vývoji nebo navržené pro budoucí verze CSS mimo CSS5.
<!-- .element: class="fragment" -->

- [It’s Time To Talk About “CSS5”](https://www.smashingmagazine.com/2024/08/time-to-talk-about-css5/)
<!-- .element: class="fragment" -->

note:

- RFC (připomínkové řízení) – máte-li připomínky, [ozvěte se!](https://github.com/CSS-Next/css-next/discussions/92)
- autoři si od roztřídění slibují jasnější rozlišení toho, co by měli vývojáři ovládat a znát
    - zpřehlední se tak vzdělávání i požadavky na trhu práce
    - přijetí nowwwinek bude snazší, bude patrné, které jsou hudbou budoucnosti a které jsou nezbytné
    - marketing, vzbudit rozruch kolem CSS, které má obecně špatnou pověst

---

## Zachyceno v síti

---

### Cascade layers v praxi

[Egor Kloos](https://mastodon.social/@dutchcelt/113434759386473853)

- tokens
- base
- design 
- theme
- interface (mapping to other CSS libraries)
- component.props 
- component.styles
- component.modifiers
<!-- .element: class="c-text-sm" -->


[dutchcelt.nl](https://dutchcelt.nl/)

note:

- s běžnou dostupností se objevují případovky
- neexistuje fallback, Egor poskytne pouze základní stylování (barvy, fonty) v 1 sloupci

---

### Matematické fce v CSS a praxi

- [`pow()`](https://danielcwilson.com/posts/mathematicss-powers/#using-these-new-math-functions-in-practice) na škálu velikosti písem 
<!-- .element: class="fragment" -->
- [`tan(atan2())`](https://css-tip.com/screen-dimension/) který vrací velikost okna
<!-- .element: class="fragment" -->

note:

- na škálu velkostí fontů by mělo jít použít i `log()`
- použití `tan(atan2())` [hezky vysvětluje Jane Ori ve starším článku](https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j)
    - [KoutPen](https://codepen.io/t_afif/pen/ExBVLBW)

---

[.io asi skončí](https://every.to/p/the-disappearance-of-an-internet-domain)

note:

- Británie vrací suverenitu Čagoským ostrovům, což má nejen geopolitické následky ve světě, ale i ovlivní to i svět virtuální

---

![Telling web designers they don't need to worry about code is like telling architects they don't need to worry about steel, wood or physics.](https://hackmd.io/_uploads/HkvazSbC0.png)

note:

Říkat, že designéři se nepotřebují zaobírat kódem je podobné, jako tvrdit, že architekti nemusejí řešit vlastnosti oceli, dřeva a fyzikální zákony vůbec.

---

## KoutPen

[Ana Tudor: realistická tlačítka](https://codepen.io/thebabydino/pen/QWLJpOb)

note:

- možná jsem ukazoval, ale ono se to neokouká

---

Adam Argyle: jedno~~hubka~~řádkový efekt

```css
border-image: linear-gradient(#0ff0, #0ff, #0ff0) 1 / 2px;
```
<!-- .element: class="c-text-xs" -->

![přechodové postranice kolem textu](https://hackmd.io/_uploads/BkakQ5gMye.png)<!-- .element: class="fragment" -->

---

## Dnes

- **[Karel Navrátil](https://www.linkedin.com/in/navratilkarel-com/)**, [Advokát](https://svoko.cz/) | Frontend designer
Dark patterny. Kde leží hranice mezi motivací a manipulací uživatelů?
- **[Julian Xu](https://julianxu.netlify.app/)**, [GEN](https://www.gendigital.com/us/en/), IT Manager & Cholify, CEO
Jak psát strukturovaný HTML a CSS
- **[František Huber](https://www.linkedin.com/in/frantisekhuber/)**, kodér
Cursor.com: "nejlepší" způsob, jak kódovat s využitím AI

---

Díky, prezentace v komentáři na [Meetup.com](https://www.meetup.com/frontendisti/)
