5 Ultimi strumenti di sviluppo Web che dovresti sapere

Se hai seguito le nostre serie di post mensili su Risorse fresche per progettisti e sviluppatori, puoi notare che ogni mese vengono introdotti molti nuovi strumenti; la lista è probabilmente infinita. Nel 2008, quando stavo iniziando a imparare l'HTML e il CSS, molti di questi strumenti non erano ancora esistiti.

Oggi il Web sta crescendo esponenzialmente. Sta diventando anche più complesso che mai. Abbiamo bisogno di più strumenti che possano contribuire a sollevare parte del peso dello sviluppo del sito web. Quindi, in questo post, abbiamo messo insieme una serie di strumenti di tendenza che aiuteranno nello sviluppo web .

Speriamo che queste liste possano aiutarti a introdurre gli strumenti di sviluppo web giusti, in particolare per quelli di voi che stanno appena iniziando.

1. Pre-processori CSS

Il CSS è molto facile da scrivere. La sintassi è semplice e facile da capire. Ma man mano che il progetto si ingrandisce, potresti dover gestire più fogli di stile per gestire migliaia di linee CSS e se conosci il CSS, sai che diventa difficile mantenere in quella situazione.

È qui che i pre-processori CSS diventano davvero utili. Abbiamo ricoperto CSS Preprocessor per diverse volte in passato, quindi credo che tu abbia già familiarità con loro. Per coloro che sono nuovi, in poche parole, il Pre-processore CSS ci consente di scrivere CSS nella programmazione della moda con Variabili e funzioni, che viene quindi compilato in un formato CSS conforme al browser . Possiamo anche riutilizzare le proprietà CSS con alcune regole speciali come @extend e @include .

Esistono numerosi pre-processori CSS: Sass, LESS, Stylus e Myth.

2. Motore di template

La creazione di una pagina HTML statica in modo simile è semplice. Tuttavia, se hai più pagine HTML da gestire nel tuo progetto, le cose potrebbero sfuggire di mano. La maggior parte di queste pagine potrebbe condividere gli stessi componenti come un'intestazione, una barra laterale e un piè di pagina.

Se cambi qualcosa nella sidebar, dovresti cambiarla per la sidebar nelle altre pagine, una per una, o usare invece un motore di template?

L'utilizzo di un motore di modelli suona meglio per questa situazione. Ora ci sono un certo numero di Template Engine che possiamo usare, come Kit, Jade e Handlebars. Ognuno ha le sue convenzioni di scrittura. Il kit, ad esempio, viene fornito solo con le variabili e la capacità di importazione dichiarate con un semplice tag di commento HTML, come tale.

 // esempio di importazione di un modello separato  // questa è una variabile 

Jade e Handlebars sono dotati di molte funzioni robuste per soddisfare progetti più complessi. Ne discuteremo più dettagliatamente in un post separato (rimanete sintonizzati!). Il punto è che se vuoi creare un sito Web statico scalabile, dovresti approfittare di un motore di template .

3. Task Runner

Il processo per costruire un sito Web è considerevolmente ripetitivo. Minification, Compilation, Unit Testing, Linting, Concatenating Files e Browser Refreshing, per citarne alcuni, sono le cose che molto probabilmente faremmo spesso nei progetti. Fortunatamente, possono essere automatizzati utilizzando un Task Runner, come Grunt e Gulp.

Puoi dire a Grunt di fare una serie di compiti specificati in Gruntfile.js . Ora ci sono un sacco di plugin per automatizzare quasi tutto con Grunt, quindi non è necessario scrivere i propri compiti Grunt .

Supponi di voler compilare il tuo file LESS in CSS, puoi installare grunt-contrib-less. Nel nostro post precedente, abbiamo anche utilizzato Grunt per rimuovere i moduli non necessari in jQuery.

Se il tuo progetto ti stanca, è giunto il momento di utilizzare un Task Runner per ottimizzare il tuo flusso di lavoro.

4. Strumento di test sincronizzato

Ecco uno strumento inevitabile se stai costruendo un sito web ottimizzato per dispositivi mobili. Se hai molti dispositivi per testare il tuo sito web, hai sicuramente bisogno di Test sincronizzati, che ti permette di testare il tuo sito web su più dispositivi contemporaneamente.

Il ricaricamento del browser e le interazioni come il clic e lo scorrimento si riflettono su tutti i dispositivi testati contemporaneamente, salvandoti dall'azione ripetitiva.

Ci sono due strumenti che puoi provare a fare: un plugin Grunt chiamato BrowserSync e un'applicazione GUI chiamata Ghostlab.

5. Toolkit di sviluppo

Toolkit di sviluppo mette insieme un numero di strumenti in un'unica applicazione. Se non ti senti a tuo agio con l'impostazione basata su testo in Grunt, un'applicazione GUI sarebbe probabilmente uno strumento migliore per te.

Codekit è pioniere di questo tipo di applicazione e include LESS, Sass, Kit, Jade, Siml, Uglify, Bower e molto altro nella sua lista delle funzionalità.

Codekit è un'app solo per OS X. Se stai usando Windows puoi provare Prepros, se usi Linux, c'è l' app Koala .

Crea spinners e caricatori a elemento singolo con CSSPIN

Puoi creare cose incredibili con CSS3, dai campi di input personalizzati ai menu a discesa e persino alla grafica vettoriale . Queste tecniche stanno rapidamente superando JavaScript, rendendo più facile per gli sviluppatori realizzare esperienze utente migliori.Una delle cose più complicate da realizzare è un'animazione a spinner di caricamento, ma l'animazione CSS moderna lo rende anche piuttosto semplice.Pe

(Consigli tecnici e di design)

20 fantastici set di icone per viaggi e turismo gratuiti che puoi scaricare

Cerchi delle icone a tema turistico o di viaggio da aggiungere al design del tuo sito di viaggi? Sono qui in questo post, centinaia di icone che puoi usare nel tuo progetto. Si tratta di icone adatte per l'uso in siti di viaggio, siti di prenotazione, siti di noleggio di mezzi di trasporto, hotel e alloggi e altro ancora

(Consigli tecnici e di design)