--- title: "9. dubna ’25" tags: frontendisti --- {%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %} <style> svg { padding: 1em; background-color: #001c17; color: #21ff42; } </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> 9. dubna ’25 <!-- .element: class="text-center" --> <small>Brno dnes: AI editory a přístupy ke generování kódu (diskuzní večer)</small><!-- .element: class="fragment" --> <small>příště: 14. května, Mews</small><!-- .element: class="fragment" --> <small><a href="https://www.meetup.com/frontendisti/events/307160000/"><strong>Bratislava</strong> 24. dubna: ESET</a></small><!-- .element: class="fragment" --> 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) - čekací listina --- ### ~~WW~~Webexpo 28.-29. května [soutěž o vstupenku](https://www.facebook.com/photo?fbid=1091016023067340&set=a.565346248967656) <!-- .element: class="fragment" --> note: - soutěž do neděle - info ze zákulisí: zatím nízká účast, limitně se blížící nule === vysoká šance na výhru --- ### [FrontKon ’25](https://form.simpleshop.cz/V5lPb/buy/) středa 1. října, Hotel Passage Brno <!-- .element: class="fragment" --> [přihlaste svou přednášku](https://docs.google.com/forms/d/e/1FAIpQLSdN5KRH2_OpTpC62cs0SOSRrkgEaItjdlXljhG5FaUaf6_QbA/viewform) <!-- .element: class="fragment" --> note: - střídáme, tedy Brno - pořád můžete přihlásit svou přednášku - 2990 Kč - témata: frontend goes native, AI v praxi, CSS6 --- ## WWW minulém díle jste viděli <!-- .element: class="text-center" --> - [The Design of Web Design – Miriam Suzanne](https://www.youtube.com/watch?v=th1q0RyvBcc) - [Micro Interactions in Real UI – Julia Miocene](https://www.youtube.com/watch?v=MZjV27K2KR4) - [Can We Do That? – Adam Argyle](https://www.youtube.com/watch?v=we2wmGKDyhY&list=PLxQqv_fazRs1VlMEbqC0Jlw6VFd97UpT2&index=4) - záznam přednášky na YT <!-- .element: class="c-text-sm fragment" --> note: - zúčastnil jsem se takový akce: 1. dubna [Smashing meets CSS](https://smashingconf.com/meets-modern-css) - Miriam provedla vývojem CSS od [prvotního návrhu z 10/94](https://www.w3.org/People/howcome/p/cascade.html) --- ## Letem swwwětem --- ### Prohlížeče **Firefox 137** _vydán 1. dubna 2025_ <!-- .element: class="fragment" --> **Chrome 135** _vydán 26. března 2025_ <!-- .element: class="fragment" --> **Safari 18.4** _vydáno 31. března 2025_ <!-- .element: class="fragment" --> note: --- ### Web platform status --- #### ![štítek Baseline, běžně dostupné](https://hackmd.io/_uploads/rJEtkiR0C.svg =10%x) běžně dostupné: 4/2025 - [forced colours](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors) - [motion path](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_motion_path) - [`overflow: clip`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#clip), [`overscroll-behavior`](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) - [`text-align-last`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last) - [`@media (resolution: 300dpi)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution) - [Permissions](https://developer.mozilla.org/en-US/docs/Web/API/Permissions) note: - běžně dostupné (widely available): 2,5 roku od chvíle kdy fičuru implementoval poslední z trojice CH, FF, SF --- #### ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =10%x) nově dostupné: 4/2025 - [`ClipboardItem.supports()`](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardItem/supports_static) - Screen wake lock: [`navigator.wakeLock.request("screen")`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/wakeLock) note: - nově dostupné: aktuální verze CH, FF, SF podporují - kontrola typu obsahu ve schránce - možnost zastavit spořič obrazovky přes Navigator API (CH 7/20, SF 3/23, FF 5/24) --- #### ![štítek Baseline, omezená dostupnost](https://hackmd.io/_uploads/Byn74jCCA.svg =10%x) omezená dostupnost: 4/2025 - [stylovatelný `<select>`](https://codepen.io/web-dot-dev/pen/gbOKyRZ) <!-- .element: class="fragment" --> ```css! .custom-select { &, &::picker(select) { appearance: base-select; } } ``` <!-- .element: class="fragment" --> - [`shape()`](https://developer.chrome.com/blog/css-shape?hl=en) <!-- .element: class="fragment" --> note: - dostupné jen v některých prohlížečích - [`<select>` CH135](https://developer.chrome.com/blog/a-customizable-select?hl=en) - `shape()` CH135, SF18.4, [KoutPen](https://codepen.io/web-dot-dev/pen/YPzgNrL) --- ## Zachyceno v síti --- ### [John Allsopp: A dao of web design](https://alistapart.com/article/dao/) - nechtějme mít kontrolu nad uživatelovým prohlížečem… <!-- .element: class="fragment" --> - náš design je pouze návrh, jak by mohla stránka vypadat… <!-- .element: class="fragment" --> - nevíme, na jakém zařízení si ji uživatelé zobrazí, zobrazí-li vůbec (čtečky)… <!-- .element: class="fragment" --> - úhelným kamenem je oddělit obsah od vzhledu… <!-- .element: class="fragment" --> - odstřihněme se od tiskového designu… <!-- .element: class="fragment" --> - vyšlo 7. dubna **2000**<!-- .element: class="fragment" --> <!-- .element: class="fragment" --> note: - smiřme se s tím, že nemáme finální vzhled pod kontrolou - přemýšlejme o tom, co má stránka poskytovat, ne jak má vypadat - od tisku jsme se odstřihli, ale vzdát se kontroly nám pořád moc nejde (vliv imperativního programování???) --- ### [CSS naked day](https://cssence.com/about/css-naked-day/) --- ### [CSS funkce…](https://www.bram.us/2025/02/09/css-custom-functions-teaser/) ```css! @function --negate(--value) { result: calc(-1 * var(--value)); } ``` <!-- .element: class="fragment c-text-sm" --> ```css! .prvok { margin-inline: --negate(1rem); /* = -1rem */ } ``` <!-- .element: class="fragment c-text-sm" --> note: - za flagem v canary, [KoutPen](https://codepen.io/Kout/pen/GgRawPx) - měly být už v CH136, ale odsunuty do 139 (7/25), abychom mohli experimentovat a hlásit potíže --- ### [… a mixiny](https://nerdy.dev/css-mixins-ready-for-experimentation) [vysvětlující článek od Miriame Suzanne](https://css.oddbird.net/sasslike/mixins-functions/) ```css! @mixin --box { aspect-ratio: 1; inline-size: 100px; block-size: 100px; } .box { @apply --box; } ``` note: - zatím je potřeba Canary a spustit z terminálu pomocí `open -a "Google Chrome Canary" --args --enable-features=CSSMixins` --- ## Nástroje a udělátka --- ### [UA+ (CSS reset) od Manuela Matuzoviće](https://fokus.dev/tools/uaplus/) note: - vše pěkně odůvodněno - [porovnání různých sjednocovacích stylopisů](https://fokus.dev/tools/uaplus/embedded-content/img/) - není dogma, vyberte si, co vám libo --- ## KoutPen --- ### Adam Argyle - [CSS carousel](https://codepen.io/argyleink/pen/KwKNaja) - [goniometrické funkce](https://codepen.io/argyleink/pen/OJozxrB) - [škálování nadpisů matematicky](https://codepen.io/argyleink/pen/jOovoav) - [scroll animation na variabiliním fontu](https://codepen.io/Kout/pen/RNwmxzm?editors=1100) - [scroll animation…](https://codepen.io/argyleink/pen/ZEdrzJZ?editors=1100) note: - [Carousel with CSS](https://developer.chrome.com/blog/carousels-with-css?hl=en) - goniometrické fce: až bude podpora `sibling-index()` půjde to bez atributu `style` - [Smashing meets CSS](https://smashing-meets-rad-css.netlify.app/) --- ## Dnes wwwečer - **Denis Homolík**, [signageOS](https://www.signageos.io/) TS Compiler API - **Marcel Veselka**, zakladatel [Wopee.io](http://wopee.io/) AI Agenti pro Testování softwaru v Playwrightu - **Jiří Zbytovský**, React Developer v [Trezor](https://trezor.io/) Multiplatformní aplikace: jak vyvíjet pro web i Electron --- [![image](https://hackmd.io/_uploads/H1hWcLxCkl.png =50%x)](https://mastodon.social/@oatmeal/114268988772465173) Díky, prezentace v komentáři na [Meetup.com](https://www.meetup.com/frontendisti/)