this-very-site's journey
In this blog, I'm going to share my journey in building this very site you're accessing right now.
Let's jump right in!~
Backstory
It was a random night in 2024. I had just finished the work of the day and felt great (who wouldn't?). I decided to finish up the night with a video game session, so I could finally hit the sack feeling even better. At least, that's how I initially thought the night would go š.
Oh boy I could not get more wrong. Just as I was about to sleep, my uncontrollable hand reached for my phone andāagaints my willāopened twitter. I ended up scrolling through my timeline, hoping to find something interesting to read before bed š“.
About half an hour later, I came across a tweet that piqued my interest:
The tweetāwritten in Indonesianāessentially promotes this amazing course by Josh W Comeau . The timing is interesting, to say the least, since I've been wanting to re-learn CSS. You see, CSS has always felt so random and arbitrary to me. I've never really enjoyed working with it š«.
At first, I knew nothing about the course or its instructor. But when something gets voluntarily promoted like this (and considering the premium price for an average Indonesian, even after PPP), it has to be very specialāØ.
Naturally, I did my due diligence and checked him out. In doing so, I came across one of his blogs on CSS color formats. It might seem a bit anticlimacticācolors? Booo, that's so basic and boring š„±! At that point though, I could already tell that he was very good at teachingāhe knew what he was doing.
I ended up reading a few more of his CSS-related blogs, and goodness gracious š®! Learning CSS from his blog reminded me of the time I studied math on zenius āso many lightbulb moments š”!
And just like that, pooofšø:
At this point, I haven't fully shared the foundational reason behind my decision to re-learn CSS. As a full-stack engineer, I regularly do frontend at work. It's honestly been a blessing to work at a company with UX engineersāfolks who handle most of the CSS for our products through pre-built components (like UI frameworks such as š®shadcn , š¼daisyUI , and š§Flowbite ).
In my experience, the CSS needed to stitch those pre-built components together has been very minimal to moderate. But sometimes, it can be a painful headache š¤. As I mentioned earlier, CSS often feels random and arbitrary. Sure, I can usually solve any CSS issue (to be honest, the problems I've faced have never been particularly complex) by spelunking through Stack Overflow and/or ChatGPT .
There's something often overlooked when someone decides to skip learning CSS altogether with the reasoning: "why bother learning CSS? Ha! I can just ask my trusty LLM of choice." While this isn't entirely wrong, I believe the process of going back and forth between coding and asking/searching introduces friction, and this friction adds up quickly.
On top of that, I've always wanted to create my own online space that reflects my style and aestheticsāsomething I'm pretty sure UI frameworks won't be able to fully provide, and for that, I'd need to write a lot of custom CSS.
With those rationales, I decided it was time to re-learn CSS š. But I needed to find the right way to do it.
The desire to re-learn CSS was only half of the equation. The other half was having a strong commitment to actually go through all of the resources & practices needed. To make that happen, the course had to be fun, engaging, and full of those lightbulb moments š”.
Josh's course was the first to truly have me sold. Since purchasing it, I've been digesting his lessons religiously. Seriously though, if you're planning to level-up your CSS skill, I highly recommend that you check it out.
The Plan
I'm planning to use this site to house my MDX-based blogs, as I want to start learning in public (and ultimately build an online presence!). I believe one of the best ways to learn is by sharing what we're learning, and that's exactly what learning in public is all about. It helps us solidify our mental models on the topics we're learning.
Have you ever had the feeling that you know something, but the moment you try to explain it to others, you just can't seem to get it across? That's what I'm talking about. That's exactly what learning in public helps us with.
You might be wondering: why not just use platforms like Medium , LinkedIn , or others?š¤
Well, aside from the fact that none of them quite match my style and aesthetics, I'm limited to just text and images! I want the freedom to add interactive widgets to my blogs, since not only would that help some people better visualize what I'm explaining, but sometimes, certain things just can't be explained by words and images alone š.
A few example of the interactive widgets I'm talking about is the preview of the projects I've been working on. It is taken from my project page .
MacBook Air
leonhard eulerhi! this is euler speaking, i'm here to inform you about a project called Anonawa
it's currently work-in-progress
would you like to know more?
no
:(
anyway, click here to learn more about the project
if you want to learn more!
alright, will check it out later.
oh, i forgot to tell you something
As you can see, the potential of MDX-based blogs is limitless, as you have the full power of React at your disposal!
The Execution
As I've mentioned previously, I've been digesting Josh's lessons religiously. The exercises and projects in the course's workshop are amazing. But as of right now, as I write this blog, I feel like I have everything that is essential to build my website šØ.
That being said, I've decided to pause my progress in the course at 70%, and start building my online space š.
It is very likely that I'll need something from the remaining 30% of the course as I build this site. In that case I'll revisit the course!
So, this journey has finally begun!
It was a calm wednesday night. I had just returned from work and finished my daily chores. I had never felt this ready and excited to finally start this project.
Just like anyone else when starting a project, I too spent a couple of hours setting up the git repository, the framework, and other libs needed.
After a few hours, the first few commits were made.
As you can probably guess from the commit messages, I chose Next.js as my meta-framework of choiceāone of the foundational tools for building this project. Specifically, I went with the App Router flavor.
Since I don't have much experience with other meta-frameworks, I can't make a direct comparison between Next.js and others. But so far, the developer experience with Next.js has been nothing but excellent.
One of the other foundational tools that I use is styled-components.
So far, I've been talking about the importance of learning CSS. While I still stand by that sentiment, the truth is, vanilla CSS does not scale well, and the developer experience is awful. I think these issues play a big part in why so many devs hate CSS.
I'm specifically talking about doing CSS with classes. The first problem with this approach is that class names are shared globally. This means that as a codebase gets larger, it's inevitable that someone will create a new CSS class, and its name might conflict with an existing oneāleading to things breaking.
These issues also explain why there are so many CSS solutions out there, such as Tailwind CSS , SASS , styled-components , and others.
Iāve tried a few of them myself, and I found that styled-components is the most enjoyable to work with. That said, to be fair, I only explored other CSS solutions before my re-learning CSS era.
Now, after about ~180 commits and ~13k line of codes, here we are.
Yes, that's a very big jumpāfrom starting out the project to ~13k loc milestone. There have been many challenges, frustrations, and moments of joy along the way. If I were to write about all of them, this blog would never end!
However, I plan to write a separate blog to discuss some of the more interesting challenges I've faced while building this project.
This has undoubtedly been the most ambitious side project I've ever worked. I will continue to maintain it, regularly fixing rough edges, addressing browser-specific issues, and adding new stuffs. Just talking about all of this makes me even more excited for whatās to come!