--- title: "11. září ’24" tags: frontendisti --- {%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %} <style> svg { padding: 1em; background-color: var(--body-bg); color: var(--primary-color); } </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> # CDN77 <br> <small>Praha, 11. září ’24</small> <!-- .element: class="text-center" --> <small>Brno dnes: Diskuzní večer o tom, jak začít dělat vývojáře na volné noze</small><!-- .element: class="fragment" --> <small>příště: 9. října, O<sub>2</sub> universum: [FrontKon](https://frontkon.cz/#program)</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á - [Odhalení mýtů o webové přístupnosti](https://www.youtube.com/watch?v=5h8AeruY4L4) <!-- .element: class="fragment" --> - Heydon Pickering – [What is React.js](https://briefs.video/videos/what-is-react/) <!-- .element: class="fragment" --> note: - v 5 minutách a 1 sekundě vysvětlí Heydon Pickering - doporučuji si projít přepis pod videem s režisérskými poznámkami - zajímavé související články: - [Reckoning: Part 1 — The Landscape](https://infrequently.org/2024/08/the-landscape/) - [Virtual DOM Is Pure Overhead](https://svelte.dev/blog/virtual-dom-is-pure-overhead) --- # Letem swwwětem note: --- ### Prohlížeče note: --- #### Firefox 130 _vydán 3. září 2024_ - [nativní akordeon pomocí](https://codepen.io/Kout/pres/XWLGjbg) <!-- .element: class="fragment" --> ```htmlembedded= <details name="program">…</details> <details name="program">…</details> ``` <!-- .element: class="fragment c-text-sm" --> - opravena chyba 1908931 <!-- .element: class="fragment" --> - [@property](https://web.dev/blog/at-property-baseline) <!-- .element: class="fragment" --> note: - KoutPen: akordeon; `details` se seskupí atributem `name` - [chyba 1908931](https://bugzilla.mozilla.org/show_bug.cgi?id=1908931): nefunkční rozdělování slov ve slovenštině a češtině - Ondřej Sojka (je přítomen?) nahlásil 19. července, opraveno za 2 měsíce - `@property` od 9/7 široce dostupné - ukázat rozdíl mezi initial value a výchozí hodnotou `var(--vlastnost, záchranná hodnota)` - výchozí hodnota je povinná - Una Kravets vysvětluje, co se dá dělat s @property --- #### Chrome 129 _vydán 11. září 2024_ - funkce `calc-size()` <span>umožní animovat</span><!-- .element: class="fragment" --> - `auto` <!-- .element: class="fragment c-text-sm" --> - `min-content` <!-- .element: class="fragment c-text-sm" --> - `max-content` <!-- .element: class="fragment c-text-sm" --> - `fit-content` <!-- .element: class="fragment c-text-sm" --> - `stretch` <!-- .element: class="fragment c-text-sm" --> - `contain` <!-- .element: class="fragment c-text-sm" --> note: - `calc-size()` umožňuje animovat nečíselné hodnoty --- #### Safari 17.6 _vydáno 29. července 2024_ note: - opravy, na obzoru je 18 --- ## Zachyceno v síti --- ### [State of CSS](https://survey.devographics.com/cs-CZ/survey/state-of-css/2024) note: - díky Adamovi Kudrnovi i česky - uzavřeno minulý týden, výsledky snad do FrontKonu, povíme si v listopadu Co jsem nevěděl, nebo zapomněl: - backdrop-filter - linear() Easing Function - offset-path - overscroll-behavior (zapomněl, představoval jsem v nowwwinkách 5/22) - scrollbar-gutter - scroll-timeline - view-timeline - Discrete Properties Animations - hanging-punctuation - Sign-Related Functions - Stepped Value Functions - image() --- ### [Web components](https://learn-wcs.com/) note: - praktické články a návody --- ### Přístupnost ze zákona - „Evropský akt přístupnosti“ <!-- .element: class="fragment c-text-sm" --> - v platnost: 28. června 2025 <!-- .element: class="fragment c-text-sm" --> - [WCAG (Web Content Accessibility Guidelines)](https://www.w3.org/TR/WCAG21/) <!-- .element: class="fragment c-text-sm" --> - netýká se _mikropodniků_ (do 10 zaměstnanců a do 2 mil. EUR obratu) <span>– zatím</span><!-- .element: class="fragment" --> <!-- .element: class="fragment c-text-sm" --> note: - video Kristýny Markové - v červnu vstoupí v platnost (111. výročí atentátu na Ferdinanda d’Este v Sarajevu… Snad to nebude mít také taky takové následky :stuck_out_tongue_winking_eye:) > Nenechte se uchlácholit výjimkou pro mikropodniky. Mikropodnik neznamená provozovatele webu, resp. u jednoho s.r.o., ale u všech partnerských nebo propojených podniků. Tím jsou typicky další právnické osoby, které mají podíl na tom s.r.o s e-shopem, nebo na kterých má podíl právě to s.r.o. s e-shopem… Stejně tak se typicky přičtou další právnické osoby přes společníka, který má 50 % a podíly na dalších společnostech. - díky Karel Navrátil za právnické okénko: více na jeho přednášce na FrontKonu - weby bychom ovšem měli stavět přístupně zákon nezákon, resp. ze zákona slušnosti --- ### Heydon Pickering [série článků u HTML prvcích](https://heydonworks.com/latest/) note: - jede přísně podle abecedy zatím pokryl písmeno A, takže (vyjmenujeme všecky prvky na A? Je jich 7.): - [The anchor element](https://heydonworks.com/article/the-anchor-element/) - [The abbr element](https://heydonworks.com/article/the-abbr-element/) - [The address element](https://heydonworks.com/article/the-address-element/) - [The area element](https://heydonworks.com/article/the-area-element/) - [The article element](https://heydonworks.com/article/the-article-element/) - [The aside element](https://heydonworks.com/article/the-aside-element/) - [The audio element](https://heydonworks.com/article/the-audio-element/) - z Heydonovy timeliny (důkaz, že AI stále blouzní): ![AI blouzní i o běžných pojmech…](https://hackmd.io/_uploads/BkxJJW0hC.png) --- ## Nástroje a udělátka --- ### [Accessibility Acceptance Criteria](https://www.magentaa11y.com/) note: - zevrubný souhrn toho co a jak testovat přístupnost komponent nebo procházení webu na čtecím zařízení - návody v markdownu, tj. snadno si je přenesete do své dokumentace, nebo nástroje na řízení projektů (jako zadání pro kolegu) --- ### [Perfect debugger](https://www.perfectbugreport.io/) note: - jestli vás štvou kolegové, co vám hlásí chyby lakonickými výkřiky: „Nefunguje web!“ nebo „Je to rozbitý!“, pošlete je (to taky můžete, ale nikam to nevede, věřte mi) na Perfect debugger --- ## [KoutPen](https://codepen.io/Kout/pres/LYKXQgj) note: - ukázka animace vlastností normálně neanimovatelných --- ## Dnes - **Opi Danihelka**, Frontend Platform Engineer [Postman](https://www.postman.com/) Jak postavit Continuous Integration pipeline pro velké frontend monorepo - **Pavel Cvetler** Reflektuj, plánuj, uspěj: Umění retrospektivy času - **Jenda Horák**, [CDN77](https://www.cdn77.com/) Passkeys: zapomeňme konečně na hesla note: - prožram --- Díky, prezentace v komentáři na [Meetup.com](https://www.meetup.com/frontendisti/)