From df74b6dabeebbfdf657dd2187e006663857900df Mon Sep 17 00:00:00 2001 From: Gabriel Simmer Date: Sat, 6 May 2023 17:27:55 +0100 Subject: [PATCH] Split paragraphs in well-known-fursona. --- content/posts/well-known-fursona.org | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/content/posts/well-known-fursona.org b/content/posts/well-known-fursona.org index 3c1ffd9..3e6c854 100644 --- a/content/posts/well-known-fursona.org +++ b/content/posts/well-known-fursona.org @@ -14,6 +14,8 @@ Typically when it comes to static websites, there are a plethora of options, whi With my first in-person furry convention coming up, I thought it would be neat to expand on the idea, making a landing page for my fursona. Others could visit and learn more without needing to read some JSON. So I got to work, gathering my current frontend framework of choice SvelteKit (for better or worse) and Tailwind for styling (I may as well give it a fair shake). It's also worth noting that I'm still very much in my "research" phase of using ChatGPT and Copilot as pair programmers (in a sense) so those tools are included but generally didn't impact my approach to things. You can find the finished product at [[https://fursona.gmem.ca/][fursona.gmem.ca]]. -Generally speaking the application itself is very simple - a landing page prompting a domain entry, and a basic card based page for displaying fursonas from a domain. Initially, I made a =fetch()= request directly from the frontend to the resource, but ran into issues with CORS. Not wanting to add some requirement to allowing people to use it, I wrote a small amount of TypeScript code that acts as a very simple proxy. I opted to build and deploy this on Vercel, since they own SvelteKit, I have experience deploying SvelteKit sites to them, and I can use the Vercel Edge Functions for the proxy function. With that said, I have had some minor annoyances with Vercel's performance. I'm hoping to dig into why at some point, but the site works for now. I'm mostly familiar with SvelteKit, but Tailwind was new to me. While I'm not in love with it, having a pre-built CSS framework allowed me to build quickly, and the CSS files are relatively small. Cramming all the CSS into the =class= of an element can get out of hand very quickly, though, so I'm not entirely sold on it. All that said, the site packs down to 55.17kB (29.21kB transferred) for the landing page and about 63.3kB (33.7kB) for the card page itself (I say about because I had to manually calculate the value - so I might be slightly off). This doesn't take into account caching, and most assets are cached. Of course a site without SvelteKit and/or Tailwind might pack down smaller, and could be build with server side rendering for an even smaller footprint if we wanted. But the focus of this excersize, for lack of better term, was around Edge Functions and their speed, and Tailwind. +Generally speaking the application itself is very simple - a landing page prompting a domain entry, and a basic card based page for displaying fursonas from a domain. Initially, I made a =fetch()= request directly from the frontend to the resource, but ran into issues with CORS. Not wanting to add some requirement to allowing people to use it, I wrote a small amount of TypeScript code that acts as a very simple proxy. I opted to build and deploy this on Vercel, since they own SvelteKit, I have experience deploying SvelteKit sites to them, and I can use the Vercel Edge Functions for the proxy function. With that said, I have had some minor annoyances with Vercel's performance. I'm hoping to dig into why at some point, but the site works for now. + +I'm mostly familiar with SvelteKit, but Tailwind was new to me. While I'm not in love with it, having a pre-built CSS framework allowed me to build quickly, and the CSS files are relatively small. Cramming all the CSS into the =class= of an element can get out of hand very quickly, though, so I'm not entirely sold on it. All that said, the site packs down to 55.17kB (29.21kB transferred) for the landing page and about 63.3kB (33.7kB) for the card page itself (I say about because I had to manually calculate the value - so I might be slightly off). This doesn't take into account caching, and most assets are cached. Of course a site without SvelteKit and/or Tailwind might pack down smaller, and could be build with server side rendering for an even smaller footprint if we wanted. But the focus of this excersize, for lack of better term, was around Edge Functions and their speed, and Tailwind. Overall, I'm happy with the result, and it will serve its purpose at FWA. I plan to attach at least one NFC sticker to the back of my custom badge that links to [[https://fursona.gmem.ca/gmem.ca][my own page]]. I hope that some others also find it helpful, and that it encourages adoption of the well-known schema. If you do find me at FWA, I'd be more than happy to program a sticker for your page as well!