Una nova llar per al meu contingut

Primer, una mica de context i introduccions

Hola! Sóc Isaac — Desenvolupador de Jocs Indie, Enginyer de Software, Engineering Manager, i algú que porta ja força temps al món de la tecnologia. M’encanta desenvolupar jocs, construir eines, i compartir el que aprenc pel camí.

Fa alguns anys vaig decidir que era moment de tenir un lloc on mostrar la meva feina i passió, però havia de ser fàcil de mantenir i fàcil d’afegir nou contingut, així que vaig pensar… WordPress hauria de fer les coses fàcils! Oi? Oi…? Quin error terrible…

Així que la meva primera temptativa va acabar sent una pàgina súper lenta amb un munt de plugins i un layout HTML generat que era un malson de codi espagueti, barrejant tot el codi que vaig ficar entre les personalitzacions de plugins. Em va costar un munt d’esforç fer que es veiés bé (el qual honestament crec que vaig aconseguir), però el rendiment era horrible.

Una mirada al meu antic lloc WordPress

Així que vaig decidir que era moment d’una reconstrucció completa. No només un canvi de cara, sinó un projecte real, des de zero, que representi millor les meves habilitats.

Encara volia que fos fàcil de mantenir, i vaig pensar “tio, seria brutal si pogués simplement agafar els meus escrits de Notion, exportar-los com MD i consumir-los al meu blog”… I llavors vaig trobar Astro.

El Stack Tecnològic

Parlem de tecnologia — perquè si hi ha alguna cosa que he après, és que l’eina correcta fa la diferència.

Frontend: Astro + Svelte

Vaig triar Astro com a base per al lloc. Per què? Astro genera contingut estàtic en tots aquests llocs on el contingut no canviarà mai (o almenys no en molt de temps), així que és lleuger, súper ràpid, i em permet escriure pàgines netes i enfocades en contingut utilitzant els meus articles escrits en altres llocs — sense tota la brossa de JS o el malson d’HTML espagueti en els meus layouts.

I per a les parts on necessito contingut més actualitzat? Astro té Server Islands, que, quan estan correctament cacheades, serveixen eficientment contingut de diferents fonts com APIs.

Els meus feeds en directe actualitzats a la pàgina principal: YouTube, Bluesky, GitHub i cara

Per a les parts interactives — com el widget de subscripció al newsletter o la cerca dinàmica — vaig recórrer a Svelte. M’encanta com de directe és. Només escrius el que necessites, sense embolics de gestió d’estat. S’integra suaument amb Astro i manté tot àgil.

Sota el capó, Astro utilitza Vite, que fa que l’experiència de desenvolupament sigui súper suau i ràpida. Els hot reloads són instantanis, les builds són ràpides, i debuggar és molt menys dolorós que amb eines més antigues.

Backend: PHP + Symfony

Mentre Astro maneja el frontend, encara necessitava una mica de lògica backend — especialment per a coses com el sistema de newsletter en el qual estic treballant. Per a això, vaig aixecar una API Symfony escrita en PHP. És neta, ben estructurada, i encaixa com un guant per a APIs petites amb just la quantitat correcta de flexibilitat.

No estic persistint dades allà (almenys no per ara), però encara així és una API completa: protecció CSRF, rate-limiting, i reenviament net a l’API de Mautic (la meva plataforma d’email marketing d’elecció).

Execució local: Docker

Tot això corre localment en Docker, el que fa que provar el flux complet — des de frontend fins a backend — sigui suau com la seda. Tinc Mailhog corrent per a previsualitzacions d’email, un contenidor complet PHP + Nginx per a l’API, i per descomptat, Astro corrent en mode dev. És ràpid, està aïllat, i puc experimentar sense trencar coses.

Accessibilitat i SEO

Tinc la ferma creença que tot el contingut ha de ser fàcilment accessible i navegable per qualsevol, sense importar la seva situació. Així que vaig tractar de reflectir això en el meu disseny web. Vaig estudiar lectors de pantalla, principis d’A11y, i vaig utilitzar eines com WAVE per WebAIM per verificar que tot fos accessible.

Mai havia tingut una puntuació tan perfecta en Lighthouse. 🥹

Puntuació SEO de la meva pàgina

Tests i qualitat de vida

Vaig afegir una capa de tests i verificacions per assegurar-me que l’aplicació no es trenca mentre la vaig actualitzant. Alguns són bàsics, com validació d’endpoints i verificacions de tokens CSRF. Altres ajuden a assegurar que els serveis Docker es comportin com haurien quan aixequen o baixen coses.

No es tracta de fer sobre-enginyeria — només assegurar-me que quan alguna cosa es trenqui (i passarà 😂), sàpiga on buscar.

Per finalitzar

Aquest projecte va ser una forma de posar el meu lloc en forma, però també de recordar-me per què m’encanta construir coses. No es tracta de ser cridaner o trendy — es tracta d’enviar alguna cosa que es sent bé, que fa la seva feina, i de la qual estic orgullós de poder ensenyar a la gent.

Encara hi ha un munt de coses que vull afegir (i probablement trencaré coses pel camí), però per ara… em sento com a casa.

Gràcies per llegir. 🙌