Ti diamo il benvenuto nella seconda edizione di Chrome Dev Insider, in cui condividiamo aggiornamenti sulle novità e sulle entusiasmanti novità della community e qui in Chrome. Questo è un nuovo episodio di storie privilegiate sul nostro approccio al lavoro e offre una rapida occhiata ad alcuni degli aggiornamenti più importanti a cui dovresti prestare attenzione.
Sono Rachel Andrew, Content Lead per web.dev e developer.chrome.com, e faccio parte del team Developer Relations di Chrome. Lavoro sul web da oltre vent'anni, ponendo particolare attenzione agli standard web aperti e ai CSS e sono membro del CSS Working Group.
Due mesi fa abbiamo concluso Google I/O in cui abbiamo condiviso alcuni degli aggiornamenti più importanti su come stiamo aiutando gli sviluppatori a rendere il web più veloce ed efficace, mantenendo al contempo le informazioni degli utenti sicure e private.
Una delle cose che si è distinta (e siamo lieti che la community ne abbia preso atto) è l'enorme lavoro che il team sta facendo per supportare altre funzionalità CSS e UI sul web. In questa edizione di Chrome Dev Insider, ti illustreremo i dietro le quinte di questo lavoro, il modo in cui lavoriamo per supportare gli sviluppatori CSS e UI e cosa ci aspetta in futuro. Ecco perché sono entusiasta di presentare questa edizione di Insider.
Nelle notizie
Nel primo Chrome Dev Insider, abbiamo condiviso alcuni aggiornamenti sulle iniziative Compat 2021 e Interop 2022, a cui i fornitori di browser e gli attori dell'ecosistema hanno collaborato per offrire al web più funzionalità supportate da tutti i browser. L'iniziativa si concentra molto sul CSS perché l'incompatibilità del browser rappresenta una delle sfide maggiori per gli sviluppatori CSS.
Anche se questa potrebbe non essere una novità per molti, è entusiasmante vedere i progressi che abbiamo già compiuto nei vari browser.
All'inizio del mese scorso abbiamo annunciato una release bumper con Safari 16.0 beta che include funzionalità entusiasmanti come Container Query, subgrid e flexbox inspector. Le ultime versioni di Firefox e Chrome hanno incluso una serie di funzionalità e correzioni interessanti. Ogni mese, nella mia serie di post sulla nuova piattaforma web, tratterò gli argomenti principali relativi ai browser stabili e in versione beta.
Scoop degli addetti ai lavori: supporto agli sviluppatori di CSS e UI
Il 2022 si è rivelato un anno entusiasmante per le funzionalità CSS, pertanto abbiamo pensato che fosse un buon momento per portarti dietro le quinte. Ho incontrato Una Kravets, DevRel Lead per Web UI e Devtools, e Nicole Sullivan, il nostro Product Manager for Web UI che si occupa di CSS e API HTML, per parlare del percorso di Chrome verso il supporto degli sviluppatori di UI.
Iniziamo da entrambi. Dicci qualcosa di più su di te?
Nicole: sono product manager per l'interfaccia utente web su Chrome. Mi occupo in particolare di nuove API CSS e HTML e di sviluppatori e designer che creano UI. È uno spazio entusiasmante con alcune API molto importanti in uscita come Query container, Ambito e (si spera che!) ritmo verticale.
Una: gestisco i team di sviluppo web e di DevTools. Ci concentriamo sul supporto degli ingegneri UI sulla piattaforma web e ci assicuriamo che abbiano gli strumenti necessari per avere successo. Sono inclusi i componenti HTML e le API CSS, oltre alle funzionalità DevTools per visualizzare le modifiche attive e i feedback.
Il supporto di Chrome per gli sviluppatori di UI si è sviluppato rapidamente negli ultimi anni. Perché pensate che ci sia voluto così tanto tempo per arrivare qui? Quali sono state le sfide maggiori?
Una: abbiamo dovuto fare del lavoro per dimostrare l'importanza di questo lavoro e il motivo per cui dovrebbe essere una priorità. Abbiamo iniziato con il sondaggio sul DNA di MDN nel 2019, in cui abbiamo identificato l'UI come uno dei principali punti critici della piattaforma. Da allora, abbiamo continuato a utilizzare i dati come guida per l'MDN e i nostri sondaggi interni sulla soddisfazione degli sviluppatori. Il risultato di tutto ciò è che siamo stati in grado di ottenere un maggiore sostegno da parte della leadership e abbiamo potuto dare la priorità al lavoro di progettazione per alcune delle funzionalità per sviluppatori più richieste nell'ambito della UI che costituiscono anche la maggior parte del focus per iniziative come Compat 2021 e Interop 2022.
Nicole: oltre a ottenere il consenso del team direttivo, abbiamo dovuto trovare il modo giusto per fornire queste API agli sviluppatori. Quando mi sono registrato per la prima volta in Chrome, ho messo in discussione un progetto chiamato API Layered (o LAPI in breve). Le API LAPI mirano a offrire agli sviluppatori un'esperienza con i componenti drop-in. Credo ancora che sia stato un ottimo risultato, ma abbiamo fatto molti errori. Ci siamo concentrati inizialmente sulle notifiche toast e su una lista virtuale. È quasi impossibile rendere accessibili i toast e una lista virtuale è uno dei componenti più difficili da ottenere. Le nostre intenzioni erano buone ma non aiutava gli sviluppatori, quindi abbiamo ritirato il progetto. È difficile imparare le cose nel modo più arduo, ma ogni errore sta alimentando la rinascita di CSS e HTML in corso ora.
Parliamo un po' di più delle API LAPI. Cosa è successo?
Nicole: Sapevavamo che per gli sviluppatori di componenti LAPI il web aveva bisogno di un'esperienza di sviluppo con componenti drop-in più vicina alla creazione di una UI nativa. Ed era chiaro che reinventare la ruota tratteneva gli sviluppatori. Non riesco a contare il numero di schede che ho creato nella mia carriera. Detto questo, abbiamo cercato di risolvere il problema spedendo JavaScript con il browser, il che è stato molto difficile. Nessuno aveva mai spedito JavaScript nel browser prima d'ora e non era chiaro come questo debba interagire con il codice C++ alla base del motore di rendering del browser. Abbiamo ascoltato altri fornitori di browser (grazie, Mozilla!) e abbiamo abbandonato questo approccio, quindi siamo riusciti a trovare qualcosa di molto migliore con Open UI. Attingendo all'HTML e al CSS ci ritroviamo a soluzioni flessibili e dichiarative. Poiché è dichiarativa, possiamo integrare l'accessibilità in un modo che non sarebbe stato così facile da usare con JavaScript. Sono davvero entusiasta di come sta andando tutto questo. Stiamo lavorando al supporto di selectmenu, popup, tooltip, navigazione, accordion, schede, carosello e attiva/disattiva, che sono modelli di progettazione dell'interfaccia utente davvero essenziali.
Quindi abbiamo imparato molto. So che c'erano altre iniziative in questo ambito, come CSS Houdini. Cosa c'è di nuovo?
Una: Sì, CSS Houdini è un altro posto in cui abbiamo imparato dalla community. Esistono tantissime funzionalità Houdini utili, ma molte erano troppo di basso livello per ottenere un'adozione e un supporto più ampi. Ci siamo resi conto che l'implementazione di API di basso livello non ha necessariamente ridotto le difficoltà per gli sviluppatori. Invece, concentrarsi su soluzioni ed esigenze di livello superiore ha aiutato a raccogliere supporto tra browser e gli obiettivi necessari per spostare l'ago della bilancia nell'ecosistema. Al momento stiamo monitorando i progressi all'indirizzo https://ishoudinireadyyet.com/.
Parlando di supporto tra browser, iniziative come Interop 2022 e Open UI sembrano dare risultati positivi significativi per la community. Cosa dicono gli sviluppatori?
Una: una delle principali criticità per gli sviluppatori è "Far funzionare il design allo stesso modo su tutti i browser". Abbiamo affrontato questo problema collaborando con altri fornitori di browser per assegnare la priorità e mettere a disposizione alcune delle funzionalità per sviluppatori più richieste. Inoltre, i feedback della community sono stati estremamente positivi. Inoltre, grazie a un grande progetto di riprogettazione chiamato RenderingNG, è stato possibile ottenere alcune di queste funzionalità con prestazioni molto migliori. Gli sviluppatori sono entusiasti del fatto che queste funzionalità attese da anni siano finalmente in fase di sviluppo e siano disponibili su più browser.
Nicole: L'entusiasmo nella community è palpabile. Puoi vederla su Twitter. :)
La collaborazione con l'ecosistema si è rivelata fondamentale per qualsiasi successo che abbiamo avuto nel rendere gli sviluppatori semplifica la vita. So che il tuo team ha lavorato molto lì. Ti va di condividere qualche dettaglio?
Nicole: Innanzitutto, sono costantemente entusiasta dei progetti che gli sviluppatori creano sul web. Dalla più piccola libreria all'intera gamma di framework, gli sviluppatori stanno creando cose straordinarie. È una fantastica community di creatori. E Chrome sta compiendo una serie di passi per essere più connesso a questi progetti.
Ad esempio, alcuni anni fa abbiamo iniziato a lavorare con framework JavaScript come React e Angular. E metaframework, ad esempio Next, Nuxt e Gatsby. L'anno scorso abbiamo iniziato a fare lo stesso con strumenti e framework di interfaccia utente come Sass, Bootstrap e Material. Spero che il prossimo anno potremo collaborare con GreenSock e altri strumenti che semplificano la collaborazione semplifica la vita. Ho appena visto Cassie Evans di GreenSock parlare alla Smashing Conference e mi ha entusiasmato moltissimo lavorare con i membri dello spazio delle animazioni.
Quindi, dove vediamo le maggiori opportunità per l'ecosistema della UI web?
Una: in termini di grandi opportunità, credo che abbiamo appena smesso di cogliere le possibilità delle esperienze web personalizzabili. Nuove API, come le query container e le funzionalità multimediali relative alle preferenze utente del CSS, stanno ridefinendo il modo in cui gli sviluppatori vedono il responsive design. Sono anche entusiasta delle esperienze di progettazione collaborativa che consentono a sviluppatori e designer di collaborare con gli utenti che visitano i loro siti web.
E Nicole, qual è il futuro della roadmap per il tuo team?
Nicole: Non tutte le esplorazioni si trasformano in informazioni spedibili, ma ci sono molte cose di cui sono davvero entusiasta in questo momento:
Abbiamo accennato al primo aspetto che stiamo introducendo, ovvero consentire un design reattivo e basato su componenti. Include strumenti per progettare i sistemi di colore in modo che i designer possano rispondere alle preferenze degli utenti, come la modalità Buio. Ad esempio, lo spazio colore OKLCH mantiene la luminosità uniforme in tutte le tonalità. I designer possono passare dalla scelta dei colori alla progettazione di relazioni tra i colori, senza finire in tavolozze dall'aspetto fangoso.
Stiamo inoltre lavorando su alcune delle API più richieste, come le query dei container, i livelli a cascata, il selettore padre (:has), gli stili con ambito e la nidificazione. che gli sviluppatori le servono per creare sistemi di progettazione flessibili pieni di componenti riutilizzabili.
Le animazioni di scorrimento collegate sono un'altra area divertente. Mi piace molto la demo di Steve Gardner. Ha uno scorrimento fluido e burroso e simpatiche animazioni aerei che si attivano con lo scorrimento. Anche se sono divertenti, può essere difficile fare le scelte giuste, soprattutto tenendo in considerazione l'accessibilità. Stiamo quindi eseguendo test sugli utenti per l'accessibilità di questa funzione.
La cosa che più mi entusiasma personalmente sono i controlli integrati dell'interfaccia utente web. Gli sviluppatori continuano a creare lo stesso tabset più volte, penso che il browser possa essere d'aiuto. Per quanto riguarda Apri UI, stiamo lavorando su componenti come selectmenu, popup, descrizione comando, schede, navigazione, accordion e pulsante di attivazione/disattivazione. Stiamo esplorando come sarebbe integrare l'accessibilità in queste primitive del browser in modo che il web possa, nel tempo, diventare accessibile per impostazione predefinita. Gli sviluppatori possono quindi concentrarsi sui problemi più complessi e articolati, mentre le nozioni di base, ad esempio la modalità di visualizzazione delle schede, possono essere supportate dal browser. Probabilmente serve un post diverso, quindi mi fermo qui per ora.
Infine, continueremo a investire in interop tra i browser. È stato fantastico lavorare con i membri di WebKit e Gecko per offrire coerenza all'esperienza degli sviluppatori. Abbiamo saputo chiaramente che gli sviluppatori volevano questa funzionalità.
Se non l'hai ancora fatto, l'API Shared Element Transiziones del team Web trasparente cambierà il modo in cui le persone progettano il web. Tutte quelle piccole transizioni che permettono ai designer di orientare i progetti nello spazio fisico non saranno solo possibili, ma facili. Jake Archibald ha un'ottima demo.
Se gli standard andranno bene, potremmo anche guardare il ritmo verticale quest'anno! Possiamo basarci su LayoutNG che sblocca così tante funzionalità.
Grazie a entrambi. Sono sicura che l'intera community, come noi, sia entusiasta del rinnovato ritmo di miglioramenti e funzionalità in arrivo nell'interfaccia utente web. Ci sono ancora molte cose da scherzare, quindi da dove diresti che dovrebbe iniziare il proprio percorso?
Una: la sessione Novità della piattaforma web all'I/O tratta le caratteristiche principali di molte delle funzionalità che verranno introdotte quest'anno. Adam Argyle ha anche scritto un ottimo articolo su tutti i nuovi e imminenti atterraggi dei CSS. Mi concentrerei sulle release stabili per il momento e mi sarei concentrato anche sugli altri lavori in arrivo nella pipeline. La tua fantastica serie New to the web platform è perfetta da seguire in questo senso. L'iscrizione alla newsletter web.dev metterà a disposizione degli sviluppatori anche questi contenuti posta in arrivo. Per gli sviluppatori che vogliono farsi aiutare in tutto questo, partecipare a Open UI è uno dei modi migliori per supportare questo lavoro.
Importanti aggiornamenti imminenti
Stiamo mantenendo la nostra tradizione per avvisarti di un imminente cambiamento che dovresti tenere a mente quando crei le tue esperienze sul web.
Limita la durata massima dei cookie a 400 giorni
- L'aggiornamento: quando i cookie vengono impostati con un attributo
Expires/Max-Ageesplicito, il valore limiterà ora un massimo di 400 giorni nel futuro. In precedenza, non esistevano limiti e i cookie potevano scadere diversi millenni in futuro. L'obiettivo di questo limite è trovare un equilibrio tra modelli di utilizzo comuni e rispetto della privacy dell'utente. Qualsiasi sito visitato con una frequenza maggiore di 400 giorni può aggiornare i cookie per garantire la continuità del servizio e gli utenti possono essere certi che i cookie non resteranno nel browser per millenni senza utilizzo. - Tempistiche stimate:spedizione in Chrome 104 (stabile il 2 agosto 2022).
- Invito all'azione per gli sviluppatori: gli sviluppatori potrebbero dover aggiornare proattivamente i cookie più spesso rispetto a prima quando gli utenti visitano i loro siti web. In caso contrario, gli utenti potrebbero disconnettersi 400 giorni dopo l'impostazione iniziale del cookie.
Spero che ti sia piaciuta la lettura di questa edizione di Chrome Dev Insider. Se non l'hai ancora fatto, ecco il primo. Non vediamo l'ora di aumentare le entrate nel prossimo trimestre.
Fino ad allora, dicci cosa pensi di questa edizione di Chrome Dev Insider e cosa possiamo fare per migliorarla.
Come ti è sembrato questa edizione di Chrome Dev Insider? Inviaci il tuo feedback.