---
# System prepended metadata

title: "12. září ’23 | {\U0001D405}rontendisti"
tags: [frontendisti]

---

---
title:  13. září ’23 | {𝐅}rontendisti
tags: frontendisti
---

{%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %}

# {𝐅}rontendisti 
#### Praha, Ataccama <br> 13. září ’23

<small>příště: 8. listopadu, ale kde‽‽‽</small><!-- .element: class="fragment" -->

note:

- vřelé díky celoročnímu partnerovi

---

## WWWe výhledu

- 26. září Pipedrive: [Estonian startups hosted by Pipedrive & Revolgy](https://www.meetup.com/de-DE/pipedrive-talks-prague/events/295786633/)
<!-- .element: class="fragment" -->
- 12. října [Frontkon 2023](https://frontendisti.cz/konference), Brno
<!-- .element: class="fragment" -->

note:

- Pipedrive představí estonské startupy ve spolupráci s estonským velvyslanectvím
- kdo byl na prvním FrontKonu 2021 (online)
- kdo byl na druhém FrontKonu 2022 (Webexpo)

---

## Dnes

- **Ahmed Mostafa**, UI Tech Lead at Barclays
Flavours of Machine learning (in English)
- **Marek Velas**, zakladatel EDUpunk
Talent - Můj talent a hacky pro práci s talenty v týmu
- **Pavel Peroutka**, Front-End Developer z Ataccama
`this.talk` satisfies never — Co všechno TypeScript umí?

---

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

- **Vilém Lipold**: [Deep cloning](https://www.youtube.com/watch?v=03NxTc139yU)
- **Roman Schejbal**: [Understanding GPT and other AI news](https://www.youtube.com/watch?v=bQi01gIxL3I)

note:

- Vilda si vzal na pomoc Darth Vadera a rozkryl neotřelým způsobem na kopírování a klonování objektů v JS.
- Roman se před prázdinami v Pipedrive rozpovídal od ChatGPT a dalších aktuálně velmi žhavých nástrojích.
- 326 dalších videí

---

# { 𝐅 } <br> Letem swwwětem<br> 

note:

---

### Prohlížeče

note:

---

#### Microsoft Edge 116
_vydán 21. srpna 2023_

note:

- Nic převratného. Verze pro business, má ikonku obohacnou o kufřík, aby uživatelé věděli, že jsou v pracovním prohlížeči.
- lepší organizace tabů, když si nějaké seskupíte, Edge navrhne název dané skupiny
- a to není vše: Edge umí navrhovat taby k seskupení…

---

#### Firefox 117
_vydán 29. srpna 2023_

```css
@import url('flexbox-utilities.css') 
supports(flex-direction: row);
```


note:

- `@import supports` jako první, od verze 115
- zanořování v CSS výchoze (CSS nesting)
- devTools: u problematických CSS vlastností ukáže, které prohlížeče mají problém (ukázat?)
- verze 118 (konec září) přinese podporu matematických funkcí, více o nich [květnové nowwwinky](https://hackmd.io/@Kout/Hy1x_bPHi)


---

#### Chrome 117 
_vydán 12. září 2023_

- [slide effect on scroll](https://codepen.io/thebabydino/pen/YzJPRvd)
- subgrid
- `display` konečně i v Chromu více hodnot

note:

- slide effect od Any Tudor, ukazoval jsem na jaře; od verze 115
- subgrid jako poslední prohlížeč

---

`display: flex` ⇒ `display: block flex` 
`display: block` ⇒ `display: block flow`

note:

- Chrome poslední; od verze 115
- více příkladů

---

#### Safari 16.6
_vydáno 24. července_

note:

- došel dech?

---

## Zachyceno v síti

---

### [Favicon reloaded (and simplified)](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs#the-ultimate-favicon-setup)

note:

- používal jsem léta [Real favicon generator](https://realfavicongenerator.net/)
- zdá se, že už není třeba tolik kódu

---

### [Leading trim](https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202#:~:text=Leading%2Dtrim%20is%20a%20new,just%20two%20lines%20of%20CSS.)

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

---

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

---

```css!
h1 { 
   text-edge: cap alphabetic;
   leading-trim: both;
}
```

note: 

- zatím experimentálně v Safari, takže hudba budoucnosti
- nezkoumal jsem dál, stalo se mi přesně to, co chce řešit [iniciativa Baseline](https://web.dev/introducing-baseline/), kterou jsem představoval v červnu
- co mě ve skutečnosti zaujalo: text fragment v URL

---

### Text fragment

- text fragment v URL: 

```
#:~:text=Leading-trim%20is%20a%20new,
just%20two%20lines%20of%20CSS.
```

note:

- URL předchozího tipu obsahuje [text fragment](https://developer.mozilla.org/en-US/docs/Web/Text_fragments)
- `%20` je kód pro mezeru v syntaxi URL
- používejme, neumí zatím FF, ale on se to doučí

---

```css!
:target,
:focus {
    scroll-padding-block-end: 8vh;
}
```

- [tip od Stephanie Eckles](https://twitter.com/MicheBarks/status/1667110098546708480)

note: 

- tím si ohlídáte, aby prvky, na něž odkazujete, byly ve viditelném okně

---

[Zemřela Molly Holzschlag](https://www.tucsonsentinel.com/local/report/090523_molly_holzschlag/tucsons-molly-holzschlag-known-as-the-fairy-godmother-web-dead-60/) 

note:

- zemřela 5. září
- [kmotřička webu](https://en.wikipedia.org/wiki/Molly_Holzschlag), která neúnavně bojovala za přístupnost a webové standardy
- internet [zaplavily vzpomínky mnoha osobností](https://www.google.com/search?q=molly+holzschlag), za všechny ta, kdy Molly opakovaně hulákala na Billa Gatese stran ignorace webových standardů v tehdy nejpoužívanějším prohlížeči všech dob (sic!) – IE6
- vystoupila na 2. ročníku Webexpa, kdo z vás tam byl? je to 14 let 
- náš obor stárne, WWW je tu s námi přes 30 let, loni jsme si připomínali 30. výročí přípojení tehdejšího Československa k internetu
- stárneme i my, od roku 2019 se počet dotazovaných s více než 20letou zkušeností více než zdvojnásobil (z 3,76 % na 8,2 %) => State of CSS

---

[State of CSS](https://2023.stateofcss.com/en-US/awards/)

- `:has()` – nejrychleji zaužívaná fičura
<!-- .element: class="fragment" -->
- [OpenProps](https://open-props.style/) – nejméně opouštěná technologie
<!-- .element: class="fragment" -->

note:

- 72 dotazovaných z Česka, díky, ovšem loni 152, musíme se polepšit
- kdo zná `:has()`?
- kdo použil?
- [OpenProps](https://open-props.style/) – CSS framework postavný na proměnných vlastnostech
- Bootstrap stále používá (použilo?) 80 % dotazovaných, TailWind 50 % (jenom) => BS klesá, TW roste, ale mění se to velmi zvolna
- [State of HTML](https://stateofhtml.com/) – přihlaste se, ať nepropásnete, zřejmě příští rok poprvé

---

### CodePen

note:

- nepoužívejme `position: absolute` k vyskládání prvků přes sebe
- vhodnější je v roce 2023 `grid`

---

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

---

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

---

- [Temani Afif](https://codepen.io/t_afif/pen/ZEoJbvx): Circular grid with cool hover effect

note:

- gridová pizza s hustou náplní

---

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