Al Chrome Dev Summit 2014 abbiamo trattato tutta una serie di argomenti e nuovi brand di nuove API, ma non si tratta solo di novità e concetti nuovi.
Se sei un nuovo sviluppatore web o anche uno sviluppatore esperto per iniziare a esplorare nuove API, è probabile che tu debba seguire questi tre passaggi: apprendimento, creazione e iterazione.
Matt Gaunt si occupa degli sforzi continui 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 è portare gli sviluppatori da 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 hai mai trattato un argomento, le indicazioni riducano il più possibile la "paralisi della scelta". Addy Osmani si occupa alla perfezione di Pastry Box.
Se riscontri problemi con il sito o i suoi contenuti oppure se vuoi che i concetti fondamentali del web trattino un determinato argomento, comunicacelo inviando un feedback su GitHub.
Build
Per aiutarti ad avviare un nuovo progetto web, abbiamo creato il Web Starter Kit. Ha tutto ciò che ti serve:
- Un solido processo di compilazione
- HTML boilerplate
- Guida di stile
Il processo di compilazione
Per chi non ha familiarità con la creazione di processi, il modo più semplice per concepire un processo di compilazione è considerarlo come un programma che prende un insieme di file ed esegue determinate attività su di essi e genera nuove versioni in una posizione diversa. Le attività ottimizzano i file per migliorare i tempi di caricamento, verificare la presenza di possibili errori o gestire attività che possono essere automatizzate.
Nel kit di base per il web sono presenti le seguenti procedure:
Minimizziamo e concateniamo CSS e JavaScript in modo che il browser possa recuperare rapidamente il file. Inoltre, JavaScript viene eseguito tramite JSHint per verificare le best practice relative a JavaScript e gli errori di programmazione più comuni. Le immagini vengono minimizzate con imagemin e questo consente di ridurre enormi le dimensioni dei file. Abbiamo anche una procedura per creare il codice CSS delle guide di stile.
Boilerplate per HTML multi-dispositivo
Il primo set di codice HTML che scrivi per una nuova pagina è piuttosto standard e probabilmente avrai un modo per ottenere rapidamente un file HTML standard che funzioni bene su più dispositivi e dimensioni dello schermo.
In Web Starter Kit volevamo aggiungere il supporto per tutte le funzionalità che avrebbero sfocato i confini tra la piattaforma e il tuo sito, pertanto abbiamo aggiunto il supporto per aggiungi alla schermata Home e schermate iniziali per Android, Windows Phone, iOS e Opera Coast.
Guida di stile
L'ultimo elemento di Web Starter Kit è la guida di stile.
In questo modo ogni nuovo progetto può contare su un'ampia gamma di stili e componenti predefiniti che favoriscono lo sviluppo basato sullo stile. Puoi modificare gli stili esistenti e aggiungerne di nuovi.
Nella prossima versione di WSK, prevista per il rilascio all'inizio del prossimo anno, ci stiamo adoperando per semplificare il modo in cui la guida di stile si integrerà e per passare a un aspetto basato sul material design. Mattha mostrato unaanteprima di come potrebbe essere al Chrome Dev Summit e potete vedere un esempio di seguito.
Iterazione
Una volta iniziato a mettere in pratica le tue nuove conoscenze, ti consigliamo di utilizzare DevTools per eseguire il debug, migliorare e gestire il tuo lavoro.
In DevTools vengono introdotte alcune nuove eccezionali funzionalità e Matt dà un'occhiata alle nuove funzionalità che seguono.
Modalità dispositivo
Modalità dispositivo è una nuova sezione in DevTools che ti consente di capire rapidamente come funziona il tuo sito sui diversi dispositivi mobili, visualizzando al contempo le query supporti nel CSS.
Una delle fantastiche funzionalità della modalità dispositivo è la capacità di limitare la velocità di rete, consentendo di simulare l'esperienza di un utente su una connessione GPRS, EDGE, 3G, DSL o Wi-Fi.
Profiler vernice
Se ti è mai capitato di aprire la scheda della sequenza temporale e aver premuto il pulsante di registrazione, avrai probabilmente notato che si verificano alcuni eventi di colorazione nella cascata. Normalmente si tratta di una casella nera che non consente di capire perché il browser ha eseguito l'operazione o che cosa stava facendo.
Paint profiler no ti offre maggiori informazioni su cosa sta facendo esattamente il browser durante la colorazione.
Monitoraggio invalidità
DevTools ora spiega il motivo per cui un dipinto o un layout si è verificato ogni volta che è possibile. Questo è utile per chiunque conosca la cronologia e il comportamento del browser e ti 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 sequenza temporale. In questo modo è molto più facile vedere come le attività si sovrappongono e quale comportamento del browser si è verificato in seguito ad altre attività.
Visualizzatore frame
Nella visualizzazione Flame Chart, puoi selezionare un frame specifico e, al suo interno, puoi esplorare quali elementi della pagina sono stati promossi in un livello composito e il motivo per cui sono stati promossi.
Impara. Crea. Iterazione
Questi sono alcuni degli sforzi compiuti dal team di Chrome per aiutare gli sviluppatori a familiarizzare con lo sviluppo web, pertanto assicurati di dare un'occhiata a Web Fundamentals, Web Starter Kit e alle nuove funzionalità di Chrome DevTools.