--- title: 13. září ’23 | {𝐅}rontendisti tags: frontendisti --- {%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %} # {𝐅}rontendisti #### Praha, Ataccama <br> 13. září ’23 <small>příště: 8. listopadu, ale kde‽‽‽</small><!-- .element: class="fragment" --> note: - vřelé díky celoročnímu partnerovi --- ## WWWe výhledu - 26. září Pipedrive: [Estonian startups hosted by Pipedrive & Revolgy](https://www.meetup.com/de-DE/pipedrive-talks-prague/events/295786633/) <!-- .element: class="fragment" --> - 12. října [Frontkon 2023](https://frontendisti.cz/konference), Brno <!-- .element: class="fragment" --> note: - Pipedrive představí estonské startupy ve spolupráci s estonským velvyslanectvím - kdo byl na prvním FrontKonu 2021 (online) - kdo byl na druhém FrontKonu 2022 (Webexpo) --- ## Dnes - **Ahmed Mostafa**, UI Tech Lead at Barclays Flavours of Machine learning (in English) - **Marek Velas**, zakladatel EDUpunk Talent - Můj talent a hacky pro práci s talenty v týmu - **Pavel Peroutka**, Front-End Developer z Ataccama `this.talk` satisfies never — Co všechno TypeScript umí? --- ## WWW minulém díle jste viděli - **Vilém Lipold**: [Deep cloning](https://www.youtube.com/watch?v=03NxTc139yU) - **Roman Schejbal**: [Understanding GPT and other AI news](https://www.youtube.com/watch?v=bQi01gIxL3I) note: - Vilda si vzal na pomoc Darth Vadera a rozkryl neotřelým způsobem na kopírování a klonování objektů v JS. - Roman se před prázdinami v Pipedrive rozpovídal od ChatGPT a dalších aktuálně velmi žhavých nástrojích. - 326 dalších videí --- # { 𝐅 } <br> Letem swwwětem<br> note: --- ### Prohlížeče note: --- #### Microsoft Edge 116 _vydán 21. srpna 2023_ note: - Nic převratného. Verze pro business, má ikonku obohacnou o kufřík, aby uživatelé věděli, že jsou v pracovním prohlížeči. - lepší organizace tabů, když si nějaké seskupíte, Edge navrhne název dané skupiny - a to není vše: Edge umí navrhovat taby k seskupení… --- #### Firefox 117 _vydán 29. srpna 2023_ ```css @import url('flexbox-utilities.css') supports(flex-direction: row); ``` note: - `@import supports` jako první, od verze 115 - zanořování v CSS výchoze (CSS nesting) - devTools: u problematických CSS vlastností ukáže, které prohlížeče mají problém (ukázat?) - verze 118 (konec září) přinese podporu matematických funkcí, více o nich [květnové nowwwinky](https://hackmd.io/@Kout/Hy1x_bPHi) --- #### Chrome 117 _vydán 12. září 2023_ - [slide effect on scroll](https://codepen.io/thebabydino/pen/YzJPRvd) - subgrid - `display` konečně i v Chromu více hodnot note: - slide effect od Any Tudor, ukazoval jsem na jaře; od verze 115 - subgrid jako poslední prohlížeč --- `display: flex` ⇒ `display: block flex` `display: block` ⇒ `display: block flow` note: - Chrome poslední; od verze 115 - více příkladů --- #### Safari 16.6 _vydáno 24. července_ note: - došel dech? --- ## Zachyceno v síti --- ### [Favicon reloaded (and simplified)](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs#the-ultimate-favicon-setup) note: - používal jsem léta [Real favicon generator](https://realfavicongenerator.net/) - zdá se, že už není třeba tolik kódu --- ### [Leading trim](https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202#:~:text=Leading%2Dtrim%20is%20a%20new,just%20two%20lines%20of%20CSS.) ![](https://hackmd.io/_uploads/Bk3p_eyk6.png) --- ![](https://hackmd.io/_uploads/S1PcOxyJp.png) --- ```css! h1 { text-edge: cap alphabetic; leading-trim: both; } ``` note: - zatím experimentálně v Safari, takže hudba budoucnosti - nezkoumal jsem dál, stalo se mi přesně to, co chce řešit [iniciativa Baseline](https://web.dev/introducing-baseline/), kterou jsem představoval v červnu - co mě ve skutečnosti zaujalo: text fragment v URL --- ### Text fragment - text fragment v URL: ``` #:~:text=Leading-trim%20is%20a%20new, just%20two%20lines%20of%20CSS. ``` note: - URL předchozího tipu obsahuje [text fragment](https://developer.mozilla.org/en-US/docs/Web/Text_fragments) - `%20` je kód pro mezeru v syntaxi URL - používejme, neumí zatím FF, ale on se to doučí --- ```css! :target, :focus { scroll-padding-block-end: 8vh; } ``` - [tip od Stephanie Eckles](https://twitter.com/MicheBarks/status/1667110098546708480) note: - tím si ohlídáte, aby prvky, na něž odkazujete, byly ve viditelném okně --- [Zemřela Molly Holzschlag](https://www.tucsonsentinel.com/local/report/090523_molly_holzschlag/tucsons-molly-holzschlag-known-as-the-fairy-godmother-web-dead-60/) note: - zemřela 5. září - [kmotřička webu](https://en.wikipedia.org/wiki/Molly_Holzschlag), která neúnavně bojovala za přístupnost a webové standardy - internet [zaplavily vzpomínky mnoha osobností](https://www.google.com/search?q=molly+holzschlag), za všechny ta, kdy Molly opakovaně hulákala na Billa Gatese stran ignorace webových standardů v tehdy nejpoužívanějším prohlížeči všech dob (sic!) – IE6 - vystoupila na 2. ročníku Webexpa, kdo z vás tam byl? je to 14 let - náš obor stárne, WWW je tu s námi přes 30 let, loni jsme si připomínali 30. výročí přípojení tehdejšího Československa k internetu - stárneme i my, od roku 2019 se počet dotazovaných s více než 20letou zkušeností více než zdvojnásobil (z 3,76 % na 8,2 %) => State of CSS --- [State of CSS](https://2023.stateofcss.com/en-US/awards/) - `:has()` – nejrychleji zaužívaná fičura <!-- .element: class="fragment" --> - [OpenProps](https://open-props.style/) – nejméně opouštěná technologie <!-- .element: class="fragment" --> note: - 72 dotazovaných z Česka, díky, ovšem loni 152, musíme se polepšit - kdo zná `:has()`? - kdo použil? - [OpenProps](https://open-props.style/) – CSS framework postavný na proměnných vlastnostech - Bootstrap stále používá (použilo?) 80 % dotazovaných, TailWind 50 % (jenom) => BS klesá, TW roste, ale mění se to velmi zvolna - [State of HTML](https://stateofhtml.com/) – přihlaste se, ať nepropásnete, zřejmě příští rok poprvé --- ### CodePen note: - nepoužívejme `position: absolute` k vyskládání prvků přes sebe - vhodnější je v roce 2023 `grid` --- ![](https://hackmd.io/_uploads/H1jFexyyT.png) --- ![](https://hackmd.io/_uploads/B155elJy6.png) --- - [Temani Afif](https://codepen.io/t_afif/pen/ZEoJbvx): Circular grid with cool hover effect note: - gridová pizza s hustou náplní --- Díky, prezentace za chvíli na [@frontendisti](https://twitter.com/frontendisti)