tccsoftware.co.uk stack
This post describes what software is used and why this software was chosen when producing this website.
Contents
Astro
Astro was introduced in mid 2021. It’s a pretty new and fresh framework taking inspiration from a lot of modern best practices and throwing away others. It is fast by default which I like. Sure premature optimisation is the root of all evil but I want fast software, and I want to produce fast software. I’ve also been using NextJs for a lot of projects and I wanted to build something using an alternative technology. This site is intended to be pretty simple so the feature overlap between the two technologies means either would be a fine choice.
It uses a modified version of Astro Paper by Sat Naing. It’s a very simple and clean design that is easily customisable.
Did you refresh this a few times to try and get 100 performance?
Yes… But not having to put any effort in for a static site to get 99-100% across the board is great for me. Astro and Astro Paper are good at getting these scores by default.
Typescript
Typescript is the industry standard successor to javascript. It should be the default for any modern web dev projects of any complexity, and should be top of the list for any migrations from javascript. Moving errors from runtime to compile time means I can write more robust software.
Tailwind
Tailwind take a fairly unique approach to styling. Traditionally HTML and CSS were in separate files. You would annotate your HTML with classnames that reference styling in the CSS file. The classnames would describe what the component is. For example:
<!-- index.html -->
<div classname="profileCard"><!-- profile card content --></div>
<div classname="peerProfileCard"><!-- peer profile card content --></div>/* style.css */
.profileCard {
height: 1rem;
width: 1rem;
}
.peerProfileCard {
height: 1rem;
width: 1rem;
}If I want to see how profileCard is rendered, or change how it’s rendered I need to look in a different file. People generally sit on either of these sides:
- I like having these separate because one file focuses on what is rendered, and the other focuses on how it looks.
- I don’t like having these separate because having all things in the same place makes it easy to work with.
Personally I like my code to be co-located. Modern web dev has a lot of overlap between the “what is rendered” and the “how it’s rendered”.
Let’s see how it looks with tailwind:
<!-- index.html -->
<div classname="h-4 w-4"><!-- profile card content --></div>
<div classname="h-4 w-4"><!-- ... --></div>No styles file? What is h-4?
Good questions. Tailwind is globally included in a website-wide CSS file that is tree shook at build time to remove any CSS classes that are unused. And h-4 means height: 1rem. Knowing (and becoming comfortable not knowing) what CSS the classnames transform into is one of the biggest hurdles for tailwind new starters.
Haven’t we moved the styling from a separate file to a separate website?
Kind of, but it’s like learning a new syntax, it takes a little time to get used to it, and the trade off is that we now have short and sweet styling classnames right next to our code that decides what we render.
React
React (github) is a UI framework released by Facebook back in 2013. A lot of modern web dev uses React. It’s great for single page applications but a little bloated for a static site like this. There are a few competitors gaining traction - preact, svelte, vue. I am used to react and it’s fast and featureful enough for me. It’s a lot of code to include in a site like this but I’m fine with the downsides.
Vercel
Vercel is a platform as a service and maintainers of one of Astro’s alternatives: NextJs. Vercel makes it very easy to link to a github repository (where this website is stored) and continuously deploy it whenever the main branch is updated, i.e. whenever I push code. Because all of the blog posts are also stored as code, if I want to publish a new post I simple push a new commit to main and it goes live in seconds:
Vercel supports integration with Astro.
Conclusion
Picking the right technology for the right problem is important to me. But experimenting with new technology is as well, this website uses a mixture.