C’è qualcosa di romantico ed entusiasmante nell’aprire TextEdit o Notepad e digitare “<HTML>” per iniziare un nuovo progetto. È così che per molti di noi ha avuto inizio l’ossessione per la programmazione web. Nel 2024, gli strumenti di sviluppo web non si limitano a registrare il nostro testo: ci aiutano a creare progetti e ad alimentare l’intero processo. Oltre a questo, HTML e CSS non sono più gli unici elementi da considerare.
La fase di pianificazione, per esempio, è vitale. Bisogna considerare il wireframing, le scelte di design e i flussi di lavoro collaborativi. Poi c’è la scelta del framework JavaScript ideale, se usare un ambiente di sviluppo integrato (IDE) e molto altro.
In questo post, daremo un’occhiata a 62 strumenti di sviluppo web che potreste usare nel 2024. Ma prima di entrare nel vivo, definiamo cos’è uno strumento di sviluppo web e quali tipi di strumenti includiamo in questa lista.
La Nostra Definizione di Strumento di Sviluppo Web
In superficie, classificare uno strumento di sviluppo web sembra semplice. Tuttavia, anche la definizione più superficiale implica alcune considerazioni che rendono i confini meno precisi.
Per esempio, pensate se un servizio di streaming video conta come uno strumento di sviluppo. In una certa bolla, probabilmente no. Tuttavia, se lo state usando per registrare il vostro schermo per una specifica applicazione di progettazione, si trasforma improvvisamente in uno strumento collaborativo unico.
Secondo noi, uno strumento di sviluppo web è qualcosa che vi aiuta a raggiungere gli obiettivi del vostro progetto in modo mirato. Anche se questa definizione non include i singoli linguaggi di programmazione, ci sono sottoinsiemi, superinsiemi e framework come TypeScript che sono a cavallo della linea. Se volete guadagnare un buon stipendio, tenere d’occhio questi aspetti è vitale.
Altro esempio: Git. Si potrebbe sostenere che questo sistema di controllo di versione (VCS) copre un sacco di aspetti. C’è un linguaggio specifico usato per eseguire i comandi, e la funzionalità di base offre molto in termini di sviluppo web. Tuttavia, è anche possibile usarlo come strumento di apprendimento, in particolare attraverso la ricerca dei log di tracciamento di issue e commit.
Nel complesso, uno strumento di sviluppo web potrebbe essere praticamente tutto ciò che fa funzionare il vostro progetto in modo efficiente e produttivo. Noterete questa diversità nella lista degli strumenti.
In Che Modo gli Strumenti di Sviluppo Web Possono Semplificare il Vostro Flusso di Lavoro
Ecco un trigger warning prima di pronunciare le prossime due parole: “crunch time“.
Sì, questa temuta espressione ricorda che gli strumenti di sviluppo web vi faranno risparmiare un sacco di tempo. Le statistiche mostrano che più progetti si basano sul crunch come standard, e molte industrie di sviluppo lo usano ancora oggi.
Indipendentemente dal fatto che la vostra azienda usi o abbia bisogno di “crunch time” e straordinari, gli strumenti di sviluppo web possono comunque aiutare. Questi strumenti fanno il lavoro pesante e automatizzano il lavoro ordinario che consuma la vostra giornata. Come tali, offrono una spinta organica alla vostra produttività.
Tuttavia, possono anche offrire un bonus se si opera sotto un framework di progetto agile come Scrum. Per esempio, considerate che uno strumento come JSFiddle può aiutarvi a condividere snippet con altri team durante la coda di uno sprint, pronti per il successivo.
Inoltre, mentre gli stand-up quotidiani non andranno da nessuna parte, un server Discord o un canale Slack potrebbero offrirvi un modo migliore per concentrarvi e allineare un prossimo set di compiti, lontano dalla pressione degli obiettivi dello sprint corrente.
Nel complesso, gli strumenti di sviluppo web sono tanto di pianificazione quanto di esecuzione.
Come Scegliere il Giusto Stack di Sviluppo per il Vostro Progetto
Probabilmente stiamo predicando a persone già convertite, ma uno strumento di sviluppo web stellare vale quanto un MacBook alimentato da M1 color rosa oro. Come tale, ottenere la giusta miscela di strumenti per il vostro progetto specifico è fondamentale per costruire una solida base per il lavoro.
Se è qualcosa che non avete considerato prima, la fase iniziale di pianificazione si rivelerà inestimabile. Prendere un po’ di tempo per decidere gli strumenti che userete ritarda la fase di codifica del progetto. Tuttavia, recupererete questo tempo più tardi, poiché ci saranno meno problemi potenziali legati al software. Vedrete anche un livello di output più coerente (dato che tutti saranno sulla stessa pagina).
Considerazioni per Scegliere il Vostro Stack di Sviluppo
La scelta dello stack giusto per il progetto si riduce a quanto segue:
- Complessità: Considerate quanto complessa dovrà essere la vostra consegna, poiché questo determinerà la complessità dello stack.
- Scalabilità: Se il vostro progetto è per un’azienda locale, le soluzioni necessarie saranno diverse da quelle di un’impresa internazionale. Come tale, avrete bisogno di uno stack più scalabile per raggiungere i vostri obiettivi.
- Sicurezza: È quasi superfluo dire che qualsiasi cosa scegliate non deve compromettere la sicurezza dell’utente e del sito.
- Costo: Naturalmente a nessuno piace spendere troppo, e se ci sono budget ristretti, questo sarà un fattore che assumerà un’importanza rilevante.
Ci sono due aree in cui si possono dividere le tecnologie:
- Lato server: Guardate le tecnologie di back-end che usate. Per esempio, date un’occhiata alla vostra scelta di hosting e server web, all’archiviazione di valori chiave e SQL, a qualsiasi app e framework di automazione che userete e, naturalmente, al linguaggio di programmazione.
- Lato client: Le scelte dei vostri strumenti front-end saranno probabilmente più semplici, specialmente quando si tratta dei linguaggi che userete. Mentre HTML, CSS e JavaScript saranno presenti, la vostra scelta del framework JavaScript (e del framework di automazione) avrà bisogno di qualche considerazione.
Quando si tratta degli stack di sviluppo del mondo reale, noterete che molti grandi siti usano una combinazione di JavaScript e React.js, insieme a Nginx. Negli stack di sviluppo troverete anche Memcached, Redis e Ruby on Rails.
62 Fantastici Strumenti di Sviluppo Web da Usare nel 2024
Senza ulteriori indugi, diamo un’occhiata alla lista di strumenti di sviluppo web che raccomandiamo di usare nel 2024. Li abbiamo organizzati in categorie, ma per il resto gli strumenti non sono in un ordine specifico. Se siete di fretta, saltate pure a una particolare sezione usando l’indice qui sotto.
Ambienti di Sviluppo Locale
Un ambiente di sviluppo locale è una parte essenziale di qualsiasi stack di sviluppo. Tuttavia, è particolarmente vitale per lo sviluppo web. Ecco alcuni degli strumenti di sviluppo locale più importanti.
1. DevKinsta
Saremo anche di parte, ma DevKinsta potrebbe diventare lo strumento di sviluppo web numero uno per il 2024 e oltre.
Ok, ok, siamo di parte, e siamo orgogliosi di ciò che abbiamo lanciato!
Per chi non lo sapesse, DevKinsta è uno strumento che vi aiuta a far girare le installazioni locali di WordPress in un attimo. Si tratta di una suite completa che consente di progettare, sviluppare e distribuire un sito WordPress per macOS e macchine Windows (con una versione Linux in cantiere).
Vi permette di adattare la vostra installazione al vostro progetto attuale. Per esempio, il vostro “server” potrebbe usare Nginx o Apache, la vostra scelta della versione di PHP, eseguire MariaDB o MySQL, e molto altro:
C’è anche altro sotto il cofano. Potete eseguire il debug e testare anche le email attraverso il server SMTP integrato, e per la gestione del database è possibile utilizzare il potente strumento Adminer:
Nel complesso, pensiamo che DevKinsta sia ideale per lo sviluppo moderno di WordPress. Può inserirsi direttamente nel vostro flusso di lavoro.
Abbiamo creato questo strumento pensando a sviluppatori, designer, freelance e agenzie. Tuttavia, praticamente chiunque abbia esigenze di sviluppo quotidiane troverà valore in DevKinsta, soprattutto (ma non solo) gli utenti Kinsta.
Inoltre, DevKinsta è completamente gratuito!
2. MAMP
Si potrebbe pensare che gli strumenti classici per creare e distribuire pagine web siano morti e sepolti, visto l’arrivo di strumenti sandbox più veloci. Tuttavia, i tradizionali stack di servizi web, come LAMP, MAMP e XAMPP, vanno ancora forte.
Di solito combinano un sistema operativo (OS) – Linux, macOS, o Windows – insieme al webserver Apache, al database MySQL e ai linguaggi di programmazione Python, PHP e Perl in uno stack. Uno stack di servizi web come questo sarà ancora molto usato nel 2024.
MAMP è la versione specifica per macOS dello strumento. Questo approccio prevede di installare uno stack e lavorare sul design e sul deployment. Anche se il processo può essere più lungo rispetto alle configurazioni più moderne, c’è ancora un livello simile di flessibilità sotto il cofano, o almeno, il potenziale c’è.
Mentre con uno strumento come DevKinsta vi servirete di un’elegante interfaccia grafica utente (GUI), con uno stack di servizi web dovete installare manualmente le aggiunte di cui avete bisogno. Per esempio, non c’è un modo integrato per far girare un sito WordPress senza lanciarne uno vostro. Una situazione simile si verifica con il test della posta elettronica.
Come per altri strumenti di ambiente di sviluppo locale, MAMP è completamente gratuito. Tuttavia, c’è anche una versione premium di MAMP per Windows e Mac che aumenta le funzionalità e fornisce uno strumento di sviluppo web completo e robusto.
A causa della flessibilità e del prezzo, i classici stack di servizi web si trovano ancora sui computer di molti team di sviluppo. Gli aficionados della riga di comando graviteranno naturalmente verso questa soluzione, soprattutto se amate usare gestori di pacchetti come Homebrew, Flatpak o Ninite.
Naturalmente, sviluppatori e sviluppatrici Apache useranno anche questi stack, così come MySQL e Python o PHP. Per estensione, anche chi si occupa di sviluppo WordPress si sentirà a casa qui.
3. XAMPP
XAMPP è un altro stack di servizi web che riceve molto amore da developer PHP, compresi coloro che creano prodotti WordPress. La “X” nel nome rappresenta la natura multipiattaforma dello strumento. Offre installatori per macchine Windows, macOS e Linux:
Mentre una volta c’era una differenza tra i vari stack di servizi web, i costanti aggiornamenti e miglioramenti hanno livellato il campo. Tuttavia, XAMPP ha un paio di assi nella manica unici.
Per esempio, MySQL non è più il Relational Database Management System (RDMS) predefinito. XAMPP usa MariaDB. È probabilmente una rappresentazione più accurata di un server di produzione, dato il passaggio ad altre soluzioni dopo l’acquisizione di Oracle.
Inoltre, c’è un installatore di web app all’interno del pacchetto XAMPP. Bitnami è simile a soluzioni come Softaculous, ma è specifico per XAMPP:
Pur essendoci molte applicazioni disponibili, probabilmente vi interesserà di più l’installatore di WordPress. Tuttavia, ci sono molti componenti aggiuntivi tra cui scegliere, e questo rende XAMPP una soluzione flessibile per lo sviluppo locale.
Editori di Testo e Codice
La maggior parte di chi lavora nello sviluppo ama discutere su quale editor di codice si dovrebbe usare. Ok, siamo iperbolici, ma ci sono un sacco di opinioni sull’argomento, con una fervente fanbase per ogni editor.
Tuttavia, se i sondaggi sono corretti, probabilmente state usando Sublime Text, Visual Studio Code (VSCode), o IntelliJ IDEA. Ha senso, dato che questi tre strumenti vanno dal semplice editing del testo all’Integrated Development Environment (IDE) completo. Tuttavia, ce ne sono altri che vale la pena menzionare. Diamo un’occhiata ad alcuni di loro.
4. Visual Studio Code
Dal suo lancio nel 2015, l’uso di Visual Studio Code è esploso nei desktop di sviluppo di tutti i tipi.
È un editor di codice open source sviluppato da Microsoft che offre abbastanza funzionalità per poter essere considerato un IDE (Integrated Development Environment ). Senza dubbio offre abbastanza funzionalità per catturare oltre la metà del mercato: il 55% di chi lavora nello sviluppo web usa Visual Studio Code quotidianamente.
Nella sua configurazione predefinita, Visual Studio Code è prima di tutto un editor di testo. Tuttavia, quando è accoppiato con la sua libreria di estensioni, diventa modulare e abbastanza flessibile per soddisfare qualsiasi vostra esigenza di sviluppo:
Significa che potete installare linters e fixer per la lingua scelta (sì, ESLint e PHP CS Fixer ci sono), insieme alle estensioni Docker e Vagrant, e molto altro.
Parlando di linguaggi, Visual Studio Code supporta JavaScript, Node.js e TypeScript. Tuttavia, l’ecosistema di estensioni è così ricco che sarete in grado di trovare qualcosa che supporti il linguaggio che state usando.
Inoltre, troverete anche un’ottima integrazione con altri prodotti Microsoft, in particolare GitHub:
Visual Studio è completamente gratuito, e dato il set di funzionalità, è ideale per molti. Consideriamo VSCode un’eccellente via di mezzo tra IDEA e Sublime Text. A proposito, diamo un’occhiata a quest’ultimo.
5. Sublime Text
Sublime Text è un pilastro nel mondo degli editor di testo. È più essenziale della maggior parte delle altre soluzioni, anche se il suo aspetto smentisce la potenza sotto il cofano.
Troverete molte delle funzioni che Sublime Text offre anche in altri concorrenti. Per esempio, la Command Palette è qualcosa che vedrete in molte soluzioni perché è semplice da usare.
Inoltre, ci sono potenti scorciatoie da tastiera per l’editing, come fare selezioni multiple per modificare diverse colonne contemporaneamente. Inoltre, la funzione Goto Anything offre combinazioni di scorciatoie da tastiera simili a quelle di Vim per percorrere i vostri file:
Sublime Text è uno strumento premium con un periodo di prova molto generoso. Può essere considerato gratuito, ma per contribuire al lavoro di chi lo ha sviluppato, si dovrebbe acquistare una licenza per un uso esteso.
A nostro parere, per chi programma in piccolo o per hobby, Sublime Text offre una grande User Experience (UX) e fornisce lo stretto necessario. Continua a trovare il favore di molti sviluppatori per le sue immagini piacevoli, il layout senza problemi e l’estensibilità.
6. Atom
A un certo punto, Atom ha iniziato a essere molto usato nell’ambiente dello sviluppo. Tuttavia, da quando è arrivato Visual Studio Code, il suo successo è calato. È un peccato, perché è un grande editor di codice adatto a molte applicazioni diverse.
Si tratta di un’applicazione sviluppata da GitHub, il che può spiegare perché è stato spinto verso il basso nella gerarchia di Microsoft. Tuttavia, viene aggiornato regolarmente e può essere considerato una versione alternativa di Visual Studio Code.
L’editing del testo è funzionale, e come il suo fratello maggiore, ha un’integrazione GitHub integrata. Ci sono anche molti componenti aggiuntivi chiamati “pacchetti”:
Ci sono molti temi disponibili che vi aiutano ad adattare Atom al vostro flusso di lavoro e ai vostri progetti. Atom include diversi temi tra cui scegliere, e alcuni, come One Dark, sono così popolari che hanno trovato la loro strada anche in altri editor:
Atom è un editor di codice funzionale che merita di essere provato. Tuttavia, poiché Atom è costruito su Electron (nessun gioco di parole), alcuni utenti si sono lamentati dei file di grandi dimensioni e dei progetti che girano lentamente. Per questo lo consigliamo soprattutto per progetti più piccoli e script veloci (specialmente con il pacchetto terminale integrato), ma potrebbe non essere il migliore per lavori complessi.
7. Notepad++
Subito dopo, vale la pena dire che Notepad++ potrebbe non sostituire nessuno dei “grandi” editor di codice che già usate, come IntelliJ IDEA o Visual Studio Code. Tuttavia, vi darà più potenza sotto il cofano per semplici script e compiti generali di editing del testo.
A seconda dei vostri progetti, potrebbe invogliarvi a cambiare. Nonostante la sua semplicità, Notepad++ è usato in una grande varietà di progetti.
È un editor di codice solo per Windows, il che spiega il “più-più” del suo nome. Notepad è un semplice editor di testo che si trova di default nelle installazioni di Windows. Notepad++ assomiglia a suo fratello, ma include anche caratteristiche specifiche per lo sviluppo come:
- Finestre a schede e divise;
- Supporto per quasi 80 linguaggi di programmazione;
- Funzionalità di completamento automatico;
- Una Function List, che offre un modo fantastico per visualizzare tutte le funzioni utilizzate in un file a colpo d’occhio.
Inoltre, Notepad++ è flessibile per quanto riguarda la gestione dei progetti. Supporta tre diversi approcci: sessioni, spazi di lavoro e progetti. Una volta che si inizia a scavare in Notepad++, si vedrà che è possibile utilizzarlo per progetti più ampi di script a pagina singola.
Pensiamo che Notepad++ sia adatto a coloro che vogliono una grande funzionalità, che sia anche personalizzabile. Per quanto riguarda l’usabilità, ricorda il look open source di Vim, che si adatta a certi tipi di progetti più di altri.
8. La Suite JetBrains
Quando si tratta di IDE di sviluppo, la suite di soluzioni JetBrains sarà in cima (o quasi) alla vostra lista. Il modello di business è intelligente, e anche se ci sono molti editor resi disponibili da JetBrains, in realtà sono tutti “sottoinsiemi” del suo editor principale, IntelliJ IDEA.
IDEA si presenta come un IDE Java. Supporta praticamente tutte le funzionalità degli altri strumenti IDE della sua gamma. E come tale, supporta anche molti linguaggi di programmazione.
Per esempio, PyCharm prende la maggior parte delle funzionalità Python da IDEA e le impacchetta come un proprio strumento. Troverete anche phpStorm e WebStorm che fanno la stessa cosa.
Usare IDEA è molto semplice: JetBrains ha fatto un grande lavoro per permettervi di concentrarvi sulla codifica piuttosto che nelle configurazioni e impostazioni. Può essere una sorpresa, ma la linea tra l’uso di un editor a riga di comando come Vim e l’uso di IDEA è spesso sottile.
Entrambi gli strumenti prestano un’attenzione simile al flusso di lavoro e all’efficienza anche se IDEA permette di importare le keyboard binding di Vim, se siete a vostro agio a lavorare in quel modo.
Presumiamo che stiate usando IntelliJ IDEA se state lavorando come parte di un grande progetto o azienda con un accordo sul software. Potrebbe servirvi per la condivisione di progetti o per lavorare in un ambiente coerente. Un sacco di sviluppatori WordPress stanno usando i prodotti JetBrains perché sono molto robusti nella gestione dei progetti.
Anche il prezzo è un fattore, e IntelliJ è costruito su un modello di abbonamento che spesso raggiunge le tre o quattro cifre all’anno.
Anche così, ci sono alcune edizioni “comunitarie” dei prodotti JetBrains. Tuttavia, sono versioni ridotte del software genitore; si tratta soprattutto di soluzioni open source senza gli elementi proprietari.
Inoltre, JetBrains offre prezzi competitivi per progetti open source, startup, strutture educative, Docker Captains e molti altri gruppi di nicchia.
Strumenti di Web Design e Prototipazione
Naturalmente, una web app non è nulla senza una buona User Experience (UX). Come tale, la prototipazione dei layout e delle immagini ha spesso bisogno di uno strumento dedicato. Gli strumenti di design saranno vitali sia sul lato server che su quello client dello sviluppo. Qui ci sono alcune scelte popolari.
9. Figma
Figma è uno strumento di sviluppo web molto popolare che permette di collaborare al design.
È possibile usare l’editor drag-and-drop per costruire interfacce e altri elementi rivolti all’utente. Lato sviluppo, è possibile anche prendere snippet di codice da impiantare nei propri progetti. Figma rende il processo – dall’ideazione all’implementazione – fluido e mantiene basse le revisioni lungo l’intera catena del progetto.
Altro beneficio è l’insieme omogeneo di strumenti per aiutare nelle scelte di font e colori. Questo processo è in contrasto con l’uso di strumenti separati come Type Scale:
…e un sottoinsieme di strumenti di sviluppo web come Adobe Color, Coolors, vari selezionatori di colore e molto altro.
Mentre Figma ha valore per i progetti di un singolo sviluppatore, presenta più benefici per il lavoro di team, soprattutto quando aumenta di dimensioni. Ai team piaceranno gli aspetti collaborativi di Figma, come l’archivio centrale delle risorse e i componenti riutilizzabili. I team leader apprezzeranno anche le complete opzioni di reporting per vedere come i membri del team usano i vari sistemi di progettazione.
Per quanto riguarda i prezzi, Figma costa 12 dollari per “editor” nel livello standard, che sale a 45 dollari per “editor” per i team aziendali (troverete sia “editor” che “seat”: è lo stesso concetto). Come tale, il prezzo potrebbe aumentare in base a quanti editor avrete a bordo.
10. Sketch
Sketch è un’app solo per macOS, anche questa molto popolare tra sviluppatrici e sviluppatori:
È popolare perché Sketch include un sacco di funzionalità, ed è anche molto semplice da usare, il che ha senso dato che è un’app nativa per macOS. Assomiglia un po’ all’IDE Xcode di Apple, il che non è una brutta cosa, e si naviga molto bene.
Naturalmente, è possibile eseguire funzioni essenziali come l’editing vettoriale e il ridimensionamento dei vincoli. Tuttavia, c’è molto di più nell’applicazione che vi aiuterà a generare disegni ed esportarli per farli vedere ad altre persone in modo rapido.
Per esempio, prendete la funzionalità Smart Layout di Sketch, che usa il ridimensionamento adattivo per adattarsi alle vostre dimensioni e al layout corrente. Ci sono anche molti strumenti di collaborazione per dare a tutti un modo per immergersi in un progetto e contribuire a perfezionarlo.
Sketch differisce da uno strumento come Figma in quanto un freelance o una sviluppatrice che lavora in autonomia può usarlo gratuitamente, poi acquistare un abbonamento una volta che ne ha effettivamente bisogno. A questo proposito, i prezzi di Sketch prevedono o un pagamento unico di 99 dollari o 9 dollari al mese per utente.
11. InVision Studio
InVision Studio si vende come un’app di “screen design”. Ha senso, ed è anche più chiaro da capire. InVision Studio fornisce tutte le caratteristiche standard e le funzionalità che ci si aspetta, come un editor intuitivo basato sui livelli e il supporto vettoriale.
Tuttavia, c’è molto di più per quanto riguarda la prototipazione e la creazione di animazioni. Per esempio, è possibile puntare, cliccare e trascinare per collegare artboard e schermate insieme. Questa caratteristica consente di costruire animazioni come parte del processo di progettazione piuttosto che come qualcosa che si consegna in seguito.
Parlando di passaggi di consegne, l’intero team può lavorare all’interno di InVision Studio grazie a librerie di componenti condivise, opzioni di sincronizzazione globale, una robusta modalità Inspect e altro ancora.
Anche la struttura dei prezzi è competitiva. La versione gratuita di InVision Studio vi dà quasi tutte le funzionalità della versione a pagamento, con solo una restrizione sul numero di documenti che potete salvare. Il livello Pro è prezioso per la potenza dell’app (circa 95 dollari/utente/anno).
12. Affinity Designer
Se siete utenti di Adobe Illustrator, avrete probabilmente incontrato Affinity Designer in passato. L’approccio di Serif al design grafico sembra dare filo da torcere da Adobe:
Dal suo lancio, ha guadagnato una base di utenti fiorente grazie al suo buon rapporto con la comunità, ai principi di design stellari e al modello di prezzo attraente. Troverete versioni per Mac, Windows e iPad, e ogni versione può lavorare con vettori, raster o entrambi contemporaneamente:
Gli strumenti a cui Illustrator vi ha abituati sono tutti presenti, insieme a una suite completa di profili di colore e opzioni di esportazione:
In breve, le caratteristiche e le funzionalità funzionano bene per creare grafica professionale per i vostri progetti. In più, il prezzo è super-competitivo. Costa circa 50 dollari a prezzo pieno ed è un pagamento una tantum. Non ha un’opzione proprietaria basata sul cloud come Illustrator. Anche così, per una tariffa una tantum, ottenete la portata di Adobe presentata in un modo soggettivamente migliore.
13. CodePen or JSFiddle
Quando prima abbiamo parlato di IntelliJ IDEA, non abbiamo menzionato una delle sue caratteristiche minori ma utili: i file Scratch. Vi permette di scrivere e testare rapidamente uno snippet di codice senza dover influire sul vostro attuale progetto di lavoro.
Per gli utenti di altri editor di codice, una soluzione come CodePen o JSFiddle è un eccellente sostituto. Entrambi funzionano in modo simile: ci sono tre editor di testo per HTML, CSS e JavaScript, e una schermata di output per vedere il risultato:
Potete dare un nome al vostro “Pen” o “Fiddle”, a seconda della vostra piattaforma, salvarlo e condividerlo con gli altri. È un’idea davvero semplice, un’idea che può aiutarvi a riprendere il filo rimasto in sospeso su un aspetto di un progetto e realizzarlo in pochi secondi.
Per gli sviluppatori che vogliono far luce su un particolare elemento all’interno di un file e mostrare dove sono possibili le modifiche, un “IDE online” è inestimabile. Inoltre, la collaborazione è possibile anche attraverso la chat o un “live mic”:
Nel complesso, un IDE online potrebbe essere considerato uno strumento di sviluppo web “dormiente” nel senso che non è menzionato troppo spesso ma è usato da molti team di sviluppo per creare codice migliore.
14. Buttons Generator
Buttons Generator è uno strumento gratuito di generazione di pulsanti CSS online che può essere utilizzato per creare diversi stili di pulsanti CSS con un semplice clic. È sufficiente scorrere tutti gli stili di pulsanti e trovare quello che vi piace. Cliccate su questo stile e il CSS verrà automaticamente aggiunto agli appunti.
È possibile utilizzare i colori e gli stili dei pulsanti così come sono, oppure modificare semplicemente il CSS per dare al pulsante il colore e gli stili desiderati. È possibile scegliere tra diversi stili, tra cui 3D, Gradient, With Shadow Border, Neumorphic, Retro, Sliding Effect e molti altri.
Provatelo, è un modo divertente, unico e semplice per generare pulsanti CSS.
Clienti Git
Avere uno strumento centralizzato per memorizzare il codice, documentare le modifiche e lavorarci sopra con un team senza duplicazioni è un compito per un sistema di controllo di versione (o VCS, per Version System Control). Qui trovate alcuni client che gestiscono un VCS: git.
Vediamo prima di tutto il VCS.
15. Git
Git è uno strumento essenziale per lo sviluppo moderno e per questo è una presenza fondamentale negli stack di sviluppo web odierni. In poche parole, serve a documentare le modifiche che fate al codice del vostro progetto e a memorizzarle in “repository”:
Git è stato inventato dal creatore di Linux Linus Torvalds. Usa una serie di comandi per aggiungere modifiche ai file che si trovano in una “area di staging”; vengono poi affidati via “commit” a un repository e da lì vengono spinti via “push” su un repository remoto ospitato online.
Anche se non è l’unico VCS disponibile – il team di sviluppo di WordPress, per esempio, usa ancora Trac per molti progetti – è il più importante. Un VCS come Git o Trac aiuta i team a lavorare insieme ospitando il codice in una posizione centrale.
I comandi di base sono funzioni di una sola parola precedute da git, spesso usate dalla riga di comando. Per esempio:
git add file.phpQuesta espressione aggiunge file.php alla vostra area di staging. In altre parole, registra le modifiche come qualcosa che volete archiviare ma senza dar loro ancora il tocco finale. Potete farlo con un solo file o con un intero progetto, se volete.
Per fare un commit del file, si esegue git commit. Da qui, potete aggiungere un commento per avvisare del commit le persone del vostro team. In seguito, le vostre modifiche vengono memorizzate e spinte con un “push” al “branch” primario. Naturalmente, questo dipende dal fatto che state lavorando su un “repo” remoto.
Se non avete confidenza con Git e in generale con il VCS, GitLab offre una grande guida per principianti che insegna a usare Git sulla riga di comando. Tra poco parleremo anche GitLab.
16. GitHub
Per la stragrande maggioranza degli sviluppatori, GitHub è il luogo in cui sono memorizzati i repository Git dei progetti:
È una soluzione di proprietà di Microsoft che copre molto più dell’hosting Git. Ci sono anche un mucchio di strumenti di test automatizzati, e un tentativo di offrire funzioni di collaborazione extra.
Per i progetti open source, piattaforme come GitHub sono quasi l’opzione predefinita. Per questo, GitHub come strumento di sviluppo web è inestimabile per molti utenti open source, studenti e team di sviluppo in generale. E questo è ancora più vero quando si scava nel Issue Tracker di GitHub per risolvere un problema con i pacchetti installati.
GitHub non serve solo a memorizzare i repo dei programmi. Serve anche per altri progetti di codifica, come lo sviluppo web, e persino per i libri.
Nel complesso, GitHub è uno strumento fantastico che aiuta a costruire una comunità sana sotto molti aspetti. Tuttavia, non è l’unica piattaforma in circolazione.
17. GitLab
Lo abbiamo menzionato prima: GitLab è un concorrente di GitHub e ha un obiettivo simile. È essenzialmente un host per i repo di Git, ma offre anche alcune funzionalità extra.
Mentre GitHub si definisce una “piattaforma di sviluppo”, GitLab si concentra su “DevOps”. Con il suo piano gratuito, GitLab offre ogni fase del ciclo di vita DevOps, test statici di sicurezza delle applicazioni, e circa 400 minuti al mese per lo sviluppo continuo (CD) e l’integrazione continua (CI).
GitLab è però carente lato comunità, che è la grande differenza rispetto a GitHub. È più incentrato sul deployment e sull’intero ciclo di un progetto. Non è una cosa negativa, ma significa che GitLab è più una piattaforma “insulare”, probabilmente non così adatta ai progetti open source come GitHub.
Per la maggior parte dei team, il piano gratuito di GitLab sarà sufficiente. Per circa 230 dollari all’anno, per utente, ottenete l’accesso all’analisi del codice e della produttività, circa 10.000 minuti di CD/CI e molto altro.
18. Sourcetree
Sourcetree non è un host di repository Git, ma una Graphical User Interface (GUI) per gestirli. È una delle tante soluzioni, come GitKraken, Sublime Merge, GitHub Desktop e molte altre.
È un prodotto Atlassian (e noi amiamo Atlassian!) che si connette con altri prodotti come Bitbucket per offrire una rappresentazione visiva del vostro repository Git.
Sourcetree è commercializzato come un semplice client Git – e lo è – ma è anche adatto agli utenti esperti. Offre molte funzionalità sotto il cofano che permettono di supportare un team che lavora con Git (e anche Mercurial).
Per esempio, Sourcetree fa cose semplici, come evidenziare le modifiche dall’ultimo commit, ma abbraccia anche altri aspetti se ne avete bisogno. I team leader possono rivedere i changeset, lavorare tra i branch quando ne hanno bisogno, e visualizzare il codice usando grafici e schede informative:
Un client Git è giusto per voi? Dipende dalle circostanze. Se state ancora imparando, vi raccomandiamo di mantenervi su un Terminal finché capite il flusso e il processo. Per professionisti o team che fanno un uso estensivo di Git, un client come Sourcetree vi farà risparmiare minuti di lavoro ogni giorno.
Strumenti per lo Sviluppo Browser
Senza un browser web, lo sviluppo web non esiste. Il browser scelto è fondamentale per navigare sul web, ma lo si può anche usare per scoprire come funziona.
La maggior parte dei browser moderni include strumenti di sviluppo specifici per aiutarvi ad analizzare il codice back-end, che potete poi replicare nel vostro progetto. Qui ci sono alcuni dei più popolari.
19. Chrome Developer Tools
I “DevTools” di Chrome sono venerati in tutte le comunità per il suo fantastico set di funzionalità e per la diagnostica.
Data l’ascesa dei browser basati su Chromium, molti includono lo stesso set di DevTools con scorciatoie simili. Potete dare un’occhiata a Microsoft Edge, Brave, lo stesso Chromium o molti altri cloni e lavorare con i vostri progetti all’interno del browser.
La scheda Elements sarà il punto di partenza più frequente dato che è qui che potrete vedere il codice sorgente della pagina. E, a nostro parere, la scheda Performance offre approfondimenti sul caricamento della pagina che altri DevTools per browser non riescono a eguagliare:
Anche la scheda Security fornisce alcune buone informazioni, che saranno necessarie per monitorare (o ricercare) il sito web di un cliente:
Ancora meglio, sarete in grado di generare rapporti Google Lighthouse direttamente dal vostro browser basato su Chromium:
I DevTools sono senza dubbio i migliori in circolazione, quindi gli utenti che usano Chrome e Chromium si affideranno a loro. Ma anche gli altri browser che includono i DevTools sono degni di considerazione.
20. Firefox Developer Tools
Con una base di utenti attivi mensili di circa 220 milioni, Firefox è ancora un browser popolare, nonostante il dominio di Google. In passato, gli sviluppatori lodavano Firebug, che per tanto tempo è stato leader del debugging del browser.
Oggi abbiamo i Firefox Developer Tools:
Include un nucleo di funzionalità per visualizzare il codice sorgente del sito (Inspector), il Debugger, le schede Memory e Storage, e molto altro.
Per i principianti, la Console è una porta d’accesso alla codifica in generale, perché permette di eseguire JavaScript direttamente nel browser, ed è un modo semplice per testare gli snippet e trovare la strada giusta quando si inizia:
Nonostante questo, pensiamo che Firefox (e altri browser) include meno pacchetti nei suoi Developer Tools rispetto ai browser basati su Chromium. Eppure, per il debug cross-browser e la risoluzione dei problemi, Firefox va molto bene ed è ideale per portare a termini quasi tutti i compiti.
Framework Front-End
Parlando di front-end, avrete bisogno di qualcosa che vi permetta di creare siti web mozzafiato. La scelta del framework qui è cruciale e dovreste sempre selezionare lo strumento migliore per eseguire il lavoro.
Tenendo questo a mente, diamo un’occhiata ad alcune scelte popolari.
21. Bootstrap
La responsività mobile è una caratteristica standard nel web design moderno. È un passo gradito, dato che la navigazione mobile ha ormai superato quella desktop. Dato questo, vi serve un modo per far girare velocemente i siti mobile-first.
Bootstrap è un grande strumento di sviluppo web che sta venendo adottato sempre più di frequente:
È un toolkit che combina plugin JavaScript, variabili Sass, alcuni componenti pre-costruiti, un sistema di griglia responsive di qualità e molto altro. C’è anche un mercato di temi ufficiali che funzionano con Bootstrap, e molti siti WordPress utilizzano anche temi costruiti sulla base di questo framework di design.
Naturalmente, l’utilizzo o meno di Bootstrap dipenderà da ciò di cui il vostro progetto ha bisogno. Tuttavia, è logico supporre che i progetti di sviluppo web con budget limitati e tempi rapidi si rivolgeranno a una soluzione “Bootstrap” e la adatteranno a WordPress. Dato che il framework e WordPress sono gratuiti, il vostro tempo diventa l’unico fattore di costo.
22. Tailwind CSS
Sulla carta, Tailwind CSS sembra non avere senso. È un framework front-end per un linguaggio che fa parte del trio centrale dello sviluppo web. Come tale, è logico pensare che l’utente a cui è destinato dovrebbe già avere la conoscenza adeguata senza bisogno di usare un framework.
In realtà, Tailwind CSS ha perfettamente senso. È un modo per progettare il front-end del vostro sito senza lasciare l’HTML.
Si usano classi di utilità all’interno di vari tag per aggiungere CSS da un foglio di stile principale. Naturalmente, il CSS è ancora la fonte primaria dello stile. Rimane solo fuori dalla vista mentre costruite un layout usando l’HTML. Vi permette così di sviluppare sia la struttura che lo stile allo stesso tempo.
L’approccio ci ricorda il 960 Grid System e funzionerebbe bene in combinazione con quel framework. Detto questo, c’è però il pericolo di impacchettare elementi con così tante classi che potreste finire a gestire un “codice spaghetti”. Avrete bisogno di pazienza e disciplina per lavorare con Tailwind CSS, ma se si adatta al vostro progetto, è un framework veloce e robusto.
23. Bulma
Abbiamo fatto molti progressi con la progettazione di strutture e layout del sito, con la creazione di colonne flessibili, responsive e dinamiche.Tutto questo può essere gestito da Bulma che è una di quelle applicazioni fondamentali per il framework:
In modo simile a Tailwind CSS, Bulma nasconde il CSS e vi dà classi di utilità per il vostro HTML. È costruito con Flexbox, mobile-first, e modulare. È ottimo se avete bisogno solo di pochi componenti. Potete anche mescolare e abbinare i framework, se lo volete.
Inoltre, non c’è bisogno di alcun JavaScript per far funzionare Bulma, perché è solo CSS. Potete aggiungere elementi di interfaccia come i pulsanti con minimo uso di codice. È un framework semplice e open source che può adattarsi alle esigenze del vostro progetto. Nel nostro libro, questa è una caratteristica preziosa che fareste bene a sfruttare.
24. Foundation
Il team ZURB ha un approccio unico a un framework CSS grazie a Foundation, uno strumento semantico e mobile-first che può servire per siti ed email:
Foundation ha l’accessibilità tra le sue priorità. Ogni snippet in Foundation viene fornito con attributi ARIA dedicati. Tuttavia, prima di arrivare a questo stadio, Foundation impressiona per la prototipazione rapida grazie al mondo in cui si integra al vostro HTML. Potete creare quasi ogni elemento strutturale sulla vostra pagina, anche vari tipi di menu e di navigazione:
ZURB fornisce anche una ricchezza di documentazione eccellente e tutorial per imparare i pro e i contro del framework. Foundation è semplice da usare, ma in realtà potete andare in profondità nella costruzione di siti e uscirne con layout e funzionalità complesse.
Troverete anche moltissimi modelli sul sito di Foundation. Sono wireframe minimal che vi aiutano a partire:
Nel complesso, il framework Foundation fa quello che dice. Sarà centrale per lo sviluppo del vostro sito, piuttosto che permettervi di incastonare troppe funzionalità. Probabilmente potreste non usarlo per ogni progetto anche se, dove impiegato, farà il suo bel lavoro su tutti i tipi di siti.
25. Material-UI
Parleremo di React in modo più dettagliato più tardi, ma per ora, sappiate che Material-UI è basato sulla libreria di componenti di questo framework JavaScript. Per chi non lo sapesse, il Material Design è la “filosofia” di Google su come progettare il front-end di un sito web. Questo significa un sacco di font Roboto e blocchi di colore:
Importerete la libreria in React, poi userete i tag HTML dedicati per costruire il vostro sito:
Per personalizzare ulteriormente l’elemento, si aggiungono classi ai tag HTML. L’intero blocco di codice è avvolto in una funzione, e renderete i dettagli (e di conseguenza la pagina) in React.
Ci sono anche molti temi gratuiti e premium disponibili, che coprono molti casi d’uso e prezzi:
Dal momento che Material-UI ha un caso d’uso specifico – creare siti intorno al Material Design – sarà un framework di riferimento se questo è il vostro obiettivo. In particolare, la libreria di temi sarà una risorsa preziosa per iniziare, indipendentemente dal vostro budget.
26. HTML5 Boilerplate
Se vi dedicate allo sviluppo WordPress, potreste aver incontrato Underscores. Si tratta di un tema base per WordPress che vi risparmia innumerevoli ore per mettere insieme gli elementi funzionali e di base del vostro sito. HTML5 Boilerplate fa lo stesso a livello di design generale.
Come tale, include sette file che spaziano tra HTML, CSS e JavaScript. Tutti contengono solo i file e il codice più necessari per rendere una pagina. Al di là di questo punto, il risultato finale della vostra pagina dipende da voi.
HTML5 Boilerplate ha molti fan perché è più una utility per risparmiare tempo che un framework completo. Non include visual che mirano a stupire gli utenti di passaggio con effetti wow, ma usando HTML5 Boilerplate potreste rimanere sorpresi dall’accelerazione del vostro processo di sviluppo come fa Underscores per gli sviluppatori di WordPress.
27. Materialize
Anche se non chiameremmo Materialize un concorrente di Material-UI, si tratta di un altro framework che cerca di utilizzare i principi del Material Design per creare un layout:
Piuttosto che usare React, però, Materialize è un framework CSS. Questo rende Materialize più facile da implementare sul front-end. Proprio come altri framework basati su CSS, si usano le classi all’interno dell’HTML per tirare dentro gli elementi sul front-end.
Detto questo, ci sono anche un mucchio di componenti JavaScript, per elementi come modali e menu a discesa:
Come molti di questi framework, ci sono temi premium che vi aiutano a costruire layout in uno stile specifico. Sono tutti temi HTML statici, però, il che potrebbe rivelarsi un problema se si vuole implementare JavaScript. In questi casi, potreste voler considerare invece Material-UI.
Framework per Applicazioni Web
In poche parole, un framework o una libreria JavaScript consente di lavorare in modo diverso con il cosiddetto codice “vanilla”. In questo caso, è per creare applicazioni e siti web specifici. Ci sono molte varianti da considerare e ora ne vedremo alcune.
28. React.js
React.js è una popolare libreria JavaScript progettata da Facebook che alimenta molti degli elementi più moderni di WordPress. Sia il back-end di WordPress.com che il Block Editor usano React, e noi lo consideriamo un modo di usare JavaScript che si basa sull’interfaccia.
Come tale, se anche voi lavorate nello sviluppo WordPress dovreste – per parafrasare Matt Mullenweg – imparare a fondo React.js. Tuttavia, non si tratta solo di un framework per gli sviluppatori di WordPress.
Ogni volta che avete bisogno di un’interfaccia utente (UI) moderna e dinamica, React dovrà essere la vostra prima scelta. Utilizza un’estensione della sintassi di JavaScript chiamata JSX per creare elementi, che vengono poi resi nel Document Object Module (DOM):
const name = "Ken Starr';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render
Element,
document.getElementById('root')
);La variabile JavaScript all’interno del JSX può essere qualsiasi espressione valida, il che permette di costruire argomenti complessi. Questo rende React una scelta forte quando si tratta di framework. A causa della sua popolarità, pensiamo che React dovrebbe essere in cima alla vostra lista di strumenti da imparare, indipendentemente da dove passate il vostro tempo di sviluppo.
29. Vue.js
Vue.js è un altro framework JavaScript per costruire interfacce utente. Si basa sul “view layer” ed è ottimo per l’integrazione con altre librerie e framework.
Sul lato HTML, Vue non potrebbe essere più accessibile. Si dà al tag un ID e si chiama una chiave da un dizionario impostato sul lato JavaScript. I dati sono ora reattivi, e i dati e il DOM sono collegati.
Per questo Vue.js è molto simile ad alcuni dei framework CSS che abbiamo visto in precedenza nell’articolo. È un framework irresistibile, e vi incoraggiamo a dare un’occhiata alla documentazione per capire cosa è possibile fare.
Mentre Vue.js supporta le dichiarazioni JSX, è più adatto all’uso di template basati sulle tecnologie web “classiche”. Come tale, sarà ideale per gli sviluppatori che non vogliono lavorare solo in JavaScript.
30. Express.js
Qui entriamo nel territorio dei meta-framework perché Express.js si collega a Node.js e fornisce una base per altri framework.
È un framework minimalista (da cui il nome), e uno dei suoi vantaggi principali è quello di aiutarvi a organizzare i componenti lato server in un familiare formato Model-View-Controller (MVC). Come tale, il codice sembra più complicato di altri framework – anche di vanilla JavaScript:
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send("Hello world!");
});
app.listen(3000);Pensiamo che Express.js sia adatto ad applicazioni che fanno molti pull e push dai database. Questo lo rende adatto a molte applicazioni web moderne e agli sviluppatori back-end che vogliono lavorare su compiti front-end con un minimo di stress.
31. Svelte.js
Una solida regola empirica quando si sviluppa per il web è quella di assicurarsi che i siti funzionino su quanti più browser possibile. Detto questo, in alcuni casi, potreste voler costruire applicazioni o siti web senza supportare le legacy dei browser. In questi casi, Svelte.js dovrebbe essere in cima alla vostra lista.
Il framework prende il nome dalla dimensione del suo file – solo 5kb una volta che è stato minificato. Ha un formato simile a jQuery che sarà di facile comprensione per gli utenti che ne hanno familiarità:
$('.hello').text("Hello svelte");Ci sono meno di 40 funzioni all’interno dell’API di Svelte, quindi iniziare sarà semplice. Inoltre, potete aggiungere nuove funzioni con facilità usando $.fn.
Troverete dei “polyfill” per il supporto di Internet Explorer 9, ma questa è quasi l’unica concessione. Se volete un supporto browser iper-moderno usando un framework super-lean, Svelte.js potrebbe essere quello che fa per voi.
32. Laravel
Finora abbiamo guardato ai framework JavaScript o CSS. Data la prevalenza di PHP, ha senso coprire anche un framework per questo linguaggio. Laravel è la scelta ideale in questo caso, poiché è popolare tra molti sviluppatori per la sua sintassi e il suo ecosistema:
È più appropriato dire che Laravel è un ecosistema, poiché include molti strumenti che aiutano a costruire progetti. Anche se non usate molto il framework stesso, potete usare Homestead di Laravel, un ambiente di sviluppo locale basato su Vagrant.
Laravel stesso è un framework PHP basato su Docker e usa una CLI (chiamata Sail) per interagire con esso. In modo molto simile a Vagrant, userete Sail per costruire container ed eseguirli.
Laravel ha molte altre corde al suo arco, però. Per esempio, potete usarlo come un framework full-stack, un back-end API per le app Next.js, e quasi tutto ciò che sta in mezzo.
Se siete sviluppatori PHP, Laravel sarà uno strumento centrale (se non familiare) nel vostro flusso di lavoro.
33. Gatsby
Gatsby è un framework front-end open source che ha ottenuto molta attenzione negli ultimi tempi, soprattutto perché è veloce, scalabile, performante e sicuro.
Il processo di installazione è super veloce che coinvolge il Node Package Manager (npm). Vedremo altri dettagli più tardi. Anche se è un framework JavaScript, Gatsby genera file HTML statici in fase di esecuzione, quindi non c’è modo di attaccare un sito. Inoltre, Gatsby automatizza le prestazioni per mantenere il vostro sito in esecuzione in una configurazione ottimale.
Tra le prestazioni automatizzate, il ridimensionamento dinamico e la costruzione statica dell’HTML, Gatsby si sente come un organismo vivente. C’è un complesso “trucco” di codifica che coinvolge JSX, Markdown, CSS, ma anche molto altro in base alle vostre esigenze. Ogni fase del vostro flusso di lavoro e del vostro stack può essere adattato alle vostre esigenze.
Agli sviluppatori di WordPress piacerà anche come Gatsby si integra con la piattaforma. Non sarà adatto in tutti i casi, però. Per esempio, se avete bisogno di gestire completamente un CMS basato su cloud, questo non fa per voi. Anche così, Gatsby può adattarsi al vostro progetto nella maggior parte dei casi, e funziona benissimo con WordPress.
34. Django
Python è spesso considerato come un linguaggio di programmazione “per principianti” ma serve come spina dorsale per molti siti di alto profilo. Alcuni dei più grandi siti web, come Instagram, Uber, Reddit, o Pinterest, usano Django. Spesso non troverete alcuna menzione di Python, ma solo di Django.
Django è un framework che usa Python per creare applicazioni web lato server. È semplice da usare come lo stesso Python, con un formato molto leggibile.
Python è un ottimo linguaggio di scripting per progetti basati sulla logica, quindi sfruttarlo per un’applicazione web è una buona soluzione. Inoltre, la velocità di elaborazione di Python è ottima e la struttura fondamentale dei file è leggera. Considerata la sua velocità, Django è un eccellente framework lato server rispetto a PHP e fa lo stesso lavoro sporco del linguaggio più popolare!
Detto questo, Python rimane un linguaggio poco adottato, il che potrebbe essere dovuto alla sua reputazione di linguaggio per principianti. Nonostante questo, Django funziona bene con altri linguaggi, come JavaScript, e si presta a essere la base di una moderna web app.
Naturalmente, se avete intenzione di utilizzare un CMS come WordPress, o state creando soluzioni per progetti basati su React, avete meno opzioni. Anche così, pensiamo che il 2024 vedrà un aumento del numero di siti che girano su Django.
35. Ruby on Rails
Qualche anno fa il linguaggio di programmazione Ruby era il “beniamino” dei linguaggi per principianti e delle alternative di scripting a PHP, e viene spesso paragonato a Python.
Proprio come Django, anche Ruby on Rails era uno dei preferiti di molti sviluppatori.
Vedrete che Ruby è usato in moltissime applicazioni web sia sotto il cofano che lato server. Inoltre, Ruby on Rails è usato come framework lato server su innumerevoli siti web. Utilizza un approccio MVC e offre strutture per il servizio web, le pagine e un database permettendovi di creare con relativa semplicità un sito base.
Ruby on Rails è adatto al vostro progetto se avete bisogno di programmare molti lavori e lavorare con soluzioni di terze parti. Per esempio, c’è un’integrazione nativa con l’archiviazione di file come Google Cloud, e un wrapper per l’invio di email.
Nel complesso, è una buona scelta se volete un robusto set di impostazioni predefinite (come la struttura delle cartelle) che possono essere personalizzate se necessario. Non è invece una grande scelta se vi piace usare le API durante lo sviluppo.
La struttura del codice di Ruby on Rails può diventare complessa e difficile da capire con grandi progetti. Anche il tempo di esecuzione può essere influenzato, quindi potrebbe non essere il miglior framework per progetti critici per la velocità.
Eppure, Ruby on Rails è uno dei principali framework web lato server, e il suo uso non sta rallentando per progetti adatti.
36. TypeScript
In poche parole, TypeScript vi permette di fare un controllo “typechecking” statico e opzionale del JavaScript. È un “superset” del linguaggio, e supporta anche molte altre librerie JavaScript. In pratica, TypeScript è JavaScript con alcune caratteristiche extra, e potete compilare entrambi i linguaggi uno accanto all’altro.
Molti sviluppatori si servono di TypeScript per ridurre il numero di errori di runtime che ottengono. Gli errori di digitazione sono tra i più comuni, e ridurli potrebbe farvi recuperare molto tempo extra.
Per vedere TypeScript all’opera ecco un esempio semplice. Considerate questa stringa:
let helloWorld = “Hello World”;
// ^ = let helloWorld: string
Qui, TypeScript usa let piuttosto che var per la variabile helloWorld. Da lì, TypeScript sa che helloWorld è una stringa e la verifica su questa base.
In definitiva, TypeScript non è uno strumento di sviluppo web essenziale, anche se è diventato più popolare grazie alla sua caratteristica principale. Se vi aiuta a risparmiare un po’ di tempo necessario, potrebbe diventare vitale per il vostro flusso di lavoro.
37. GraphQL
Ecco uno strumento unico che può trovare il favore degli sviluppatori che lavorano con i dati all’interno di un’API. GraphQL è un linguaggio di query utilizzato in un’API che funge anche da run time per servire i risultati della query effettuata.
Quando si usa un’API REST standard, è necessario fare un caricamento da più URL. Con GraphQL, potete recuperare i dati da una singola richiesta. Inoltre, le API GraphQL sono organizzate per tipo piuttosto che per endpoint. Questa classificazione aiuta l’efficienza della vostra query e fornisce errori più espliciti quando qualcosa va storto.
I tipi possono anche essere usati per saltare la sovrascrittura del codice di parsing manuale, visto il modo in cui GraphQL li implementa. Potete anche aggiungere nuovi campi e tipi alla vostra API senza impattare il lavoro che avete fatto finora.
Lo strumento è flessibile e scalabile in molte aree. Poiché GraphQL crea un’API uniforme per il vostro progetto, è possibile inserire un motore corrispondente al linguaggio scelto per il progetto. Questo lo rende ottimo per una vasta gamma di applicazioni, piuttosto che una soluzione di nicchia a un problema diffuso.
Troverete GraphQL su siti come GitHub, Spotify, Facebook e altri. Questo dovrebbe darvi un’idea di come GraphQL sia usato su siti con molte query di ogni tipo. Come tale, potreste aver bisogno di ricorrere a questa soluzione più di una volta nei prossimi 12 mesi e oltre.
Package Managers
I linguaggi di programmazione e i framework hanno molte parti mobili. Queste dipendenze devono essere scaricate e installate nel modo giusto per funzionare. E qui entrano in gioco i gestori di pacchetti o package managers che vi aiutano a scaricare e installare specifiche dipendenze dalla riga di comando. Facciamo una carrellata di alcuni degli strumenti che incontrerete.
38. Node Package Manager (npm)
Sì, scaricare gli installatori va bene. Tuttavia, usare un gestore di pacchetti dalla riga di comando è super semplice nella maggior parte dei casi. Fornisce anche un modo veloce per prendere e installare file dal web.
Il Node Package Manager (npm) è uno strumento di sviluppo web specifico per JavaScript di proprietà di Microsoft che permette di installare pacchetti specifici per la lingua su richiesta:
Per esempio, la ricerca di pacchetti React porta a oltre 155.000 risultati:
Come per un IDE online, npm è uno strumento di sviluppo web che non viene molto “pubblicizzato”, principalmente perché è onnipresente. Come tale, praticamente ogni sviluppatore web userà questo strumento.
Tuttavia, è incredibile, e ora che si trova sotto l’ala di GitHub, più sviluppatori che mai useranno npm nel 2024.
39. Yarn
Molto simile a npm e pip per Python, Yarn vi aiuta a installare i pacchetti relativi al vostro progetto e ai suoi strumenti. La differenza qui è che Yarn è anche uno strumento di gestione del progetto.
L’installazione è semplice, e anche l’inizializzazione di Yarn per un nuovo progetto richiede uno sforzo minimo. È diventato una robusta soluzione open source per l’installazione di pacchetti e per gestire contemporaneamente i vostri progetti.
Userete gli spazi di lavoro (workspace) per creare “monorepos” in modo che versioni multiple del vostro progetto possano vivere entrambe nello stesso repo e possano essere incrociate. Potete installare plugin per tutto ciò che Yarn non può fare (e per questo potete aggiungere nuovi fetcher e resolver). Per essere più precisi, si possono installare plugin, ma non ce ne sono molti, almeno nelle liste ufficiali. Se invece siete alla disperata ricerca di funzionalità, dovrete scrivere il vostro codice. Eppure, potete scegliere di personalizzare Yarn alle esigenze del vostro progetto.
Yarn potrebbe tranquillamente diventare il vostro principale gestore di pacchetti. Per un progetto reale, potreste appoggiarvi di più a npm, ma Yarn si insinuerà nel vostro flusso di lavoro in modi che possono solo avvantaggiarvi.
API e Strumenti di Test
Assicurarsi che le cose funzionino è un processo che viene spesso saltato, ma genera anche parecchi rimpianti quando le cose vanno male. Ecco perché la fase di test del vostro progetto dovrebbe essere solida, robusta e completa.
Detto questo, ecco alcuni strumenti API e di test che conviene avere a portata di mano per i vostri progetti.
40. HoppScotch
Alimentato da Netlify, HoppScotch è uno strumento di sviluppo API open source. Gli sviluppatori lo chiamano “ecosistema”, il che smentisce la funzionalità sotto il cofano.
È una soluzione robusta e senza fronzoli, ma non adatta a tutti. Se non avete mai usato uno strumento come questo, la curva di apprendimento è piuttosto ripida. Non c’è quasi nessuna istruzione su come usare HoppScotch in nessuna delle pagine dell’applicazione, anche se questo di solito non è un problema, dato che lo strumento è comunque pensato per sviluppatori esperti.
Include molte connessioni in tempo reale (WebSocket, SSE, e altro), e un’implementazione GraphQL. Ci piace anche lo strumento per creare la documentazione:
Vi permette di usare le vostre “collezioni” HoppScotch per creare documentazione al volo, il che è sempre un gradito risparmio di tempo.
Nel complesso, HoppScotch è uno strumento funzionale che rimarrà aperto a lungo nel vostro browser. È una di quelle soluzioni che userete sempre senza rendervene conto, e con questo abbiamo detto tutto!
41. Postman
Attenzione – stiamo per menzionare la temuta parola che inizia per “C”: collaborazione. Postman è uno strumento di sviluppo web che, grazie alla sua piattaforma, vi aiuta a creare un’Application Programming Interface (API) in team:
Ci sono molti casi d’uso per integrare Postman nel vostro flusso di lavoro. Per esempio, potete usarlo in modo standard sviluppare applicazioni, cosa che si tradurrà direttamente in progetti basati sul web. Potreste simulare gli endpoint usando dei finti server, cosa che piacerà soprattutto a chi sviluppa per WordPress.
Potete anche creare l’onboarding per aiutare gli utenti delle vostre API a imparare le basi. Quei progetti dove c’è molto turnover di utenti o un traffico significativo ne trarranno parecchi benefici..
Per quanto riguarda i prezzi, Postman offre un piano gratuito, ma otterrete il massimo valore da uno dei piani premium. Dovrete pagare circa 12-30 dollari, a seconda del vostro ciclo di fatturazione e del numero di utenti.
42. Testing Library
Avere un codice che funziona è l’ideale, ma in realtà le applicazioni che funzionano sono il vero obiettivo finale. Testing Library fa quello che il suo nome suggerisce: fornisce un insieme di utilità che vi aiutano a testare i vostri progetti e incoraggiarvi a usare buone pratiche di codifica.
L’idea è quella di creare dei test che rappresentino l’uso della vostra app. Se funzionano senza problemi, ci sono buone probabilità che lo faccia anche la vostra app. È uno strumento agnostico rispetto al framework, e non è un test runner. Lo scopo principale di Testing Library è quello di aiutarvi a scrivere test mantenibili e slegati dai dettagli dell’implementazione.
Tutto all’interno dello strumento Testing Library è incentrato sui suoi principi guida. Come tale, non state solo creando dei test, state anche imparando a renderli migliori e più preziosi.
Per questo motivo, Testing Library potrebbe diventare una grande parte del vostro flusso di lavoro. Diremmo che quasi tutte le catene di progetti potrebbero beneficiare di Testing Library, e gli utenti di React vorranno quasi certamente installare questo strumento come standard.
Strumenti di Collaborazione
Nonostante uno degli stereotipi che grava su chi lavora nello sviluppo sia l’antisocialità, la verità è che tecnologia e collaborazione vanno di pari passo.
Facciamo allora una carrellata di stellari strumenti per la collaborazione che si inseriranno bene nel vostro prossimo progetto.
43. Jira
Atlassian è un’azienda molto apprezzata quando si parla di software. Siamo grandi fan di alcune delle offerte dell’azienda: Confluence, Trello, Sourcetree, Bitbucket, Jira che è lo strumento di cui parleremo qui.
È uno strumento di sviluppo per i team che usano i framework Agile, soprattutto Scrum dato che è molto popolare. La ricchezza di caratteristiche nel pacchetto è notevole. Per esempio, potete usare le schede kanban per aiutare a organizzare i compiti e gli sprint. Potete anche implementare la vostra tecnica di stima, personalizzandola per la vostra metodologia e progetto.
Jira si concentra sul concetto di flusso di lavoro ripetibile: pianifica, traccia, rilascia e segnala (plan, track, release, report). È centrale per diversi framework Agile, anche se potete anche creare il vostro a seconda della pianificazione pre-progetto. Se dovete fare pivot tra gli sprint, potete far evolvere il vostro progetto e scalare verso l’alto o verso il basso.
La grande notizia di Jira è che c’è un piano gratuito per iniziare, e prezzi ragionevoli per gli altri piani. Detto questo, vedrete che un team di dieci persone sarà il requisito minimo per usare Jira in modo efficace. Potrebbe essere eccessivo per qualsiasi gruppo più piccolo.
44. Taskade
Quando si tratta di strumenti collaborativi, raramente si sente parlare di Taskade. Questo rende un cattivo servizio all’app, che in realtà è uno strumento fantastico per mantenere una squadra concentrata su un dato compito.
Se usate già altri strumenti di collaborazione come Asana o Basecamp (più avanti vedremo entrambi), qui vi sentirete a casa. Le informazioni che vi servono di più, come to-do e promemoria, sono centralizzate sotto il cofano. Potete così presentarle in molti modi a seconda del vostro progetto.
I tipi di visualizzazione “Mindmap” e “Org Chart” sono stellari, e ognuno vi dà una prospettiva diversa sulle informazioni che avete aggiunto.
L’app è veramente semplice: a parte una modalità flessibile per presentare e gestire i compiti, offre poco altro.
Per lavorare con la vostra squadra basta premere una manciata di pulsanti. Per esempio, ogni schermata ha una finestra di chat espandibile:
Alcune persone, soprattutto se paragonato ad altre soluzioni, Taskade potrebbe essere visto come uno strumento scarno e poco attrezzato. Invece non è così. Taskade è un modo fantastico per collaborare con un team, e proprio grazie alla sua semplicità, si inserisce direttamente in qualsiasi progetto su cui state lavorando.
45. Asana
Asana è uno dei nomi più importanti nel campo degli strumenti di collaborazione. È un mostro quando si tratta di afferrare un progetto e metterlo in forma con l’aiuto di un team. Asana si adatta anche in maniera meravigliosa a diversi flussi di lavoro. Per esempio, è possibile passare tra liste e calendari, ma anche accedere a linee temporali.
Ci sono anche alcune fantastiche caratteristiche e funzionalità basate sul team. Il reporting è completo, e per i piani più alti, è previsto l’accesso a una bacheca che mostra varie analisi relative alle prestazioni del vostro team. C’è anche un modo per monitorare i carichi di lavoro per ogni membro del team. Così, Asana vi aiuta a mantenere il crunch al minimo e aiuta ai membri del team a evitare il burn out.
Inoltre, il piano gratuito non è una demo incompleta dell’app premium. È possibile scalare Asana come si scala un team, ed esiste una buona funzionalità che vi aiuta a farlo. Per esempio, potete assegnare il lavoro ai membri del team e gestire ogni flusso di lavoro. Potete anche inviare messaggi generali a tutta la squadra su specifici spazi di lavoro.
Pur essendo una vecchia conoscenza della gestione collaborativa dei progetti, Asana si comporta bene quasi ogni volta. Scoprirete che una buona parte dei vostri clienti e colleghi hanno un account Asana, il che significa che l’assemblaggio all’interno dell’applicazione avverrà più spesso di quanto si possa supporre.
46. Basecamp
Basecamp è un altra grande presenza nella gestione di progetti basati su team. È una delle vecchie guardie, essendo stato lanciato quasi nello stesso periodo di WordPress. Il software di base è stato pubblicato molto tempo fa, quindi ha un pedigree e un track record degni di nota.
Sulla carta, nulla farebbe supporre che Basecamp sia molto al di sopra della concorrenza. In onestà, molte delle altre app collaborative hanno offrono le stesse caratteristiche di Basecamp. MA non è finita qui.
Sì, è possibile creare compiti ed elenchi di cose da fare, assegnarli ai membri del team e lavorare con chiunque a livello di progetto. Le caratteristiche vincenti di Basecamp, però, sono l’infrastruttura e il design.
C’è un approccio semplice all’uso di Basecamp: create un progetto, sviluppa la vostra lista di cose da fare o il vostro programma, e assegnate i compiti agli altri membri della squadra. Ogni progetto include un mucchio di aspetti autonomi che vi aiutano a portare avanti un progetto:
Come abbiamo detto, non c’è niente di innovativo, ma questo è il bello. Basecamp è un affidabile sistema di gestione dei progetti senza fronzoli. Continuerete a tornarci perché è affidabile ed estendibile in base alle vostre esigenze.
47. Livecycle
Livecycle è un potente strumento progettato specificamente per la collaborazione tra team di sviluppo. Livecycle sfrutta la potenza degli “ambienti di anteprima”, che stanno diventando una tecnica comunemente usata dai team di sviluppo per creare anteprime temporanee e condivisibili delle nuove modifiche o funzionalità contenute nelle richieste di pull.
Gli ambienti di anteprima consentono a chi sviluppa di condividere un’istantanea dell’ultima versione senza dover unire le modifiche allo staging o alla produzione.
Livecycle aggiunge un livello di collaborazione simile a Figma a questi ambienti di anteprima, in modo che tutti i membri del team possano lasciare un feedback visivo nel contesto.
Gestendo il feedback delle revisioni in questo modo, Livecycle rende il processo di revisione più breve, fornisce a chi sviluppa un feedback di qualità superiore e consente ai team di inviare il codice in produzione più rapidamente. È altamente consigliato a tutti i team di sviluppo che desiderano migliorare i propri flussi di lavoro di revisione e l’esperienza di sviluppo.
Task Runner
Lavorare sui piccoli compiti all’interno di un progetto di sviluppo web presenta un problema: sono necessari per rendervi più efficienti e produttivi ma dovete anche spendere tempo ed energie per portarli a termine.
Per aiutarvi, avrete bisogno di un task runner. Ecco alcuni dei nostri preferiti.
48. Grunt
Grunt è un task runner specifico per JavaScript che cerca di automatizzare alcuni dei compiti banali e ripetitivi che si incontrano quotidianamente. Considerate i compiti che potreste considerare più ordinari: linting, minificazione, compilazione e molti altri.
Grunt li gestisce per voi attraverso un file di configurazione basato su JSON (chiamato “Gruntfile”). Ecco un esempio:
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', "src/**/*.js', "test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};Se vi capita spesso di pensare che i compiti di routine vi facciano perdere tempo nell’esecuzione di un progetto, Grunt probabilmente diventerà parte della vostra scatola di strumenti di sviluppo web come lo è già per WordPress, Bootstrap e molti altri.
49. Gulp
Quando si confrontano i task runner, la gara è spesso tra Gulp e Grunt. Gulp è un toolkit basato su JavaScript per automatizzare il vostro flusso di lavoro e aumentare la vostra efficienza.
Userete file dedicati e “flussi” per agire sulle vostre risorse e sul vostro codice prima che sia scritto sul disco. Ogni task che create è una funzione “asincrona”, e potete impostarla come privata o pubblica. La differenza sta nelle autorizzazioni: i compiti privati non possono essere eseguiti dall’utente finale e sono progettati per lavorare con altre funzioni.
A questo proposito, potete usare le funzioni series() e parallel() per creare compiti. Significa che potete prendere piccoli compiti, renderli un ingranaggio in un sistema più ampio, e poi annidarli.
Inoltre, potete anche estendere la funzionalità di Gulp attraverso plugin creati dalla comunità:
Può essere una generalizzazione, ma sia Gulp che Grunt sono bravi a fare cose diverse. Gulp è ottimo quando si tratta di lavorare con risorse che possono essere parte di un set di istruzioni più ampio. A causa di questo, vorrete scegliere il task runner appropriato su una base per progetto.
Strumenti di Containerizzazione
Ci sbilanciamo e diciamo che se non state usando qualche forma di containerizzazione o uno strumento di macchina virtuale, i vostri progressi come sviluppatori web ne risentiranno.
Naturalmente questo non è necessariamente vero per tutti, ma ci sono molti vantaggi nell’usare un ambiente di sviluppo basato su container. Qui ci sono alcune opzioni tra cui scegliere.
50. Docker
Per molte persone, Docker è il solo e unico ambiente di sviluppo basato su container. La piattaforma open source non riguarda solo i container, e questo è un motivo spesso citato per usarla.
Sul front-end, il processo semplice: fate clic su un pulsante e ottenete un ambiente di sviluppo virtuale sandboxed. Naturalmente, tutto ciò che sembra semplice in superficie, è in realtà molto profondo. Docker combina un’interfaccia utente (UI), CLI e API con una disposizione di sicurezza che vi mette tra le mani un rapido deployment.
Per molti sviluppatori, Docker sarà fondamentale per creare nuove applicazioni. Gli sviluppatori web, in particolare quelli di WordPress, possono scegliere tra vari strumenti di lavoro. Local di Flywheel e DevKinsta sono le piattaforme leader.
Nota: Abbiamo recentemente lanciato DevKinsta, uno strumento di sviluppo locale che vi aiuta a far girare nuovi siti WordPress. Potete anche distribuire i siti sul vostro account Kinsta con un solo clic.
Docker si integra anche con molti strumenti, e molti di loro si troveranno già nel vostro flusso di lavoro. App come GitHub, VS Code e altre possono connettersi con Docker e offrire un’integrazione senza problemi.
Nel complesso, Docker potrebbe occupare tutta una serie di articoli su ciò che contiene. Nonostante questo, niente di tutto ciò potrebbe essere necessario. È probabile che stiate usando Docker quotidianamente, e sapete già quanto sia fantastico!
51. LXD
In termini semplici, LXD è un gestore di contenitori per distribuzioni Linux. Si basa sulle immagini e include diverse immagini pre-costruite per Linux. Usare un LXD vi dà la tranquillità di sviluppare sullo stesso sistema operativo predefinito dell’utente finale.
È stata fondata dagli sviluppatori di Ubuntu Canonical e, naturalmente, mantiene una struttura open source. Potete creare ambienti sicuri usando contenitori non privilegiati, controllare l’uso delle risorse utilizzando molte risorse e persino gestire le reti.
LXD è anche scalabile, il che significa che è possibile eseguire migliaia di nodi di calcolo o mantenere le cose semplici. Per le applicazioni basate su cloud, LXD si integra con OpenNebula : quest’ultimo ha driver ufficiali per gestire le istanze LXD.
Per impostazione predefinita, molti strumenti di containerizzazione usano Ubuntu come ambiente virtuale standard. Anche così, LXD è ottimizzato per eseguire la distribuzione. Se non è qualcosa che avete provato prima, vale la pena testare provare un’area di lavoro di prova. Potreste scoprire che si adatta a specifici flussi di lavoro o progetti del cliente meglio della concorrenza.
Strumenti di Ottimizzazione delle Immagini
Le risorse (o i media, o qualunque sia il vostro nome preferito) abbondano sul web. Ci sono intere culture online dedicate e basate sulle immagini. Come tale, rendere i vostri progetti di sviluppo web performanti nonostante il numero di immagini utilizzate è fondamentale.
Ecco alcuni dei più popolari ed eccellenti strumenti di ottimizzazione delle immagini disponibili sul mercato.
52. ShortPixel
Esistono molte applicazioni di ottimizzazione delle immagini, ma ShortPixel ha un algoritmo soggettivamente robusto. È in grado di ridurre le dimensioni dei file immagine senza influenzarne la qualità. Per essere pignoli, vi facciamo notare che, poiché ShortPixel è impostato di default sulla più alta compressione disponibile, non c’è altro posto dove andare se la vostra immagine non risulta abbastanza compressa. Tuttavia, questa non è una critica significativa.
ShortPixel include tonnellate di funzionalità. Ci sono tre livelli di compressione, un grande ottimizzatore di PDF e anche un compressore GIF. Quest’ultimo è qualcosa che non si trova in molti altri strumenti, quindi è una gradita aggiunta alla linea di prodotti.
Anche l’intera interfaccia è accessibile: Si trascinano le immagini sull’uploader e si aspetta che ShortPixel faccia la sua magia. Una volta che le vostre immagini sono state elaborate, potete scaricarle in batch o selezionare le singole immagini per il download:
Anche gli strumenti API di ShortPixel sono robusti. Troverete API separate per la riduzione delle immagini online e offline, librerie client PHP e .NET complete, un motore adattivo basato su JavaScript e altro ancora.
ShortPixel è senza dubbio uno strumento ideale per sviluppatori, e si collega benissimo al vostro sito web o alla vostra app. Oseremmo dire che vi farà superare in un attimo la vostra dipendenza da TinyPNG, specialmente se volete usarlo come parte di un flusso di lavoro più ampio.
53. TinyPNG
È il momento dello strumento di ottimizzazione delle immagini preferito da chiunque: TinyPNG. Potete aggiungere a questa voce anche TinyJPG , nonostante entrambi gli strumenti lavorino con gli stessi formati di immagine.
Troverete che TinyPNG non è cambiato molto nel corso degli anni. È ancora un semplice strumento drag-and-drop per ottimizzare le vostre immagini. Non ci sono fronzoli, e non c’è un ampio set di formati di file. Tuttavia, ciò che TinyPNG offre è un’usabilità suprema e una serie di integrazioni con altri strumenti.
Per esempio, c’è un plugin per Photoshop e, per applicazioni più granulari, un’API funzionale per sviluppatori. Anche gli utenti di Python possono entrare in azione, dato che l’API supporta anche questo linguaggio. Sono stati sviluppati molti plugin usando l’API per strumenti di terze parti.
Non stiamo suggerendo che TinyPNG abbia il monopolio sul mercato dell’ottimizzazione delle immagini, ma è spesso la prima scelta per molti utenti. Prendere un’immagine e rilasciarla nell’uploader richiede pochi secondi, e quando si ottiene una rappresentazione perfetta al 99,9% della propria immagine, è facile fidarsi.
Strumenti di Test per Siti Web
Prima abbiamo parlato di testare le vostre API e il codice principale del vostro sito, ma non abbiamo citato la performance del vostro sito web. Qui ci sono alcuni strumenti che amiamo e che potrebbero aiutarvi ad analizzare le prestazioni dei vostri siti.
54. Responsively
Se vi è capitato di sentirvi sopraffatti di fronte al numero di media query che dovete eseguire e perfezionare nella vostra app, date un’occhiata a Responsively. Si tratta di uno strumento front-end open source che vi aiuta a sviluppare siti secondo le varie viewport dei dispositivi scelti.
Il bello è che potete confrontare i layout fianco a fianco. Questo vi dà una solida possibilità di aumentare la vostra coerenza tra i dispositivi. Ogni dispositivo è preciso, e ce ne sono molti tra cui scegliere, il che è eccellente se il vostro sito si rivolge a dispositivi specifici.
È anche possibile aggiungere le estensioni del browser dedicate per Mozilla Firefox, Microsoft Edge e Google Chrome per inviare le pagine al browser Responsively. Da qui, è possibile aprire gli strumenti di sviluppo integrati e mettersi al lavoro.
Ci sono tonnellate di altre caratteristiche, come la funzionalità di screenshot, il supporto per l’hot-loading, e molto altro che vi supporta nello sviluppo. È difficile ribattere allo slogan di Responsively che si definisce come il “browser per lo sviluppo web”. Potrebbe finire per essere un componente fondamentale del vostro flusso di lavoro.
55. Google Lighthouse
Per molte persone, PageSpeed Insights di Google è uno strumento prezioso per scoprire come si comporta un sito web e dove si può migliorare la velocità di caricamento.
Detto questo, alcuni dei suoi software sotto il cofano meritano un approfondimento e potrebbero essere più adatti alle vostre esigenze. Google Lighthouse può essere usato per testare qualsiasi pagina web, e fornisce controlli e rapporti per le prestazioni della pagina, SEO, Progressive Web Apps (PWA), ecc.
I modi principali per lanciare Google Lighthouse includono la riga di comando, i DevTools di Chrome o un modulo come Node. Se si usa l’interfaccia PageSpeed Insights, Lighthouse genera alcuni punteggi e fornisce ulteriori approfondimenti.
Vale la pena notare che sulla superficie, Google Lighthouse e PageSpeed Insights sembrano simili. Ma PageSpeed Insights usa dati di laboratorio combinati con dati reali degli utenti. L’analisi di Lighthouse non tiene conto dei dati degli utenti e misura più elementi del vostro sito web.
A nostro parere, vale la pena provare sia PageSpeed Insights che Lighthouse, soprattutto se l’obiettivo del vostro cliente è quello di raggiungere la cima delle pagine dei risultati dei motori di ricerca (SERP). In ogni caso, è uno strumento solido da avere a portata di mano, e potrebbe anche soppiantare PageSpeed Insights come strumento di test della performance.
56. Cypress
I test end-to-end non sono di solito un’esperienza gioiosa per chi si occupa di sviluppo. Cypress ha scelto di battersi per questo: si tratta di una soluzione senza fronzoli che va contro la tendenza dei test end-to-end e produce un risultato stellare.
Mentre la maggior parte degli strumenti di test end-to-end sono basati su Selenium, Cypress va in una direzione diversa. Ciò significa che i problemi che gli utenti trovano con i tester basati su Selenium non sono presenti qui. Infatti, gli sviluppatori vogliono semplificare al massimo l’impostazione, la scrittura e l’esecuzione dei test.
Per fare questo, hanno costruito l’architettura da zero e si sono concentrati sui test end-to-end escludendo altre forme. Per aiutare le prestazioni, Cypress viene eseguito nello stesso ciclo di esecuzione del vostro programma, piuttosto che eseguire comandi remoti attraverso la rete.
Poiché il codice di test viene eseguito nel browser, non ci sono driver o associazioni del linguaggio da considerare. Nonostante questo, potete compilare il JavaScript prima di eseguire i test.
Se vi occupate di Quality Assurance (QA) o siete sviluppatori che vogliono dare ai test end-to-end un accesso nativo al vostro lavoro, Cypress dovrebbe attirare la vostra attenzione. La parte migliore è che esiste anche un piano gratuito completo!
57. Stack Overflow e Motori di Ricerca
Per un momento, permetteteci di estendere i confini di ciò che è considerato uno strumento di sviluppo web. Stack Overflow è ben noto a chiunque abbia anche solo una minima conoscenza di sviluppo web:
È un sito di domande e risposte incentrato sulla programmazione, e fa parte della rete Stack Exchange che copre ogni sorta di altri argomenti:
È una risorsa imperdibile per chiunque lavori nello sviluppo, e nonostante alcune controversie sulla sua comunità, il traffico è ancora notevole. Oseremmo dire che Stack, insieme al vostro motore di ricerca preferito, rappresenta uno strumento di sviluppo web flessibile per imparare e migliorare le vostre abilità.
Per esempio, è probabile che vi dirigiate verso Stack Overflow quando incontrate un blocco di sviluppo relativo al codice. Allo stesso modo, quando salta fuori un errore che non sapete bene come risolvere, cercarlo in un motore di ricerca è il modo più veloce per trovare la risposta di cui avete bisogno.
Dato che il 90% degli utenti intervistati va su Stack Overflow per risolvere problemi, è probabile che tutti usino lo strumento. Tuttavia, per i principianti (ma anche se non potete descrivere bene il vostro problema) i motori di ricerca saranno probabilmente un po’ più amichevoli.
Risorse e Riferimenti sullo Sviluppo Web
Se siete sviluppatori e sviluppatrici che parteggiano per la cultura del “leggi le istruzioni”, non avrete bisogno dei prossimi paragrafi. Al contrario, se vi piace immergervi in un problema e capirlo, sappiate che ci sono stati innumerevoli sviluppatori prima di voi che hanno probabilmente trovato una risposta.
Detto questo, date un’occhiata ai seguenti strumenti di sviluppo web che vi offrono molto materiale di riferimento per il web.
58. MDN Web Docs
Molto tempo fa, agli albori della rete, c’era un sito chiamato Webmonkey, gestito da Lycos, che aveva lo scopo di insegnare lo sviluppo e la programmazione web ai nuovi utenti. Lo spirito di quel sito continua a vivere in MDN Web Docs di Mozilla. Webmoney ha chiuso nel 2004, e MDN Web Docs è arrivato nel 2005, quindi c’è un naturale collegamento tra i due.
Si tratta di una raccolta di risorse che vi aiutano a imparare la programmazione web in alcuni casi, o prodotti specifici di Mozilla in altri. Il contenuto è diviso in due grandi categorie: tecnologie e guide di riferimento. Trovate diversi tutorial basati sulla vostra abilità ed esperienza, una guida di riferimento dedicata, e alcune ulteriori risorse per la prima.
Le guide sono tutte relative a nicchie e industrie specifiche all’interno dell’industria dello sviluppo. Per esempio, i riferimenti allo sviluppo web sono pagine di partenza fondamentali per ulteriori guide su HTML, CSS e JavaScript.
Lo sguardo si apre anche su varie industrie, come lo sviluppo di videogiochi e tutto ciò che serve per iniziare nel settore:
MDN Web Docs è una lettura essenziale per uno sviluppatore web principiante, e offre anche un valore più che sufficiente per un esperto. Se c’è un sito che merita un segnalibro del browser, è questo!
59. DevDocs — API Documentation Browser
In passato, forse conservavate tutti i manuali dei prodotti che compravate in un cassetto o in un armadio polveroso. Ma ora che la vita si è fatta più digitale, quei manuali cartacei hanno lasciato il posto al download di PDF dal sito web di ogni produttore.
Grazie a questo, ora abbiamo siti web che raccolgono le versioni digitali dei manuali in biblioteche curate. Questo vi permette di trovare ciò di cui avete bisogno in un repository. Per questo, è ragionevole che ne esista uno anche per gli argomenti che ruotano intorno allo sviluppo web.
In breve, DevDocs è una libreria di documentazione per le API, ed è qualcosa che pensiamo sarà prezioso per quasi tutte le persone che lavorano nello sviluppo:
Prima di dare un’occhiata alla libreria, abilitate la documentazione API desiderata. Potete farlo dalla schermata delle Preferenze:
Una volta fatto, sarete in grado di accedere alla documentazione pertinente da un menu ad albero dedicato:
È una soluzione semplice a un problema di inefficienza perché si hanno più riferimenti API in un unico posto. DevDocs è un altro sito che merita un segnalibro, ed è un peccato che non ci sia un’applicazione desktop disponibile per una consultazione ancora più rapida.
60. CSS-Tricks
Chris Coyier è un nome che molti sviluppatori web conosceranno. Scommettiamo che avete già familiarità con il sito web che ha fondato: CSS-Tricks. Come suggerisce il nome, è un sito dedicato alla codifica front-end, in particolare ai CSS, e a come migliorare.
Come nota la sua pagina About, per i primi anni i CSS sono stati l’argomento predominante del sito. Da allora, però, HTML, JavaScript, WordPress e altro sono diventati altrettanto importanti e discussi frequentemente. Il risultato è un sito focalizzato sullo sviluppo front-end, con una serie di articoli, video e guide che possono ispirarvi.
Un elemento semplice ma prezioso è il CSS Almanac, che delinea i selettori e le proprietà nei CSS. È una grande fonte di riferimento se avete bisogno di aggiornarvi su certi aspetti del linguaggio.
Anche se CSS-Tricks tratta molti temi interessanti, non è una risorsa di riferimento di per sé. Tuttavia, vi consigliamo di farlo diventare un vostro ritrovo regolare, sia attraverso un feed RSS o tramite un’altra soluzione. Il contenuto è di alta qualità e può sfidarvi in modi a cui non avevate pensato prima. Come minimo, iscrivetevi alla newsletter e aspettate che CSS-Tricks arrivi nella vostra casella di posta.
61. DEV Community
Immaginate di poter prendere le parti eccellenti dei social media, dello sviluppo web e di Stack Overflow, e poi creare un sito che li fonde. La DEV Community potrebbe essere il risultato.
È una piattaforma di blogging, ma anche un modo per trovare le risposte alle domande di sviluppo. Si selezionano i tag e le persone da seguire, e il vostro newsfeed diventa una linea temporale automatica e curata di articoli e approfondimenti:
È giusto suggerire che si tratta di informazioni che si possono trovare ovunque, se siete disposti a trovarle. Il vantaggio della DEV Community è che è già qui, ed è una raccolta diretta di argomenti di sviluppo. Pensatela come una traccia di una conferenza sullo sviluppo web.
È un altro sito che andrà bene all’interno del vostro feed RSS, o come digest nella vostra casella di posta. In quanto tale, è anche una risorsa “dormiente”, nel senso che ci andrete spesso senza rendervene conto.
62. Can I use…
Si potrebbe dire che Jeeves ha iniziato la tendenza di fare domande su internet per trovare informazioni. È stato sostituito velocemente da vari algoritmi di ricerca, anche se la ricerca basata su domande è ancora un modo affidabile per trovare ciò di cui si ha bisogno.
Can I use… è la risposta dello sviluppatore front-end a “Esiste un Ask Jeeves per il CSS?”.
La premessa è semplice: si digita il selettore o la proprietà CSS nel campo di ricerca, e il database vi dice se è possibile utilizzarlo per creare siti web. Non vi limita per forza ai CSS, sono supportati anche JavaScript e HTML:
È un database di linguaggio front-end, quindi non cercherà di restituire risultati per PHP, Python o altri linguaggi lato server. Anche così, Can I use… è uno strumento immenso e prezioso che vi aiuterà quando si tratta di accessibilità e progettazione per più dispositivi.
È una proposta semplice per tirare fuori un elemento specifico e vedere a colpo d’occhio se il vostro browser di destinazione lo supporta:
Guardando più da vicino, si possono anche trovare statistiche come la data di rilascio dell’elemento e una percentuale di utilizzo:
Nel complesso, potreste non usare Can I use… con regolarità; in certe fasi di un progetto, però, lo terrete aperto quasi tutto il tempo. Una volta che avete capito cosa supporteranno i vostri browser di destinazione, Can I use… se ne sta tranquillo tra i vostri segnalibri e aspetta la prossima volta in cui lo necessiterete. È un servizio utile che può essere un grande suggeritore quando si tratta del vostro codice front-end.
Riepilogo
Tempo e denaro scarseggiano sempre, e c’è una certa tendenza a optare per gli stessi vecchi strumenti di sviluppo web che avete sempre usato. Tuttavia, fare una scelta ponderata sui bisogni di un progetto ripagherà in tempo, costi e produttività.
In questo articolo, abbiamo visto 62 incredibili strumenti di sviluppo web che potete usare nel 2024 per dare una spinta al vostro lavoro e a quello del vostro team. Magari li usate già. Se i vari sondaggi sono corretti, sempre più sviluppatrici e sviluppatori si rivolgono a GitHub, TypeScript, diversi stack di servizi web, e uno dei tanti framework JavaScript, per portare avanti i loro progetti.
Non importa quali strumenti di sviluppo web scegliete di usare, i clienti di Kinsta hanno accesso ad ancora più risorse nella piattaforma MyKinsta. Questo include una rapida e facile spinta all’ottimizzazione generale tramite la funzione di minificazione del codice che è incorporata direttamente nel cruscotto di MyKinsta: questa permette ai clienti di abilitare la minificazione automatica di CSS e JavaScript con un semplice clic.
Avete uno strumento di sviluppo web da raccomandare nel 2024? Fateci sapere cosa ne pensate nella sezione commenti qui sotto!
Strumenti per creare da zero una pagina HTML con foglio di stile?
E’ li che si perde anche tanto tempo !!!
Ciao Alex, in effetti anche in questo ambito ci sono numerosi strumenti che possono aiutare ad avviare un progetto con tutte le risorse necessarie ad iniziare. Personalmente mi piace molto HTML5 Boilerplate. Prova a darci un’occhiata. C’è anche una ricca documentazione