--- title: "13. listopadu ’24" tags: frontendisti --- {%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, Mews<br> 13. listopadu ’24 <!-- .element: class="c-text-center" --> <small>Brno dnes: Diskuzní večer o vývoji design systému</small><!-- .element: class="fragment" --> <small>příště: <strong>11. prosince, Brno</strong></small><!-- .element: class="fragment" --> <small>[Design Systémy v praxi: SDMK Design](https://friends.figma.com/events/details/figma-czech-republic-presents-design-systemy-v-praxi-sdmk-design/) 20. listopadu 17.30</small><!-- .element: class="fragment" --> <small>[ReactGirls &amp; Heureka meetup](https://www.meetup.com/reactgirls/events/303523695/) 21. listopadu 18.00</small><!-- .element: class="fragment" --> note: - příště: vánoční dýchánek v Brně, v Praze až v únoru (12/2) - pozvánka na sraz figmařů - pozvánka do Heuréky na React Girls --- # 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) --- ## WWW minulém díle jste viděli <!-- .element: class="text-center" --> [FrontKon ’24](https://www.youtube.com/@FrontendistiCz/videos) - [Lukáš Havlíček: Jak jsme se rozloučili s GraphQL](https://www.youtube.com/watch?v=k3zKfpA9CSw) 22 min <!-- .element: class="c-text-sm fragment" --> - [Karel Navrátil: 5 právních f ckupů, kterým by se měl vyhnout každý frontenďák](https://www.youtube.com/watch?v=ynxnIsq35Ss) 8 min <!-- .element: class="c-text-sm fragment" --> - [Ondřej Žára: 10 mini receptů ze světa CSS](https://www.youtube.com/watch?v=rugYRWQtyTw) 24 min <!-- .element: class="c-text-sm fragment" --> - [Lukáš Hosnedl, Ondřej Zmek: Jak jsme zpřístupňovali DrMax](https://www.youtube.com/watch?v=NG3-BQ9gmfc) 27 min <!-- .element: class="c-text-sm fragment" --> note: - záznamy (41 ks) jsou venku! - skokanem roku je Lukáš Havlíček, který za týden nasbíral 3,3T shlédnutí - na místě jsem mnoho nestihl - AI, přístupnost, JS frameworky => vybere si každý - Lukáš Hosnedl: zkušenost od narození nevidomého - příští sobotu, [Konference INSPO 2024](https://goout.net/cs/konference-inspo-2024/szkoklx/): - Čtyřiadvacátý ročník konference INSPO o technologiích pro osoby se specifickými potřebami představí nejnovější technologie a projekty usnadňující život lidem s různým zdravotním postižením. --- ### Prohlížeče **Firefox 132** _vydán 29. října 2024_ <!-- .element: class="fragment" --> **Chrome 131** _vydán 6. listopadu 2024_ <!-- .element: class="fragment" --> **Safari 18.0** _vydáno 21. září 2024_ <!-- .element: class="fragment" --> note: - [o Baseline na FrontKonu promluvil Tomáš Kout (já)](https://www.youtube.com/watch?v=svUKwf6Bsho) - 97 shlédnutí… - běžně dostupné (widely available): 2,5 roku od chvíle kdy fičuru implementoval poslední z trojice CH, FF, SF --- ### Web platform status ![štítek Baseline, široce dostupné](https://hackmd.io/_uploads/rJEtkiR0C.svg =20%x) 11/2024 (běžně dostupné) - [cascade layers (`@layer`)](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers) <!-- .element: class="fragment" --> - [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) <!-- .element: class="fragment" --> - [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) <!-- .element: class="fragment" --> - [`appearance`](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance) <!-- .element: class="fragment" --> - [`contain`](https://developer.mozilla.org/en-US/docs/Web/CSS/contain) <!-- .element: class="fragment" --> note: - výběr od září --- ### Web platform status ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =20%x) 11/2024 (nově dostupné) - [`requestVideoFrameCallback()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/requestVideoFrameCallback) <!-- .element: class="fragment" --> - [Color management for WebGL & WebGL2](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/drawingBufferColorSpace) <!-- .element: class="fragment" --> note: - nově dostupné: aktuální verze CH, FF, SF podporují --- ### [Návrh verzování CSS (RFC)](https://github.com/CSS-Next/css-next/discussions/92) ![image](https://hackmd.io/_uploads/r1zK24GMyl.png =40%x) CSS4 : vlastnosti a funkce představené cca 2013–2018. <!-- .element: class="fragment" --> CSS5 : vlastnosti a funkce představené cca 2019–2024. <!-- .element: class="fragment" --> Future/Next : vlastnosti a funkce momentálně ve vývoji nebo navržené pro budoucí verze CSS mimo CSS5. <!-- .element: class="fragment" --> - [It’s Time To Talk About “CSS5”](https://www.smashingmagazine.com/2024/08/time-to-talk-about-css5/) <!-- .element: class="fragment" --> note: - RFC (připomínkové řízení) – máte-li připomínky, [ozvěte se!](https://github.com/CSS-Next/css-next/discussions/92) - autoři si od roztřídění slibují jasnější rozlišení toho, co by měli vývojáři ovládat a znát - zpřehlední se tak vzdělávání i požadavky na trhu práce - přijetí nowwwinek bude snazší, bude patrné, které jsou hudbou budoucnosti a které jsou nezbytné - marketing, vzbudit rozruch kolem CSS, které má obecně špatnou pověst --- ## Zachyceno v síti --- ### Cascade layers v praxi [Egor Kloos](https://mastodon.social/@dutchcelt/113434759386473853) - tokens - base - design - theme - interface (mapping to other CSS libraries) - component.props - component.styles - component.modifiers <!-- .element: class="c-text-sm" --> [dutchcelt.nl](https://dutchcelt.nl/) note: - s běžnou dostupností se objevují případovky - neexistuje fallback, Egor poskytne pouze základní stylování (barvy, fonty) v 1 sloupci --- ### Matematické fce v CSS a praxi - [`pow()`](https://danielcwilson.com/posts/mathematicss-powers/#using-these-new-math-functions-in-practice) na škálu velikosti písem <!-- .element: class="fragment" --> - [`tan(atan2())`](https://css-tip.com/screen-dimension/) který vrací velikost okna <!-- .element: class="fragment" --> note: - na škálu velkostí fontů by mělo jít použít i `log()` - použití `tan(atan2())` [hezky vysvětluje Jane Ori ve starším článku](https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j) - [KoutPen](https://codepen.io/t_afif/pen/ExBVLBW) --- [.io asi skončí](https://every.to/p/the-disappearance-of-an-internet-domain) note: - Británie vrací suverenitu Čagoským ostrovům, což má nejen geopolitické následky ve světě, ale i ovlivní to i svět virtuální --- ![Telling web designers they don't need to worry about code is like telling architects they don't need to worry about steel, wood or physics.](https://hackmd.io/_uploads/HkvazSbC0.png) note: Říkat, že designéři se nepotřebují zaobírat kódem je podobné, jako tvrdit, že architekti nemusejí řešit vlastnosti oceli, dřeva a fyzikální zákony vůbec. --- ## KoutPen [Ana Tudor: realistická tlačítka](https://codepen.io/thebabydino/pen/QWLJpOb) note: - možná jsem ukazoval, ale ono se to neokouká --- Adam Argyle: jedno~~hubka~~řádkový efekt ```css border-image: linear-gradient(#0ff0, #0ff, #0ff0) 1 / 2px; ``` <!-- .element: class="c-text-xs" --> ![přechodové postranice kolem textu](https://hackmd.io/_uploads/BkakQ5gMye.png)<!-- .element: class="fragment" --> --- ## Dnes - **[Karel Navrátil](https://www.linkedin.com/in/navratilkarel-com/)**, [Advokát](https://svoko.cz/) | Frontend designer Dark patterny. Kde leží hranice mezi motivací a manipulací uživatelů? - **[Julian Xu](https://julianxu.netlify.app/)**, [GEN](https://www.gendigital.com/us/en/), IT Manager & Cholify, CEO Jak psát strukturovaný HTML a CSS - **[František Huber](https://www.linkedin.com/in/frantisekhuber/)**, kodér Cursor.com: "nejlepší" způsob, jak kódovat s využitím AI --- Díky, prezentace v komentáři na [Meetup.com](https://www.meetup.com/frontendisti/)