Firstly, I’d like to voice my biggest thanks to you, the reader, for viewing my site, where I sincerely hope that you enjoy the experience as much as I did building it. Feel free to lmk your thoughts!
I’ve always loved browsing through curated lists of simple, but elegant portfolio sites, thinking to myself:
Can’t wait to join them! Let’s do this.~
But truth be told, I’m a masterful procrastinator. I seek perfection in pretty much all things, and so I’d end up in this cycle of continually obsessing over what was out there without actually going on to commit to an action plan or ideal.
And so, for a good while, I put it off, continuing to explore where time allowed me to, thinking that future me would be more than capable enough to reach my own outlandish standards. But then, there came Astro.
A Real Game-changer
For context, I’d consider myself a React novice, where in recent projects I’ve been able to get a solid grasp of making full-stack web apps, navigating my way through managing state, handling persistent logins with token-based authentication using localStorage, and cookie-based authentication, using React Router to incorporate multi-page routing, and dealing with useEffect() hell (as I call it).
SPA’s are great, but they’re best suited for sites where you have dynamic content or need client-side interactivity; both of which my site wouldn’t require. There’s also the additional performance penalty involved in supporting these features, where sending (unused) heaps of JS to the client is a bit offputting. This report validated my sentiments, with the key takeaway being:
Using a SPA framework gives you less performance out of the box (chasing performance becomes a real task).
Given I was going to be dealing with static content, it made sense to tilt towards static-site generators. Being able have the built-in benefits of little to no JS being sent client-side, and thus having more performance out of the box meant I could nail down on ensuring that my site was blazingly fast. At first, I had some doubts, where my thinking of a static website was that of plain old HTML + JS, where you couldn’t incorporate Component Driven Design (CDD), and you would also lose out on the declarative approach used by React (ah, the train of thought of a junior dev 😆).
So you couldn’t believe my amazement when I discovered that Astro had ticked all my boxes with their design principles:
A no-JS approach be default, coupled together with this idea of being able to “opt in to complexity” immediately sold me onto Astro, where it would enable me to realise the simplistic but scalable site I envisaged. The syntax examples in Astro’s docs page had me completely gobsmacked with how HTML-like it felt, to the point that absolute newbies could probably have a stab at creating layouts using Astro.
The reason behind this familiarity lies in Astro’s .astro language actually working as a superset of HTML, where you can create pages, and/or create reusable components to use across all your pages (sounds like a CDD moment 🥹). But there’s another point that I’d like to highlight with the below code snippet:
---
// code fences
const name = "Astro"
---
<!-- markup section -->
<button id="button">click me, {name}</button>
<!-- style section -->
<style>
#button {
background-color: cadetblue;
}
</style>
<!-- script section -->
<script>
function handleClick () {
console.log("button clicked!");
}
document.getElementById("button").addEventListener("click", handleClick);
</script>
Within a .astro file, the different aspects of your component logic are separated into distinct sections in a Svelte-like manner, giving devs the power to create components with all the necessary logic incorporated into them in a single file. The code fences allow for the defining of local JS vars, where they can be injected in a JSX-like manner, as seen in the markup section.
You can see how Astro retains the magic of React’s declarative approach of calling components to build out layouts, but in a manner that you can embed your markup, styles and scripting all in one place.
You’d think this is all already impressive as-is, but there’s something else I want to bring to your attention: Astro Islands.
You Haven’t Seen The Real Magic Yet: Islands
The key to Astro’s insane performance comes from it’s server-first approach, where it looks to minimise sending client-side JS as much as possible, which makes sense. But what happens when you need to add some client-side interactivity? Islands.
The Island Architecture refers to treating interactive components as “Islands”, where they are independent in their own functionality, and are isolated. I very much like how the Astro docs put it, where you can think of them as “interactive widgets floating in a sea of otherwise static, lightweight, server-rendered HTML”.
Given how islands are isolated in nature, there is no need to wrap the whole site in a UI framework, where islands are selectively hydrated, ensuring performance. With this, Astro is able to be UI-agnostic, allowing you to create islands using React, Preact, Solid and Svelte to name a few.
This section of the Astro docs does a stellar job explaining how islands work in practice, where by default Astro renders UI components to just HTML & CSS. It is only when client:* directives are used that interactivity is toggled on for a component, where it turns into an island.
Completing The Puzzle
Apologies for the extended Astro shilling; but seriously, it’s great. it’s blazingly fast, has a minimal learning curve, allows you play around with different UI libraries in a familiar environment (something I’ll be doing), but most importantly; it scales up according to the dev’s needs. Want to create a blog? Content Collections. Want to add SPA-like transitions? View Transitions. Heck, it’s even got an integrated DB now.
The Astro team have absolutely smashed it out of the park with this framework, where my excitement to make use of Astro in practice helped me to overcome the storm of procrastination, where upon completing the tutorial blog, I quickly got to work on my personal site, filled with enthusiasm on how I could build on my initial stint using Astro.
But more than anything, completing this site changed my mentality on completing projects as a whole.
A New Start…
The whole journey of building this site was a real rollercoaster. Disregarding the procrastination factor entirely, when getting to work on the real thing, I inevitably ran into a myriad of issues that broke my momentum over and over: lowering the network payload as much as possible, the arduous process of cleaning up any ott styles, and Shiki being a royal pain with dual themes just scratch the surface. But would I go through this whole experience again? Without a doubt, 100 times over. And the justification behind this is core to the premise of “my new start”:
Build what you love, with what you love.
I had the long-standing goal of wanting to build a minimal site, but I hadn’t found a tech stack that felt me with the enthusiasm to realise this goal. Upon discovering Astro and understanding how it was the perfect fit, I was able to have a love for it, allowing me to immerse myself in achieving my goal, and relenting no matter what came in my way.
And so, when wanting to start out a project, you should ask yourself these two questions:
- Am I building something that I love?
- Am I building said thing with tools that I love?
If you cannot answer both questions with a resounding “yes”, chances are you will probably shelve it at some point, adding it to the list of incomplete projects.
But by having that underlying love, it will act as a key motivator towards the completion of your future projects, with you also being able to convey the entire experience in a fluent manner (by using the justifications of that love). When you are able to apply this methodology across multiple projects, it can be like having an ace up your sleeve, through being able to add that personal touch to the things that you have created.
Now, love can take you very far in being able to haggle your way through projects, but the extent as to which you are willing to challenge yourself is the be-all and end-all. That’s a discussion for another time though.
An Aside
Phew. I hope you enjoyed my first (of many) blog posts! I’ve always looked in admiration at others who speak so candidly in their blogs, where I’ve always wanted to emulate them, and better myself in terms of vocalising my thoughts. As an extroverted introvert, I have the habit of keeping to myself a fair bit despite being sociable, where this blog can hopefully give you a glimpse into my (mostly uneventful) life and inner thoughts.
Until next time 🫡