Hogyan készül az oldal?

Hogyan készül az oldal?

Szépen, lépésről lépésre fejlődik az oldal a maga nyugis tempójában, de már bátran merem állítani, hogy kezd úgy alakot ölteni, ahogyan mindig is szerettem volna. Ennek részleteiről szeretnék kicsit mesélni nektek.

0% React, 100% Astro

Az első és magam ritmusához képest egyik legnagyobb változás, hogy a jelenlegi implementáció 0%-ban tartalmaz React-et. Az oldal lelkét az Astro biztosítja, ami nem csupán a tartalom relatíve logikus rendszerezését teszi lehetővé, hanem visszatérve a gyökerekhez: az ember tényleg HTML és JavaScript (TypeScript) kódot ír.

Ha esetleg később mégis úgy alakul, hogy szükség lenne React, Preact, Svelte, Vue, SolidJS, AlpineJS vagy esetleg Lit komponensekre, akkor sincs gond! Az Astro ökoszisztémába simán be lehet húzni a szükséges komponenseket és fogja tudni őket értelmezni és renderelni.

A bejegyzések formátuma: MDX

Minden bejegyzés, amit az oldalon találtok valójában .mdx kiterjesztésű fájlokban írodnak, ami a komponensek támogatása révén nagyon kényelmes élményt biztosít írás közben. Ezeket az MDX fájlokat képes az Astro aztán oldalakká alakítani, akár meghatározott layout-tal, de ha kell nélküle is.

🤖AI képek

Eldurrogtatom én is a szokásos “mesterséges intelligencia” dumát, mert 2023 van! De amúgy tényleg! A bejegyzésekhez tartozó előnézeti képeket a Microsoft Bing-es képalkotó robotja készíti. Ezúton is köszönjük!

Ha stílus, akkor Tailwind

Mielőtt belevágok egy ilyen projectbe, a legtöbb időt mindig azzal szúrom el, hogy ihletet próbálok szerezni és ötleteket gyűjteni egy alap kinézethez. Ez a Kódzug esetében is így volt. A dizájn alapvető koncepcióját a Cruip DevSpace témája adta. Tetszett az oldalra kihelyezett, ikonos menü és a tartalom elrendezésének bizonyos része. Szóval, elkezdtem az alapoktól megírni az egészet, kihagyva és jó pár esetben átalakítva dolgokat. Csiszoltam a menü viselkedésén tablet és mobilnézetben, illetve nekem jobban tetszik, ha kisebb kijelzőkön teljesen be lehet zárni a menüt (nem nyomja szét a tartalmat), szóval ezt is hozzáadtam a funkciókhoz.

Az oldal teljes szerkezetét és még a bejegyzések formázását is teljes mértékben a Tailwind-re tudtam bízni! Mindig nagyon furcsa egy hosszabb kihagyás után a Tailwind-et elővenni a fiókból, de végül mindig bebizonyosodik, hogy megéri! Számtalan órát tud spórolni vele egy fejlesztő, ha megtanulja jól használni ezt a kis eszközt.

SSR, SEO és Vercel

Szerencsére már az Astro is képes a szerver oldali renderelésre, így nem is kérdéses a SEO precíz kivitelezése. A kérdés már csak az volt, hogy ki tudná költséghatékonyan kiszolgálni az oldalt?! Végül a Vercel-re esett a választás és nem bántam meg! Az előbbiek fényében ugye fontos szempont volt az, hogy ne csak statikus oldalakat tudjon a választott kiszolgáló hostolni, hanem képes legyen dinamikus SSR-re is!

Záró gondolatok

Az eddig eltervezett projectek közül a Kódzug érte el azt a szintet, amit már régen szerettem volna és ebben nagy szerepe van a fent felsorolt eszközöknek. Nem kell mindig a legújabb framework ahhoz, hogy valami jó süljön ki a dologból és néha a “nagyszerűség” az egyszerűségben rejlik!

Köszönöm, hogy elolvastad!