Overview of the technology used to build this site

I thought it would be fun to go over what I’ve used to build this website. It may be interesting from an educational point of view, but will also provide some insight into what using some fairly new and upcoming front-end frameworks has been like.

So this is an Astro.js site with the character sheet and more dynamic components all being written with Solid.js. I love the way layouts work with astro: I can write articles like this one in markdown and be very flexible and modular with how I build out all the formatting using multiple layers of layout files that can all build on one another while keeping each file very simple.

Also, Astro + Solid is so damn fast. While most of the slowdown for multi-page applications like this site will come from image loading, the selective JS hydration from Astro and ‘truly reactive’ rendering of Solid make the amount of javascript being run very minimal and efficient where there is dynamic stuff going on, helping me avoid having to go for the higher server side rendering costs (and probably use Next.js + React). If this site was more complex or demanding than maybe I would have just gone down a more pure SSR route.

The Bleeding Edge

But the bleeding edge is always a risk. I am not a web developer with years of experience using web frameworks, so using frameworks with much less support/information/tutorials out there is a bit of a risk.

The bleeding edge is also:

• A less established community
• Likely to have less niche functionality early on
• A greater chance for weird bugs, especially when you begin throwing more libraries and things into the mix
• A less guaranteed long term future in terms of support due to not having the big community behind it yet.

But I have learned so much from learning to use these frameworks, mostly because instead of watching tutorials I am just reading docs and trying to do what seems most intuitive. I think I’ve chosen well in terms of keeping myself excited about developing using really cool tools while optimising for the type of website this is. If I had just built this with a different framework I would have forever been thinking about migrating over to Astro eventually.

Current Objectives

• Finish the basic items and inventory system for the character sheet
• Finish the information and actions tabs for the character sheet
• Finishing writing up and formatting the remaining rules
• Sort out levelling system on the character sheet