15. května ’24 | {𝐅}rontendisti

--- title: "15. května ’24 | {𝐅}rontendisti" tags: frontendisti --- {%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 109.318" style="margin-block: 2rem;"> <title>Frontendisti.cz - Budujeme a vzděláváme komunitu frontendových vývojářů a designérů</title> <g id="mr-white"> <path fill="#fffef4" d="M101.782 9.938q0 3.074.2 4.969h-1.5q-1.3-7.388-3.907-10.4a9.133 9.133 0 00-7.292-3.008h-2.149a9.457 9.457 0 00-2.93.327 1.957 1.957 0 00-1.237 1.275 10.2 10.2 0 00-.326 3.04v16.476h2.279a6 6 0 005.242-2.55 15.979 15.979 0 002.507-6.08h1.5q-.2 2.746-.2 6.146v3.138q0 3.334.391 9.284h-1.5q-1.367-8.63-7.944-8.63h-2.279v15.038a9.774 9.774 0 00.554 3.825 2.87 2.87 0 001.953 1.6 19.7 19.7 0 004.46.458v1.438q-8.009-.2-11.915-.2-3.256 0-8.2.131l-2.083.065v-1.308a11.263 11.263 0 003.158-.523 2.259 2.259 0 001.367-1.5 12.879 12.879 0 00.358-3.6V6.93a12.9 12.9 0 00-.358-3.6 2.26 2.26 0 00-1.367-1.5 11.287 11.287 0 00-3.158-.523V0q7.032.2 21.226.2 9.571 0 13.608-.2-.458 5.558-.458 9.938z"></path> <path fill="#fffef4" d="M132.124 13.337a6.353 6.353 0 011.5 4.25 5.646 5.646 0 01-1.4 3.956 4.742 4.742 0 01-3.679 1.536 5.137 5.137 0 01-3.516-1.144 3.845 3.845 0 01-1.3-3.04 5.942 5.942 0 012.865-5.1 3.487 3.487 0 00-.781-.065 3.4 3.4 0 00-1.042.131 6.2 6.2 0 00-4.2 3.008 9.624 9.624 0 00-1.725 5.361v17.326q0 3.009 1.465 4.184a7.422 7.422 0 004.656 1.177v1.373a13.9 13.9 0 01-1.5-.065q-6.641-.2-8.855-.2-1.758 0-8.009.2a10.71 10.71 0 01-1.3.065v-1.373a4.248 4.248 0 003.256-1.013q.911-1.013.912-3.694v-20.6a8.13 8.13 0 00-.912-4.38 3.617 3.617 0 00-3.256-1.373v-1.373q2.083.2 4.037.2a40.7 40.7 0 009.506-.915v6.08a11.083 11.083 0 013.581-4.544 8.657 8.657 0 015.271-1.733 5.484 5.484 0 014.426 1.765z"></path> <path fill="#fffef4" d="M163.312 15.854q4.231 4.283 4.232 13.567t-4.232 13.534q-4.234 4.251-11.72 4.25-7.423 0-11.687-4.25t-4.265-13.534q0-9.283 4.265-13.567t11.687-4.283q7.487.001 11.72 4.283zm-16.18 1.112q-1.66 4.087-1.66 12.455t1.66 12.422q1.66 4.054 4.46 4.054 2.865 0 4.493-4.021t1.628-12.455q0-8.434-1.66-12.488t-4.46-4.054q-2.801.001-4.461 4.087z"></path> <path fill="#fffef4" d="M202.965 14.122a7.153 7.153 0 011.562 3.2 24.415 24.415 0 01.456 5.3V40.21q0 2.682.945 3.694a4.259 4.259 0 003.223 1.013v1.373q-6.512-.261-8.594-.261-1.954 0-8.465.261v-1.373a3.254 3.254 0 002.735-1.013 6.329 6.329 0 00.781-3.694V19.872a7.582 7.582 0 00-.879-4.054 3.457 3.457 0 00-3.157-1.373 5.812 5.812 0 00-4.558 2.19 7.971 7.971 0 00-1.889 5.394v18.176a6.328 6.328 0 00.782 3.694 3.252 3.252 0 002.735 1.013v1.373q-5.992-.261-8.074-.261-1.954 0-8.985.261v-1.373a4.251 4.251 0 003.255-1.013q.91-1.013.911-3.694v-20.6a8.137 8.137 0 00-.911-4.38 3.619 3.619 0 00-3.255-1.373v-1.373q2.082.2 4.037.2a40.692 40.692 0 009.506-.915v5.884q2.93-6.08 10.679-6.081 4.944.005 7.16 2.555z"></path> <path fill="#fffef4" d="M224.777 12.488h7.683v1.308h-7.683V40.21a4.368 4.368 0 00.683 2.779 2.685 2.685 0 002.181.817q2.8 0 4.427-3.923l1.107.589q-2.475 6.734-8.92 6.734-4.3 0-6.511-2.223a7.06 7.06 0 01-1.856-3.432 25.677 25.677 0 01-.488-5.656v-22.1h-5.467v-1.308h5.469v-8.63a19.852 19.852 0 009.377-2.092z"></path> </g> <path fill="#ffb100" d="M80.296 108.402q-4.428-.2-14.911-.2-14.195 0-21.226.2v-1.308a11.265 11.265 0 003.158-.523 2.258 2.258 0 001.367-1.5 12.885 12.885 0 00.358-3.6V69.042a12.906 12.906 0 00-.358-3.6 2.26 2.26 0 00-1.367-1.5 11.284 11.284 0 00-3.158-.523v-1.307q7.032.2 21.226.2 9.571 0 13.608-.2-.456 5.427-.456 9.676a38.388 38.388 0 00.2 4.446h-1.5q-.977-7-3.516-9.807a9.161 9.161 0 00-7.162-2.815H63.89a9.46 9.46 0 00-2.93.327 1.958 1.958 0 00-1.237 1.275 10.2 10.2 0 00-.326 3.04v16.218h2.084a6 6 0 005.241-2.55 15.979 15.979 0 002.507-6.081h1.5q-.2 2.746-.2 6.146v3.138q0 3.334.391 9.284h-1.5q-1.367-8.63-7.944-8.63h-2.084v16.476a10.194 10.194 0 00.326 3.04 1.954 1.954 0 001.237 1.275 9.436 9.436 0 002.93.327h3.19a9.515 9.515 0 007.455-3.171q2.832-3.171 4-10.755h1.5q-.2 2.157-.2 5.492a88.845 88.845 0 00.466 9.939z"></path> <path fill="#ffb100" d="M116.171 76.235a7.157 7.157 0 011.563 3.2 24.433 24.433 0 01.456 5.3v17.588q0 2.682.944 3.694a4.261 4.261 0 003.223 1.013v1.373q-6.512-.261-8.595-.261-1.954 0-8.465.261v-1.373a3.253 3.253 0 002.735-1.013 6.327 6.327 0 00.781-3.694V81.985a7.587 7.587 0 00-.879-4.054 3.457 3.457 0 00-3.158-1.373 5.814 5.814 0 00-4.558 2.19 7.971 7.971 0 00-1.888 5.394v18.176a6.33 6.33 0 00.781 3.694 3.254 3.254 0 002.735 1.013v1.373q-5.991-.261-8.074-.261-1.953 0-8.985.261v-1.373a4.249 4.249 0 003.255-1.013q.911-1.013.912-3.694v-20.6a8.129 8.129 0 00-.912-4.381 3.617 3.617 0 00-3.255-1.373v-1.373q2.083.2 4.037.2a40.7 40.7 0 009.506-.915v5.884q2.93-6.08 10.678-6.081 4.948.006 7.163 2.556z"></path> <path fill="#ffb100" d="M157.712 105.59a3.616 3.616 0 003.256 1.373v1.373q-2.02-.2-4.037-.2a40.69 40.69 0 00-9.506.915v-5.623a8.339 8.339 0 01-8.465 5.884 11.854 11.854 0 01-9.734-4.479q-3.614-4.478-3.549-13.5a22.775 22.775 0 011.856-9.709 13.352 13.352 0 015.144-5.95 14.209 14.209 0 017.52-1.994q4.753 0 7.228 2.485V65.054a7.9 7.9 0 00-.944-4.381 3.63 3.63 0 00-3.223-1.373v-1.373q2.082.2 4.037.2a41.727 41.727 0 009.506-.915v44a8.114 8.114 0 00.911 4.378zm-12.274-.654a6.747 6.747 0 001.986-4.25V77.808a5.526 5.526 0 00-4.753-2.223q-3.452 0-5.339 3.988t-1.823 11.9q-.066 7.977 1.53 11.507t4.59 3.531a5.387 5.387 0 003.81-1.575z"></path> <path fill="#ffb100" d="M177.245 102.321q0 2.682.944 3.694a4.258 4.258 0 003.222 1.013v1.373q-6.512-.261-8.66-.262-2.019 0-9.05.262v-1.37a4.25 4.25 0 003.255-1.013q.911-1.013.911-3.694V81.726a8.129 8.129 0 00-.911-4.38 3.619 3.619 0 00-3.255-1.373V74.6q2.083.2 4.036.2a40.7 40.7 0 009.507-.915zm-.749-43.25a5.073 5.073 0 010 7.388 7.663 7.663 0 01-8.659 0 5.073 5.073 0 010-7.388 7.663 7.663 0 018.659 0z"></path> <path fill="#ffb100" d="M201.661 74.306a11.119 11.119 0 013.191 1.406 2.1 2.1 0 001.171.458 1.213 1.213 0 001.01-.621 4.008 4.008 0 00.553-1.8h1.367q-.261 3.334-.26 11.507h-1.368a16.606 16.606 0 00-2.571-7.225 6.546 6.546 0 00-5.762-2.909 4.719 4.719 0 00-3.224 1.111 3.874 3.874 0 00-1.269 3.073 5.4 5.4 0 001.5 3.825 32.8 32.8 0 004.688 3.89l1.888 1.373a33.816 33.816 0 015.86 5.361 9.11 9.11 0 011.888 5.884 8.3 8.3 0 01-1.66 5.1 10.517 10.517 0 01-4.46 3.4 15.817 15.817 0 01-6.186 1.177 12.7 12.7 0 01-6.12-1.373 31.852 31.852 0 00-3-1.373 1 1 0 00-1.14.425 4.545 4.545 0 00-.749 1.863h-1.361q.26-3.727.26-13.076h1.367q1.3 12.03 8.79 12.03a4.781 4.781 0 003.222-1.144 4.357 4.357 0 001.335-3.5 6.533 6.533 0 00-.814-3.269 10.128 10.128 0 00-2.051-2.55q-1.238-1.111-3.711-3.073-2.93-2.354-4.461-3.792a13.574 13.574 0 01-2.6-3.4 8.966 8.966 0 01-1.074-4.381 7.785 7.785 0 013.256-6.6 12.95 12.95 0 017.944-2.419 15.916 15.916 0 014.551.622z"></path> <path fill="#ffb100" d="M227.51 74.6h7.683v1.308h-7.683v26.414a4.376 4.376 0 00.683 2.779 2.688 2.688 0 002.182.817q2.8 0 4.427-3.923l1.108.589q-2.476 6.734-8.921 6.734-4.3 0-6.511-2.223a7.056 7.056 0 01-1.855-3.432 25.667 25.667 0 01-.488-5.656v-22.1h-5.47v-1.308h5.47v-8.631a19.85 19.85 0 009.376-2.092z"></path> <path fill="#ffb100" d="M250.754 102.321q0 2.682.944 3.694a4.258 4.258 0 003.223 1.013v1.373q-6.511-.261-8.66-.262-2.019 0-9.051.262v-1.37a4.248 4.248 0 003.255-1.013q.912-1.013.912-3.694V81.726a8.127 8.127 0 00-.912-4.38 3.617 3.617 0 00-3.255-1.373V74.6q2.082.2 4.037.2a40.7 40.7 0 009.506-.915zm-.749-43.25a5.076 5.076 0 010 7.388 7.665 7.665 0 01-8.661 0 5.076 5.076 0 010-7.388 7.666 7.666 0 018.661 0z"></path> <path id="mr-white" fill="#fffef4" d="M0 53.482v1.046h.521a6.56 6.56 0 014.9 2.563q1.665 2.251 2.344 7.532a129.867 129.867 0 01.677 15.325q0 9.624 2.188 14.959a13.3 13.3 0 007.032 7.48q4.844 2.143 13.491 2.145v-1.988q-3.438-.1-4.948-1.517t-2.136-6.015a126.243 126.243 0 01-.625-15.064q0-12.761-5.521-18.516T2.92 53.582c.143-.031.275-.072.417-.1z"></path> <path fill="#ffb100" d="M296.671 53.482c.141.033.274.073.416.1q-9.481 2.094-15 7.846t-5.521 18.516a126.1 126.1 0 01-.625 15.064q-.625 4.6-2.135 6.015t-4.949 1.517v1.988q8.647 0 13.491-2.145a13.3 13.3 0 007.033-7.48q2.187-5.335 2.187-14.959a129.454 129.454 0 01.677-15.325q.676-5.281 2.345-7.532a6.551 6.551 0 014.9-2.563h.521v-1.042z"></path> <path id="mr-white" fill="#fffef4" d="M30.16 12.736q-2.188 5.178-2.187 14.489a131.048 131.048 0 01-.677 15.43q-.679 5.283-2.344 7.532a6.248 6.248 0 01-4.9 2.458h-.521v.837h3.334q9.177-2.124 14.584-7.689 5.52-5.7 5.521-18.568a119.877 119.877 0 01.625-14.593q.625-4.551 2.188-6.015a7.328 7.328 0 014.9-1.569V3.06q-8.544 0-13.439 2.249a13.726 13.726 0 00-7.084 7.427z"></path> <path fill="#ffb100" d="M275.05 50.187q-1.668-2.248-2.345-7.532a130.657 130.657 0 01-.677-15.43q0-9.309-2.187-14.489a13.736 13.736 0 00-7.085-7.427q-4.9-2.249-13.439-2.249v1.988a7.335 7.335 0 014.9 1.569q1.562 1.466 2.187 6.015a119.759 119.759 0 01.625 14.593q0 12.867 5.521 18.568 5.4 5.573 14.585 7.689h3.334v-.837h-.521a6.241 6.241 0 01-4.898-2.458z"></path> </svg> # Praha, [elpíčko](https://www.elpicko.cz/) 15. května ’24  příště: 12. června (upřesníme) mezitím v Brně: AI a přístupnost note: - poslední brněnský sraz, videa na našem YT kanále --- # 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 --- ## Dnes - Jiří Cerhan **Jak se stát lepším vývojářem i člověkem** - Jan Kryšpín **Unit testy v SCSS** - kwwwíz: 30% sleva na {F}rontKon note: - Honza Kryšpín: včera 33 - {F}ronKon: call for papers!!! - 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 - [Adam Kulhánek - Lifestyle medicína a zdravotní hacky pro vývojáře - jak přežít rutinu](https://www.youtube.com/watch?v=zzWfJDe0gZk) - [Pavel Ungr - SEO ještě neumřelo, co dělat aby žilo co nejdéle?](https://www.youtube.com/watch?v=xNiNbyx36HM) - [Adam Kudrna - Toast notifikace: kolik zvládne moderní CSS?](https://www.youtube.com/watch?v=q9yWJurjy5M) note: - všechny přednášky na minulém srazu zarezonovaly, každá na jinou strunu - Adam Kudrna - bude [přednášet i na Webexpu](https://webexpo.net/sessions/a-deep-dive-into-building-and-growing-a-multi-brand-design-system/) – od design systémech, jak jinak - dnes je to na den přesně 5 let, kdy na tehdejším srazu oznámil vznik [Frontend.garden](https://frontend.garden/) - YT kanálu Frontendisti.cz --- ### Prohlížeče note: --- #### Firefox 126 _vydán 14. května 2024_ - [`:state()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:state) note: - pseudotřída state pro custom elements => totéž i Chrome; Safari již v březnové verzi 17.4 - opravy a doplnění různých API, ale jinak nic, co by stálo za řeč --- #### Chrome 125 _vydán 8. května 2024_ - anchor positioning ```css= .kotva { anchor-name: --kotviste; } .plavidlo { bottom: anchor(--kotviste top); left: calc(anchor(--kotviste center) - (var(--sirka-plavidla) * 0.5)); } ```  note: - vztah kotva-plavidlo lze nastavit i v HTML pomocí atributu `anchor` (hodnotou je `id` kotvy) - [demo: anchor positioning](https://anchor-tool.com/) - [obsáhlý článek](https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning), který uvádí problematiku pomocí současných možnotí (JS, absolutní pozicování), řeší fallbacky, ošetřuje scrolování (využívá další vlastnost `anchor-scroll`) atd. - [KoutPen](https://codepen.io/web-dot-dev/pen/YzOXMYa) - Safari: stále čekáme na 17.5 (zatím jen beta) --- ## Zachyceno v síti --- Ondra Konečný pracuje na výzkumu > Identifikovat a analyzovat bariéry v psaní CSS, zlepšit informovanost mezi vývojáři a frontendovou komunitou a případně i podpořit inovaci nových i stávajících nástrojů. Kdo by chtěl poskytnout Ondřejovi 15–30 min času, nechť [vyplní dotazník](https://forms.gle/ib1vNyKgRuzCLTud8) --- ### [Help us invent CSS Grid Level 3, aka “Masonry” layout](https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/) note: - výzva --- [Bramus boří mýty okolo specificity](https://www.bram.us/2024/05/05/misconceptions-about-css-specificity/) `(1,0,2)`  1. specificita není destinné číslo  2. užitím atributu `style` nezvýšíme specificitu  3. ani užitím `!important` nezvýšíme specificitu  note: - nezvýšíme specificitu, i když to tak vypadá - když je toho moc, [použijte Bramusovu kalkulačku](https://codepen.io/bramus/full/WNXyoYm) --- ```js const compare = (s1, s2) => { if (s1.a === s2.a) { if (s1.b === s2.b) { return s1.c - s2.c; } return s1.b - s2.b; } return s1.a - s2.a; }; ``` note: - vyčíslení specificity pro javascripťáky --- ### [Heydon Pickering: What is utility-first CSS?](https://heydonworks.com/article/what-is-utility-first-css/) - utility first === exception first ```css p { margin-inline: 1rem; } ```  ```html And on and on and on and on etc etc ```  note: - používá někdo Tailwind - styluje výhradně pomocí TW? - pokud neznáte CSS, může vám TW přijít úžasný, ale pokud ho znáte…? Čím více znáte CSS, tím spíš nechápete k čemu utility-first framework. (A jakýkoli framework…) - utility => užitečnost, prospěšnst, což anglicky mluvící mate - aneb není užitečnější napsat pár řádků CSS nežli generovat HTML se spoustou tříd? - jestli se vám zdá, že něco chybí: spoustu už nastavují tzv. výchozí styly prohlížeče (user agent styles) --- ### [Heydon Pickering: What is utility-first CSS?](https://heydonworks.com/article/what-is-utility-first-css/) > I believe there’s a kind of CSS 80/20 rule wherein about 80% of your styling should be done with just 20% (or less!) of your CSS. Heydon Pickering note: - CSS umí spoustu: rozměry, barvy, rozvržení… nejde o to **co**, nýbrž **jak** - proč TW frčí? > návrhy, které máme za úkol kódovat, jsou často prdelní a my potřebujeme stejně pojebané nástroje, abychom je zvládli. Částečně je to proto, že zkurvené nástroje, které jsme si osvojili pro psaní zasraného JavaScriptu, si příliš nerozumí s CSS nebo třeba s HTML. --- ### [Tero Piirainen: Tailwind vs. Semantic CSS](https://nuejs.org/blog/tailwind-vs-semantic-css/) ![image](https://hackmd.io/_uploads/rkIOONjTp.png) note: - opakování kódu vs jeho opětovné užívání - Sémantická verze je několikrát menší (75 kb vs 8 kb), vykresluje se rychleji a nevyžaduje žádné další nástroje CSS. --- [Tero Piirainen: Tailwind vs. Semantic CSS](https://nuejs.org/blog/tailwind-vs-semantic-css/) ![image](https://hackmd.io/_uploads/B1geKVipp.png) note: - spousta zbytečného kódu --- [Tero Piirainen: Tailwind vs. Semantic CSS](https://nuejs.org/blog/tailwind-vs-semantic-css/) ![image](https://hackmd.io/_uploads/HycbYEjTp.png) note: - nejvíce autorovi vadí úzké svázání vzhledu s obsahem --- [Tero Piirainen: Tailwind vs. Semantic CSS](https://nuejs.org/blog/tailwind-vs-semantic-css/) ```htmlembedded=  <button className="group mb-8 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 transition dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0 dark:ring-white/10 dark:hover:border-zinc-700 dark:hover:ring-white/20 lg:absolute lg:-left-5 lg:mb-0 lg:-mt-2 xl:-top-1.5 xl:left-0 xl:mt-0">  <button class="secondary"> ```  --- > **But why is Tailwind so popular then?** > Because mastering CSS requires practice. It takes several failed attempts before you get it. Most developers haven't gone through that so they only remember the bad things.  note: - [CSS for JS devs](https://css-for-js.dev/) - autor slibuje, že CSS může být zábavné - Protože sám jsem Tailwind zatím nikde nepoužil, rád bych slyšel, co si vy myslíte vy, jakou máte zkušenost s TW, souzníte s výše uvedenou kritikou atd.? --- > CSS is the only language that gets blamed when the author is bad. > [Josh Collinsworth](https://joshcollinsworth.com/blog/devaluing-frontend) note: - CSS je jediným programovacím jazykem, kterému se spílá, i když by zasloužil spíš špatný autor. --- ![image](https://hackmd.io/_uploads/S1svEkg06.png) --- Díky, prezentace za chvíli na [@frontendisti](https://twitter.com/frontendisti)