a new start
02/05/2024Firstly, 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 let me know 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~
I may have not been aware of it initially, but a storm called procrastination started brewing. Exploring and delving deeper into what you discern as perfection very much leads you into chasing just that. Now, I’m already a perfectionist as-is, so you can imagine how things progressed from here; absolutely nothing done, where I was unable to formulate an action plan that I could fully get behind.
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).
While I love React and SPA’s for the matter, nothing beats the elegance and simplicity of a static website. After all, I sought to build out a site that had the elegant simplicity of those which I’ve admired, but I also wanted it to be blazingly fast. With these points considered, I came to the conclusion that it didn’t exactly make sense for me to build out my portfolio site using a SPA, where sending heaps of JS to the client for what would be a content-driven website would hurt performance. The 2023 Web Framework Performance Report goes into a great level of detail about how framework choice affects end-user performance, where I’d very much recommend that you give it a quick read. The key takeaway of the article (for me at least) is that:
Using a SPA framework gives you less performance out of the box (chasing performance becomes a real task)
And so, with that, my mind tilted towards static-site generators. 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.
So you couldn’t believe my amazement when I discovered that Astro had (basically) ticked all my boxes with their design principles:
I very much agreed with the sentiment that content-driven sites shouldn’t need to be rendered on the client, where this was (literally) a breath of fresh air for me. Zero-JS sent to the client by default was another big win, where it should be “nearly impossible to build a slow website with Astro”. When I looked at syntax examples in Astro’s docs page, I was literally like this: 😯. If you only know HTML, CSS and some basic JS, you’ll be able to quickly get to grips with Astro.
Now, Astro’s .astro language works as a superset of HTML, but the magic behind it lies in that you can create components with it that can be used to build out your layouts. Sounds familiar to CDD, right? 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. The point that I’m trying to make is that Astro retains the magic of React’s declarative approach of calling components to build out UI’s, 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 Core Idea
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.
Using Them In Practice
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 portfolio 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: dealing with TailwindCSS config issues, the arduous process of troubleshooting and fixing style issues, 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.
Being able to nurture the excitement I had when learning about Astro, and transforming it into a love by immersing myself in using it allowed me to push forward towards my goal of building a portfolio site, where my passion for using Astro intersected with my goal. Having a goal that deeply resonated with me, with a tool that I loved that was pretty much the perfect fit for realising said goal, meant that I had the resilience to follow through, 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 not-completed-projects list.
But by having that key underlying love, it will act as a key motivator towards the completion of your future projects. In addition, no love comes without it’s justifications, where you will be able to convey yourself with confidence. It’s just a win-win tbh.
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~ 🫡