12. dubna ’23 | {𝐅}rontendisti

--- title: 12. dubna ’23 | {𝐅}rontendisti tags: frontendisti --- {%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %} # {𝐅}rontendisti v Betsys Praha, 12. dubna ’23 příště: {F}rontendisti 10. května, Na věnečku, Smíchov Pipedrive: 3. května _Machine learning & OpenAI_ 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 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)