Benvenuto alla seconda edizione di Chrome Dev Insider in cui condividiamo aggiornamenti su cosa c'è di nuovo ed entusiasmante per la community e qui su Chrome. Questo è un nuovo episodio di storie degli addetti ai lavori sul nostro approccio al lavoro e una rapida panoramica di alcuni degli aggiornamenti più importanti a cui dovresti prestare attenzione.
Mi chiamo Rachel Andrew e sono Content Lead di web.dev e developer.chrome.com e faccio parte del team per le relazioni con gli sviluppatori di Chrome. Lavoro sul web da oltre vent'anni, concentrandomi soprattutto sugli standard aperti per il web e sui CSS, e faccio parte del CSS Working Group.
Due mesi fa abbiamo concluso la conferenza Google I/O, in cui abbiamo condiviso alcuni degli aggiornamenti più importanti relativi al modo in cui stiamo aiutando gli sviluppatori a rendere il web più veloce e potente, mantenendo al sicuro e private le informazioni degli utenti.
Una delle cose che ci ha colpito (e siamo lieti che la community lo abbia notato) è l'enorme lavoro che il team sta svolgendo per supportare altre funzionalità CSS e UI sul web. In questa edizione di Chrome Dev Insider ti illustreremo i dietro le quinte di chi c'è dietro questo lavoro, come ci impegniamo a sostenere gli sviluppatori CSS e UI e cosa ci aspetta. Ecco perché sono entusiasta di ospitare questa edizione di Insider.
Nelle notizie
Nel primo report di Chrome Dev Insider, abbiamo condiviso alcuni aggiornamenti sulle iniziative di Compat 2021 e Interop 2022 in cui fornitori di browser e giocatori dell'ecosistema collaborano per portare sul web un numero maggiore di funzionalità supportate da tutti i browser. L'iniziativa si concentra molto sul CSS, in quanto l'incompatibilità dei browser è una delle maggiori sfide per gli sviluppatori di CSS.
Per la maggior parte di queste non è una novità, ma è emozionante vedere i progressi che abbiamo già fatto nei vari browser.
All'inizio del mese scorso, abbiamo visto Safari annunciare una release bumper con Safari 16.0 beta che include funzionalità entusiasmanti come Container Queries, subgrid e un controllo flexbox. Le ultime versioni di Firefox e Chrome hanno incluso una serie di funzioni e correzioni interessanti: mi occupo degli aspetti principali dei browser stabili e beta ogni mese nella mia serie di post che ho introdotto per la nuova piattaforma web.
Novità per gli addetti ai lavori: supporto per gli sviluppatori di UI e CSS
Con il 2022 che si è rivelato un anno entusiasmante per le funzionalità CSS, abbiamo pensato che fosse il momento giusto per portarti dietro le quinte. Ho incontrato Una Kravets, DevRel Lead per Web UI and DevTools e Nicole Sullivan, il nostro Product Manager per la UI web che si concentra sulle API CSS e HTML, per parlare del percorso di Chrome nel supporto agli sviluppatori di UI.
Iniziamo con voi. Parlaci un po' di più di te.
Nicole: sono product manager per l'interfaccia utente web su Chrome. Mi occupo in particolare delle nuove API CSS e HTML e di sviluppatori e designer che creano UI. È uno spazio entusiasmante con alcune API davvero importanti in uscita come Query container, Ambito e, si spera, ritmo verticale.
Una: sono responsabile dei team di sviluppo dell'interfaccia utente web e di DevTools. Ci concentriamo sull'assistenza agli ingegneri dell'interfaccia utente sulla piattaforma web e ci assicuriamo che dispongano degli strumenti necessari per avere successo. Sono inclusi i componenti HTML e le API CSS, oltre alle funzionalità DevTools per visualizzare le modifiche e i feedback attivi.
Il supporto di Chrome per gli sviluppatori di UI ha aumentato il ritmo negli ultimi anni. Perché pensate che ci sia voluto così tanto tempo per arrivare qui? Quali sono state le maggiori sfide?
Una: dovevamo fare del lavoro per dimostrare quanto fosse importante questo lavoro e perché dovrebbe essere una priorità. Abbiamo iniziato con il sondaggio per MDN DNA del 2019, in cui abbiamo identificato l'interfaccia utente come alcuni dei principali punti critici della piattaforma. Da allora, abbiamo continuato a utilizzare i dati come guida per MDN e per i nostri sondaggi interni sulla soddisfazione degli sviluppatori. Il risultato di tutto ciò è che abbiamo potuto ottenere un maggiore coinvolgimento da parte della leadership e abbiamo potuto dare priorità al lavoro di progettazione per alcune delle funzionalità più richieste per gli sviluppatori nell'ambito dell'interfaccia utente, che costituiscono anche la maggior parte dell'attenzione per iniziative come Compat 2021 e Interop 2022.
Nicole: Oltre a ottenere il consenso della dirigenza, dovevamo anche trovare il modo giusto per far arrivare queste API agli sviluppatori. Quando sono entrata a far parte di Chrome, l'ho inventata in un progetto chiamato Livello API (o LAPI in breve). Le API LAPI miravano a offrire agli sviluppatori un'esperienza immediata con i componenti. Penso che sia stato un ottimo risultato, ma abbiamo fatto molti errori! Ci siamo concentrati innanzitutto sulle notifiche di avviso e su un elenco virtuale. È quasi impossibile rendere accessibili i toast e una lista virtuale è uno degli aspetti più difficili da gestire. Le nostre intenzioni erano buone, ma non stavano aiutando gli sviluppatori, quindi abbiamo ritirato il progetto. È difficile imparare a fondo, ma ogni errore alimenta la rinascita di CSS e HTML che sta avvenendo oggi.
Parliamo un po' di più dei LAPI. Che cosa è successo?
Nicole: per i LAPI, sapevamo che il web aveva bisogno di un'esperienza di sviluppo di componenti a rilascio più vicina alla creazione di una UI nativa. Era chiaro che reinventare la ruota ostacolava gli sviluppatori. Non riesco a contare quante schede ho creato nella mia carriera. Detto questo, abbiamo cercato di risolvere il problema inviando JavaScript con il browser, il che era molto difficile. Nessuno aveva mai implementato JavaScript nel browser e non era chiaro come avrebbe dovuto interagire con il codice C++ che sta alla base del motore di rendering del browser. Abbiamo ascoltato altri fornitori di browser (grazie Mozilla!) e ci siamo allontanati da questo approccio. Pertanto, siamo riusciti a trovare qualcosa di meglio con Open UI. Adottando il linguaggio HTML e CSS, si ottiene soluzioni flessibili e dichiarative. Essendo un approccio dichiarativo, possiamo eseguire il bake-in dell'accessibilità in un modo che non sarebbe stato facile con JavaScript. Sono davvero entusiasta di ciò che accadrà. Stiamo lavorando per supportare selectmenu, popup, descrizione comando, navigazione, accordion, schede, carosello e pulsante di attivazione/disattivazione, che sono modelli di progettazione dell'interfaccia utente davvero essenziali.
Quindi abbiamo imparato molto. So che esistevano altre iniziative in questo ambito, come CSS Houdini. Qual è la storia?
Una: sì CSS Houdini è un altro posto in cui abbiamo imparato dalla community. Esistono tantissime funzionalità di Houdini utili, ma molte erano di livello troppo basso per ottenere un'adozione e un supporto più ampi. Ci siamo resi conto che l'implementazione di API di basso livello non comportava necessariamente un minore attrito per gli sviluppatori. Invece, concentrarsi su soluzioni ed esigenze di livello superiore ha contribuito a ottenere il supporto tra browser e i risultati necessari per spostare l'ago della bilancia nell'ecosistema. Stiamo monitorando i progressi all'indirizzo https://ishoudinireadyyet.com/.
Parlando di supporto tra browser, iniziative come Interop 2022 e Open UI sembrano offrire risultati positivi significativi per la community. Cosa dicono gli sviluppatori?
Una: uno dei principali punti critici che sentiamo per gli sviluppatori è "far funzionare lo stesso design in tutti i browser". Abbiamo affrontato questo problema collaborando con altri fornitori di browser per dare la priorità ad alcune delle funzionalità più richieste per gli sviluppatori e ottenere il massimo da alcune delle funzionalità più richieste. Il feedback che abbiamo ricevuto dalla community è stato estremamente positivo. Inoltre, grazie a un grande progetto di riprogettazione chiamato RenderingNG, è stato possibile ottenere un rendimento ancora maggiore di alcune di queste caratteristiche. Gli sviluppatori sono entusiasti del fatto che queste funzionalità da tempo richieste da anni siano finalmente in fase di sviluppo e utilizzo di più browser.
Nicole: L'entusiasmo nella community è palpabile. Puoi vederla su Twitter. :)
Lavorare con l'ecosistema si è rivelato fondamentale per il successo che abbiamo ottenuto nel semplificare la vita degli sviluppatori. So che il tuo team ha lavorato molto lì. Ti va di condividere qualche dettaglio?
Nicole: Innanzitutto, sono costantemente in soggezione per i progetti che gli sviluppatori creano sul web. Dalla più piccola libreria all'intera gamma di framework, gli sviluppatori stanno creando cose incredibili. È una fantastica community di creatori. Chrome sta adottando diverse misure 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, come Next, Nuxt e Gatsby. L'anno scorso abbiamo iniziato a fare lo stesso con strumenti e framework UI 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 fatto davvero piacere lavorare con persone nello spazio dell'animazione.
Dove vediamo quindi le maggiori opportunità per l'ecosistema della UI web?
Una: in termini di grandi opportunità, penso che stiamo solo dando un'occhiata a ciò che è possibile fare con esperienze web personalizzabili. Nuove API come le query container e le funzionalità multimediali relative alle preferenze degli utenti CSS stanno rivoluzionando il modo in cui gli sviluppatori vedono il design reattivo. Sono inoltre entusiasta delle esperienze di progettazione collaborativa che consentono a sviluppatori e designer di lavorare all'unisono con gli utenti che visitano i loro siti web.
E Nicole, quali sono i prossimi progetti per il tuo team?
Nicole: Non tutte le esplorazioni si trasformano in qualcosa di spedibile, ma ci sono molte cose di cui sono davvero entusiasta in questo momento:
Prima di tutto, stiamo abilitando il design reattivo basato su componenti. Include strumenti per progettare sistemi di colore in modo che i designer possano rispondere alle preferenze dell'utente, come la modalità Buio. Ad esempio, lo spazio colore OKLCH mantiene la luminosità coerente in tutte le tonalità. I designer possono passare dalla scelta dei colori alla progettazione delle relazioni tra i colori, senza finire con tavolozze dall'aspetto fangoso.
Inoltre, stiamo lavorando ad alcune delle API più richieste, come le query container, i livelli a cascata, il selettore padre (:has), gli stili con ambito e la nidificazione. Gli sviluppatori hanno bisogno di questi componenti per poter creare sistemi di progettazione flessibili pieni di componenti riutilizzabili.
Scorrere le animazioni collegate è un'altra area divertente. Mi piace molto la demo di Steve Gardner. Lo scorrimento fluido è molto fluido e le fantastiche animazioni aeroplani che vengono attivate con lo scorrimento. Sebbene siano divertenti, può essere difficile applicarle correttamente, soprattutto tenendo conto dell'accessibilità. Per questo motivo, stiamo eseguendo dei test sull'accessibilità della funzionalità da parte degli utenti.
Personalmente, la cosa che più mi interessa sono i controlli dell'interfaccia utente web integrati. Gli sviluppatori continuano a creare lo stesso set di schede più volte, penso che il browser possa essere d'aiuto. In Apri UI, stiamo lavorando su componenti quali selectmenu, popup, descrizione comando, schede, navigazione, accordion e pulsante di attivazione/disattivazione. Stiamo esplorando l'aspetto che avrebbe di integrare l'accessibilità in queste primitive dei browser in modo che, nel tempo, il web possa diventare accessibile per impostazione predefinita. Gli sviluppatori possono quindi concentrarsi sui problemi più complessi e specifici, mentre le basi, come la scheda Come funziona, possono essere supportate dal browser. Probabilmente è necessario un post proprio, quindi mi fermo qui per ora.
Infine, continueremo a investire nell'interop tra browser. È stato fantastico lavorare con i colleghi di WebKit e Gecko per rendere uniforme l'esperienza degli sviluppatori. Abbiamo saputo subito che gli sviluppatori vogliono proprio questo.
Se non l'hai ancora fatto, l'API Shared Element Transiziones del team di Uniform Web cambierà il modo in cui gli utenti progettano il web. Tutte queste piccole transizioni sottili che consentono ai designer di orientare i loro progetti nello spazio fisico non solo saranno possibili, ma facili. Jake Archibald ha un'ottima demo.
Se gli standard vanno bene, potremmo anche dare un'occhiata al ritmo verticale quest'anno! Possiamo basarci su LayoutNG, che sblocca molte funzionalità.
Grazie a entrambi. Sicuramente tutta la community, come noi, è entusiasta dell'arrivo del nuovo ritmo di miglioramenti e funzionalità nell'interfaccia utente web. C'è ancora molto da fare, quindi da dove diresti che dovrebbe iniziare il viaggio?
Una: la nostra sessione Novità per la piattaforma web alla conferenza I/O tratta i punti salienti di molte delle funzionalità in arrivo quest'anno. Adam Argyle ha scritto anche un ottimo articolo su tutti i nuovi e in arrivo i CSS di destinazione. Per il momento, mi concentrerei sulle release stabili e solo a conoscenza dell'altro lavoro in arrivo. La tua fantastica serie Novità della piattaforma web è perfetta da seguire. Inoltre, se ti iscrivi alla newsletter web.dev, questi contenuti verranno visualizzati nella posta in arrivo degli sviluppatori. Per gli sviluppatori che vogliono essere coinvolti e aiutare in tutto questo, entrare a far parte della Open UI è uno dei modi migliori per supportare questo lavoro.
Importanti aggiornamenti in arrivo
Continuiamo a mantenere la nostra tradizione per avvisarti di un imminente cambiamento che dovresti tenere presente quando crei le tue esperienze sul web.
Limita la durata massima dei cookie a 400 giorni
- Aggiornamento: quando i cookie vengono impostati con un attributo
Expires/Max-Ageesplicito, il valore viene ora limitato a non più 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 degli utenti. Qualsiasi sito visitato più di frequente ogni 400 giorni può aggiornare i cookie per garantire la continuità del servizio e gli utenti possono essere certi che i cookie non rimarranno nel browser per millenni senza utilizzo. - Tempistiche stimate:spedizione in Chrome 104 (stabile il 2 agosto 2022).
- Invito all'azione dello sviluppatore: quando gli utenti visitano i loro siti web, gli sviluppatori potrebbero dover aggiornare i cookie in modo proattivo più spesso rispetto a prima. In caso contrario, gli utenti potrebbero essere disconnessi 400 giorni dopo la prima impostazione del cookie.
Spero ti sia piaciuto leggere questa edizione di Chrome Dev Insider. Se non te lo sei, ecco il primo. Non vediamo l'ora di offrirti altre novità nel prossimo trimestre.
Nel frattempo, dicci 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.