Creazione di nuovi progetti con Web Starter Kit di Google [Guida]

Google ha appena rilasciato uno standard di Google Web Starter Kit . Web Starter Kit ha lo scopo di aiutare gli sviluppatori web ad avviare rapidamente un nuovo progetto di sviluppo web .

Contiene potenti strumenti come BrowserSync, LiveReload, HTTP Server, PageSpeed, ImageMin, Sass Compiler, JSHint e un paio di modelli che possiamo usare per sviluppare applicazioni web che funzionano su più dispositivi . Diamo un'occhiata per vedere come possiamo iniziare a usare il Web Starter Kit.

Iniziare

Google Web Starter Kit può essere scaricato da Google Web Starter Page e puoi utilizzarlo immediatamente. Ma per utilizzare gli strumenti forniti con esso dovrai installare i seguenti strumenti.

Innanzitutto, assicurati di aver installato NodeJS, necessario per eseguire una serie di attività Gulp tra cui PageSpeed, ImageMin e JSHint.

Dal momento che Web Starter Kit utilizza Sass per comporre il CSS, dovrai installare anche Ruby e Sass .

Infine, dovrai anche installare Gulp. Web Starter Kit include anche numerosi plugin Gulp che automatizzano le attività di sviluppo. Tutti i plugin Gulp sono preconfigurati all'interno di gulpfile.js che si trova nella directory root del Web Starter Kit.

Per installare Gulp, usa il comando seguente.

 npm install gulp 

Una volta impostati tutti questi strumenti, è possibile iniziare a utilizzare Web Starter Kit.

Utilizzo di Web Starter Kit

Come accennato, puoi scaricare Web Starter Kit dalla pagina web di Google Web Starter ed estrarlo nella cartella desiderata. Un altro modo per ottenere il kit è usare il comando git per scaricarlo dal repository Github. Correre:

 git clone https://github.com/google/web-starter-kit.git 

Questo comando copierà tutti i Web Starter Kit sul tuo computer. Questo porterà anche una nuova cartella denominata "web-starter-kit" contenente un numero di cartelle tra cui una cartella app, Gulpfile.js, package.json e altri. Successivamente, installeremo le dipendenze di Web Starter Kit (file e librerie necessari per lo sviluppo). Basta eseguire questo comando per installare le dipendenze:

 installazione di npm 

Una volta installate le dependecie, siamo tutti impostati e possiamo iniziare a costruire la nostra applicazione web. A questo punto, tutti i file e le cartelle si trovano nella nostra directory di progetto.

Crea Web Starter Kit con Gulp

Web Starter Kit è dotato di plugin Gulp per ridurre il peso delle attività di sviluppo. Di seguito sono riportati alcuni comandi utili che è possibile tenere a mente. Eseguili in Terminale o Prompt dei comandi.

gulp serve . Questo comando serve l'app nel browser con un indirizzo localhost e esegue il LiveReload che aggiorna la pagina nel browser ogni volta che hai apportato una modifica ai file. Il comando eseguirà anche BrowserSync. Come abbiamo discusso nel tutorial precedente, BrowserSync sincronizzerà l'interazione dell'utente come clic, scorre e ricarica le pagine su più dispositivi mentre modifichi i file.

Web Starter Kit visualizzato nell'emulazione mobile di Chrome.

gulp pagespeed è un altro comando utile. Questo comando mostrerà i punteggi delle prestazioni delle pagine della tua applicazione secondo l'API PageSpeed ​​di proprietà di Google. È uno strumento utile per ottenere informazioni sulle tue pagine caricando perfomance.

Il comando gulp, a sua volta, genera una nuova cartella denominata dist folder, che contiene i file pronti per la distribuzione. File come HTML, JS, CSS e immagini in questa cartella sono ottimizzati e compressi.

Alcuni avvertimenti

Web Starter Kit è costruito con tecnologia web all'avanguardia. Il Web Starter Kit funziona solo con l'ultima versione di browser come Internet Explorer 10, Firefox 30, Chrome 34, Opera 23 e Safari 23. Inoltre, in base al mio test, ci sono alcuni problemi che si verificano in Internet Explorer 9 e qualsiasi versione precedente dei browser sopra menzionati. Quindi, se sei obbligato a far funzionare la tua applicazione web nei browser più vecchi, potrebbe essere necessario un po 'più di lavoro per colmare le lacune tecnologiche di quei browser.

Conclusione

L'utilizzo di Google Web Starter Kit ti aiuterà nello sviluppo di un'applicazione web multi-dispositivo potente e performante. Il kit contiene modelli per una guida allo stile ed è uno strumento potente che è preconfigurato, in modo da poter sviluppare rapidamente il nostro progetto di applicazione web.

I progettisti dovrebbero essere obbligati a spiegare il loro processo?

Se sei un designer freelance, sei destinato a imbatterti nel temuto "cliente designer" almeno una volta nella tua carriera. Conosci il tipo - la persona che ha sempre un'opinione (o 50) su come dovresti fare il tuo lavoro .I clienti amano spingere il naso nel processo di progettazione indipendentemente dal fatto che debbano o meno farlo

(Consigli tecnici e di design)

20 pezzi di attrezzi da campeggio per Avid Traveler

A volte per sfuggire allo stile di vita frenetico, sempre di fretta, non abbiamo altra scelta che prenderci lontano dalla vita in città. Il campeggio è uno dei modi migliori per allontanarsi da tutto. È anche un tipo di viaggio che richiede molta preparazione: dal portare il giusto tipo di materiale per dormire, a trascinare gli utensili da cucina giusti e persino gli strumenti per arrampicarsi.Al

(Consigli tecnici e di design)