Novità di Chrome 95

Pete LePage

Tieni presente quanto segue:

Sono Pete LePage, lavoro e lavoro da casa, approfondiamo l'argomento e scopriamo le novità di Chrome 95 per gli sviluppatori.

Routing con URLPattern

Quasi tutte le app web dipendono in qualche modo dal routing, che si tratti di codice in esecuzione su un server che mappa un percorso ai file su disco o di logica in un'app a pagina singola che aggiorna il DOM quando l'URL cambia. URLPattern è una nuova API della piattaforma web che standardizza la sintassi dei pattern di routing.

Si basa sui framework esistenti, semplificando l'esecuzione delle attività di routing più comuni. Ad esempio, la corrispondenza con URL completi o un nome di percorso dell'URL, quindi la restituzione di informazioni sulle corrispondenze di token e gruppo.

Se hai già familiarità con la sintassi di routing utilizzata in Express, Ruby on Rails o path-to-regexp, probabilmente ti sembrerà familiare.

Per utilizzarlo, crea un nuovo URLPattern() e fornisci i dettagli con cui vuoi eseguire la corrispondenza di schema. I pattern possono contenere caratteri jolly, gruppi di token denominati, gruppi di espressioni regolari e modificatori di gruppo.

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

Ad esempio, diamo un'occhiata al URLPattern che potrebbe essere utilizzato da Documenti Google. Specificheremo i kind del file, il file ID e il file mode in cui aprirlo. Quindi, per utilizzare il pattern, possiamo chiamare test() o exec().

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

L'app URLPattern è attiva per impostazione predefinita in Chrome ed Edge 95 e versioni successive. Per i browser o gli ambienti come Node, che non lo supportano ancora, puoi utilizzare la libreria urlpattern-polyfill.

Per informazioni dettagliate, leggi l'articolo di Guy URLPattern porta il routing sulla piattaforma web.

Scegliere i colori con l'API Eye Dropper

Quasi tutte le app di progettazione che ho mai usato hanno uno strumento con contagocce, che consente di capire facilmente di che colore si tratta. Alcuni browser hanno una funzionalità contagocce integrata in <input type=color>, ma non è l'ideale.

L'API Eye dropper, implementata da alcuni dipendenti di Microsoft, porta questa funzionalità sul web. Per utilizzarla, crea una nuova istanza EyeDropper(), quindi chiama open().

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

Come molte altre API web moderne, funziona in modo asincrono, così da non bloccare il thread principale. Quando l'utente fa clic sul colore desiderato, viene risolto con il colore su cui ha fatto clic.

Puoi provare una rapida demo e vedere il codice su Glitch.

Summit PWA

Hai partecipato al PWA Summit all'inizio di questo mese?

È stato fantastico vedere così tante persone parlare delle PWA e condividere le proprie esperienze. Se non lo avete visto, i video sono tutti online, quindi assicuratevi di guardarli sul sito PWASummit.org o sul canale YouTube del PWA Summit.

Prova dell'origine della riduzione dello user agent

La Riduzione dello user agent è uno sforzo per ridurre superfici di impronte digitali passive, riducendo le informazioni nella stringa dello user agent solo al brand e alla versione significativa del browser, alla sua distinzione da desktop o dispositivo mobile e alla piattaforma su cui è in esecuzione.

A partire da Chrome 95, è disponibile una nuova prova dell'origine che consente di attivare subito la ricezione della stringa UA ridotta. In questo modo potrai scoprire e risolvere i problemi prima che l'UA ridotta diventi il comportamento predefinito in Chrome.

Le modifiche verranno applicate in modo incrementale su diverse release, ma tutto ciò di cui hai bisogno per prepararti e testare è pronto al momento.

Tutti i dettagli e le tempistiche sono disponibili nel post relativo alla prova dell'origine della riduzione dello user agent su developer.chrome.com.

E tanto altro.

Ovviamente c'è molto altro.

Per approfondire

Vengono trattati solo alcuni dei punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 95.

Abbonati

Per non perderti nessun aggiornamento, iscriviti al canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Mi chiamo Pete LePage e non appena verrà rilasciata la versione 96 di Chrome, sarò qui per raccontarti le novità di Chrome.