I migliori strumenti per sviluppare siti web

Il web development è complicato e dinamico, il web cambia ogni giorno, e gli sviluppatori web devono stargli dietro. Fortunatamente, esistono tantissimi strumenti, librerie e framework per rendere il tuo lavoro un pochino meno pesante.

In questo articolo farò una lista dei miei strumenti preferiti per ogni categoria. Alcuni tools sono buoni per sviluppatori frontend, altri per tutti gli sviluppatori web, altri invece potrebbero rivelarsi utili anche se non sei uno sviluppatore.

# Editor

Tutti i developer dovrebbero avere un editor, o sei contento con il blocco note?

Va fatta la distinzione tra IDE e un “semplice” editor di codice, anche se oggi questa differenza è molto meno marcata.

L’idea di base è che un IDE ti da tutto quello di cui hai bisogno per sviluppare, così, di suo. In questo senso il migliore per il web è sicuramente Webstorm. Ti permetterà di iniziare subito con il tuo nuovo progetto in qualsiasi framework veramente in pochissimo tempo. Ma ad un costo 💲

Parliamo di editor invece. Il mio preferito è Visual Studio Code, e la ragione è semplice. Non è un IDE, ma grazie al miglior sistema di plugin e una delle community più grandi, può praticamente diventare quello che vuoi.

Di standard funziona con javascript, typescript, html, css a moltissimi altri linguaggi. Poi potresti installare Debugger for Chrome, per debuggare il codice. Se lavori con angular potresti guardare invece questo extension pack, Angular Essentials by John Papa. Se lavori in PHP sicuramente non mancheranno plugins per l’intellisense, snippets o qualcosa di specifico per Laravel.

C’è anche un plugin per giocare a snake, se ti annoi 🐍

Altra cosa da menzionare, tra i vari plugin ci sono anche temi custom. Volendo potresti fartene anche uno da solo!

# Terminale

Uno sviluppatore senza terminale è uno sviluppatore senza controllo!

Non proprio, oggi quasi tutti i tool offrono anche un’interfaccia grafica, o magari ne esiste una non ufficiale. Per questo, non hai per forza bisogno di un terminale, ma dovresti. Perchè? Per avere più controllo e una maggiore produttività.

Hai anche, però, bisogno del MIGLIORE, e se lavori con linux ne hai già uno. Ma se preferisci Windows, esiste un tool che non ti puoi perdere: Windows Terminal, open source, da Microsoft, col ❤

Può gestire PowerShell, CMD, distribuzioni WSL, e praticamente ogni app che fornisca un’ interfaccia linea di comando.

Ha un sitema di tab, così non devi aprire 42.000 finestre diverse, che poi perdi e non riesci a riconoscere perchè hanno tutte lo stesso colore e lo stesso titolo…

Il tema può essere cambiato, scegliendo tra quelli preesistenti, o lo si può personalizzare a piacere. Così puoi lavorare con stile.

Puoi salvare dei “profili”, che ti permettono di riaprire ad esempio una certa cartella con un determinato titolo, in un unico click.

Ha così tante opzioni che ti sembrerà di avere una mitragliatrice pronta a sparare comandi 🔥

# Browser

Non ci sono dubbi. Google Chrome sicuramente. E invece…

Un bravo sviluppatore web, specialmente un frontend, dovrebbe avere con se tutti i browser più comuni: Chrome, Firefox, Edge, Safari (ad averlo un mac), e forse anche Opera.

Ma a parte l’ovvio motivo di avere più browser, ti spiegherò perchè dovresti almeno utilizzare Chrome e Firefox nel tuo sviluppo quotidiano.

Con Chrome hai a disposizione i Chrome Dev Tools, che ti permettono di ispezionare e cambiare al volo html e css. Puoi controllare i log e richieste di rete, filtrarle, bloccarle, etc..

Oltre queste cose “comuni”, che tutti i browser possono fare, hai a disposizione diversi tool di testing: la tab performance, la tab relativa alla memoria, e Lighthouse, di cui ho già parlato in altro articolo: cosa sono i core web vitals.

I Chrome Dev Tools ti permettono anche di integrare altre funzionalità, grazie a diversi plugin, tipo Redux DevTools.

Ti stai chiedendo perchè dovresti usare anche Firefox? la risposta è semplice: Firefox Developer Edition. È Firefox ma per sviluppatori web, quindi perchè dovresti perdertelo?

Scherzi a parte, ha molti strumenti che possono rendere il tuo sviluppo più semplice, e che sono complementari a quelli di Chrome. Per esempio ha un visualizzatore per i layout grid, veramente fatto bene. Ha anche lui una tab per controllare le richieste, ma non solo ti permette di visualizzarle, ti da pure la possibilità di modificarle e inviarle di nuovo.

Oltre a questo ha anche un test per l’accessibilità, che ti permette di ispezionare problemi comuni come contrasti o elementi grafici senza label.

# Bundler

Javascript è interpretato, ma dovresti compilarlo.

Un bundler è uno dei tool principali che dovresti usare nei tuoi progetti, e Webpack è il re, nella mia modesta opinione.

Ha molti benefit già di default, ma a disposizione avrai uno dei più grandi ecosistemi di plugin nell’universo dei bundler.

Ci sono i “loaders” che ti permettono di gestire gli import di diversi tipi di file, e ci sono plugin per personalizzare la build a tuo piacimento.

Giusto per menzionare quelli che uso praticamente sempre:

• ts-loader: per gestire il typescript.
• css-loader: per gestire file css importati dal javascript
• sass-loader: per compilare sass in css.
• HtmlWebpackPlugin: per includere uno o più file html nella build finale.
• MiniCssExtractPlugin: per estrarre il css come uno o più file separati.

Con Webpack puoi facilmente compilare siti multi pagina, applicazioni single page e librerie, ed hai a disposizioni molte ottimizazzioni, tipo minificazione, chunk splitting, hashing, gestione di import dinamici e molto altro…

Tuttavia, esistono altri bundler che devo menzionare: rollup.js e parcel.js.

Queste sono delle moderne alternative a Webpack, e potrebbero fare al caso tuo, quindi dagli un occhiata.

# Linguaggi

Lo sviluppo web non è solo javascript, html e css.

Oggigiorno esistono diverse scelte, sia per rimpiazzare Javascript, sia per il CSS.

Dovresti, per esempio, considerare di usare Typescript. Il principale beneficio sono i tipi, come suggerisce il nome. Questo vuol dire che non dovrai più impazzire per ricordarti i nomi delle variabili, proprietà e metodi.

Vuol dire anche imparare un nuovo linguaggio di programmazione.

Ma una volta che avrai capito la sua filosofia, e che non è altro che Javascript con i superpoteri, non tornerai indietro.

Poi è anche possibile far convivere js e ts nello stesso progetto, quindi puoi convertire un tuo vecchio progetto passo dopo passo.

Un’altro linguaggio che dovresti imparare è SASS, o qualsiasi altro preprocessore per CSS.

SASS : CSS = Typescript : Javascript

SASS ha due 2 sintassi diverse, una si chiama scss ed è molto simile al normale CSS, e l’altra è una sintassi più “pulita”, senza bisogno di usare parentesi graffe o punti e virgola.

Alcune delle cose interessanti che ti permette di fare sass:

• Regole innestate
• Salvare variabili globali e non
• Calcoli risolti a tempo di compilazione
• Altri strumenti: @use, @mixin, @function

Ti da l’impressione di essere un linguaggio di programmazione, ma alla fine esiste solo fino alla compilazione.

Il SASS, infatti, deve essere convertito in CSS, e questo è molto semplice da fare con Webpack e sass-loader, che ho già menzionato.

Come per il Typescript, il css è completamente compatibile con SASS (solo nella sintassi scss). Per questo motivo puoi prenderti il tuo tempo nel convertire vecchi progetti.

# Template Engine

Facili da imparare, potenti, quindi perchè non usarne più di uno?

Un template engine, ti permette di costruire UI complesse e dinamiche più velocemente. Sono anche, generalmente, più sicuri contro attacchi xss, rispetto al classico innerHTML, per contenuti dinamici.

Propongo 2 opzioni, ma ricorda che non sono le sole.

• Handlerbars: un po’ vecchio, o per dirlo meglio “maturo”.
• lit-html: nuovo e semplice, ma potente e dinamico.

Handlebars è la scelta giusta se non hai bisogno di interazione. Per esempio potresti usarlo per costruire dei template sul server, usando Node.js.

Trovo, inoltre, che sia un’ottima combinazione con Webpack.

Puoi usare handlebars-loader e html-webpack-plugin, per costruire dei template che vengono compilati durante il processo di bundling di Webpack.

Molto utile per siti multi pagina “classici”.

Puoi creare dei “componenti”, chiamati partials in handlebars, che ti permettono di ridurre la duplicazione dell’html.

Puoi interpolare variabili a tempo di compilazione, così che tu possa costruire diverse versioni dello stesso sito, solamente cambiandole.

Utile anche per siti multilingua.

Puoi usare condizioni e loop per costruire UI complesse.

Ma poi arriva il bisogno di avere qualcosa di più dinamico e “runtime”. Handlebars non lo può fare… cioè potrebbe ma non dovresti.

Il motivo principale, come scritto nella loro doc, Handlerbars non gestisce gli eventi di suo.

Quindi a questo punto dovrei dire che se hai intenzione di usare un framework come angular, react, vue o svelte, hai già a disposizione un sistema di template e dovresti usare quello.

Ma se non vuoi usare un framework, perchè ti piace il javascript puro, come i veri duri 💪, allora avrai bisogno di un sistema semplice per costruire contenuti dinamici.

Ed entra in gioco…. lit-html.

Nuovo, e semplice da usare se conosci Javascript. Perchè? beh è semplice sintassi js.

I template sono definiti usando i template literals, poi puoi usare la funzione “render” per attaccare il template ad un elemento già esistente.

Grazie al fatto che è semplicemente Javascript, puoi usare tutto quello che conosci per costruire i template: if, for, switch, operatori, funzioni, classi e promise.

Puoi anche comporre facilmente diversi templates.

Ha anche le così dette “direttive”, che sono un potente mezzo per interagire con il template. E può gestire gli eventi semplicemente interpolando delle funzioni.

Ultima cosa, lit-html è leggero e molto performante! Questo ne fa la scelta perfetta per template dinamici.

Davvero l’ultima cosa sui template. Niente ti vieta di usare sia Handlerbars che lit-html insieme. Veramente, dovresti provare!

# Analytics

Hai pubblicato un sito, e ora?

Non puoi rilasciare un sito web e aspettarti che funzioni e basta. Ti serve qualche tool per fare analisi.

Come prima cosa, potresti voler usare search console, di Google. Ti permette di monitorare le statistiche di ricerca e vedere se le tue pagine web sono state “lette” e indicizzate da google.

Potresti scoprire di dover migliorare alcune cose, come:

• Caricare una sitemap.
• Caricare un robots.txt.
• Gestire redirect e pagine di errore.
• Gestire contenuti multi lingua.

Potresti addirittura scoprire che a Google non piacciono le tue pagine. E sapresti il motivo.

Ma la search console si ferma alla “limitata conoscenza” di Google. Quindi ti serve un altro tool per capire se i tuoi utenti fanno quello che ti aspetti sul tuo sito/app.

Una cosa del genere è Google Analytics. Si esatto, Google regna in questa sezione.

Semplice da integrare. Puoi farlo davvero in 10 minuti.

Dopo di che inizierà a collezionare dati anonimi per te, pronti da analizzare e interpretare.

Può essere configurato per eventi custom, ma di default “ascolterà” i caricamenti e cambi di pagina, scrolling e user engagment (che è lo scrolling ma lento…), click, download di file e altro ancora.

Colleziona anche una posizione generica e la lingua dell’utente, informazioni del dispositivo, incluso risoluzione, sistema operativo etc…

Ti permette di fare diverse analisi sui dati, ma una delle più utili è quella che ti permette di vedere i diversi percorsi che fanno gli utenti che navigano nel tuo sito.

Fa anche molto altro, non ti resta che scoprirlo.

# Extra Tools

Ancora? …Perché no?

Recentemente ho avuto il piacere di usare un monitor in modalità portrait, e mi piace! Ma ho come avuto la sensazione che lo “snapping” di default di Windows fosse 💩

Così ho scoperto un fantastico tool di Microsoft (what?), che mi ha fatto innamorare del mio setup di monitor.

Power Toys. Ancora… open source, da Miscrosoft (e la sua community), col ❤

Power Toys non è solo un tool. In effetti sono otto diversi tool in uno, ed altri in sviluppo.

Giusto un veloce sguardo a tutte le features:

• Color Picker: hai capito bene, ora puoi prendere tutti i colori da ogni cosa che vedi.
• Fancy Zones: il motivo per cui l’ho scaricato. Ti permette di dividere il tuo monitor in righe, colonne, griglie o layout custom.
• Image Resizer: fai click destro su un immagine, clicchi su resize, ed hai una versione più piccola.
• Keyboard Manager: finalmente puoi personalizzare la tastiera e le shortcut facilmente.
• PowerRename: tutto il potere delle regex, per rinominare file.
• PoweToys Run: sei distante una shortcut per aprire app, file, documenti, siti web…
• Shortcut Guide: per gli smemorati come me.
• File Explorer Add-ons: non super utile, ma perché no?

Finalmente

Beh, questo è quasi tutto il mio setup completo.

Trovo che quelli di cui ho parlato, siano strumenti essenziali per lo sviluppo web, ma non solo.

Potresti avere un opinione diversa, quindi fammi sapere se usi un setup simile, o odi questi tool e ne usi altri 😉