---
# System prepended metadata

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

---

---
title:  9. listopadu ’22 | {𝐅}rontendisti
tags: frontendisti
---

{%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %}

# {𝐅} <br> Ataccama <br> 9. listopadu '22

<small>příště: <br> 14. 12. 2022, Superkoders **v Brně**</small>
<small>8. 2. 2023, Heureka **v Praze**</small>
partneři: Ataccama, Emplifi, Artin, Pipedrive a Superkoders

note:
- poslední letošní setkání v Praze
- pojeďte s námi do Brna na tradiční superkóderský punč 
- v Praze v únoru opět minikonference

---

## Pozvánky

---

### [JS Fwdays Europe](https://fwdays.com/en/event/javascript-fwdays-2022)
The Full Stack JavaScript online conference for JS enthusiasts

čt 10. listopadu 10.00–16.30

note:
- témata:  TypeScript, CSS, Micro-frontends, Remix, React
- konference je v EN 

---

### S Théseem bez překážek 2022
Online konference o digitální přístupnosti

čt 10. listopadu, 10.00–15.00 (přestávka 12.00–13.00)

note:

- vysílá se živě na facebookových stránkách Střediska Teiresiás.

---

## Letem swwwětem

---

### Prohlížeče

note:

- oddechový čas po jarní a letní smršti
- vynechávám Edge: novinkou je svislá lišta se záložkami…

---

#### Firefox 106
_vydán 18. října 2022_

Nic zásadního…

note:

- pro frontendisty nic nového (pokud nepoužívají FF jako svůj výchozí prohlížeč ⇒ novinky v rozhraní a programu)
- lze editovat PDF, respektive do PDF něco dokreslit, dopsat a uložit jako PDF


---

#### Chrome 107
_vydán 25. října 2022_

- HEVC codec
- Chrome 108 mění chování `overflow` u nahrazovaných prvků

note:

- kodek je úspornější v kompresi dat, podporován od Safari 14, FF zatím ne
- uvidíme se až v příštím roce, na konci listopadu vyjde 108
    - přináší změny, které mohou rozbít některé designy
    - [shrnutí na CSS tricks](https://css-tricks.com/a-couple-changes-coming-in-chrome-108/)
    - [A change to overflow on replaced elements in CSS](https://developer.chrome.com/blog/overflow-replaced-elements/)
    - [108: dynamické jednotky](https://twitter.com/bramus/status/1574495889300897805) – vlákno o tom, proč to trvalo


---

#### Safari 16.1
_vydáno 24. října 2022_

Opravy

note:

- přináší jen opravy nově podporovaných vlastností
- totéž chystaná 16.2

---


## Zachyceno v síti

---

[Container queries: demos](https://lab.ishadeed.com/container-queries/)
[Container queries: intro](https://ishadeed.com/article/container-queries-are-finally-here/)

note:

- Ahmad Shadeed představuje velmi stravitelně container queries se sadou ukázek

---

### Nástroje a generátory

---

- [Font inspector](https://wakamaifondue.com/beta/)
- [Fallback font generator](https://screenspan.net/fallback)

note:
- inspektor: vytáhne z nahraného fontu všechny dostupné informace + vygeneruje CSS pro `@font-face`
- fallback pomůže vyladit záchranný font, aby se předešlo CLS


---

- [Retouch photos](https://cleanup.pictures/)

note:

- nahrajete fotku a retušujete s pomocí AI (lze překliknout vlevo nahoře na originál)

---

- [Paper CSS](https://shkspr.mobi/blog/2022/06/paper-prototype-css/)

note:

- Paper CSS: repozitář s prvky ostylovanými jako načmáraný prototyp: když se chcete soustředit na prototypování a obsah
- [ukázka](https://codepen.io/Kout/pen/KKeNWEb?editors=1100)

---

### Generátory CSS

note:
- generátory: kdo nějaký generátor použil? (já třeba gradienty a svého času `border-radius`)
- šetří čas v prvotních fázích projektu
- pomohou prolomit paralýzu z prázdné stránky a rychle začít

---

- [generátor gridu](https://cssgrid-generator.netlify.app/)
- [plastelína](https://neumorphism.io/#e0e0e0) 
- [mléčné sklíčko](https://markodenic.com/tools/glassmorphism-css-generator/)
- [šišatoidy za hubičku](https://9elements.github.io/fancy-border-radius/)
- [Animista](https://animista.net/play/basic)
- [všecko dohromady](https://codepen.io/Kout/pen/OJEbmbo)

note:
- neumorphism: tvary s dvojitým stínem a zaoblením ⇒ působí plasticky


---

- [knoflíkář](https://markodenic.com/tools/buttons-generator/)
- [vlnky, vlny, vlnobití](https://getwaves.io/)
- [stínítko](https://www.joshwcomeau.com/shadow-palette/)
- [AnimatiSS](https://xsgames.co/animatiss/) – sada minimalistických animací
- [Keyframes.app](https://keyframes.app/)
note:
- buttons: kliknutím se zkopíruje CSS, lze hned použít
    - [viz CodePen](https://codepen.io/Kout/pen/bGKBWVm?editors=1100)
- stínítko: chytře využívá proměnné vlastnosti
- getwaves: generuje SVG
- AnimatiSS: „animovací utility“
- Keyframes.app: opačný přístup než předchozí, animaci si vytváříte sami
    - vizuální kontrola, vyladíte animaci, neřešíte kód

---

- [sada generátorů pro CSS i JSX](https://omatsuri.app/gradient-generator)
- [SVG generátory](https://www.smashingmagazine.com/2021/03/svg-generators/) – článek na Smashing Magazine
- [Figma Autoname](https://www.figma.com/community/plugin/1160642826057169962/Figma-Autoname)

note:
- přistály mi v newsletteru po redakční uzávěrce…
- generátory: přítomné programátorky a programátoři si můžou zkusit nějaký napsat jako projekt do svého portfolia

---

[Holograms, light-leaks and how to build CSS-only shaders.](https://robbowen.digital/wrote-about/css-blend-mode-shaders/)

note: 

- hutné efekty na obrázcích vytvořené moderním CSS
- kompletní ukázky až dole na stránce

---

[Your ~~account~~ content is permanently ~~suspended~~ gone](https://www.matuzo.at/blog/2022/your-account-is-permanently-suspended/): nesvěřujte svůj obsah cizím

note:

- ukládejte si obsah na své servery, můžete o něj snadno přijít

---

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

note:

- Pavel Peroutka - Ataccama
    - Sranda s Ramda: Funkcionální programování v příkladech
    - Lambda kalkulus, monada, high-order funkce, currying! Příklady ne teorie!
- Petra Nuličková - Pale Fire Capital
    - Když ptáčka lapají... aneb na co si dat pozor než příjmu nabídku
- Martin Michálek
    - Container Queries: krátká přednáška o velké věci
    