---
title: Hospodský sraz Praha, 12. 2 '20 | {𝐅}rontendisti
tags: frontendisti
---

# {𝐅} <br> Hospodský sraz Praha <br> 12. února. '20

<small>příště: 11. 3. tady v Liberálu?</small>

---
note:

Vítáme nové spíkry! Máš-li zajímavé téma nebo případovku, nenechávej si ji pro sebe. Využijte hospodský sraz jako tréninkový prostor pro novou přednášku či prezentaci.

---

## Letem swwwětem

---

### Brněnský sraz

- Chromium: nový vzhled formulářových prvků, lze nastavit flag [Web Platform Controls updated UI](chrome://flags/#form-controls-refresh), výchoze od verze 81
- [Picture in Picture API](https://css-tricks.com/an-introduction-to-the-picture-in-picture-web-api/)
- Michal Matuška představil nový formát `.acssvg` pro [SVG animace](https://codepen.io/superkoders/pen/bGNjBwq)

note:

- PiP: druhý pravoklik myši na YT
- `.acssvg` přehlídka triků a vychytávek s inline SVG jako `background-image`

---

### Letem swwwětem: kód

- `dl` = ~~definition~~ **description** list

note:

- to znamená, že se rozvolnila pravidla pro HTML

---

<dl>
    <dt>Praha 8. 1.</dt>
    <dd>Pivní jistota</dd>
    <dt>Praha 12. 2.</dt>
    <dd>Kavárna liberál</dd>
</dl>

note:

- kdybych potřeboval stylovat páry `dt`-`dd` například pomocí flexboxu, jsem nahraný

---

<dl>
    <div>    
        <dt>Praha 8. 1.</dt>
        <dd>Pivní jistota</dd>
    </div>
    <div>
        <dt>Praha 12. 2.</dt>
        <dd>Kavárna liberál</dd>
    </div>
</dl>

note:

- pouze `div`, jiná značka ne
- zdroj: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl#Wrapping_name-value_groups_in_%3Cdiv%3E_elements)

---

### Letem swwwětem: devTools

- krátké video od Umara Hansy, jak na [nativní lazyloading v devTools](https://umaar.us9.list-manage.com/track/click?u=2acb3bbbd6a2455edb2e65494&id=7bee9e4a93&e=b334364654)
- devTools ve Firefoxu nově [ukazují události navázané na prvek](https://twitter.com/taishiling/status/1220536732744945664?s=20)

note:

- za zhlédnutí stojí i kvůli ukázce využití funkce _local overrides_, užitečné při prototypování (změny HTML/CSS/JS zůstávají i při reloadu, devTools ukážou i diff)

---

### Letem swwwětem: studovna

- [Kterak funguje vykreslování stránek v prohlížeči](https://twitter.com/addyosmani/status/1216064732504788992?ref_src=twsrc%5Etfw) (zevrubně)

Seriál: Inside look at modern web browser
1️⃣ <a href="https://t.co/r3007PZ5oR">část 1</a>
2️⃣ <a href="https://t.co/MbZuXQS7ry">část 2</a>
3️⃣ <a href="https://t.co/SAXOxyghDi">část 3</a>
4️⃣ <a href="https://t.co/niWvNuXfik">část 4</a>
[Life Of A Pixel](https://bit.ly/lifeofapixel)
[WebRender for Firefox](http://bit.ly/webrender)

note:

- sbírka souvisejících článků

---

### Letem swwwětem: nástroje

- [15 must-know JavaScript array methods in 2020](https://dev.to/ibrahima92/15-must-know-javascript-array-methods-in-2020-1kd8)
- nepřeberná sbírka nejrůznějších online nástrojů [Tiny Helpers](https://tiny-helpers.dev/)
- [rozcestník k Eleventy](https://css-tricks.com/eleventy-love/), mladému ambicióznímu hráči mezi generátory statických stránek

note:
- nástroje pro úpravy obrázků, za/dekódování base64, generátory CSS (tvary, gradienty atp.)

---

### Letem swwwětem: pro radost

- [Ukažte mi ukazatel!](https://pointerpointer.com/)
- [závažný fyzikální objev](https://size-of-npm.netlify.com/)

---

## Přednášky

1. **Design versus Frontend**, Adina Foxová a Jan Prokop
2. **Deploy or Die**, Honza Černý