Al Chrome Dev Summit 2014 sono stati trattati una serie di argomenti e nuove API, ma non si tratta solo di novità.
Se sei un nuovo sviluppatore web o anche uno sviluppatore esperto che sta per iniziare a esplorare nuove API, è probabile che tu segua questi tre passaggi: impara, crea e esegui l'iterazione.
Matt Gaunt illustra gli sforzi in corso del team della piattaforma per sviluppatori di Chrome per risolvere questi problemi.
Impara
Web Fundamentals è un insieme di documentazione basata sui casi d'uso che copre una serie di argomenti. L'obiettivo principale è aiutare gli sviluppatori a passare da una conoscenza minima o nulla all'implementazione delle best practice il più rapidamente possibile.
Uno degli obiettivi principali di Web Fundamentals è garantire che, se non hai dimestichezza con un argomento, le indicazioni riducano al massimo la "paralisi da scelta". Addy Osmani lo spiega perfettamente su Pastry Box.
Se riscontri problemi con il sito o con i suoi contenuti o se vuoi che gli Approfondimenti su web trattino un argomento specifico, non esitare a comunicarcelo inviando un feedback su GitHub.
Build
Per aiutarti a iniziare un nuovo progetto web, abbiamo creato il Web Starter Kit. Ha tutto ciò che ti serve:
- Un processo di compilazione solido
- Boilerplate HTML
- Guida di stile
Il processo di compilazione
Per chi non ha dimestichezza con le procedure di compilazione, il modo più semplice per pensare a una procedura di compilazione è considerarla come un programma che prende un insieme di file, esegue su di essi determinate attività e genera nuove versioni in una posizione diversa. Le attività ottimizzano i file per migliorare i tempi di caricamento, controllano la presenza di eventuali errori o gestiscono le attività che possono essere automatizzate.
In Web Starter Kit sono disponibili le seguenti procedure:
Minimizziamo e concatenamo CSS e JavaScript in modo che il browser possa recuperare rapidamente il file. Inoltre, il codice JavaScript viene eseguito tramite JSHint per verificare le best practice e gli errori di programmazione comuni di JavaScript. Le immagini vengono minimizzate con imagemin e puoi ottenere riduzioni enormi delle dimensioni dei file utilizzando questo strumento. Abbiamo anche una procedura per creare il CSS delle linee guida di stile.
Boilerplate per HTML multidispositivo
Il primo codice HTML che scrivi per una nuova pagina è piuttosto standard e probabilmente avrai a disposizione un modo per ottenere rapidamente un file HTML di serie che funzioni bene su più dispositivi e dimensioni dello schermo.
In Web Starter Kit volevamo aggiungere il supporto per tutte le funzionalità che sfumano la linea di demarcazione tra la piattaforma e il tuo sito, quindi abbiamo aggiunto il supporto per l'aggiunta alla schermata Home e le schermate di benvenuto per Android, Windows Phone, iOS e Opera Coast.
Guida di stile
L'ultimo componente di Web Starter Kit è lo Styleguide.
In questo modo, a ogni nuovo progetto viene fornita una vasta gamma di stili e componenti predefiniti che stimolano lo sviluppo basato sugli stili. Puoi modificare gli stili esistenti degli elementi e aggiungerne di nuovi.
Nella prossima versione di WSK, che verrà rilasciata all'inizio del prossimo anno, ci stiamo adoperando per semplificare l'integrazione della guida di stile e passare a un'esperienza di design di materiali. Mattha mostrato unmodello preliminare di come potrebbe essere al Chrome Dev Summit e puoi vedere un esempio di seguito.
Iterazione
Dopo aver iniziato a mettere in pratica le nuove conoscenze, ti consigliamo di utilizzare DevTools per eseguire il debug, migliorare e mantenere il tuo lavoro.
In DevTools sono disponibili alcune nuove funzionalità importanti e Matt le esamina.
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 sui media nel CSS.
Una delle grandi funzionalità della modalità Dispositivo è la possibilità di limitare le velocità di rete, consentendo di simulare l'esperienza di un utente su una connessione GPRS, EDGE, 3G, DSL o Wi-Fi.
Profiler colorazione
Se hai mai aperto la scheda Sequenza temporale e hai fatto clic sul pulsante di registrazione, probabilmente hai notato alcuni eventi di aggiornamento nella sequenza. In genere, si tratta di una scatola nera in cui non è possibile sapere perché il browser ha eseguito un'azione o cosa stava facendo.
Il profiler di pittura no fornisce ulteriori informazioni su cosa fa esattamente il browser durante la pittura.
Monitoraggio dell'annullamento convalida
Ora DevTools fornisce un motivo per cui si è verificato un aggiornamento o un layout, se possibile. Questa funzionalità è utile per chiunque voglia conoscere la sequenza temporale e i comportamenti del browser e consente di ottimizzare il codice per evitare problemi di prestazioni.
Visualizzazione grafico a fiamme
Si tratta di 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 a seguito di altre attività.
Visualizzatore frame
Nella visualizzazione grafico a forma di fiamma, puoi selezionare un fotogramma specifico e, al suo interno, esaminare quali elementi della pagina sono stati promossi a un livello composito e il motivo della promozione.
Impara. Crea. Iterazione
Questi sono alcuni dei progetti del team di Chrome per aiutare gli sviluppatori a familiarizzare con lo sviluppo web, quindi assicurati di consultare Web Fundamentals, Web Starter Kit e le nuove funzionalità di Chrome DevTools.