An Event Apart 2022 Denver avslutade igår. Och även om jag inte kunde hinna med alla tre dagarna den här gången, fick jag med mig gårdagens action - och det var det häftigt. Jag är inte särskilt social eller utåtriktad, men det här var den första konferensen jag har varit på på åtminstone ett par år, och det var otroligt uppfriskande att träffa människor personligen.
Jag antecknade såklart! Jag tänkte lägga upp dem här för att dela är omtänksamt. Åtminstone sa min sexåring till mig häromdagen när jag bad om en bit av min efterrätt igår kväll.
Jag ska dela upp det här efter högtalare. Rättvis varning: Jag handlar om handskrivna anteckningar och en ganska visuell kille, så mina anteckningar tenderar att vara mindre... strukturerade än de flesta. Och dessa anteckningar är bara saker som stack ut för mig. De kanske inte ens är presentatörens huvudidé, men de fångade min uppmärksamhet!
Chris Coyier: Webbplatser är bra nu
Chris har hållit det här föredraget tidigare (vi kopplade ihop det bara förra veckan), men den här gången utökade den avsevärt, särskilt med detaljer om behållarens relativa enheter som, i kombination med clamp(), för mer exakt respons eftersom värdena är relativa till behållaren snarare än visningsporten. Så du vet hur vi ofta använder viewport width (vh) enheter för vätsketyp?
font-size: clamp(1rem, 1rem + 2vw, 2rem);Tja, vi kan använda en container relativ enhet som containerfråga inline-storlek (cqi) istället, var 1cqi är lika med 1 % av behållarens inlinestorlek (här är utkastet till specen för det):
font-size: clamp(1rem, 1rem + 1cqi, 2rem);Chris pratade också en hel del om prestandafördelarna med värdskap i kanten. Förmodligen ingen överraskning eftersom han är det skriven om det här. mer än ett par gånger. Även som någon som redan hade läst dessa artiklar, insåg jag ärligt talat inte hela konceptet med datoranvändning vid kanten.
Tanken är bedrägligt enkel: globala CDN kan tjäna tillgångar snabbt eftersom de är värd för dem geografiskt nära användaren. Det är ganska vanlig praxis för att visa rasterbilder. Men det har utökats till statiska filer, som samma HTML-, CSS- och JavaScript-filer som driver en webbplats – bygg dem i förväg och server de redan kompilerade och optimerade filerna från det snabba globala CDN. Det är hela Jamstack-konceptet!
Men vad händer om du fortfarande kräver ett serversvar från den? Det är väl inte särskilt kantigt? Nåväl, nu har vi hanterare som kan köra på en enda URL som hämtar data i förväg och injicerar den före rendering - direkt från CDN. Visst, det händer extra arbete i bakgrunden. Ändå, det faktum att vi dynamiskt kan hämta data, injicera den, förbygga den, servera den statiskt på begäran, och att låta den köras geografiskt närmare användaren gör detta blixtrande snabbt.
Tolu Adegbite: Hur man vinner i ARIA och påverkar webbtillgänglighet
Herregud var detta en utmärkt presentation! Tolu Adegbite lärde mig så hårt på WAI-ARIA att jag hade svårt att skriva ner alla pärlor hon delade — roller! Stater! Märkning! Beskrivningar! Allt var utomordentligt väl täckt, och saker som jag vet att jag kommer tillbaka till gång på gång.
Men en specifik sak som fångade min uppmärksamhet är tillgängligheten för inline SVG. Även om SVG är relaterat till andra typer av designtillgångar, skiljer det faktum att det är uppmärkning i slutet av dagen det eftersom det identifieras inte alltid som en bild.
Assisterande tekniker är mer benägna att läsa inline SVG som en bild genom att ge den en korrekt tillgänglig roll och etikett:
Miriam Suzanne: Cascading Layers of Importance
Hej, ännu en alun i CSS-Tricks! Miriam har spenderat en massa tid och ansträngning på Cascade Layers-specifikation. Hon skrev också en stor gammal guide om dem här på CSS-Tricks och pratade om dem på An Event Apart.
Det som har fastnat för mig mest är hur stort en mental förändring det här är. Konceptet är inte komplicerat i sig. Deklarera @layer överst i CSS-dokumentet, lista lagren i specificitetsordning och skriv sedan stilar i dessa lager. Men för en gammal dinosaurie som jag som har skrivit CSS ett tag, måste jag vänja mig vid att Cascade Layers gör det möjligt för en enkel klassväljare att slå ut något som vanligtvis har en högre specificitet, som ett ID.
🤯
Miriam påminde också rummet om att Cascade Layers bara är ett verktyg vi har i vårt specificitetshanterande verktygsbälte, förutom väljare som påverkar specificitet (t.ex. :is(), :where()och :has()).
Åh, och det här är en intressant godbit. När Miriam gick igenom historien om specificitet inom CSS, kom hon ihåg det !important designades ursprungligen som ett verktyg för användare att åsidosätta användaragent- och författarestilar. Men någonstans längre fram har vi anammat det för att tvinga författarstilar till toppen. Cascade Layers hjälper till att ta bort ursäkt behöver använda !important eftersom de ger oss kraften att "prioritera lager och skydda arv. "
Det är vackert sagt, Miriam!
Dave Rupert: Unblocking Your Accessibility Backlog
Föreställ dig att vakna upp en dag till hundratals GitHub-aviseringar om rapporterade problem på din webbplats. Var börjar man ens? Kanske stänga din bärbara dator och skaffa en rotfyllning istället? Det hände Dave! En automatiserad tillgänglighetsrevision returnerade en enorm hög med fel och tilldelade dem som biljetter för Dave att fixa.
Men han märkte ett mönster efter att ha tagit ett Excel-kalkylblad med dessa problem, flyttat dem till Notion för bättre överblick, gömt onödiga kolumner, kategoriserat allt och visat resultaten i logiska grupper. Många av de rapporterade problemen var samma problem som upprepades på flera sidor. Bara för att ett automatiserat test returnerar en handfull fel betyder det inte att de alla är unika. Det minskade en bra bit av biljetterna.
Han fortsatte med att visa hur — med relativt liten ansträngning — eftersläpningen av frågor minskade med nästan 50 %.
Det finns mycket att hämta där, särskilt när det gäller hur vi bearbetar och organiserar vårt arbete. Den största takeawayen för mig är när Dave sa att vi måste betona individer och interaktioner framför processer och verktyg. Verktyg som det som söker efter tillgänglighetsfel är användbara, men de kanske inte berättar hela historien. Istället för att ta dem på ord är det värt att ställa frågor och få mer sammanhang innan du dyker ner i röran.
Som en bonus, omorganiseringen av problemen i Notion gjorde det möjligt för Dave att gruppera problem på ett sätt som tydligt visar vilka funktionsnedsättningar som hans produkt aktivt diskriminerade, vilket gav honom större empati för dessa missar och hur man prioriterade dem.
Ytterligare en virtuell session av Hui Jing Chen avslutade dagen, men visserligen missade jag ungefär hälften av den eftersom jag hade ett samtal i korridoren. Samtalet var värt det, även om jag är ledsen över att jag missade presentationen. Jag kommer att titta på videon när den publiceras!
