Well Known Fursona

Fursonas are a wonderful thing. They are a way of expressing one's inner self in a relatively safe manner, whether it be as a dark grey wolf or a vibrant pink and red cross between a dragon and a hyena. It's a fantastic escape from reality and frankly I think more should embrace the concept. I've adopted one as an extension of myself, giving me a character I can use consistently. As time goes on I've been trying to figure out my own self-identity and having a fursona does help. The opportunities to meet interesting people who share this interest also cannot be understated, and there's a significant number of people in the tech industry who are furries. It's fantastic.

Getting to know someone's fursona can be tricky, though. Some may have at most a reference sheet illustrating important markings or features of a character, others may have an entire novel series of their character's backstory. As a lover of standards, these wildly different approaches are both a blessing and a curse, so I was very interested when I saw some talk about Pyrox's fursona-schema repository. I feel that the /.well-known path is underutilised at the moment, and I found the idea of putting my fursona information in there amusing. The question was, how to host it?

Typically when it comes to static websites, there are a plethora of options, which can lead to a bit of analysis paralysis. Some of the options for static websites include GitHub Pages, Vercel, Netlify, Cloudflare Pages, AWS S3 or Amplify, 'dumb' shared hosts, and more. In this instance, I decided to opt for an AWS S3 bucket with Cloudfront as a CDN/cache to keep costs down (Cloudfront includes 1TB of egress for free). The main advantage is that due to Amazon's dominance S3 has more or less become the standard API for interacting with object stores, so there are plenty of tools and libraries available should I want to expand on it. The disadvantage being I miss out on the fancy auto deployments and integrations that other providers offer, but given this is just hosting some static files (including a static webfinger) I'm not particularly worried about it.

As a sidenote, thanks to the webfinger file, I now have a custom OIDC provider setup for my tailnet! I'll probably talk about this in another post.

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 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 built 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 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! And thank you to everyone who has taken time to help test the application and suggest improvements. I'm planning to continue iterating on the application over time, as needed.