Astro

The sheer number of framework options when starting a new project can be a bit daunting. Astro, Remix, Next.js, SvelteKit, and more are all incredible options given a site’s needs. At the end of the day it was the performance and flexibility of Astro that were its main selling points for me. My blog falls under the umbrella of a content site rather than web application. If I had users logging into dashboards with rich interactive workflows then a framework like Next.js would make more sense. Since these are mostly static content-rich pages, Astro is the way to go. ”Astro Islands” give me the ability to add all the interavtivity I need in this case.

By default Astro ships zero JS. Interactivity can be added on a component level with the ability to define when the JS loads. There are directives to load at initial page load, when the main thread idles, when the component is visible, and more. Astro is very flexible when it comes to extending the page’s interactivity while preserving load performance.

I wanted to author content with Markdown, specifically MDX, which Astro supports with their official MDX integration. Rather than hooking up a seperate CMS like WordPress of Contentful, MDX is the simplest options that gives me the most flexibilty. Being able to add JSX right into the markdown makes writing so easy.

Tailwind

After watching Tailwind from the sidelines for quite a while, I decided now was the time to dive in and apply it to a project. Tailwind is a utility-first CSS framework with the goal of reducing cognitive overload by removing the need for handling/naming CSS classes that are then abstracted into a seperate CSS file. From my short time using it so far I’m really enjoying it. I feel like my development speed is much quicker without having to deal with naming and maintaing external css classes. I’ve also noticed how easy it is to learn new tricks from other sites using Tailwind. Just open up the site’s source code, grab the class names they’re using, and test it out on your own elements. When dealing with custom abstract class names rather thatn Tailwind’s utility classes, exploring other sites’ CSS solution took much more investigation.

The other benefit of Tailwind is as a design system. They’ve established default values for things like typography, spacing, and color that work great as guard rails to ensure a site’s design is cohesive. That’s not to say you can’t extend it with your own desin system’s values, its just that the defaults are an easy way to start developing quickly.

Vercel

Sure I could spin up and EC2 on AWS, set up Cloudflare, but then I’d have to deal with scaling and uptime and CDNs and all sorts of headaches. Or I could just use Vercel’s deployment as a service free tier to handle all of that for me. This allows me to focus on the parts of the site that matter most to me: the content and front-end experience. It’s incredibly fast and easy to deploy a site. I had a site up and running with custom domain in less than 10 minutes. The benfits feel almost endless but one of my favorites is Automatic Previews for every git branch. They offer edge functions, serverless, analytics, and more.

I could have also gone with Netlify, but since I’ve used Vercel in the past so I decided to stick with it.

What next

This site is a work in progress. It’ll be an ongoing process of testing new tools so follow along with the journey.