Salta al contenuto principale

Informazioni su WebDev Tools

La decimilionesima raccolta di strumenti – un resoconto di un incidente

RFC 4648 Base64 RFC 8259 JSON RFC 4122/9562 UUID RFC 7519 JWT ISO/IEC 18004 QR NIST SP 800-63B WCAG A11y Solo lato client

Sì, lo so. La decimilionesima raccolta di strumenti su Internet. A chi serve? Ma vi posso rassicurare: questo progetto non era mai stato pianificato. È un incidente, il frutto di pura procrastinazione, ma anche una lezione su come gestire l'intelligenza artificiale.

Tutto è iniziato in modo del tutto innocuo sul mio desktop.

All'inizio c'era lo script.

Come molti sviluppatori, anch'io avevo accumulato diversi strumenti fatti in casa sul mio localhost. Piccoli script per le seccature quotidiane: una conversione Em/Px qui, un piccolo aiutante là. Cose per le quali ero troppo pigro per cercare ogni volta gli stessi siti web. Con i segnalibri, infatti, sono in guerra aperta.

Questi piccoli aiutanti facevano diligentemente il loro dovere. Ma poi ne ho aggiunti altri due e il mio istinto di sviluppatore web ha colpito senza pietà: ho iniziato a collegarli tra loro. Ci voleva un menu. Un po' di styling. E all'improvviso mi sono ritrovato nel bel mezzo di tutto ciò che viene in mente quando si vuole distrarsi con successo dal lavoro vero e proprio. La semplice raccolta si è trasformata in un progetto a tutti gli effetti. Dovevo semplicemente “pimparlo” fino a quando non mi sono ritrovato davanti un vero e proprio piccolo sito web con tutto il necessario.

“IA, prendi il comando!” – era un'idea folle?

A un certo punto mi è venuto in mente: sono solo semplici script. Lascia che se ne occupi l'IA! Da fedele utente di VS Code, ho avviato il progetto direttamente con Claude Code (Sonnet).

Ma prima di dare carta bianca all'IA, dovevo stabilire delle linee guida chiare. Quindi, per prima cosa ho definito uno stack tecnologico fisso. Da questo ho ricavato un CLAUDE.md (rigorosamente limitato a un massimo di 60 righe – i percorsi di comando brevi sono fondamentali per le IA) e un .claude/comments/review.md. Altrettanto fondamentali per il proprio portafoglio sono un .claudeignore coerente e un .claude/settings.local.json specificamente adattato, per risparmiare un sacco di token durante la codifica.

Il risultato è stato sorprendente: un'applicazione web incredibilmente valida ed espandibile in modo modulare. Ma naturalmente non è andato tutto liscio. Bisogna impedire costantemente a un'IA di esagerare. Il mio comando più importante è diventato subito: «No, non abbiamo bisogno di un gestore di pacchetti! E ora smettila di volermi proporre di nuovo un framework!» Alla fine, però, ne è effettivamente uscito un framework di base utilizzabile.

Le insidie del “Vibe Coding”

Il progetto ha preso slancio e ho imparato rapidamente alcune dure lezioni sulla collaborazione con i miei colleghi digitali.

  • La questione del framework: le IA adorano Tailwind. Dopo alcune modifiche manuali, durante le quali la mia pazienza si è assottigliata pericolosamente, alla fine si è spezzata. Sono quindi passato a Bootstrap per portare a termine la cosa in modo pragmatico. A volte “finito” è semplicemente meglio di “perfetto” (o Tailwind).

  • Senza Git? Senza di me! Per abitudine ho creato subito un repository. Per fortuna! Mi sono reso conto rapidamente che questo “Vibe Coding” senza un piano e senza controllo delle versioni finisce per essere un enorme spreco di tempo.

  • Logica IA vs. realtà: a volte le IA si semplificano troppo la vita – o la complicano troppo. È vero che Claude è migliorato enormemente in questo senso e ora analizza il codice in modo molto più approfondito invece di speculare alla cieca. Tuttavia, se non si specifica con precisione dove si vuole arrivare, le IA tendono ancora a proporre soluzioni di script arbitrarie che finiscono in un vicolo cieco. Senza un coraggioso “git reset --hard” avrei comunque dovuto ricominciare il progetto da zero più di una volta.

  • Ping-pong dell'IA nella revisione del codice: per il controllo qualità ho puntato su un sistema di “checks and balances”. Con il comando /review attivo la verifica interna di Claude, che opera rigorosamente secondo le specifiche del mio file review.md. In aggiunta a ciò, ho fatto eseguire revisioni esterne da ChatGPT e Gemini e ho infine discusso i risultati con Claude Opus. Questa “revisione AI per la revisione AI” è piuttosto meta, ma estremamente utile per verificare diversi modi di pensare e colmare le lacune logiche.

Round bonus: l'IA come traduttore?

Una volta definita la funzionalità, è stata la volta delle traduzioni. Qui l'IA ha mostrato il suo lato filosofico: Claude Sonnet 4.5 mi ha fatto notare spontaneamente che lingue come l'hindi, il cinese o il giapponese non riguardano solo il vocabolario, ma anche peculiarità culturali e forme di cortesia. È stato un livello di autoriflessione davvero rinfrescante.

Nella pratica, però, si è finito per optare per un approccio pragmatico: per la traduzione in batch dei contenuti statici, Claude mi sembrava troppo “intellettuale” e complicato. Con Gemini e ChatGPT, la qualità dell'esecuzione era troppo incostante. Alla fine ho fatto tradurre tutto da DeepL. Anche in questo caso vale il principio: lo strumento giusto per il lavoro giusto!

Dall'intranet al web selvaggio

Una volta completata la raccolta di strumenti, che supportava addirittura diverse lingue, ha funzionato bene per un bel po' di tempo sulla nostra rete aziendale. A un certo punto mi sono detto: perché non condividerla?

Così ho fatto un po' di ordine e ho reso pubblico il sito. E dato che il tutto è nato comunque da un “incidente”, il codice è completamente aperto. Chi vuole contribuire o trova un errore: il repository Git si trova qui: https://github.com/RamonKaes/WebDev-Tools.

Sì, scusate. Eccola qui, la 10.000esima raccolta di strumenti. La 10.000esima raccolta di strumenti. Ma ehi, almeno ha una bella storia alle spalle!

Buon divertimento!

Ramon

Ramon Kaes Logo