Negli anni novanta, agli albori del web, le neonate tecnologie utilizzate per la realizzazione delle pagine internet erano estremamente elementari.
La maggior parte dei siti risultavano composti da semplici pagine HTML con giusto una spruzzata CSS. Un’ipotetico sviluppatore web degli anni 90, necessitava solamente di un editor di testo, qualche nozione tecnica e tanta attenzione nella formattazione.
In quasi 25 anni il web ha subito evoluzioni profondissime. Una delle più importanti rivoluzioni a cui abbiamo assistito è stata la nascita dei dispositivi mobile. Smartphone e tablet hanno completamente ridefinito le pagine web e relativi metodi di creazioni. Considerando la complessità raggiunta dai moderni siti web, gli sviluppatori web necessitano di potenti (e funzionali) strumenti di sviluppo.
Con questo articolo presenterò 5 strumenti senza i quali mi sentirei perduto.
Sass: Css con i super poteri
Css è un linguaggio ideato per descrivere in maniera programmatica la formattazione dei documenti HTML XHTML e XML, ad oggi siamo alla terza versione. Più potente che mai Css3 permette di realizzare bellissimi effetti grafici, elaboratissime transizioni e impaginazioni sempre più complesse. Quello che Css3 non fa è rendere la sua sintassi più espressiva. I blocchi di codice che compongono un foglio di stile sono identici a quelli delle versioni precedenti di css. Tuttavia le pagine web sono enormemente più complesse e spesso essendo responsive implicano diverse migliaia di linee di codice css per essere impaginate correttamente.
A questo punto, a tirarci fuori dai guai, come i migliori supereroi entra in gioco Sass, ovvero un nuovo linguaggio creato appositamente per mitigare i problemi di espressività del css introducendo una sintassi più compelessa ai fini di poter organizzare il codice in una maniera nettamente migliore.
La sintassi di Sass è un superset di quella del css, questo significa che il codice css tradizionale è compatibile con Sass (ovviamente non è vero il contrario). Dal codice Sass poi viene ricavato il css finale tramite un’operazione di compilazione.
A questo punto viene da chiedersi se il gioco valga la candela. Vale la pena rinunciare alla semplicità e linearità del css introducendo un nuovo linguaggio ed un compilatore per ricavare il css finale?
Assolutamente si! Sass ripaga la fatica mettendo a disposizione una marea di funzionalità, come le funzioni, le variabili e i mixins, talmente utili e comode che dopo poche ore vi ritroverete a domandarvi come abbiate fatto a vivere senza.
Bootstrap: il framework front-end più utilizzato
Il concetto chiave dell’articolo ruota attorno alla scalabilità delle pagine e dei contenuti per i dispositivi mobile, ormai l’avrete capito. Bene, per la creazione di una moderna pagina web responsive avrete bisogno di un framework grafico che vi metta a disposizione un sistema a griglie adattabili. Questa cosa ovviamente non è obbligatoria, ma è tanto tanto consigliata.
Ci sono una marea di framework grafici che vi forniranno un sistema a griglia, personalmente ho optato per Bootstrap perchè è il più usato in assoluto (e questo significa tanto supporto online), è sviluppato da Twitter e offre tanto di più rispetto al sistema a griglia.
Ultimo vantaggio, ma non meno importante, dell’introduzione di un sistema a griglie è la linea guida comune fornita a chi si occuperà della realizzazione grafica e a chi poi questa grafica l’andrà a concretizzare in fase di montaggio del sito con un conseguente vantaggio in termini di tempistiche.
Font Awesome: icone vettoriali e addio PNG
Continuando nell’ottica dell’adattabilità delle pagine agli schermi di differenti dimensioni diventa fondamentale avere la possibilità di scalare senza sforzo le immagini e le icone. Cosa c’è di meglio di un set di icone vettoriali quindi? Personalmente adoro font-awesome, mi piace lo stile delle icone, il fatto che ce ne sia un numero elevato costantemente in aumento e sopratutto mi piace che siano open!
Detto questo si può scegliere tranquillamente il set di icone che si preferisce, ce ne sono davvero tanti e sono tutti validi, il funzionamento è sempre identico, quindi la discriminante è data dallo stile delle icone, il costo, il numero di icone e il supporto fornito dai grafici che le hanno reliazzate.
Da quando uso le font-awesome mi sono reso conto che i miei siti web hanno sempre meno risorse di tipo jpg e png, difatti le icone vettoriali unite al flat design che caratterizza i moderni siti web, ha quasi debellato i jpg e i png dalle pagine (ad esclusione dei contenuti ovviamente).
Bower: il tuo “pusher” di frameworks e utilities
Bower è uno strumento che chi viene dal mondo linux (come me) troverà estremamente familiare e comodo. Bower difatti è un packet manager, uno dei tanti oserei dire. L’ambito per cui è stato pensato è la sua principale peculiarità, difatti il target di Bower è gestisce le dipendenze relative alle pagine web.
Per fare un esempio concreto, gli argomenti dei punti 2 e 3, Bootstrap e Font-Awesome, sono dipendenze per le mie pagine web che necessitano dell’inclusione dei relativi file css e js.
Ogni nuovo progetto ne richiederà quindi il download, questo allunga i tempi di startup e complica eventuali operazioni di aggiornamento.
Bower renderà automatico il download e l’aggiornamento dei progetti dipendenza delle vostre pagine web. Vi basterà aprire un terminale e nella working directory dare il comando bower install <nome pacchetto>.
Semplice lineare e pulito!
Sublime Text: molto più di un text editor
Ultimo strumento a cui proprio non rinuncerei è Sublime Text, l’ide di sviluppo che dopo numerosi tentativi ho deciso di adottare.
Sublime è:
- Semplice
- Leggero
- Personalizzabile tramite plugin e temi
- Molto potente
- Multi piattaforma
Il packet manager integrato permette di gestire l’installazione e l’aggiornamento di plugin e temi. Le configurazioni, invece sono gestite tramite semplici ed intuitivi file json, la documentazione online è sempre abbondante.
L’editing del codice è ai massimi livelli, le tantissime scorciatoie da tastiera permettono di fare qualsiasi cosa senza mai spostare le mani. Personalmente adoro l’editing multilinea che unito alla ricerca rapida nel testo permette di eseguire nella maniera più rapida che abbia mai sperimentato le più classiche operazioni di refactor del codice. L’unica nota dolente è la sidebar inspiegabilmente castrata che non da un supporto adeguato alle oprazioni sul filesytem.
Questi 5 strumenti sono per me indispensabili oggi, non lo erano ieri e probabilmente non lo saranno domani. Solamente la capacità di mettersi in discussione, l’elasticità mentale e la curiosità sono realmente indispensabili per ogni sviluppatore.
E per te, quali sono i 5 strumenti indispensabili per lo sviluppo web?