--- title: "11. června ’25" tags: frontendisti --- {%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %} <style> svg { padding: 1em; background-color: #1c1200; color: #ffb000; } </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, Alma career<br> 11. června ’25<!-- .element: class="text-center" --> <small>Brno dnes: Diskusní večer o UX, Frontendu a AI – Jak na produktivní workflow</small><!-- .element: class="fragment" --> <small>příště: 10. září</small><!-- .element: class="fragment" --> <small>jinde: 25. června, Techtalk (SinageOS)</small><!-- .element: class="fragment" --> <small>přespříště: 1. října, FrontKon (Hotel Passage Brno)</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) --- ## WWW minulém díle jste viděli <!-- .element: class="text-center" --> - Kristýna Marková - [Robot prošel, člověk narazil: proč nestačí automatizované testy přístupnosti](https://www.youtube.com/watch?v=X9DLmTNaNu4) <!-- .element: class="c-text-sm fragment" --> - Lukáš Kratochvíl - [I Know Kung Fu – Jak MCP odemyká skryté síly umělé inteligence](https://www.youtube.com/watch?v=iz4PZw2XWJo) <!-- .element: class="c-text-sm fragment" --> - Z. Pešková, I. Zatloukalová, M. Velas - [Panelová diskuze: Jak si říci o peníze – a nejen o ně](https://www.youtube.com/watch?v=65W-yTfpUs0) <!-- .element: class="c-text-sm fragment" --> note: - automatizované testy odhalí 20 % chyb - MCP = Model context protocol - videa z Webexpa --- ## Letem swwwětem --- ### Prohlížeče **Firefox 139** _vydán 27. května 2025_ <!-- .element: class="fragment" --> **Chrome 137** _vydán 21. května 2025_ <!-- .element: class="fragment" --> **Safari 18.5** _vydáno 12. května 2025_ <!-- .element: class="fragment" --> note: - FF: Temporal API - CH: CSS `if()` - SF: příští verze bude 26 (nové číslování u Applu) --- ### Web platform status --- #### ![štítek Baseline, běžně dostupné](https://hackmd.io/_uploads/rJEtkiR0C.svg =10%x) běžně dostupné: 5/2025 - `font-palette` note: - běžně dostupné (widely available): 2,5 roku od chvíle kdy fičuru implementoval poslední z trojice CH, FF, SF - `font-palette`: vlastnost, která určí konrétní paletu u barevných fontů --- #### ![štítek Baseline, nově dostupné](https://hackmd.io/_uploads/BJaeQjR0A.svg =10%x) nově dostupné: 5/2025 - `dialog.requestClose()` note: - nově dostupné: aktuální verze CH, FF, SF podporují - metoda zavře dialog a navíc odpálí metodu `cancel` --- #### ![štítek Baseline, omezená dostupnost](https://hackmd.io/_uploads/Byn74jCCA.svg =10%x) omezená dostupnost: 5/2025 - `reading-flow` & `reading-order` <!-- .element: class="c-text-sm fragment" --> - `if()` <!-- .element: class="c-text-sm fragment" --> ```css= property: if( style(<condition>): <value>; style(<another condition>): <another value>; else: <fallback> ); ``` <!-- .element: class="c-text-xs fragment" --> note: - dostupné jen v některých prohlížečích - `reading-flow` - [pořadí prvků nemusí](https://developer.chrome.com/blog/reading-flow) už odpovídat pořadí v DOMu --- #### ![štítek Baseline, omezená dostupnost](https://hackmd.io/_uploads/Byn74jCCA.svg =10%x) omezená dostupnost: 5/2025 **CSS `if()`** ```css div { color: var(--color); background-color: if( style(--color: white): black; media(width > 600px): crimson; else: white ); } .dark { --color: black; } .light { --color: white; } ``` <!-- .element: class="c-text-xs" --> --- ## Zachyceno v síti --- [Stav CSS](https://stateofcss.com/cs-CZ/) ![Zahájit průzkum CSS](https://hackmd.io/_uploads/H18pQfImgg.png) --- ### [Tiskové styly](https://piccalil.li/blog/printing-the-web-making-webpages-look-good-on-paper/) note: - Proč? A11y, státní správa atp. – záleží… - [Jak si upravit web](https://piccalil.li/blog/some-simple-ways-to-make-content-look-good/) - prostý návod jak obyčejnou stránku **pěkně** ostylovat --- ### [Ostylujte `alt` text](https://piccalil.li/blog/you-can-style-alt-text-like-any-other-text/) ```css img { display: block; max-width: 100%; font-style: italic; font-size: var(--size-step-1); line-height: 1.5; text-wrap: balance; } ``` <!-- .element: class="c-text-xs" --> note: - událost `onerror` máte v základu - háčky: 1. Safari 2. vyplňovat `alt` --- #### [Ostylujte `alt` text](https://piccalil.li/blog/you-can-style-alt-text-like-any-other-text/) ```js const images = document.querySelectorAll("img"); if (images) { images.forEach((image) => { image.onerror = () => { image.setAttribute("data-img-loading-error", ""); }; }); } ``` <!-- .element: class="c-text-xs" --> --- ![Můžu se naučit javascript, aniž bych se nejprve naučil react?](https://hackmd.io/_uploads/HJFlM6E7gx.jpg) --- ![tusky_share_media_20241202_193724](https://hackmd.io/_uploads/BJrPR22Xkg.png =40%x) --- <h3>Typografie <span class="fragment">pro nejmenší</span></h3> <div style="display: flex; justify-content: space-around; background-color: #ffd7" class="fragment"> <img alt="šerif" src="https://hackmd.io/_uploads/HJt49pNmlx.png" width="350" class="fragment"> <img alt="sans-šerif" src="https://hackmd.io/_uploads/Sy9dyMwXgx.png" width="350" class="fragment"> </div> note: - najděte 5 rozdílů --- ### [CSS carousel není přístupný](https://www.sarasoueidan.com/blog/css-carousels-accessibility/) note: - [článek od Adama Argylea](https://developer.chrome.com/blog/carousels-with-css) - [Sara Soueidan rozebírá nový návrh od Googlu na prvočinitele](https://www.sarasoueidan.com/blog/css-carousels-accessibility/) - [Adrian Roselli rovnou obviňuje Google](https://adrianroselli.com/2025/05/my-request-to-google-on-accessibility.html), že vydá něco nehotového a chce od dobrovolníků, aby za něj přístupnost dotáhli --- ## Nástroje a udělátka --- ### [Prostě QR kód](https://justaqrcode.com/) --- ### [Starý dobrý(?) Google](https://udm14.com/) - [dotaz](https://www.google.com/search?q=jak+vycentrovat+div&newwindow=1&sca_esv=8216bfb635286ce0&sxsrf=AE3TifNinAqkK2ErHQs0JSNKNLGHtQ3nTA%3A1749654261675&source=hp&ei=9ZpJaISnJ5OI7NYPm63vwAQ&iflsig=AOw8s4IAAAAAaEmpBfpsJoFGa8N2SwBhMoAjKV1sOkYl&oq=jak+&gs_lp=Egdnd3Mtd2l6IgRqYWsgKgIIADIEECMYJzIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAuGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQABiABEi7EFAAWIgDcAB4AJABAJgBlgGgAYIEqgEDMC40uAEDyAEA-AEBmAIEoAKWBMICEBAjGPAFGIAEGCcYyQIYigXCAgsQABiABBiRAhiKBcICChAAGIAEGEMYigWYAwCSBwMwLjSgB7k0sgcDMC40uAeWBMIHBTAuMi4yyAcQ&sclient=gws-wiz) - [tentýž dotaz od plic](https://www.google.com/search?q=jak+vycentrovat+div+kurva&newwindow=1&sca_esv=8216bfb635286ce0&sxsrf=AE3TifPtSUfWsWHSlKau6wnKIfTksDCj4w%3A1749654304810&source=hp&ei=IJtJaPe_L-6Pxc8PiZDamAs&iflsig=AOw8s4IAAAAAaEmpMFKChDBeAesOCvCQDzCbx2r3pln_&ved=0ahUKEwj3z8Oa0umNAxXuR_EDHQmIFrMQ4dUDCBc&uact=5&oq=jak+vycentrovat+div+kurva&gs_lp=Egdnd3Mtd2l6IhlqYWsgdnljZW50cm92YXQgZGl2IGt1cnZhSIErUL4RWOoocAR4AJABAJgBkgGgAYUIqgEDMC45uAEDyAEA-AEBmAILoALWBqgCCsICBxAjGCcY6gLCAgoQIxjwBRgnGOoCwgIIEAAYgAQYogTCAgQQIxgnwgIHECMYsAIYJ8ICBRAhGKABwgIFEAAY7wWYAwjxBQagfo7vm6pCkgcDNC43oAepFbIHAzAuN7gHyAbCBwYwLjEwLjHIBxQ&sclient=gws-wiz) - [tentýž dotaz](https://www.google.com/search?q=jak%20vycentrovat%20div&udm=14) note: - trik je v [parametru `&udm=14`](https://udm14.com/) --- ## KoutPen --- ### [A11y: ARIA](https://codepen.io/collection/rBNWPv) note: - sbírka koutpenů od Manuela Matuzoviće, různé použití `aria-` atributů --- #### Ještě k přístupnosti… > A `<div>` is not a `<button>`, but a `<Button>` is often a `<div>`. — Manuel Matuzović <!-- .element: class="text-right" --> --- <iframe height="650" style="width: 100%;" scrolling="no" title="Sticky revealing footer by Andy Bell" src="https://codepen.io/Kout/embed/emNeGdX?default-tab=result&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/Kout/pen/emNeGdX"> Sticky revealing footer</a> by Tomáš Kout (<a href="https://codepen.io/Kout">@Kout</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> note: - [opsáno od Andy Bella](https://piccalil.li/blog/sticky-revealing-footer/) --- <iframe height="650" style="width: 100%;" scrolling="no" title="Selective saturation on hover" src="https://codepen.io/thebabydino/embed/ZEgWWQX?default-tab=result&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/thebabydino/pen/ZEgWWQX"> Selective saturation on hover</a> by Ana Tudor (<a href="https://codepen.io/thebabydino">@thebabydino</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> --- ### Čtení na prázdniny: SVG animace 1. [How Classic Cartoons Inspire Modern CSS](https://www.smashingmagazine.com/2025/05/smashing-animations-part-1-classic-cartoons-inspire-css/) 2. [How CSS Masking Can Add An Extra Dimension](https://www.smashingmagazine.com/2025/05/smashing-animations-part-2-css-masking-add-extra-dimension/) 3. [SMIL’s Not Dead Baby, SMIL’s Not Dead](https://www.smashingmagazine.com/2025/05/smashing-animations-part-3-smil-not-dead/) 4. [Optimising SVGs](https://www.smashingmagazine.com/2025/06/smashing-animations-part-4-optimising-svgs/) --- ### VC (vendor lock) ![vendor-lock-wc](https://hackmd.io/_uploads/r1H9G64mxg.png) <!-- .element: class="c-text-center" --> --- <iframe height="600" style="width: 100%;" scrolling="no" title="Proximity Reactions (CSS version)" src="https://codepen.io/amit_sheen/embed/gbbzbeR?default-tab=js%2Cresult&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/amit_sheen/pen/gbbzbeR"> Proximity Reactions (CSS version)</a> by Amit Sheen (<a href="https://codepen.io/amit_sheen">@amit_sheen</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> --- ## Dnes wwwečer - **[Adam Kudrna](https://frontend.garden/autor/adam-kudrna/)** CSS subgrid - **Petr Koláček**, [Etnetera](https://www.etnetera.cz/) Mobile First – proč neustále ignorujeme skutečnost? - **Tomáš Zezula**, [Upheal](https://www.upheal.io/uk) GraphQL pro správu licencí a feature flagů v SaaS aplikacích note: - přestávka po první přednášce? - Upheal pořizuje poznámky během sezení u psychologa --- --- Díky, prezentace v komentáři na [Meetup.com](https://www.meetup.com/frontendisti/)