Nekaj ​​stvari, ki sem jih vzel z dogodka Apart 2022 v Denverju

Izvorno vozlišče: 1722976

An Event Apart 2022 Denver zaključeno včeraj. In čeprav mi tokrat ni uspelo priti na vse tri dni, sem ujel včerajšnjo akcijo – in bila je super. Nisem zelo družaben ali odhajajoč, vendar je bila to prva konferenca, na kateri sem bil v vsaj nekaj letih, in osebno videti ljudi je bilo neverjetno osvežujoče.

Seveda sem si zapisoval! Mislil sem, da jih bom objavil tukaj, ker je deljenje skrbno. Vsaj tako mi je prejšnji dan rekel moj šestletnik, ko je sinoči prosil za grižljaj moje sladice.

To bom razdelal po zvočnikih. Pošteno opozorilo: Zanimajo me ročno napisani zapiski in lep vizualni tip, zato so moji zapiski manj … strukturirani kot večina. In te opombe so le stvari, ki so mi izstopale. Morda niti niso voditeljeva glavna ideja, a so pritegnile mojo pozornost!

Chris Coyier: Spletna mesta so zdaj dobra

Visoka ločljivost

Chris je imel ta govor že prej (smo ga povezali šele prejšnji teden), tokrat pa ga je bistveno razširil, zlasti s podrobnostmi o relativne enote posode ki v kombinaciji z clamp(), omogočajo natančnejšo odzivnost, ker so vrednosti relativne glede na vsebnik in ne na vidno polje. Torej, veste, kako pogosto uporabljamo širino vidnega polja (vh) enote za vrsto tekočine?

font-size: clamp(1rem, 1rem + 2vw, 2rem);

No, lahko uporabimo relativno enoto vsebnika, kot je poizvedba vsebnika inline-size (cqi) namesto tega kje 1cqi je enaka 1 % vgrajene velikosti vsebnika (tukaj je osnutek specifikacije o tem):

font-size: clamp(1rem, 1rem + 1cqi, 2rem);

Chris je tudi precej govoril o prednostih delovanja gostovanje na robu. Verjetno ni presenečenje, ker je pisni o tem tukaj več kot nekajkrat. Tudi kot nekdo, ki je te članke že prebral, se iskreno nisem zavedal celotnega koncepta računalništva na robu.

Ideja je varljivo preprosta: globalni CDN-ji lahko služijo sredstva hitro, ker jih gostijo geografsko blizu uporabnika. To je precej standardna praksa za streženje rastrskih slik. Vendar se je razširil na statične datoteke, kot so iste datoteke HTML, CSS in JavaScript, ki poganjajo spletno mesto - zgradite jih vnaprej in strežite že prevedene in optimizirane datoteke iz hitrega globalnega CDN. To je celoten koncept Jamstacka!

Kaj pa, če še vedno potrebujete odziv strežnika? To ni ravno na robu, kajne? No, zdaj imamo upravljalnike, ki se lahko izvajajo na enem URL-ju in vnaprej pridobivajo podatke ter jih vbrizgajo pred upodabljanjem – neposredno iz CDN. Seveda se v ozadju dogaja dodatno delo. Kljub temu dejstvo, da lahko dinamično pridobimo podatke, jih vstavimo, vnaprej sestavimo, strežemo statično na povpraševanje, in če deluje geografsko bližje uporabniku, je to izjemno hitro.

Tolu Adegbite: Kako zmagati pri ARIA in vplivati ​​na spletno dostopnost

Visoka ločljivost

Bravo, to je bila odlična predstavitev! Tolu Adegbite me je tako močno naučila o WAI-ARIA, da sem si težko zapisal vse dragulje, ki jih je delila – Vloge! države! Označevanje! Opisi! Vse je bilo izjemno dobro pokrito in stvari, za katere vem, da se bom vedno znova vračal.

Toda ena posebna stvar, ki je pritegnila mojo pozornost, je dostopnost vgrajenega SVG. Čeprav je SVG povezan z drugimi vrstami oblikovalskih sredstev, ga loči dejstvo, da je na koncu dneva oznaka, ker ni vedno prepoznana kot slika.


An illustrated brown and white tabby kitten looking lovingly into the camera.



  

Pomožna tehnologija bo bolj verjetno prebrala vgrajeni SVG kot sliko, če ji dodeli ustrezno dostopno vlogo in oznako:


  

Miriam Suzanne: Kaskadne plasti !pomembnosti

Visoka ločljivost

Hej, še en študent CSS-Tricks! Miriam je porabila veliko časa in truda za Specifikacija kaskadnih plasti. Napisala je tudi a velik vodnik o njih tukaj na CSS-Tricks in o njih govoril na An Event Apart.

Najbolj mi je ostalo v spominu, kako velik mentalni premik je to. Koncept sam po sebi ni zapleten. Razglasi @layer na vrhu dokumenta CSS naštejte plasti po vrstnem redu specifičnosti, nato pa v te plasti vpišite sloge. Toda za starega dinozavra, kot sem jaz, ki že nekaj časa piše CSS, se bom moral navaditi na dejstvo, da kaskadni sloji omogočajo preprostemu izbirniku razreda, da premaga nekaj, kar ima običajno višjo specifičnost, kot ID.

🤯

Miriam je sobo tudi spomnila, da so kaskadni sloji le eno orodje, ki ga imamo v našem orodnem pasu za upravljanje specifičnosti, poleg izbirnikov, ki vplivajo na specifičnost (npr. :is(), :where()in :has()).

Oh, in to je zanimiva malenkost. Ko se je Miriam sprehodila skozi zgodovino specifičnosti v CSS, se je tega spomnila !important je bil prvotno zasnovan kot orodje za uporabnike, da preglasijo sloge uporabniškega agenta in avtorja. Toda nekje spodaj smo ga sprejeli, da bi avtorske sloge postavili na vrh. Cascade Layers pomagajo odstraniti izgovor je treba uporabiti !important ker nam dajejo moč, da "dajte prednost slojem in zaščititi dediščino«.

To je lepo povedano, Miriam!

Dave Rupert: Odblokiranje vašega zaostanka dostopnosti

Visoka ločljivost

Predstavljajte si, da se nekega dne zbudite ob stotinah obvestil GitHub o prijavljenih težavah na vašem spletnem mestu. Kje sploh začneš? Morda zaprete svoj prenosni računalnik in namesto tega dobite koreninski kanal? To se je zgodilo Davu! Avtomatizirana revizija dostopnosti je vrnila ogromen kup napak in jih Davu dodelila kot vstopnice za popravilo.

Vendar je opazil vzorec, potem ko je vzel Excelovo preglednico teh težav, jih premaknil v Notion za boljši pogled, skril nepotrebne stolpce, kategoriziral vse in prikazal rezultate v logičnih skupinah. Številne od prijavljenih težav so bile iste težave, ponovljene na več straneh. Če samodejni test vrne nekaj napak, še ne pomeni, da so vsi edinstveni. To je zmanjšalo lep kos vstopnic.

Nadalje je pokazal, kako so se – z razmeroma malo truda – zaostanki pri reševanju vprašanj zmanjšali za skoraj 50 %.

Tam je veliko za razbrati, zlasti glede tega, kako obdelujemo in organiziramo svoje delo. Največji zaključek zame je, ko je Dave rekel, da moramo poudariti posameznike in interakcije nad procesi in orodji. Orodja, kot je tisto za iskanje napak pri dostopnosti, so v pomoč, vendar morda ne povedo celotne zgodbe. Namesto da bi jim verjeli na besede, je vredno postaviti vprašanja in pridobiti več konteksta, preden se potopite v zmešnjavo.

Dodatno je reorganizacija težav v Notionu omogočila, da je Dave združil težave na način, ki jasno kaže, katere okvare je njegov izdelek aktivno diskriminiral, kar mu je dalo več empatije do teh napak in kako jim dati prednost.


Še ena virtualna seja Hui Jing Chena je zaokrožila dan, vendar sem priznal, da sem zamudil približno polovico tega, ker sem imel pogovor na hodniku. Pogovor se je splačal, čeprav sem razočaran, ker sem zamudil predstavitev. Ko bo objavljen, si bom ogledal video!

Časovni žig:

Več od Triki CSS