Strumenti di Sviluppo Web: Editor, DevTools e Produttività

Editor di Codice

VS Code: L'editor di codice più popolare. Ecosistema di estensioni esteso, IntelliSense, debugging, integrazione Git. Gratuito e open source.

WebStorm: IDE di JetBrains. Refactoring avanzato, analisi del codice, supporto dei framework. A pagamento.

Sublime Text: Leggero e veloce. Interfaccia minimalista. Apre i file grandi rapidamente.

Vim/Neovim: Editor basato su terminale. Guidato da tastiera, altamente personalizzabile. Curva di apprendimento ripida.

Criteri di selezione: VS Code per i principianti. WebStorm per l'enterprise. Sublime Text per i minimalisti. Vim per gli amanti del terminale.

DevTools del Browser

Elements/Inspector: Ispezionate DOM e CSS. Testate i cambiamenti di stile dal vivo. Box model, layout, computed styles.

Console: Visualizzate gli errori JavaScript e i log. REPL interattivo. Accesso agli elementi DOM.

Network: Monitorate le richieste HTTP. Grafico waterfall, timing, headers, payload. Rilevate i colli di bottiglia delle prestazioni.

Performance: Profiling di CPU, memoria, rendering. Flame chart, long tasks, layout shifts. Misurazione dei Core Web Vitals.

Application: Storage (cookies, localStorage, IndexedDB), Service Worker, Cache, Manifest. Debugging PWA.

Lighthouse: Audit di Performance, Accessibility, Best Practices, SEO. Punteggio e raccomandazioni per ogni pagina.

Strumenti di Terminale

Git: Controllo versione. Branch, merge, rebase, stash. Gestione delle PR con GitHub CLI (gh).

npm/yarn/pnpm: Gestore di pacchetti. Gestione delle dipendenze, esecuzione di script, workspace.

Docker: Containerizzazione. docker build, docker run, docker compose. Ambiente di sviluppo locale.

curl/wget: Richieste HTTP. Test di API, download di file. curl -X POST -H 'Content-Type: application/json' -d '{...}' url.

jq: Processore JSON. Parse e filtro di JSON nel terminale. curl ... | jq '.data'.

fzf: Fuzzy finder. Ricerca di file, cronologia, processi. Aumenta la produttività del terminale.

Strumenti di Produttività

Postman/Insomnia: Test e documentazione di API. Collection, environment, test script. Collaborazione in team.

Figma: Design UI/UX. Libreria di componenti, prototipazione, dev mode (export CSS).

Estensioni Chrome: React DevTools, Vue DevTools, Redux DevTools, axe (accessibilità).

Grammarly: Correzione ortografica e grammaticale. Per post di blog e documentazione.

Notion/Obsidian: Presa di appunti e gestione della conoscenza. Documentazione, wiki, tracciamento delle attività.

Strumenti di Qualità del Codice

ESLint: Linting JavaScript/TypeScript. Standard di codice, rilevamento errori. Regole e plugin personalizzati.

Prettier: Formattazione del codice. Indentazione automatica, stile delle virgolette, punto e virgola. Format on save.

TypeScript: Verifica dei tipi statica. Rilevamento errori a tempo di compilazione. Autocompletamento IDE.

Husky + lint-staged: Hook di pre-commit. Verifica di lint e formato prima del commit. Integrato nella pipeline CI/CD.

SonarQube: Analisi della qualità del codice. Rilevamento di bug, vulnerabilità, code smells. Quality gates.

Consigli di Produttività dello Sviluppatore

Scorciatoie da tastiera: Imparate le scorciatoie dell'editor e del browser. Minimizzate l'uso del mouse.

Snippets: Salvate i frammenti di codice usati frequentemente. Snippets di VS Code, Emmet.

Aliases: Definite alias del terminale. alias gs='git status', alias dc='docker compose'.

Dotfiles: Gestite i file di configurazione (bashrc, vimrc, gitconfig) con Git. Configurazione rapida su una nuova macchina.

Apprendimento: Dev.to, Hacker News, CSS-Tricks, Smashing Magazine. Apprendimento continuo e mantenersi aggiornati.