Ti diamo il benvenuto alla seconda edizione di Chrome Dev Insider, dove condividiamo aggiornamenti sulle novità e sulle ultime tendenze della community e di Chrome. Questa è una nuova puntata di storie di addetti ai lavori su come approcciamo il nostro lavoro e un rapido sguardo ad alcuni degli aggiornamenti più importanti a cui dovresti prestare attenzione.
Sono Rachel Andrew, Content Lead di web.dev e developer.chrome.com, e faccio parte del team di Chrome Developer Relations. Lavoro sul web da oltre vent'anni, con un focus sugli standard web aperti e sul CSS, e faccio parte del CSS Working Group.
Due mesi fa, abbiamo concluso la conferenza Google I/O, durante la quale abbiamo condiviso alcuni degli aggiornamenti più importanti su come aiutiamo gli sviluppatori a rendere il web più veloce e potente, mantenendo al contempo le informazioni degli utenti al sicuro e private.
Una delle cose che ci ha colpito (e siamo felici che la community se ne sia accorta) è l'enorme quantità di lavoro che il team sta svolgendo per supportare un maggior numero di funzionalità CSS e UI sul web. In questa edizione di Chrome Dev Insider, ti sveleremo i retroscena di chi si occupa di questo lavoro, come ci adoperiamo per supportare gli sviluppatori di CSS e UI e cosa ci aspetta in futuro. Ecco perché sono entusiasta di ospitare questa edizione di Insider.
Nelle notizie
Nel primo Chrome Dev Insider, abbiamo condiviso alcuni aggiornamenti sulle iniziative Compat 2021 e Interop 2022, in cui i fornitori di browser e gli attori dell'ecosistema hanno collaborato per offrire al web più funzionalità supportate su tutti i browser. L'iniziativa si concentra molto sul CSS perché l'incompatibilità dei browser è una delle maggiori sfide per gli sviluppatori CSS.
Anche se per molti questa non è una novità, è entusiasmante vedere i progressi che abbiamo già fatto nei vari browser.
All'inizio del mese scorso, Safari ha annunciato una release straordinaria con Safari 16.0 beta, che include interessanti funzionalità come le query dei contenitori, la griglia secondaria e un strumento di ispezione flexbox. Le release recenti di Firefox e Chrome hanno incluso una serie di interessanti funzionalità e correzioni. Ogni mese tratto gli aspetti principali dei browser stabili e beta nella mia serie di post Novità della piattaforma web.
Informazioni privilegiate: assistenza per gli sviluppatori di CSS e UI
Il 2022 si sta rivelando un anno entusiasmante per le funzionalità CSS, quindi abbiamo pensato che fosse un buon momento per farti fare un tour dietro le quinte. Ho parlato con Una Kravets, DevRel Lead per l'interfaccia utente web e DevTools, e con Nicole Sullivan, la nostra Product Manager per l'interfaccia utente web che si occupa di API CSS e HTML, del percorso di Chrome verso il supporto degli sviluppatori UI.
Iniziamo con entrambi. Puoi dirci qualcosa in più su di te?
Nicole: sono la product manager dell'interfaccia utente web su Chrome. Mi concentro in modo specifico sulle nuove API CSS e HTML e su sviluppatori e designer che creano interfacce utente. È un settore entusiasmante con alcune API davvero importanti in arrivo, come Container Queries, Scope e (speriamo!) vertical rhythm.
Una: gestisco i team di DevRel di UI web e DevTools. Ci concentriamo sull'assistenza degli ingegneri UI sulla piattaforma web e ci assicuriamo che abbiano gli strumenti necessari per avere successo. Sono incluse le API CSS e i componenti HTML, oltre alle funzionalità di DevTools per visualizzare le modifiche attive e i feedback.
Negli ultimi anni, il supporto di Chrome per gli sviluppatori di interfacce utente è cresciuto rapidamente. Perché pensi che ci abbia impiegato così tanto tempo? Quali sono state le maggiori sfide?
Una: dovevamo dimostrare quanto fosse importante questo lavoro e perché doveva essere una priorità. Abbiamo iniziato con il sondaggio DNA di MDN nel 2019, che ha identificato l'interfaccia utente come uno dei principali problemi della piattaforma. Da allora, abbiamo continuato a utilizzare i dati come guida per la documentazione MDN e per i nostri sondaggi interni sulla soddisfazione degli sviluppatori. Il risultato di tutto ciò è che siamo riusciti a ottenere un maggiore coinvolgimento della leadership e a dare la priorità al lavoro di ingegneria per alcune delle funzionalità per sviluppatori più richieste nello spazio UI, che costituiscono anche la maggior parte dell'attenzione per iniziative come Compat 2021 e Interop 2022.
Nicole: oltre a ottenere il consenso della leadership, dovevamo anche trovare il modo giusto per mettere queste API a disposizione degli sviluppatori. Quando ho iniziato a lavorare in Chrome, ho commesso un errore in un progetto chiamato API a livelli (o LAPI per abbreviazione). L'obiettivo delle LAPI era offrire agli sviluppatori un'esperienza con componenti drop-in. Penso che sia stato un ottimo risultato, ma abbiamo commesso molti errori. Ci siamo concentrati innanzitutto sulle notifiche popup e su un elenco virtuale. I popup sono quasi impossibili da rendere accessibili e un elenco virtuale è uno dei componenti più difficili da realizzare correttamente. Le nostre intenzioni erano buone, ma il progetto non aiutava gli sviluppatori, quindi abbiamo interrotto il progetto. È difficile imparare a proprie spese, ma ogni errore sta alimentando la rinascita di CSS e HTML in corso.
Parliamo un po' di più degli LAPI. Che cosa è successo?
Nicole: per le API LAPI, sapevamo che il web aveva bisogno di un'esperienza di sviluppo dei componenti drop-in più simile alla creazione di interfacce utente native. Ed era chiaro che reinventare la ruota stava frenando gli sviluppatori. Non riesco a contare il numero di schede che ho creato nella mia carriera. Detto questo, abbiamo provato a risolvere il problema inviando JavaScript con il browser, ma è stato molto difficile. Nessuno aveva mai implementato JavaScript nel browser e non era chiaro come dovesse interagire con il codice C++ che alimenta il motore di rendering del browser. Abbiamo ascoltato altri fornitori di browser (grazie, Mozilla!) e abbiamo abbandonato questo approccio, riuscendo così a trovare qualcosa di molto meglio con l'interfaccia utente aperta. Se utilizziamo HTML e CSS, otteniamo soluzioni flessibili e dichiarative. Poiché è dichiarativo, possiamo integrare l'accessibilità in un modo che non sarebbe stato così facile con JavaScript. Non vedo l'ora di scoprire cosa succederà. Stiamo lavorando per supportare selectmenu, popup, tooltip, nav, accordion, tabs, carousel e toggle, che sono pattern di design dell'interfaccia utente davvero essenziali.
Abbiamo imparato molto. So che ci sono state altre iniziative in questo spazio, come CSS Houdini. Qual è la storia?
Una: Sì, CSS Houdini è un altro luogo in cui abbiamo imparato dalla community. Esistono moltissime funzionalità di 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 a basso livello non riduceva necessariamente le difficoltà per gli sviluppatori. Al contrario, concentrarsi su soluzioni e necessità di livello superiore ha contribuito a ottenere il supporto su più browser e le pagine di destinazione necessarie per far avanzare l'ecosistema. Al momento stiamo monitorando i progressi all'indirizzo https://ishoudinireadyyet.com/.
A proposito di supporto multibrowser, iniziative come Interop 2022 e Open UI sembrano offrire risultati positivi significativi per la community. Cosa dicono gli sviluppatori?
Una: uno dei principali problemi segnalati dagli sviluppatori è "rendere il design uguale su tutti i browser". Per risolvere il problema, abbiamo collaborato con altri fornitori di browser per dare la priorità e implementare alcune delle funzionalità per sviluppatori più richieste. Il feedback che abbiamo ricevuto dalla community è stato estremamente positivo. Inoltre, grazie a un grande progetto di riprogettazione chiamato RenderingNG, è diventato possibile implementare alcune di queste funzionalità con un rendimento molto migliore. Gli sviluppatori sono entusiasti che queste funzionalità attese da anni e richieste da anni siano finalmente in fase di sviluppo e disponibili su più browser.
Nicole: l'entusiasmo nella community è palpabile. Puoi vederlo su Twitter. :)
Lavorare con l'ecosistema si è dimostrata fondamentale per il nostro successo nel semplificare la vita degli sviluppatori. So che il tuo team si sta impegnando molto. Vuoi condividere qualche dettaglio?
Nicole: innanzitutto, sono costantemente incantata dai progetti che gli sviluppatori creano sul web. Dagli elementi più piccoli alle librerie complete, gli sviluppatori creano cose straordinarie. È una fantastica community di creator. E Chrome sta adottando una serie di misure per essere più collegato a questi progetti.
Ad esempio, qualche anno fa abbiamo iniziato a lavorare con framework JavaScript come React e Angular. E metaframework, ad esempio Next, Nuxt e Gatsby. Lo scorso anno abbiamo iniziato a fare lo stesso con strumenti e framework per l'interfaccia utente come Sass, Bootstrap e Material. Spero che il prossimo anno potremo collaborare con GreenSock e altri strumenti che semplificano la vita degli sviluppatori. Ho appena visto Cassie Evans di GreenSock parlare alla Smashing Conference e mi ha entusiasmato molto l'idea di lavorare con persone che si occupano di animazione.
Dove vediamo la più grande opportunità per l'ecosistema dell'interfaccia utente web?
Una: in termini di grandi opportunità, credo che stiamo solo grattando la superficie di ciò che è possibile per le esperienze web personalizzabili. Nuove API come le query del contenitore e le funzionalità multimediali per le preferenze utente CSS stanno ridefinendo il modo in cui gli sviluppatori visualizzano il responsive design. Sono entusiasta anche delle esperienze di progettazione collaborativa che consentono a sviluppatori e designer di lavorare in armonia con gli utenti che visitano i loro siti web.
E Nicole, quali sono i prossimi passi del tuo team?
Nicole: non tutte le esplorazioni si trasformano in qualcosa che può essere spedito, ma al momento ci sono molte cose che mi entusiasmano:
Una ha accennato alla prima cosa: stiamo attivando il design responsive basato su componenti. Include strumenti per la progettazione di sistemi di colori in modo che i designer possano rispondere alle preferenze degli utenti, come la modalità Buio. Ad esempio, lo spazio colore OKLCH mantiene la luminosità costante tra le tonalità. I designer possono passare dalla scelta dei colori alla progettazione delle relazioni tra i colori, senza ottenere tavolozze dall'aspetto fangoso.
Stiamo anche lavorando ad alcune delle API più richieste, come le query dei contenitori, i livelli a cascata, il selettore principale (:has), gli stili basati su ambito e l'nidificazione. Gli sviluppatori ne hanno bisogno per creare sistemi di progettazione flessibili e pieni di componenti riutilizzabili.
Scorri le animazioni collegate è un'altra area divertente. Mi piace molto la demo di Steve Gardner. Ha uno scorrimento fluido e animazioni di aerei fantastiche attivate durante lo scorrimento. Anche se sono divertenti, può essere complicato realizzarli correttamente, soprattutto tenendo conto dell'accessibilità. Pertanto, al momento stiamo eseguendo test degli utenti per l'accessibilità della funzionalità.
La cosa che mi entusiasma di più è la presenza di controlli dell'interfaccia utente web integrati. Gli sviluppatori continuano a creare lo stesso set di schede più e più volte, penso che il browser possa essere d'aiuto. In Open UI, stiamo lavorando a componenti come menu a discesa, popup, descrizione comando, schede, barra di navigazione, accordion e pulsante di attivazione/disattivazione. Stiamo valutando la possibilità di integrare l'accessibilità in queste primitive del browser in modo che, nel tempo, il web possa diventare accessibile per impostazione predefinita. Gli sviluppatori possono quindi concentrarsi sui problemi più complessi e sfumati, mentre le nozioni di base, come la scheda delle schede, possono essere supportate dal browser. Probabilmente questo argomento richiede un post a parte, quindi mi fermo qui per il momento.
Infine, continueremo a investire nell'interoperabilità tra i browser. È stato fantastico collaborare con il team di WebKit e Gecko per garantire la coerenza dell'esperienza dello sviluppatore. Gli sviluppatori ci hanno fatto capire chiaramente che vogliono questa funzionalità.
A proposito, se non l'hai ancora fatto, dai un'occhiata all'API Shared Element Transitions del team Seamless Web: cambierà il modo in cui le persone progettano per il web. Tutte le piccole transizioni sottili che consentono ai designer di orientare i loro progetti nello spazio fisico non saranno solo possibili, ma facili. Jake Archibald ha una grande demo.
Se tutto va bene, potremmo anche prendere in considerazione il ritmo verticale quest'anno. Possiamo creare su LayoutNG, che sblocca molte funzionalità.
Grazie a entrambi. Sono sicuro che l'intera community, come noi, è entusiasta di vedere il rinnovato ritmo di miglioramenti e funzionalità che verranno introdotti nell'interfaccia utente web. C'è ancora molto da capire, quindi da dove consiglieresti di iniziare il percorso?
Una: la nostra sessione Novità per la piattaforma web a I/O illustra le funzionalità più importanti che verranno lanciate quest'anno. Adam Argyle ha anche scritto un ottimo articolo su tutte le nuove e imminenti destinazioni CSS. Per il momento, ti consiglio di concentrarti sulle release stabili e di tenere d'occhio gli altri lavori in corso. La tua fantastica serie Novità sulla piattaforma web è un'ottima risorsa per questo. Se ti abboni alla newsletter di web.dev, questi contenuti verranno inviati anche alla posta in arrivo degli sviluppatori. Per gli sviluppatori che vogliono partecipare e dare il proprio contributo, partecipare a Open UI è uno dei modi migliori per supportare questo lavoro.
Principali aggiornamenti imminenti
Manteniamo la nostra tradizione di avvisarti in anticipo di una modifica imminente da tenere presente durante la creazione delle tue esperienze web.
Limita la durata massima dei cookie a 400 giorni
- Aggiornamento: quando i cookie vengono impostati con un attributo
Expires/Max-Ageesplicito, il valore ora non potrà superare i 400 giorni nel futuro. In precedenza, non esisteva alcun limite e i cookie potevano scadere anche diversi millenni nel futuro. Lo scopo di questo limite è trovare un equilibrio tra i modelli di utilizzo comuni e il rispetto della privacy degli utenti. Qualsiasi sito visitato più di una volta ogni 400 giorni può aggiornare i cookie per garantire la continuità del servizio e gli utenti possono stare tranquilli che i cookie non rimarranno nel browser per millenni senza essere utilizzati. - Tempistiche stimate: implementazione in Chrome 104 (versione stabile il 2 agosto 2022).
- Invito all'azione per gli sviluppatori: gli sviluppatori potrebbero dover aggiornare in modo proattivo i cookie più di frequente rispetto a prima quando gli utenti visitano i loro siti web. In caso contrario, gli utenti potrebbero essere disconnessi 400 giorni dopo l'impostazione iniziale del cookie.
Spero che tu abbia apprezzato la lettura di questa edizione di Chrome Dev Insider. Se te lo sei perso, ecco il primo. Non vediamo l'ora di offrirti di più nel prossimo trimestre.
Nel frattempo, facci sapere cosa pensi di questa edizione di Chrome Dev Insider e cosa possiamo fare per migliorarla.
Cosa ne pensi di questa edizione di The Chrome Dev Insider? Condividi il tuo feedback.