---
# System prepended metadata

title: "8. listopadu ’23 | {\U0001D405}rontendisti"
tags: [frontendisti]

---

---
title:  8. listopadu ’23 | {𝐅}rontendisti
tags: frontendisti
---

{%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %}

# {𝐅}rontendisti 
#### Praha, Heureka Group <br> 8. listopadu ’23

<small>příště: <br> 13. prosince, Brno</small><!-- .element: class="fragment" -->
<small>14. února, Praha</small><!-- .element: class="fragment" -->

note:

- děkujeme Heuréce, která podporuje naši komunitu dlouhodobě
- v Praze se potkáme až v únoru!

---

## WWW minulém díle jste viděli

note:

- do té doby se v klidu podívejte na videa z Frontkonu
    - kdo byl?
    - kdo nebyl, ale chtěl? (Kdo by nechtěl!)

---

<li>
    <a href="https://www.youtube.com/playlist?list=PLnXfazh66kVfaJtz0vt9-EwDeOIWe84lT">FrontKon 2023, stage F</a>
</li>
<li>
    <a href="https://www.youtube.com/playlist?list=PLnXfazh66kVeJvmz0FnJywBHuXXGqmS1W">FrontKon 2023, stage E</a>
</li><!-- .element: class="fragment" -->
<li>
    <a href="https://www.youtube.com/@WebConferencesAmsterdam/videos">perf.now()</a>
</li><!-- .element: class="fragment" -->
<li>
    <a href="https://www.youtube.com/@WebConferencesAmsterdam/videos">CSS day</a>
</li><!-- .element: class="fragment" -->

note:

- ukázat nabušený program
    - hned první na E, Michal Matuška začal z ostra 
    - obě diskuze stály za to stejně jako blok věnovaný AI na F
- komu by nestačilo, proběhla perf.now() a navrch videa z červnového CSS day

---

## Dnes WWWečer

- **Daniel Gamrot**, https://danielgamrot.cz
Jak podpořit pozornost
- **Martin Krištof**, Team lead - Road to Product team v Heureka Group
Jak využít sílu společné práce?
- **Ignite Talks**, vy!

note:

- po druhé přednášce přestávka

---

## Letem swwwětem <br> aneb <br> Nowwwinky

note:

---

### Prohlížeče

note:

---

#### Microsoft Edge 119
_vydán 2. listopadu 2023_

note:

- Nic převratného.

---

#### Firefox 119
_vydán 24. října 2023_

```html!
<p data-browser="Firefox">My favorite browser is:</p>
<p>Your favorite browser is:</p>
```
```css!
p::after {
  content: " " attr(data-browser, "Unknown");
  color: tomato;
}

```

note:

- FF prolamuje ustrnulý vývoj [funkce `attr()`](https://developer.mozilla.org/en-US/docs/Web/CSS/attr)
    - [koutPen](https://codepen.io/Kout/pen/BaMpwbB) – pouze ve FF119+
    - specifikace je velmi slibná, bude lze posílat do CSS hodnoty barev, délky atp. => odstraníme ohavný atribut `style`

---

#### Firefox 121

<iframe src="https://front-end.social/@matuzo/111331426445420757/embed" width="400" height="250" allowfullscreen="allowfullscreen" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms"></iframe>

---

#### Chrome 119 
_vydán 25. října 2023_

- relative color syntax (CSS color module 5)

```css!
:root { --color: blue; }
.overlay {
  background: 
    rgb(from var(--color) r g b / 80%);
}

.unterlag {
  --darker-accent: 
    lch(from var(--color) calc(l / 2) c h);
}
```

note:

- `.overlay`: `r`, `g`, `b` beze změny, ale alfa kanál 80%
- `.unterlag`: `l` poloviční, `c` a `h` beze změny
- Safari to snad už umí
- [koutPen](https://codepen.io/Kout/pen/GRzrOKb)

---

#### Safari 17.1
_vydáno 28. října 2023_

<li>
    atribut <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover"><code>popover</code></a>
</li>
<!-- .element: class="fragment" -->
<li>
    prvek <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search"><code>&lt;search&gt;</code></a>
</li>
<!-- .element: class="fragment" -->

```html!
<search role="search">…</search>
```
<!-- .element: class="fragment" -->

```css!
@media (update: < none | slow | fast >) { … }
```
<!-- .element: class="fragment" -->

note:

- soupis změn začíná přístupností (dokonce dříve než Apple Pay)!
- `popover` čeká se na FF, od 114 experimentálně
- prvek `<search>` sémanticky vyznačí oblast na stránce, která je obsahuje formulář pro vyhledávání či filtrování
- `@media (update)`
    - none: papír
    - slow: e-čítanky
    - fast: obrazovky
- podpora JPEG XL – jako první (FF jen experimentálně, Chrome experiment opustil)
    - nástupce JPG, PNG, WEBP, GIF; konkurent AVIF (který toho umí méně)
    - ![image.png](https://hackmd.io/_uploads/HkBAWywXa.png) ([zdroj](https://connect.mozilla.org/t5/ideas/support-jpeg-xl/idi-p/18433))

---

## Zachyceno v síti

---

### [Neseznamy](https://matuzo.at/blog/heres-what-i-didnt-know-about-list-style-type/)

```css!
ul {
    list-style: none;
}
```
```css!
ul {
    list-style-type: '✔️';
}
```
<!-- .element: class="fragment" -->
```css!
ul {
    list-style-type: '';
}
```
<!-- .element: class="fragment" -->


note:

- odstraní sémantiku v Safari, lze vrátit pomocí `role="list"`
- vhodnější je nastavit prázdný řetězec jako hodnotu `list-style-type`

---

### Přístupnost erotických obrázků


<iframe src="https://mastodon.social/@BlindAndSexy/111275097849041784/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" height="300" allowfullscreen="allowfullscreen"></iframe><script src="https://mastodon.social/embed.js" async="async"></script>

[a11y faq](https://hidde.blog/a11y-faq/)
<!-- .element: class="fragment" -->

note:

- vyplňujete `alt`‽

---

### [Kterak se počítají hodnoty proměnných vlastností](https://moderncss.dev/how-custom-property-values-are-computed/)

```css!
html { color: red; }

p { color: blue; }

.card { --farba: #nefarba; }

.card p { color: var(--farba); }
```

note:

- [CSS Café se Stephanie Eckles](https://www.youtube.com/watch?v=z8AuhLf2uxQ)
- Jakou barvu bude mít odstavec v `.card`?
- A proč? (Nejprve se vyhodnotí pravopis a ten je v pořádku, proto se přiřadí `color: var(--farba)`. Neplatnost hodnoty `#nefarba` pro vlastnost `color` se zjistí až později a uplatní se zděděná hodnota z `html`. Chová se obdobně jako hodnota `unset`. Více v článku :wink:)

---

### Kolika obdélníky se tvoří prvek HTML?

0 – `display: none`<!-- .element: class="fragment" --><span>,</span><!-- .element: class="fragment" --> `display: contents`<!-- .element: class="fragment" -->
<!-- .element: class="fragment" -->
1 – <span>většina prvků</span><!-- .element: class="fragment" -->
<!-- .element: class="fragment" -->
2 – `li`<!-- .element: class="fragment" --><span>,</span><!-- .element: class="fragment" -->  `table`<!-- .element: class="fragment" -->
<!-- .element: class="fragment" -->

note:

- počítejme od nuly
- `li` 1 obdélník pro celou položku a 1 zanořený pro `::marker`
- `table` 1 obdélník pro samotnou tabulku a 1 pro tabulku včetně `caption`

---

![](https://hackmd.io/_uploads/ryHHiwCGT.png)

---

### CodePen

---

- [koutPen: Závěrka](https://codepen.io/smashingmag/pen/abPOwRm?editors=0100)

<!-- .element: class="fragment" -->

- [Divtober](https://dev.to/t/divtober)

<!-- .element: class="fragment" -->

note:

- [zdroj: Smashing Magazine](https://www.smashingmagazine.com/2023/08/interesting-ways-use-css-shadows/)
- [12. října](https://codepen.io/alvaromontoro/pen/bGrNLBP)


---

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

---

[product placement](https://webbed-briefs.teemill.com/collection/new)