Eksperyment z Claude Code: modernizacja tutoriala Java z 1997

TL;DR
Notatki z pracy z Claude Code – modernizacja 17‑plikowego tutoriala Java z 1997 roku była jedynie poligonem doświadczalnym. Stary kurs, pełen tagów <font>, kodowania ISO‑8859‑2 i resztek TelePort Pro, posłużył do sprawdzenia, jak AI radzi sobie w realnym projekcie. Efekt? Nowoczesna, responsywna (z niezmienioną treścią) strona Hugo plus zachowana, „muzealna” wersja oryginalna i dużo doświadczeń z Claude Code

Dlaczego modernizować kod z 1997 roku?

#

Chciałem przetestować Claude Code na prawdziwym zadaniu, nie na wymyślonych przykładach. Idealny kandydat leżał na dysku i wisiał w internecie: mój tutorial Java z 1997 roku “Java - nowy standard programowania w Internecie”.

Ten tutorial miał swoją historię. W szczytowym momencie licznik wyświetleń pokazywał ponad 500,000 odwiedzin. Uniwersytety pytały o zgodę na kopiowanie do celów dydaktycznych - zawsze się zgadzałem, wtedy nie myślałem o monetyzacji. To było po prostu dzielenie się wiedzą w czasie, gdy Java była nowością, a polskich materiałów brakowało.

Ale kod HTML wygenerowany kiedyś przez Microsoft FrontPage (tak wiem…) wyglądał okropnie. Kodowanie ISO-8859-2 zamieniło polskie znaki w “tre�ci”, “ko�cowe”, “osob�”. Wszędzie <font> tagi, tabele do layoutu, artefakty TelePort Pro. Dobry test case dla AI.

Sprawdź efekty (ta sama historyczna zawartość ale różny look&feel):

• Wersja nowoczesna 2025
• Wersja oryginalna 1997

Praca z Claude Code – Context Engineering, CLAUDE.md i Slash Commands

#

W pracy z Claude Code zastosowałem zasady Context Engineering (zobacz zasady). Ten eksperyment stał się również poligonem do testowania custom slash commands oraz uzycia serwery MCP (Model Context Protocol):

• context7 - dostęp do aktualnej dokumentacji Hugo, bibliotek i frameworków
• fetch - pobieranie treści z internetu, sprawdzanie linków, analiza stron
• filesystem - operacje na plikach, batch processing, transformacje
• playwright - automatyzacja przeglądarki, testy UI, sprawdzanie responsywności

Te narzędzia znacząco przyspieszyły proces, umożliwiając bezpośredni dostęp do dokumentacji i automatyzację zadań, które normalnie wymagałyby ręcznego wyszukiwania i kopiowania.

Na początku powstał plik CLAUDE.md z jasno określonymi celami projektu. Następnie, w trybie plan mode on, parę iteracji z Claude Code nad szczegółowym planem, który trafił do osobnego pliku Markdown. W rezultacie CC wykonało m.in..: 

• Analiza wzorców - AI wyodrębniło kategorie <font> tagów

  • Elementy o semantyce ostrzeżeń / nagłówków

• Konwersja kodowania - ISO-8859-2 → UTF-8 z walidacją

• Inteligentne przepisywanie - <font> → nowoczesne HTML/CSS

• Quality gates - testy po każdej fazie

Ocena: bez AI nie chciałbym się grzebać w starym HTML. Z Claude Code – zadanie stało się zabawą.

Profesjonalne testowanie wydajności

#

• Lighthouse testing pipeline z Docker
• Performance scores: SEO 100/100, Best Practices 100/100, Accessibility 96/100
• AI-analyzable reports - JSON format dla feedback loops

Wdrożenie produkcyjne na Cloudflare

#

• Production config z security headers i cache optimization
• Docker-based build pipeline z GitHub integration
• Kompletny DEPLOYMENT.md - step-by-step guide

Zaawansowane inżynieria Hugo

#

• Custom render hooks - automatyczne target="_blank" dla linków zewnętrznych
• Git submodule management - theme version lock (Blowfish v2.88.1)
• Split configuration - osobne dev/production settings
• Multilingual i18n fixes - poprawki tłumaczeń theme’u

Docker development workflow

#

• Environment consistency - ./scripts/dev.sh z Hugo v0.148.1+extended
• Production testing - lokalne Docker builds identyczne z Cloudflare
• Dependency isolation - brak konfliktów z lokalnym Hugo

Rezultat po paru dniach

#

Wersja Hugo 2025

#

• Responsywne layouty
• Pełnotekstowe wyszukiwanie z polskimi znakami
• Nowoczesna nawigacja i dark‑mode
• Oryginalna treść zachowana 1:1 – zmienił się tylko wygląd
• Dwie wersje wyglądu treści - nowoczesna i oryginalna pod kontrolą Hugo

Wersja oryginalna 1997

#

• Nieoszlifowany urok Web 1.0
• Kolorowe fonty, tabele, licznik odwiedzin
• Przełącznik „Time‑Machine” między epokami
• Ta wersja, mimo, że wyglądająca jak dawniej pod spodem ma te unowocześniony HTML

Bonusy

#

• Lepsze poznanie możliwości Hugo
• Pipeline CICD, z deploymentem na Cloudflare
• Dodane za pomocą Claude Code testy wydajności Lighthouse
• Praktyczne testy AI na legacy kodzie
• Zachowanie kawałka historii polskiego IT

Wnioski

#

AI w development

#

• Genialne w rutynowych, powtarzalnych, nudnych zadaniach
• Wymaga nadzoru człowieka, ale potrafi zaskoczyć
• Rozpoznawanie wzorców to jej supermoc

Modernizacja legacy

#

• Kontekst historyczny bywa cenniejszy niż czysty kod
• Strategia dual‑version sprawdza się przy treściach archiwalnych
• Kodowanie znaków – zawsze sprawdzaj dwa razy

Edukacja i archiwizacja

#

• Otwarte dzielenie się wiedzą → długofalowa wartość
• Wczesny web zasługuje na digitalne muzeum

Podsumowanie

#

Eksperyment pokazał, że AI to nie magia, ale solidny asystent czasem junior developer. Dzięki niemu odświeżyłem 90’s‑owy tutorial, poznałem nowe narzędzie i uratowałem cząstkę historii.

Sprawdź efekty:

• Wersja Hugo 2025
• Wersja oryginalna 1997

Nie każda linijka kodu zasługuje na wieczne życie, ale te, które zbudowały fundamenty, warto pielęgnować.

#

Masz podobny projekt w szufladzie? Daj znać – chętnie pomogę!