Tieni presente quanto segue:
- Il routing è più facile con
URLPattern
integrato nel browser. - L'API Eye Dropper fornisce uno strumento integrato per la selezione dei colori.
- È disponibile una nuova prova dell'origine che consente di attivare subito la stringa UA ridotta.
- I video del summit PWA sono tutti online.
- E ce ne sono molte altre.
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.
- Se hai seguito il funzionamento dell'API Storage Foundation, è disponibile una nuova prova dell'origine per gli handle di accesso.
- WebAssembly ora fornisce supporto per la gestione delle eccezioni, che consente al codice di interrompere il flusso di controllo quando viene generata un'eccezione.
- Chrome 100 sarà disponibile il prossimo anno. Quindi è arrivato il momento di verificare che il tuo codice sia in grado di gestire più di due cifre.
Per approfondire
Vengono trattati solo alcuni dei punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 95.
- Novità di Chrome DevTools (95)
- Deprecazioni e rimozioni di Chrome 95
- Aggiornamenti di ChromeStatus.com per Chrome 95
- Novità di JavaScript in Chrome 95
- Elenco delle modifiche al repository di codice sorgente di Chromium
- Calendario delle release di Chrome
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.