A blog, amely saját magát is megírja

Az utóbbi időben több olyan dolgot sikerült megvalósítanom Codexszel, amit régóta szerettem volna. Nem azért nem készültek el korábban, mert lehetetlenek voltak, vagy mert ne lett volna meg hozzájuk a szakmai alap. Inkább azért, mert ezek azok a projektek, amelyekhez kell egy különös lendület: amikor nem csak elindulsz, hanem végig is mész rajtuk.

Ilyen volt például a fegyvermarket.hu mögötti kereskedelmi motor. Ez eredetileg úgy indult, hogy legyen egy speciális területekre használható apróhirdetési rendszer. Olyan piacokra, ahol egy általános marketplace nem feltétlenül jó terep, vagy ahol egyáltalán nem is akar jelen lenni. Az első lefedett terület a legális fegyverkereskedelem lett, de maga a motor ennél általánosabb gondolatból nőtt ki.

Ilyen volt az otthoni infrastruktúrám rendberakása is: robosztus multi-WAN tűzfal, több internetkapcsolattal, failoverrel, és otthonról, NAT-olt WAN mögül működő fix IPv4-es hostinggal. Ez már az a fajta feladat, ahol papíron minden részlet érthető, mégis könnyű évekig halogatni, mert mindig van valami fontosabb.

Aztán egyszer csak ott volt több működő dolog. Olyan dolgok, amelyekre büszke vagyok. És innen jött a gondolat: jó lenne ezeket valahol leírni. Nem azért, mert ebből tömegmédia lesz, hanem mert ha akár egy embernek is érdekes, hasznos vagy bátorító, akkor már megérte.

Csak ehhez kellett egy hely.

Nem blogmotort kerestem. Abból már elég volt.

Körülbelül harminc éve vagyok fullstack HTML5 fejlesztő. Csináltam már annyi content management megoldást, adminfelületet és saját keretrendszert, hogy a "melyik CMS-t használjam?" kérdés nálam nem igazán merült fel. Nem dolgoztam piaci frameworkökkel; voltam annyira előrébb szakmailag, hogy rám bízták, hogyan oldom meg.

Volt például olyan banki projekt, amelyet egy csapat egy év alatt sem tudott átadni. Az akkori saját admin keretrendszeremmel, az ADE-vel én nulláról két hét alatt átvittem a célon. Nem azért mondom ezt, hogy hősködjek vele, hanem mert fontos kontextus: nem onnan indultam, hogy kellene valami kész rendszer, mert máshogy nem boldogulok.

Pont fordítva. Tudom, milyen egy jó admin. Tudom, hol kezd el fölöslegesen dagadni egy CMS. Tudom, mikor válik a tartalomkezelés önmaga paródiájává.

Ezért azt akartam, hogy legyen egy oldschool blog. De blogmotor nélkül. Legyen saját. Legyen egyszerű. Legyen érthető. Legyen olyan, ahol a frontend CSS mondja meg, hogyan néz ki a tartalom, és az admin csak annyit csinál, amennyit muszáj.

Az első prompt még elég nyers volt. Valami ilyesmi: akarok csinálni egy blog oldalt, főleg AI-kódolással kapcsolatos témákra, sima text blog, néha videók, sanch.hu alatt, készíts egy kurvajó látványtervet, lehetőleg ne az őskori HTML4 hangulatban.

Ez jó kezdés volt, mert benne volt az ambíció. De még nem volt benne a pontos forma.

Az első irány modern dev/AI vibe lett. Kicsit Vercel, kicsit Linear, kicsit hacker minimal. Dark mode, kód, AI, grid, kártyák, AI tools, CTA-k, minden, amit ilyenkor az ember kapni szokott, ha azt mondja, hogy legyen modern és techy.

Nem volt rossz. Csak túl portálos volt.

És itt jött az első fontos emberi döntés: ez inkább blog legyen. Ne portál. Ne dashboard. Ne SaaS landing page. Ne akarjon terméknek látszani. Olvasni lehessen rajta.

Ami viszont megtetszett, az a nyitólapi animáció ötlete volt. Egy üres oldal. Középen valamilyen AI input konténer. Begépelődik egy prompt. Thinking. Building page as requested. Aztán a szemünk előtt összeáll a sanch.hu blog.

# Prompt példa: intro animáció javítása

Ez a részlet azt mutatja, hogyan lett a "legyen valami AI-os intro" ötletből konkrét, ellenőrizhető feladat Codex számára.

```text
Build a real animated homepage intro for the existing blog.

Read the current homepage, CSS and JavaScript first. Do not create a separate fake animation mockup.

Requirements:

1. On first load, start from a blank dark screen.
2. Show one centered AI prompt box.
3. Type this prompt character by character:
   "build a fully functional blog page. Techy but not high tech. Not fancy. Simple blog functionality."
4. After typing, show visible progress states:
   - thinking
   - reading constraints
   - assembling layout
   - done
5. Reveal the real page elements in sequence:
   - header
   - hero
   - post feed heading
   - post cards
   - sidebar
   - footer
6. The animation must reveal the actual DOM elements that remain usable after the intro.
7. Do not leave fallback text visible.
8. Do not introduce React or any frontend framework.
9. Keep the style calm, dark, editorial and readable.
10. Add a way to replay the intro with `?intro=1`.

After implementation, verify in the browser that the page is usable after the overlay disappears.
```

## Miért hasznos?

Az első változatoknál nem az volt a gond, hogy "nem volt elég szép". Az volt a gond, hogy az animáció nem a valódi oldalt építette fel, vagy statikus fallback állapot ragadt a felületen.

Ez a prompt már nem hangulatot kér, hanem működést:

- mit kell látni először;
- milyen állapotok kövessék egymást;
- melyik valós DOM-elemek jelenjenek meg;
- mit tilos behozni;
- hogyan kell ellenőrizni a végeredményt.

---

# Prompt example: fixing the intro animation

This excerpt shows how the vague "let's have an AI-style intro" idea became a concrete, testable Codex task.

```text
Build a real animated homepage intro for the existing blog.

Read the current homepage, CSS and JavaScript first. Do not create a separate fake animation mockup.

Requirements:

1. On first load, start from a blank dark screen.
2. Show one centered AI prompt box.
3. Type this prompt character by character:
   "build a fully functional blog page. Techy but not high tech. Not fancy. Simple blog functionality."
4. After typing, show visible progress states:
   - thinking
   - reading constraints
   - assembling layout
   - done
5. Reveal the real page elements in sequence:
   - header
   - hero
   - post feed heading
   - post cards
   - sidebar
   - footer
6. The animation must reveal the actual DOM elements that remain usable after the intro.
7. Do not leave fallback text visible.
8. Do not introduce React or any frontend framework.
9. Keep the style calm, dark, editorial and readable.
10. Add a way to replay the intro with `?intro=1`.

After implementation, verify in the browser that the page is usable after the overlay disappears.
```

## Why it helps

The early versions were not merely "not pretty enough". The problem was that the animation either did not build the real page, or a static fallback state remained visible.

This prompt asks for behavior, not vibes:

- what appears first;
- which states follow each other;
- which real DOM elements are revealed;
- what must not be introduced;
- how the result should be checked.

Ez egyszerre volt látványelem és nagyon pontos metafora. Mert nagyjából így történt az egész projekt is. Nem úgy, hogy egy promptból kijött a kész rendszer, hanem úgy, hogy beszélgettünk, irányt adtam, visszadobtam, kritizáltuk, újrapromptoltuk, Codex dolgozott, aztán megint javítottunk.

A végleges designirány valahol itt állt össze: simple dark editorial blog, kevés kék akcentussal, sok whitespace-szel, normális tipográfiával. Nem portál, nem dashboard, nem AI SaaS landing page. Inkább személyes szakmai blog, amelynek a nyitó animáció ad karaktert.

Ez nagyon fontos különbség. A blog személyes, mert arról írok rajta, amire büszke vagyok. Megvalósult vagy folyamatban lévő AI-val közös projektekről. De ettől még nem napló. Nem az a cél, hogy minden napi rezdülést publikáljak, hanem hogy konkrét munkákon keresztül mutassam meg, mit lehet ma AI-val ténylegesen megcsinálni.

Persze később lehetnek naplószerű jelentések is, főleg nagyobb projektek kapcsán. De az alap nem önvallomás. Inkább műhelynapló, csak kicsit rendezettebb formában.

A fejlesztés folyamata is érdekes volt. A blog kialakítása a böngészőben futó ChatGPT-vel kezdődött. Ott alakult ki a koncepció, ott készültek az első projektleírások, README-k, cél- és architektúradokumentumok. Aztán átadtam a folyamatot Codexnek, hogy ne csak beszélgessünk róla, hanem ténylegesen épüljön is.

Codex majdnem elsőre jót csinált. De a "majdnem" itt elég fontos szó.

A böngészős ChatGPT közben egyfajta kegyetlen reviewer lett. Ránézett az aktuális állapotra, megkritizálta, és újabb promptokat írt Codexnek. Időnként elég nyersen. Volt olyan kör, ahol a nyitólapi animációra az volt a lényegi megállapítás, hogy ez nem rossz animáció, hanem gyakorlatilag nincs animáció. Máskor fallback HTML ragadt kint. Máskor az egész túl szegényes volt.

És igaza volt.

Ez a rész szerintem sokkal fontosabb, mint maga a látvány. Mert itt derül ki, hogyan működik valójában az AI-val végzett munka. Nem úgy, hogy az ember beír egy mindentudó promptot, aztán kész terméket kap. Hanem úgy, hogy kialakul egy munkafolyamat.

# Codex-ready projektbrief részlet

Ezt a rövid mintát akkor érdemes használni, amikor nem egyetlen nagy "csináld meg" promptot akarsz adni, hanem munkára fogható keretet.

```text
Cél:
Egy saját, egyszerű publikációs felületet szeretnék AI-val közösen építeni.

Első verzió:
- olvasható kezdőoldal;
- cikkoldal;
- címkék;
- keresés;
- minimális admin;
- képek és letölthető fájlok csatolása.

Tilos most:
- nagy CMS-t építeni;
- dashboardot csinálni;
- marketinges landing page irányba vinni;
- felesleges frameworköt behozni;
- olyan funkciót hozzáadni, ami nem segíti az írást, olvasást vagy publikálást.

Design:
Sötét, nyugodt, editorial blog. Kevés kék akcentus. Sok whitespace. Nem portál.

Munkamód:
Először olvasd el a célokat, aztán javasolj szerkezetet. Kódot csak akkor írj, ha a scope már tiszta.
```

---

# Codex-ready project brief excerpt

Use this short pattern when you do not want to send one giant "build it all" prompt, but want to give the model a useful working frame.

```text
Goal:
I want to build a simple personal publishing surface together with AI.

First version:
- readable homepage;
- article page;
- tags;
- search;
- minimal admin;
- attached images and downloadable files.

Not now:
- do not build a large CMS;
- do not make it a dashboard;
- do not turn it into a marketing landing page;
- do not introduce unnecessary frameworks;
- do not add features that do not help writing, reading, or publishing.

Design:
Dark, calm, editorial blog. A few blue accents. Plenty of whitespace. Not a portal.

Working mode:
Read the goals first, then propose structure. Write code only when the scope is clear.
```

Nálam ebben két szerep vált szét. A böngészős ChatGPT lett a beszélgetős gondolkodótárs, kritikus és promptíró. Codex lett a kódbázison dolgozó kivitelező. Én pedig ott ültem közöttük, szakmai ízléssel, döntésekkel, türelmetlenséggel, néha anyázással, és azzal a nagyon régi fejlesztői érzéssel, hogy "ez még nem az".

A nyitólapi animáció nagyjából tíz kör után lett olyan, hogy már vállalható volt. És ez tökéletesen megmutatja, miért téves az egypromptos termék mítosza.

Egy amatőr sokszor azt keresi, mi az a prompt, amelyik készre csinál egy appot, webes szolgáltatást vagy komplett terméket. Egy szakember viszont az első generált verziónál rögtön látja, hol vérzik ezer helyen. Rossz a struktúra. Nem jó a ritmus. Túl sok a dísz. Kevés a tartalom. Nem működik mobilon. Nem azt animálja, amit kellene. Nem a valódi DOM-elemeket építi fel, hanem valami makettet. A backend még nincs rendben. Az admin túl sokat akar. A tartalomkezelés rendetlen HTML-t gyártana.

Régen ezek azok a pontok voltak, ahol sok saját projekt félrement vagy félbemaradt. Mert a javítás, csiszolás, visszabontás és újraépítés unalmasabb, mint az első ötlet.

AI-val ez változott meg.

Nem azért, mert az AI helyettem tudja, mi a jó. Hanem azért, mert már van kihez visszadobni a részleteket. Van, aki megírja a következő változatot. Van, aki átrendezi a struktúrát. Van, aki promptot ír a másik modellnek. Van, aki összefoglalja, mitől rossz az aktuális állapot. És van, aki nem sértődik meg, ha azt mondom: ez így tök szar, kezdjük újra.

Ettől lett érdekes maga a blog is. Mert nem csak arról van szó, hogy AI-val készült. Hanem arról, hogy a blog célja, kinézete, motorja, adminja, szerkesztőségi folyamata és most már a róla szóló cikkek is ugyanabból a módszerből állnak elő.

Ez a blog saját magát is megírja. De nem úgy, hogy én eltűnök belőle.

Pont ellenkezőleg.

Az én tapasztalataimat rendezi cikké. Az én projektjeimből indul ki. Az én ízlésem szerint kell működnie. Az én türelmetlenségemet kell kibírnia. Az én szakmai múltam mondja meg, mikor jó egy admin, mikor fölösleges egy funkció, mikor lesz egy blogból portál, és mikor kell visszalépni egy egyszerűbb megoldáshoz.

Az AI itt nem szerző helyettem abban az értelemben, hogy kitalálja, ki vagyok. Inkább szerkesztőtárs. Kérdez, összerendez, megfogalmaz, fordít, kritizál, újraír. Segít publikálható formába hozni azt, amit egyébként fejben már tudok, csak valószínűleg soha nem írnék le ilyen következetesen.

Ezért lett ez az első cikk témája. Mert mielőtt a fegyvermarket.hu-ról, az otthoni infrastruktúráról, vagy bármelyik másik AI-val közös projektről írnék, érdemes elmondani, hogyan jött létre az a hely, ahol ezek megjelennek.

A következő részben már kevésbé a kinézetről lesz szó. Ott jön az AuthHandler osztály bevezetése, és az, hogyan lett a blog többnyelvű. Mert egy ponton túl a kérdések már nem arról szóltak, hogy szép-e az oldal, hanem arról, hogy viselkedik-e úgy, mint egy rendes termék.