Een evenement apart 2022 Denver gisteren ingepakt. En hoewel ik deze keer niet alle drie de dagen kon halen, heb ik de actie van gisteren wel gezien - en het was... ontzagwekkend. Ik ben niet erg sociaal of extravert, maar dit was de eerste conferentie waar ik ben geweest in minstens een paar jaar, en het was ongelooflijk verfrissend om mensen persoonlijk te zien.
Ik heb natuurlijk aantekeningen gemaakt! Ik dacht ik post ze hier, want delen is zorgzaam. Tenminste, dat is wat mijn zesjarige me laatst vertelde toen hij gisteravond om een hap van mijn toetje vroeg.
Ik zal dit per spreker uitsplitsen. Eerlijke waarschuwing: Ik ben helemaal voor handgeschreven notities en een mooie visuele kerel, dus mijn aantekeningen zijn meestal minder ... gestructureerd dan de meeste. En deze aantekeningen zijn gewoon dingen die me opvielen. Ze zijn misschien niet eens het hoofdidee van de presentator, maar ze trokken mijn aandacht!
Chris Coyier: Websites zijn nu goed
Chris heeft deze lezing eerder gegeven (we hebben het gekoppeld vorige week), maar deze keer is het aanzienlijk uitgebreid, vooral met details over container relatieve eenheden die, in combinatie met clamp(), zorg voor een nauwkeuriger reactievermogen omdat de waarden relatief zijn ten opzichte van de container in plaats van de viewport. U weet dus hoe we vaak viewport-breedte gebruiken (vh) eenheden voor vloeistoftype?
font-size: clamp(1rem, 1rem + 2vw, 2rem);Welnu, we kunnen een relatieve containereenheid gebruiken zoals: containerquery inline-grootte (cqi) in plaats daarvan, waar 1cqi is gelijk aan 1% van de inline-maat van de container (hier is de conceptspecificatie daarover):
font-size: clamp(1rem, 1rem + 1cqi, 2rem);Chris sprak ook nogal wat over de prestatievoordelen van hosting aan de rand. Waarschijnlijk geen verrassing, want hij is geschreven over het hier meer dan een paar keer. Zelfs als iemand die die artikelen al had gelezen, realiseerde ik me eerlijk gezegd niet het complete concept van computing aan de rand.
Het idee is bedrieglijk eenvoudig: wereldwijde CDN's kunnen dienen activa snel omdat ze ze geografisch dicht bij de gebruiker hosten. Dat is vrij standaard voor het weergeven van rasterafbeeldingen. Maar het is uitgebreid naar statische bestanden, zoals dezelfde HTML-, CSS- en JavaScript-bestanden die een site van stroom voorzien - bouw ze van tevoren en serveer de reeds gecompileerde en geoptimaliseerde bestanden van het snelle wereldwijde CDN. Dat is het hele Jamstack-concept!
Maar wat als u er nog steeds een serverreactie van nodig heeft? Dat is niet erg scherp, toch? Welnu, nu hebben we handlers die in staat zijn om op een enkele URL te draaien die vooraf gegevens ophaalt en deze vóór de render injecteert - rechtstreeks van het CDN. Natuurlijk gebeurt er op de achtergrond extra werk. Toch is het feit dat we gegevens dynamisch kunnen ophalen, injecteren, pre-builden en statisch kunnen bedienen on demand, en het geografisch dichter bij de gebruiker laten lopen, maakt dit razendsnel.
Tolu Adegbite: hoe te winnen bij ARIA en de webtoegankelijkheid te beïnvloeden
Goh, wat was dit een uitstekende presentatie! Tolu Adegbite heeft me zo hard geschoold in WAI-ARIA dat ik het moeilijk vond om alle edelstenen op te schrijven die ze deelde - Rollen! Staten! Etikettering! Beschrijvingen! Alles was buitengewoon goed bedekt en dingen waarvan ik weet dat ik er keer op keer op terug zal komen.
Maar een specifiek ding dat mijn aandacht trok, is de toegankelijkheid van inline SVG. Hoewel SVG gerelateerd is aan andere soorten ontwerpmiddelen, onderscheidt het zich door het feit dat het aan het eind van de dag een markup is, omdat het wordt niet altijd geïdentificeerd als een afbeelding.
Hulptechnologie leest inline SVG eerder als een afbeelding door het een goed toegankelijke rol en label te geven:
Miriam Suzanne: Trapsgewijze lagen van !belangrijk
Hé, nog een CSS-Tricks-aluin! Miriam heeft veel tijd en moeite gestoken in de Specificatie van cascadelagen. Ze schreef ook een grote oude gids over hen? hier bij CSS-Tricks en sprak erover op An Event Apart.
Wat me het meest is bijgebleven, is hoe groot de mentale verschuiving is. Het concept is op zich niet ingewikkeld. Verklaren @layer vermeld bovenaan het CSS-document de lagen in volgorde van specificiteit en schrijf vervolgens stijlen in die lagen. Maar voor een oude dinosaurus zoals ik die al een tijdje CSS schrijft, zal ik moeten wennen aan het feit dat Cascade Layers het mogelijk maken voor een eenvoudige klassenkiezer om iets te verslaan dat gewoonlijk een hogere specificiteit hanteert, zoals een identiteitsbewijs.
🤯
Miriam herinnerde de kamer er ook aan dat Cascade-lagen slechts één hulpmiddel zijn dat we hebben in onze toolband voor het beheren van specificiteit, naast selectors die de specificiteit beïnvloeden (bijv. :is(), :where() en :has()).
Oh, en dit is een interessant weetje. Terwijl Miriam door de geschiedenis van specificiteit in CSS liep, herinnerde ze zich dat: !important was oorspronkelijk ontworpen als een hulpmiddel voor gebruikers om user-agent- en auteurstijlen te overschrijven. Maar ergens langs de lijn hebben we het overgenomen om auteursstijlen naar de top te dwingen. Cascadelagen helpen bij het verwijderen van de excuus moet gebruiken !important omdat ze ons de kracht geven om “prioriteit geven aan lagen en erfenis beschermen. '
Dat is mooi gezegd Mirjam!
Dave Rupert: uw toegankelijkheidsachterstand deblokkeren
Stel je voor dat je op een dag wakker wordt met honderden GitHub-meldingen over gemelde problemen op je site. Waar begin je eigenlijk? Misschien je laptop sluiten en in plaats daarvan een wortelkanaalbehandeling laten doen? Dat is Dave overkomen! Een geautomatiseerde toegankelijkheidsaudit leverde een enorme stapel fouten op en wees ze toe als tickets die Dave moest oplossen.
Maar hij merkte een patroon op nadat hij een Excel-spreadsheet van die problemen had genomen, ze naar Notion had verplaatst voor een beter overzicht, onnodige kolommen had verborgen, alles had gecategoriseerd en de resultaten in logische groepen had weergegeven. Veel van de gemelde problemen waren hetzelfde probleem dat op meerdere pagina's werd herhaald. Alleen omdat een geautomatiseerde test een handvol fouten retourneert, wil nog niet zeggen dat ze allemaal uniek zijn. Dat scheelt een aardig deel van de tickets.
Vervolgens liet hij zien hoe - met relatief weinig inspanning - de achterstand met problemen met bijna 50% is afgenomen.
Daar valt veel te halen, vooral over hoe we ons werk verwerken en organiseren. De grootste afhaalmaaltijd voor mij is toen Dave zei dat we de nadruk moeten leggen op individuen en interacties boven processen en tools. Tools zoals degene die scant op toegankelijkheidsfouten zijn nuttig, maar ze vertellen misschien niet het hele verhaal. In plaats van ze op hun woorden te geloven, is het de moeite waard om vragen te stellen en meer context te krijgen voordat je in de puinhoop duikt.
Als een bonus stelde Dave door het reorganiseren van de problemen in Notion in staat om problemen te groeperen op een manier die duidelijk laat zien welke beperkingen zijn product actief discrimineerde, waardoor hij meer empathie kreeg voor die missers en hoe ze prioriteiten konden stellen.
Nog een virtuele sessie van Hui Jing Chen sloot de dag af, maar toegegeven, ik heb ongeveer de helft gemist omdat ik een ganggesprek voerde. Het gesprek was de moeite waard, ook al baal ik dat ik de presentatie heb gemist. Ik zal de video ervan bekijken wanneer deze is gepubliceerd!
