{%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, signageOS <br> 12. června ’24<!-- .element: class="text-center" -->
<small>Brno dnes: diskuzní večer na téma vyhoření</small><!-- .element: class="fragment" -->
<small>příště: 11. září nesjpíš hospoda</small><!-- .element: class="fragment" -->
note:
---
# 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)
---
## Dnes
- **Michael Žabka**, [signageOS](https://www.signageos.io/)
Webové technologie trochu jinak - Ovládání a monitorování profesionálních displejů (televizí)
- **Petra Nulíčková**, [Pale Fire Capital](https://palefirecapital.com/)
Ovládnutí pohovoru pro frontend vývojáře: Klíčové otázky, varovné signály a strategie, jak zazářit na pohovoru.
- **Lukáš Trumm**, Quanti
CSS se stále zlepšuje - využijme toho!
note:
- prožram
---
## WWW minulém díle jste viděli
<!-- .element: class="text-center" -->
- Ondřej Konečný: Problémy a složitosti při psaní CSS
<!-- .element: class="c-text-sm fragment" -->
- [**Webexpo**](https://slideslive.com/webexpo)<!-- .element: class="c-text-sm fragment" -->
- Jindřich Karásek: [The astounding web of cognitive warfare](https://slideslive.com/39021051/the-astounding-web-of-cognitive-warfare?ref=account-13779-presentations)
<!-- .element: class="c-text-sm fragment" -->
- Nick Fine: [Signal to noise in the age of misinformation](https://slideslive.com/39021027/signal-to-noise-in-the-age-of-misinformation?ref=account-13779-presentations)
<!-- .element: class="c-text-sm fragment" -->
- Bramus Van Damme: [Scroll-driven animations with CSS](https://slideslive.com/39021011/scrolldriven-animations-with-css?ref=account-13779-presentations)
<!-- .element: class="c-text-sm fragment" -->
- [**CSS day 2024**](https://www.youtube.com/@WebConferencesAmsterdam)<!-- .element: class="c-text-sm fragment" -->
note:
- tentokrát mimo YT kanál Frontendisti.cz
- Ondra: výsledky dotazníku příští týden
- kdo byl na Webexpu?
- Jindra: lovec hackerů, vlivové operace, které u nás probíhají
- Nick: příměr s jídlem
> Nedáme si do úst jakékoli jídlo, které najdeme. Pokud neznáme jeho původ, nejsme si jisti, že nám po něm nebude špatně, raději ho vynecháme. Tak proč bez obav konzumujeme informace odkudkoli?
- Bramus: protože jsem vám to říkal posledně, že to bude jízda, a byla
- kdo byl v Amsterdamu?
- předplatné 50 Kč/měsíc – 14 přednášek se dá
- i oni 10 let jako {F}rontendisti
---
### Prohlížeče
note:
---
#### Firefox 127
_vydán 11. června 2024_
- [`zoom`](https://developer.mozilla.org/en-US/docs/Web/CSS/zoom)
<!-- .element: class="fragment" -->
note:
- vlastnost `zoom` všechny ostatní prohlížeče podporují už od jednotkových verzí (přes 12 let)
- zřejmě souvisí s původem této nestandardní vlastnosti v IE6, kde se jejím použitím zapínala vlastnost `hasLayout`, takový hack z dřevních dob
- používejme raději `transform: scale()`
---
#### Chrome 126
_vydán 5. června 2024_
```css=
.obrazek-pred {
&::before {
content: url("cat.jpg") / "Kočička k zulíbání";
}
}
```
<!-- .element: class="c-text-xs fragment" -->
note:
- tohle už funguje! (od verze 77, rok 2019)
---
#### Chrome 126
_vydán 5. června 2024_
```css=
.obrazek-pred {
&::before {
content: url("cat.jpg") / attr(data-zviratko) " k zulíbání";
}
}
```
<!-- .element: class="c-text-xs" -->
note:
- tohle je novinka
- těch `attr()` tam údajně může být víc
---
#### Safari 17.5
_vydáno 13. května 2024_
- `light-dark()`
<!-- .element: class="fragment" -->
- `text-wrap-style: auto|balance|stable`
<!-- .element: class="fragment" -->
- `supports` v `@import`
<!-- .element: class="fragment" -->
```css!
@import url("gridy.css")
supports(display: grid)
screen and (max-width: 400px);
@import url("flexy.css")
supports((not (display: grid)) and (display: flex))
screen and (max-width: 400px);
```
<!-- .element: class="c-text-xs fragment" -->
note:
- dorovnává ostatní
- podmíněný `@import` jsme už viděli, ale zopakujeme si ještě jednou
---
## Zachyceno v síti
---
### Tip
- vzít si zpět kontrolu nad vzhledem stránky pomocí `:has()`
```css=
p:has(>img) {
display: contents;
}
```
<!-- .element: class="c-text-sm fragment" -->
note:
- markdown (nebo CMS) obaluje obrázky do odstavců, což může hatit dezén
- posílit ještě `:only-child`?
---
### [Kerntype](https://type.method.ac/)
note:
- díky Karlosovi (advokát-kódér) za tuhle kratochvíli do mobilu (užitečnější než doom scrolling) – Webexpo after party
---
### CSS day 2024: [Kevin Powell](https://www.youtube.com/live/GASVR4o81cg?si=KcZg-0loHfz9lgzB&t=1154)
note:
- Jak zhustit Kevinovu přednášku do pár vět, když trvala asi 35 minut?
- Nebát se overengineeringu: i když se může zdát ztraceným časem, něco se naučíte, něco se dozvíte. Obzvlášť když to publikujete: při troše štěstí se vám někdo ozve s tím, „a nešlo by to udělat spíš takhle?“
- víc on sám
- vytvoříte-li něco robustního, je potřeba usnadnit ovládání (příměr s autem)
- [sloupce](https://codepen.io/kevinpowell/pres/abMLmeO)
- [breaKouts](https://codepen.io/Kout/pres/RwmLJvV)
- [Kevinovy KoutPeny](https://codepen.io/collection/yrWJrk)
- TIL: media queris + `calc()`
---
**CSS day 2024: Kevin Powell**
```css=
@media (min-width: calc(60ch - 20px)){}
```
<!-- .element: class="c-text-sm fragment" -->
```css=
@media (min-width: min(60ch, 400px)){}
```
<!-- .element: class="c-text-sm fragment" -->
```css=
@media (min-width: clamp(60ch, 10rem, 400px)){}
```
<!-- .element: class="c-text-sm fragment" -->
note:
- sice mě nenapadá (krom prvního) použití, obzvlášť když se masivně odkláníme od používání media queries (právě díky funkcím jako je `min()`, `max()` a `clamp()`), ale je to pozoruhodné (a funguje to už dlouho)
- a možná, že to v nowwwinkách už zaznělo, ale kdo si to má všecko pamatovat
---
### [Hudba v CSS gridu](https://cruncher.ch/blog/printing-music-with-css-grid/)
```css=
.staff {
display: grid;
row-gap: 0;
grid-template-rows:
[A5] 0.25em [G5] 0.25em [F5] 0.25em [E5] 0.25em
[D5] 0.25em [C5] 0.25em [B4] 0.25em [A4] 0.25em
[G4] 0.25em [F4] 0.25em [E4] 0.25em [D4] 0.25em
[C4] 0.25em ;
background-image: url('/path/to/staff.svg');
background-repeat: no-repeat;
background-size: 100% 2.25em;
background-position: 0 50%;
}
```
<!-- .element: class="c-text-xs fragment" -->
note:
- tip od Kevina Powella
- `staff` = notová osnova
---
**Hudba v CSS gridu**
<!-- .element: class="img-sm" -->
note:
- [knihovna/nástroj od Stephana Banda](https://github.com/stephband/scribe) (sic!)
- [ukázka: Dolphin dance](https://stephen.band/scribe/dolphin-dance.html)
---
### Nowwwinky z JS
- [ECMAScipt News](https://ecmascript.news/index.html): _Stay up-to-date on JavaScript and tools_
<!-- .element: class="fragment" -->
- [Bytes.dev](https://bytes.dev/)
<!-- .element: class="fragment" -->
note:
- malá splátka dluhu té části přítomných, která holduje spíše JS
- ECMAScript news: týdenní souhrn novinek:
- [Rust nejrychleji rostoucím jazykem](https://thenewstack.io/rust-growing-fastest-but-javascript-reigns-supreme/?utm_source=ECMAScript.news&utm_medium=Weekly+Newsletter&utm_campaign=2024-06-11) – programovacím, ale na JS zatím nemá ani smykem
- [návod jak na Promises](https://www.joshwcomeau.com/javascript/promises/?utm_source=ECMAScript.news&utm_medium=Weekly+Newsletter&utm_campaign=2024-06-11)
- [jak pracovat s `ArrayBuffers`](https://2ality.com/2024/06/array-buffers-es2024.html?utm_source=ECMAScript.news&utm_medium=Weekly+Newsletter&utm_campaign=2024-06-11#what-are-arraybuffers%3F)
- víte, co jsou `ArrayBuffers`? (úložiště binárních dat v JS, v podstatě černá skříňka – tvrdí autor, za tuto větu jsem nečetl)
- aktualizace knihoven ([Prettier 3.3](https://prettier.io/blog/2024/06/01/3.3.0.html?utm_source=ECMAScript.news&utm_medium=Weekly+Newsletter&utm_campaign=2024-06-11))
- zajímavé NPM balíčky ([regex](https://github.com/slevithan/regex?utm_source=ECMAScript.news&utm_medium=Weekly+Newsletter&utm_campaign=2024-06-11))
---
**Bytes.dev**
```js=
window.name = "Mike Tyson";
const me = {
name: "Tyler",
sayName() {
console.log(this.name);
},
};
const sayName = me.sayName;
sayName();
```
<!-- .element: class="c-text-sm fragment" -->
note:
- Co se vypíše do konzole?
---
## Nástroje a udělátka
---
### [Layout Brea<b>kout</b>s Builder](https://layout-breakouts-builder.vercel.app/)
note:
- jak to funguje, [vysvětluje Kevin Powell](https://www.youtube.com/watch?v=c13gpBrnGEw)
---
### [Cosima Mielke: Color tools](https://www.smashingmagazine.com/2021/07/color-tools-resources/) (Smashing magazine)
- [Picular (Google for colours)](https://picular.co/)
<!-- .element: class="fragment" -->
- [Cool backgrounds](https://coolbackgrounds.io/)
<!-- .element: class="fragment" -->
- [Meshy](https://meshgradient.in/)
<!-- .element: class="fragment" -->
- [kontrola kontrastu u tlačítek](https://www.aditus.io/button-contrast-checker/frontendisti-cz-2024-06-11-at-18-59-01-548)
<!-- .element: class="fragment" -->
note:
**jen Picular**
- sbírka nejrůznějších pomůcek k míchání a kombinování barev, tvorbě přechodových pozadí a další jako např.:
- Picular: [maso](https://picular.co/maso)×[flesh](https://picular.co/flesh), [jiné věci odpovídají](https://picular.co/hov%C3%ADnko)
- Meshy už jsem tu možná ukazoval…
- nejen generátory, ale i kontrola kontrastu
---
## KoutPen
note:
- stačilo :wink:
---
Díky, prezentace za chvíli na [@frontendisti](https://twitter.com/frontendisti)
{"title":"{F}rontendisti: ukázka blán pro běžný sraz","description":"<small>Brno dnes: diskuzní večer na téma vyhoření</small><!-- .element: class=\"fragment\" --><small>příště: 11. září nesjpíš hospoda</small><!-- .element: class=\"fragment\" -->","contributors":"[{\"id\":\"772328be-33fa-4edc-bac0-7a7903521fb4\",\"add\":13277,\"del\":0}]"}