Ataccama 13. 09. 2023

příště: 8. listopadu, ale kde‽‽‽

note:

• vřelé díky celoročnímu partnerovi

WWWe výhledu

• 26. září Pipedrive: Estonian startups hosted by Pipedrive & Revolgy
• 12. října Frontkon 2023, Brno

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
• Roman Schejbal: Understanding GPT and other AI news

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í

{ 𝐅 }
Letem swwwětem

Prohlížeče

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

@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

Chrome 117

vydán 12. září 2023

• slide effect on scroll
• 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)

note:

• používal jsem léta Real favicon generator
• zdá se, že už není třeba tolik kódu

Leading trim

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, 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
• %20 je kód pro mezeru v syntaxi URL
• používejme, neumí zatím FF, ale on se to doučí

:target,
:focus {
    scroll-padding-block-end: 8vh;
}

• tip od Stephanie Eckles

note:

• tím si ohlídáte, aby prvky, na něž odkazujete, byly ve viditelném okně

Zemřela Molly Holzschlag

note:

• zemřela 5. září
• kmotřička webu, která neúnavně bojovala za přístupnost a webové standardy
• internet zaplavily vzpomínky mnoha osobností, 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

• :has() – nejrychleji zaužívaná fičura

• OpenProps – nejméně opouštěná technologie

note:

• 72 dotazovaných z Česka, díky, ovšem loni 152, musíme se polepšit
• kdo zná :has()?
• kdo použil?
• OpenProps – 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 – 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

• Temani Afif: Circular grid with cool hover effect

note:

• gridová pizza s hustou náplní

Díky, prezentace za chvíli na @frontendisti