Al Chrome Dev Summit 2014 sono stati trattati molti argomenti e nuovi argomenti riguardanti le nuove API, ma non tutto ciò che riguarda le novità e le peculiarità.
Se sei un nuovo sviluppatore web o anche uno sviluppatore esperto che sta per iniziare a esplorare nuove API, è probabile che tu debba seguire questi tre passaggi: apprendimento, creazione e iterazione.
Matt Gaunt illustra l'impegno in corso per risolvere questi problemi da parte del team della piattaforma per sviluppatori di Chrome.
Apprendimento
Web Fundamentals è un insieme di documentazione basata su casi d'uso che copre una vasta gamma di argomenti. L'obiettivo principale è far sì che gli sviluppatori abbiano conoscenze scarse o nulle all'implementazione delle best practice il più rapidamente possibile.
Uno degli obiettivi principali di Web Fundamentals è quello di garantire che, se non conosci l'argomento, le linee guida riducano il più possibile la "paralisi da scelta". Addy Osmani tratta perfettamente questo aspetto da Pastry Box.
Se rilevi problemi con il sito o con i contenuti oppure se vuoi che Concetti web tratti un determinato argomento, comunicacelo inviandoci un feedback su GitHub.
Creare
Per aiutarti a dare il via a un nuovo progetto web, abbiamo creato il Web Starter Kit. Ha tutto ciò che ti serve:
- Un solido processo di creazione
- HTML boilerplate
- Guida di stile
Il processo di compilazione
Per chi non ha familiarità con i processi di compilazione, il modo più semplice di pensare a un processo di compilazione è vederlo come un programma che prende una serie di file ed esegue su di essi determinate attività e ne restituisce nuove versioni in una posizione diversa. Le attività ottimizzano i file per migliorare i tempi di caricamento, verificano la presenza di possibili errori o gestiscono le attività che possono essere automatizzate.
Nello Starter Kit per il web sono presenti le seguenti procedure:
Minimizziamo e concateniamo CSS e JavaScript in modo che il browser possa recuperare rapidamente il file. Il codice JavaScript viene inoltre eseguito tramite JSHint per verificare la presenza di best practice per JavaScript ed errori comuni di programmazione. Le immagini vengono minimizzate con imagemin e con questo strumento puoi ottenere riduzioni enormi delle dimensioni dei file. Abbiamo anche una procedura per creare i CSS delle guide di stile.
Boilerplate per HTML multi-dispositivo
Il primo set di HTML che scrivi per una nuova pagina è piuttosto standard e in realtà avrai un modo per recuperare rapidamente un file HTML di stock che funziona bene su più dispositivi e dimensioni dello schermo.
In Web Starter Kit volevamo aggiungere il supporto per tutte le funzionalità che sfocano i confini tra la piattaforma e il sito, quindi abbiamo aggiunto il supporto per l'opzione Aggiungi a schermata Home e schermate iniziali per Android, Windows Phone, iOS e Opera Coast.
Guida di stile
L'ultimo elemento dello starter kit per il web è la guida di stile.
In questo modo ogni nuovo progetto avrà un set di stili e componenti predefiniti che incoraggia lo sviluppo basato sugli stili. Puoi modificare gli stili esistenti degli elementi e aggiungerne uno tuo.
Nella prossima versione di WSK, il cui lancio è previsto all'inizio del prossimo anno, stiamo lavorando duramente per semplificare il modo in cui la guida di stile si integra tra loro e per passare a un aspetto e un design di material design. Mattha mostrato unanteprima di come potrebbe presentarsi al Chrome Dev Summit e puoi vedere un esempio di seguito.
Iterazione
Dopo che avrai iniziato a mettere in pratica le tue conoscenze, vorrai usare DevTools per eseguire il debug, migliorare e gestire il tuo lavoro.
In DevTools ci sono alcune nuove utilissime funzionalità. Matt dà un'occhiata a quelle che seguono.
Modalità dispositivo
La modalità dispositivo è una nuova sezione di DevTools che ti consente di vedere rapidamente come funziona il tuo sito su diversi dispositivi mobili mentre visualizzi le query supporti nel tuo CSS.
Una delle caratteristiche più interessanti della modalità dispositivo è la possibilità di limitare le velocità di rete, che ti consente di simulare l'esperienza di un utente con una connessione GPRS, EDGE, 3G, DSL o Wi-Fi.
Profiler per la colorazione
Se ti è già capitato di aprire la scheda della sequenza temporale e premere il pulsante Registra, hai probabilmente visto alcuni eventi di colorazione nella cascata. Normalmente si tratta di una scatola nera in cui non è possibile sapere perché il browser o cosa stava facendo.
Profiler non fornisce maggiori informazioni su cosa fa esattamente il browser durante la colorazione.
Monitoraggio invalidazione
DevTools ora fornisce un motivo per cui è stato eseguito un rendering o un layout, utile per chiunque impari a conoscere la sequenza temporale e i comportamenti del browser. Inoltre, consente di ottimizzare il codice per evitare problemi di prestazioni.
Visualizzazione grafico a fiamme
È un modo molto diverso di visualizzare le informazioni disponibili nella cronologia. In questo modo è molto più facile vedere come si sovrappongono le attività e quale comportamento del browser si è verificato in seguito ad altre attività.
Visualizzatore frame
Nella visualizzazione Grafico a fiamme, puoi selezionare un frame specifico e al suo interno potrai esplorare quali elementi della pagina sono stati promossi a un livello composto e il motivo per cui sono stati promossi.
Impara. tutto è gestito da Cloud Build. Iterazione
Questi sono alcuni degli sforzi compiuti dal team di Chrome per aiutare gli sviluppatori a stare al passo con lo sviluppo web, quindi dai un'occhiata a Web Fundamentals, Web Starter Kit e le nuove funzionalità di Chrome DevTools.