---
# System prepended metadata

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

---

---
title:  12. dubna ’23 | {𝐅}rontendisti
tags: frontendisti
---

{%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %}

# {𝐅}rontendisti v Betsys
Praha, 12. dubna ’23

<small>příště:</small>
<small>{F}rontendisti 10. května, Na věnečku, Smíchov</small>
<small>Pipedrive: 3. května _Machine learning & OpenAI_</small>

note:

- v Brně právě teď: _Diskuzní večer o produktivitě při práci (nástroje, workflow)
- příště pravděpodobně na Věnečku

---

- **Tomáš Litera**, LMC
Dialog element - nevymýšlej znovu modal!
- **Dawid Zbiński**, Betsys
Úvod do zpracování obrázků v JavaScriptu
- **moderovaná diskuse**
Jak se díky moderním nástrojům (z)mění práce (fe) vývojáře?


note:

- Marek Velas se omlouvá, onemocněl

---

## Letem swwwětem<br> 

note:

---

### Nemělo by vám uninkout

- Vylda aka Vilém Lipold: [State of CSS 2022 – outsiders](https://www.youtube.com/watch?v=VjF66Uk4Jvw)
- Martin Rubáš: [Play it wrong or Playwright](https://www.youtube.com/watch?v=fFWSVvGobwU)
- Martin Michálek: [Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře](https://www.youtube.com/watch?v=dCONMLKgMsk)


note:

- přehled přednášek z posledních meetupů (Brno+Praha)
- Vylda přinesl přehled zajímavých novinek, které jsou, jak vyplývá ze State of CSS, opomíjené (neznámé, nebo nepoužívané)
- Martin o testování frontendu pomocí frameworku Playwright
- Máchal vyzobal ze své bohaté praxe 10 tipů na zrychlení webů (vybral jsem proto, že z přednášky vzešlo hned několik úkolů pro naše kódéry)
- další přednášky o [blockchainech v prohlížeči](https://www.youtube.com/watch?v=McgaHaSV9y4), [Nuxt 3](youtube.com/watch?v=djiDyS0Jbl0), [cachovací strategie](https://www.youtube.com/watch?v=lQMgaZIu86c), [organizace projektů pomoc monorepa](https://www.youtube.com/watch?v=qIgQ8JIHCH4) na [YT kanále {𝐅}rontendisti](https://www.youtube.com/@FrontendistiCz/videos)

---

### Prohlížeče

note:

---

#### Microsoft Edge 111
_vydán 13. března 2023_

note:

- Nic převratného.

---

#### Firefox 112
_vydán 11. dubna 2023_

note:

- Nic zásadního, a 113 zatím vypadá obdobně…

---

#### Chrome 112 
_vydán 29. března 2023_

- nativní zanořování (CSS nesting)

```css
.foo {
  color: red;

  &:hover {
    color: navy;    
  }
    
  + .bar {
    color: blue;
  }
}
```

note: 

- obdoba toho, co známe z preprocesorů, ale nepůjde spojovat názvy tříd, jako se někdy zapisuje BEM
- byť konsorcium na specifikaci stále pracuje
- FF někdy také, Safari od 16.5 

---

#### Nelze (na rozdíl od preprocesrů)

```css
form {
  border: 1px solid silver;

  input {
    margin: 1em;
  }
}
/* Invalid, because "input" is an identifier. */
```

---

#### Nutno takto (na rozdíl od preprocesrů)

```css
form {
  border: 1px solid silver;

  & input { margin: 1em; }
  /* valid, no longer starts with an identifier */

  :is(input) { margin: 1em; }
  /* valid, starts with a colon,
     and equivalent to the previous rule. */
}
```

---

#### Safari 16.4
_vydáno 27. března 2023_

```css
@media (100px <= width <= 1900px) { 
    /* rulesets */ 
}

article {
    margin-trim: inline-start;
}

```

note:

- 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)
- `margin-trim` ([příklad užití na MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim#basic_usage)), pouze Safari…
- CSS nesting od verze 16.5 (nyní jako beta)

---

## Zachyceno v síti

---

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

note:

- na minulém srazu představil Petr Koláček z Etnetery
- 4 kB framework od Adama Argyla
- [demo základ](https://codepen.io/argyleink/pen/KKvRORE?editors=1100)
- [demo komponenta](https://codepen.io/argyleink/pen/KKvRORE?editors=1100)
- tip k devTool: změnit paletu (barvy na stránce, všecky proměnné vlastnosti)

---

#### Josh Collinsworth: [Ten tips for better CSS transitions and animations](https://joshcollinsworth.com/blog/great-transitions)

note:

- perfektní sada tipů, chyb, kterým je třeba se vyhnout, a ukázek animací
- méně znamená více => nedělejme animace [příliš dlouhé](https://codepen.io/collinsworth/embed/abaqpRV?height=370&default-tab=result&slug-hash=abaqpRV&user=collinsworth&name=cp_embed_2#result-box); zkracovat, dokud nám nepřijde příliš rychlá a pak ji malinko zpomalit
- nepoužívat výchozí hodnoty prohlížečů; VS code skvěle doplňuje hodnoty Bézierových křivek
- inspirovat se skutečným pohybem; nikdy se nic okamžitě nerozpohybuje ani nezastaví; [CodePen](https://codepen.io/collinsworth/pen/poORdVo/6a29e9ec4ceb068892a7b77211864139)

---

#### Daniel C. Wilson: [Improving CSS Shapes with Trigonometric Functions](https://danielcwilson.com/posts/css-shapes-with-trig-functions/)

- sinus, cosinus, deskriptiva…
- `clip-path`, `shape-outside`

note:

- trigonometrické funkce ([sinus](https://developer.mozilla.org/en-US/docs/Web/CSS/sin), [cosinus](https://developer.mozilla.org/en-US/docs/Web/CSS/cos), [tangens](https://developer.mozilla.org/en-US/docs/Web/CSS/tan)) jsou nově podporovány v CSS funkci `calc()`
- Chrome (jako poslední) přidal podporu ve verzi 111, v nowwwinkách jsem tehdy vynechal, přišlo mi to jako obskurní záležitost, leč chyba lávky!
- nutno oprášit znalosti [kuželoseček](https://www.matweb.cz/kuzelosecky/) a [analytické geometrie](https://www.matweb.cz/kategorie-analyticka-geometrie/) => vyjadřování křivek pomocí rovnica
- [přehled tvarů](https://codepen.io/danwilson/embed/qBMvveV?height=366&default-tab=css%2Cresult&slug-hash=qBMvveV&user=danwilson&name=cp_embed_9#result-box)
- [animace](https://codepen.io/danwilson/pen/JjaxYGJ)

---

#### [Nevíte, co je to „překvapník“‽](https://shadycharacters.co.uk/contents/)

note:

- anglicky interrobang
- nádherný blog pro typografické labužníky
- překvapník dle Wikipedie razí desginér Filip Blažek

---

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

note:

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

---

### CodePen

---

[Infinite loader](https://codepen.io/jkantner/pen/mdKOpbe) (animace SVG)

note:

- jak to funguje?!

---

[Pixelated image](https://codepen.io/andyfitz/pen/XWxWgyY)

- využívá vlastnost `image-rendering`
```css
  transform-origin: 0 0;
  transform: scale(6000, 1);
  background-image:inherit;
  image-rendering: pixelated;
  transition: all 2s cubic-bezier(.5,0,0,1) ;
```

note:

- jednoduché a efektní
- vlastnost `image-rendering` se uplatní pouze pro obrázky, u nichž se liší zobrazovaná velikost od skutečné

---

Díky, prezentace během večera na [@frontendisti](https://twitter.com/frontendisti)
