en
I tako to počinje! U redu, trebao bih početi pitanjem koje se svi vjerojatno pitate: tko sam uopće ja?
Tko?
Ja sam 18 godišnjak koji ✨ stremi ✨ postati full stack developer koji većinom gravitira prema backend dijelu full stacka. Trenutno sam napravio nekoliko honorarnih poslova za par ljudi, od kojih bih htio istaknuti neke od najbolih ljudi s kojima sam ikada radio: Grant Imler te Isaac H . Ovi su mi ljudi pružili tooliko prilika i definitivno ne bih bio tamo gdje sam danas bez njih.
Trenutno primam honorarne poslove, ali mi se stvarno počinje sviđati open source development pa trenutno radim malo i na tome.
U redu, dosta o meni, uđimo u razloge zbog čega, što je i gdje postoji ovaj blog.
Zbog čega?
Dakle, zbog čega sam napravio ovaj blog?
Pisalo mi se o vlastitim nasumičnim mislima te sam ih htio podijeliti s svijetom, također mislim da bi blog pomogao mom vlastitom ugledu na internetu. To je također bila odlična izlika da pokušam nešto sa Svelte-om, koji je, dosad, doista bio odličan.
Što?
Neću ulaziti u previše detalja o izradi ovog bloga zato što je jednostavno statički SvelteKit projekt koji obrađuje markdown datoteke (objave), ali mislim da ćete uživati čitajući o mojoj boli i patnji tijekom procesa. 😉
Zašto Svelte?
Pa, htio sam naučiti Svelte… aaali sam također trebao dobar način baratanja SSG-om (Server side generation) i za to sam načelno imao 2 opcije: Astro i… Svelte. Ovo su jedine dvije opcije za koje sam znao da dobro odrađuju taj SSG dio. Par je mojih kolega koristilo Astro za svoje blogove i čuo sam da Astro još uvijek nema dobru poršku za IDE-ove. Nište čudno za mene: nisam mu ni dao priliku te sam odmah ušao u Svelte.
I moram reći, nisam bio razočaran. Svelte ima par mana (svaki framework ih ima) ali je stvarno intuitivan i dobar. Otišao bih toliko daleko i rekao da postoji šansa da bude moj drugi najdraži framework nakon Reacta.
Tech stack (tj. tehnološki stog, wtf)
Trenutni tech stack izgleda ovako:
- Svelte(Kit)
- web framework
- barata SSG-om, kompresijom i ostalim optimizacijama
- MDsveX
- OpenGraph Images
- Rješenje za brzo generiranje bannera
- Fontovi
- JetBrains Mono
- Roboto
Wow, taj popis je kratak. Dok sam pisao ovo, uistinu sam očekivao da će biti malo dulji… Nadam se da ovo pokazuje da napraviti blog stvarno nije toliko komplicirano. (ipak, nemojte koristiti Wordpress, molim vas).
Gdje?
Ooo, ovo je uzbudljivo! Sada malo o tome kako postavljam ovu stvar. 🚚
Isprva, dok sam još radio na ovome, koristio sam Netlify. U početku sam planirao koristiti ovo za posluživanje stranice. Ali to je dosadno, samo funkcionira, to nije zabavno.
Ali ozbiljno, nemam ništa protiv Netlify-a, to je stvarno platforma koja "samo funkcionira". Ali to ne znači da je bez mana. Jedna od stvari koje su malo frustrirajuće su odvratno duga vremena učitavanja ovdje u Europi (ali to može biti i do mog lošeg interneta 🤷).
Signal 👀
Trenutno, rješenje koje sam odabrao je Signal. I ne, ne taj Signal. Vidite, moj dobar prijatelj Luc van Kampen je započeo osobni projekt u kojem radi........
…, ok štogod, on više-manje postavlja vašu web-stranicu i poslužuje ju, ovdje je GitHub repo. Uglavnom, to sam odabrao da poslužuje moju web-stranicu. I dosad je bilo odlično. Vremena postavljanja su izrazito brza, CD je bilo jednostavno namjestiti i vremena učitavanja su ⚡ munjevito brza.
Dok ovo pišem, postoji jedna njegova instanca postavljena na našem dijeljenom Kubernetes clusteru bez ikakvog javnog sučelja.
SVGevi ❤️
Znate za OpenGraph? Taj protokol "that enables any web page to become a rich object in a social graph". (bilj. prev. Najbliže kako ovo mogu prevesti je: "koji omogućava bilo kojoj web stranici da postane obogaćeni objekt u društvenom grafu".) Ako ovo ne zvuči poznato, razmišljate o tome kao specifikacija za te lijepe Discord/Slack/Twitter/Facebook embedove koji se generiraju kada pošaljete/primite poveznicu za neku stranicu. I ako već niste primjetili, ovaj blog ih ima i oni se mijenjanju za svaku objavu. Primjer za ovu objavu:
Kao što možete vidjeti, u samoj slici je naslov i opis.
Pa kako sam ovo postigao?
SVG-ovi
Još uvijek sam fasciniran time što mogu generirati slike samo koristeći tekst, bez ikakve komputacije.
Ako pogledate URL te slike:
https://cards.antony.cloud/post?title={title}&description={description}&type=pngmožete vidjeti da ide do servisa kojeg sam napisao i daje mu naslov i opis te dinamički generira sliku. Ovime barata SSG pa će ih izgrađene HTML stranice već imati popunjenima. Imajte na umu da su slike u zadanom, SVG formatu i OpenGraph ne podržava korištenje SVG-ova kao slike… shit. Mislio sam da će pretvaranje SVG-ova u PNG-ove ne bi bilo teško. I bio sam u pravu, nije bilo teško. No, budući da sam u početku ovo napisao kao serverless funkciju na Netlifyu (to je bio pakao, nikad više), u okruženju je nedostajao font koji sam trebao pa su završne PNG slike izgledale grozno. Na kraju sam napisao jednostvan API u Fastifyu da poslužuje slike
Što smo naučili iz ovoga?
SVG-ovi ❤️, Serverless 💩
Zaključak
U redu ljudi, to je to. Ako ste došli ovako daleko, htio bih vam zahvaliti što ste pročitali ovu objavu, nadam ste da ste uživali. Ugodan vam ostatak dana! 😄
- Translating & spell check: Vice Limov