Un evento a parte 2022 Denver concluso ieri. E anche se questa volta non sono riuscito a partecipare a tutti e tre i giorni, ho assistito all'azione di ieri - e così è stato impressionante. Non sono molto socievole o estroverso, ma questa è stata la prima conferenza a cui ho partecipato in almeno un paio d'anni e vedere le persone di persona è stato incredibilmente rinfrescante.
Ho preso appunti, ovviamente! Ho pensato di pubblicarli qui perché condividere è importante. Almeno, questo è quello che mi ha detto il mio bambino di sei anni l'altro giorno quando ieri sera mi ha chiesto un boccone del mio dolce.
Lo analizzerò per relatore. Giusto avvertimento: Mi occupo di appunti scritti a mano e di un tipo piuttosto visivo, quindi i miei appunti tendono ad essere meno... strutturati della maggior parte. E queste note sono proprio le cose che mi hanno colpito. Potrebbero non essere nemmeno l'idea principale del presentatore, ma hanno attirato la mia attenzione!
Chris Coyier: I siti web vanno bene adesso
Chris ha già tenuto questo discorso in precedenza (l'abbiamo collegato proprio la settimana scorsa), ma questa volta l'ha ampliato sostanzialmente, in particolare con i dettagli unità relative al contenitore che, se combinato con clamp(), garantiscono una reattività più accurata perché i valori sono relativi al contenitore anziché al viewport. Quindi, sai come spesso utilizziamo la larghezza del viewport (vh) unità per tipo di fluido?
font-size: clamp(1rem, 1rem + 2vw, 2rem);Bene, possiamo usare un'unità relativa al contenitore come dimensione in linea della query del contenitore (cqi) invece, dove 1cqi è pari all'1% della dimensione in linea del contenitore (ecco la bozza delle specifiche a riguardo):
font-size: clamp(1rem, 1rem + 1cqi, 2rem);Chris ha anche parlato parecchio dei vantaggi prestazionali di hosting all'edge. Probabilmente nessuna sorpresa perché lo è scritto a proposito qui più di qualche volta. Anche se avevo già letto quegli articoli, onestamente non avevo realizzato il concetto completo di computing all'avanguardia.
L’idea è apparentemente semplice: i CDN globali possono servire attività rapidamente perché li ospitano geograficamente vicini all'utente. Questa è una pratica abbastanza standard per fornire immagini raster. Ma si è esteso ai file statici, come gli stessi file HTML, CSS e JavaScript che alimentano un sito: costruiscili in anticipo e fornisci i file già compilati e ottimizzati dalla veloce CDN globale. Questo è l'intero concetto di Jamstack!
Ma cosa succede se hai ancora bisogno di una risposta dal server? Non è molto tagliente, vero? Bene, ora disponiamo di gestori in grado di funzionare su un singolo URL recuperando i dati in anticipo e inserendoli prima del rendering, direttamente dalla CDN. Certo, c'è del lavoro extra in corso in background. Tuttavia, il fatto che possiamo recuperare dinamicamente i dati, inserirli, precostruirli e servirli staticamente su richiestae farlo funzionare geograficamente più vicino all'utente lo rende incredibilmente veloce.
Tolu Adegbite: come vincere ad ARIA e influenzare l'accessibilità del web
Santo cielo, è stata un'ottima presentazione! Tolu Adegbite mi ha insegnato così tanto su WAI-ARIA che ho avuto difficoltà a buttare giù tutte le gemme che ha condiviso: Ruoli! Stati! Etichettatura! Descrizioni! Tutto era straordinariamente ben coperto e cose su cui so che tornerò ancora e ancora.
Ma una cosa specifica che ha attirato la mia attenzione è l'accessibilità dell'SVG in linea. Anche se SVG è correlato ad altri tipi di risorse di progettazione, il fatto che alla fine si tratti di markup lo distingue perché non è sempre identificato come un'immagine.
È più probabile che la tecnologia assistiva legga SVG in linea come un'immagine assegnandogli un ruolo e un'etichetta accessibili adeguati:
Miriam Suzanne: Strati a cascata di importanza
Ehi, un altro ex allievo di CSS-Tricks! Miriam ha dedicato molto tempo e sforzi al Specifica dei livelli a cascata. Ha anche scritto a grande vecchia guida su di loro qui a CSS-Tricks e ne abbiamo parlato ad An Event Apart.
Ciò che mi ha colpito di più è quanto sia grande questo cambiamento mentale. Il concetto non è complicato di per sé. Dichiarare @layer nella parte superiore del documento CSS, elenca i livelli in ordine di specificità, quindi scrivi gli stili in tali livelli. Ma per un vecchio dinosauro come me che scrive CSS da un po', dovrò abituarmi al fatto che Cascade Layers rende possibile a un semplice selettore di classe di battere qualcosa che di solito possiede una specificità più elevata, come un documento d'identità.
🤯
Miriam ha anche ricordato ai presenti che Cascade Layers è solo uno degli strumenti che abbiamo nel nostro strumento di gestione della specificità, oltre ai selettori che influenzano la specificità (ad esempio, :is(), :where()e :has()).
Oh, e questa è una notizia interessante. Mentre Miriam ripercorreva la storia della specificità nei CSS, lo ricordava !important è stato inizialmente progettato come uno strumento per consentire agli utenti di sovrascrivere lo user agent e gli stili dell'autore. Ma da qualche parte in futuro, lo abbiamo adottato per forzare gli stili degli autori al vertice. I livelli a cascata aiutano a rimuovere il scusa bisogno di usare !important perché ci danno il potere di “dare priorità ai livelli ed proteggere l'eredità. "
È bellissimo, Miriam!
Dave Rupert: Sbloccare il ritardo nell'accessibilità
Immagina di svegliarti un giorno con centinaia di notifiche GitHub sui problemi segnalati sul tuo sito. Da dove inizi? Forse chiudi il tuo laptop e fatti fare un canale radicolare? È successo a Dave! Un controllo automatizzato dell'accessibilità ha restituito un'enorme quantità di errori e li ha assegnati come ticket da correggere per Dave.
Ma ha notato uno schema dopo aver preso un foglio di calcolo Excel di questi problemi, spostandoli su Notion per una migliore visualizzazione, nascondendo le colonne non necessarie, classificando tutto e visualizzando i risultati in gruppi logici. Molti dei problemi segnalati erano lo stesso problema ripetuto su più pagine. Solo perché un test automatizzato restituisce una manciata di errori non significa che siano tutti unici. Ciò ha ridotto una bella fetta dei biglietti.
Ha continuato dimostrando come, con uno sforzo relativamente minimo, l’arretrato di problemi sia diminuito di quasi il 50%.
C'è molto da raccogliere lì, soprattutto riguardo al modo in cui elaboriamo e organizziamo il nostro lavoro. La cosa più importante per me è quando Dave ha detto che dobbiamo enfatizzare gli individui e le interazioni rispetto ai processi e agli strumenti. Strumenti come quello che esegue la scansione degli errori di accessibilità sono utili, ma potrebbero non raccontare l'intera storia. Piuttosto che prenderli alle parole, vale la pena porre domande e acquisire più contesto prima di tuffarsi nel caos.
Come bonus, la riorganizzazione dei problemi in Notion ha permesso a Dave di raggruppare i problemi in un modo che mostrasse chiaramente quali menomazioni il suo prodotto stava attivamente discriminando, dandogli una maggiore empatia per quelli mancati e come dare loro la priorità.
Un'altra sessione virtuale di Hui Jing Chen ha concluso la giornata, ma devo ammettere che me ne sono persa circa la metà perché stavo avendo una conversazione in corridoio. Ne è valsa la pena, anche se sono dispiaciuto di aver perso la presentazione. Quando verrà pubblicato guarderò il video!
