I migliori strumenti per lo sviluppo frontend consigliati dal team Nephila

Come ti abbiamo raccontato nel blog post dedicato agli strumenti per programmare con Python, la nostra specializzazione è lo sviluppo backend di applicazioni web con Python, ma non ci occupiamo solo di questo. Ci piace “sporcarci le mani” con tutto quello che è sviluppo web, compreso quello frontend. Questo ci permette di realizzare progetti web completi e di dare un supporto più ampio a chi decide di realizzare qualcosa di tecnologico insieme a noi.

Per fare sviluppo frontend vengono utilizzate varie tecnologie tra cui HTML, CSS, Javascript, e negli ultimi anni si sono diffusi nuovi framework con un approccio a componenti, tra cui React, Angular e VueJS.

Leggi anche: Nephila punta su VueJS e ReactJS

Per adesso, le tecnologie frontend che usiamo di più sono appunto Vue e React. Se ti va di fare un giro sui nostri social, qui puoi scoprire perché apprezziamo moltissimo lavorare con Vue.js. In generale, sperimentiamo sempre nuovi linguaggi o framework per non fossilizzarci sulle stesse tecnologie, conoscerne di nuove e cercare sempre di innovare lo stack tecnologico.

Se ci stai leggendo, ma non sai benissimo cosa si intenda per sviluppo frontend, te lo spieghiamo subito. Lo sviluppo frontend è quella parte dello sviluppo web che realizza e si prende cura degli elementi visivi di un sito o applicazione web. Quello che vedi sullo schermo del computer quando navighi un sito web viene infatti chiamato frontend. Ci riferiamo a foto, immagini, video, barra di ricerca, menu, pulsanti, finestre di login, e via dicendo. In poche parole, chi si occupa di sviluppare la parte frontend di un progetto web realizza l’interfaccia di siti o applicazioni web, quindi l’area con cui l’utente interagisce. Solitamente, il frontend di un sito o applicazione web viene implementato sulla base di un design che viene realizzato da figure specializzate: gli UX e UI Designer.

Leggi anche: User experience/User Interface Design

Anche stavolta, ci piacerebbe portarti “nel backstage” e confrontarci con chi si occupa di sviluppo frontend come noi. Così, abbiamo coinvolto il nostro team frontend e gli abbiamo chiesto quali sono gli strumenti di cui non possono fare a meno nel proprio lavoro e i motivi per cui li consigliano.

Quindi, ecco la nostra lista. Buona lettura!

Postman è un’app per effettuare chiamate API. Permette all’utente anche di creare, modificare, organizzare, testare e documentare le richieste. La trovo molto utile per collaborare all’interno del team, ed è presente in versione gratuita e a pagamento. - Consigliato da Cristiano

Vue.js devtools è un’estensione per browser che aiuta nel debug delle applicazioni Vue. In pratica, è possibile visualizzare i singoli componenti che compongono l’applicazione e per ogni componente vedere props, data, computed, variabili di $root e timeline degli eventi. In più, l’estensione contiene anche delle sezioni relative al routing e allo state manager (es. Pinia), nel caso fossero presenti nell’applicazione Vue che abbiamo bisogno di debuggare. - Consigliato da Cristiano

ESLint è un linter per codice Javascript che analizza staticamente il codice permettendo di individuare problemi o incongruenze di codice prima di eseguirlo. Permette anche di creare una serie di regole e suggerimenti sul comportamento del codice. È inclusa anche l’estensione per Typescript! - Consigliato da Rossella

Redux DevTools è un’estensione per il browser che permette di debuggare gli stati di Redux. La trovo essenziale se si lavora con degli stati complessi dagli aggiornamenti molto frequenti. - Consigliato da Rossella

CSS Viewer è un’estensione del browser che permette di velocizzare l’analisi dei CSS di una pagina web solamente con l’hover sugli elementi, senza dover utilizzare l’inspector del browser. In questo modo è possibile verificare tutti gli stili dati ad uno specifico elemento senza dover ricercare eventuali sovrascritture per trovare il punto giusto. - Consigliato da Simone

Can I use è uno strumento basilare ma essenziale per lo sviluppo cross-browser. Inserendo la proprietà che abbiamo intenzione di applicare ad un dato elemento, mostra una tabella di compatibilità su tutti i browser più recenti, in modo da verificare rapidamente se ci sono delle criticità da un browser all’altro. - Consigliato da Simone

Accessibility Checker è un tool online che permette di valutare l’accessibilità di un progetto, identificando eventuali problematiche (contrasti sfondo - testo, dimensione caratteri, mancanza di “alt” nelle immagini, ecc) e segnalandole. Risolvendo ogni punto della lista emersa dal test, che viene effettuato linkando l’URL della pagina da verificare, è possibile raggiungere una migliore accessibilità ed usabilità della relativa pagina/sito web.- Consigliato da Simone

Da diversi anni saldamente al primo posto tra gli IDE maggiormente utilizzati nel Developers Survey di Stack Overflow, VS Code è un IDE multipiattaforma creato da Microsoft. Dotato di una ricca quantità di feature, permette di iniziare subito a scrivere codice. Uno dei suoi punti di forza è la possibilità di adattarlo alle proprie necessità aggiungendo estensioni per gestire le più disparate esigenze di coding per migliorarne l'esperienza. - Consigliato da Glenn

Leggi anche: Le migliori estensioni di Visual Studio Code

Magic CSS è un'estensione per browser che permette di scrivere CSS/Less/Sass live su una pagina web prima di scriverli direttamente sui file interessati. - Consigliato da Glenn

La nostra carrellata di strumenti per lo sviluppo frontend termina qui. Adesso, sai quali sono gli strumenti per noi essenziali quando ci occupiamo di frontend. Quali sono i tuoi? Hai altri strumenti da segnalarci che secondo te dovrebbero entrare in questa lista? Vogliamo assolutamente saperlo! Scrivici nei commenti al blog post che vedi qui sotto, oppure sui social. Ci trovi su Twitter, Facebook e Linkedin.

Alla prossima!