Navid's Blog

hi world!

Saturday, September 9, 2023

I finally got the time and motivation to write this "blogfolio" and got out of my comfort zone by trying new tools, designs and patterns and I'm glad I did. You might wonder how it went, what tools I tried and what I've learned through this...

how to do this cool thing

what I've been up to

I finally got the time to write this "blogfolio" which took longer than I expected. About a week of challenges and curious research which led to discovery of some quality software. Here are some interesting parts of the process

breaking out of the comfort zone

I also finally forced myself to put my bias aside for a short period of time, and to try Tailwind for this new design I had in mind, and I'm glad I did. The speed boost was real, and it was of the more important reasons that I wanted to try tailwind.

Speaking of design, I decided to go with something that I haven't tried before much. a non-rounded design which is simple in its core, but I believe it can be both powerful and sleek. The web implementation turned out more polished than the actual design document.

rethinking core principles

The core of this blog is powered by Next.js, MDX and unifiedjs. This is my first project using the new Next.js app router, and I've learnt a lot. I believe the most important thing you can change to adapt to the new App Router and React RSC is your mindset and rethinking how you did all the important stuff : data fetching, api communications, interactivity and layouts I'm familiar with templating languages and how they handle these stuff. You may have seen memes comparing new Next.js patterns and PHP. However, adapting to new patterns and learning the new pitfalls that come with them takes time. Once you know what's going on, you will appreciate it. At least that's what happened in my case

choosing a content solution

The initial plan was to use something like Strapi/Sanity, which are both amazing solutions for content management and I have experience working with both. However after giving them some thought, not only they felt a bit overkill for someone who might publish once a month, but I would be doing the same thing as ever. The thing I'm mostly looking for in hobby projects is value. Using a solution I've already used multiple times would not bring anything new to the table.

The next plan was to go with a simple markdown-based solution. But that also felt a bit lacking. For example something like galleries, interactive code blocks or interactive charts would've been not possible/been a PITA. There might exist some way/workaround for using the mentioned content types but I wanted something more reliable with a better DX. This is I went on a hunt for dev-focused content management solutions with a more open mind. I discovered a lot of amazing products like PayloadCMS. Their solution is sleek and powerful. It was also git-based and the dev experience looked great. The cherry on top was the ability to self host and FOSS.

At that point I could have just gone with a self-hosted instance of Payload as it was a very strong candidate. However, I decided to continue searching further In that search I found out about MDX. It's not a headless CMS (heck, not even a CMS for that matter) But a very powerful, extendable and sleek markdown toolkit. Put simply, MDX is markdown on asteroids.

MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast.

Source: MDX docs

Unifiedjs is the amazing toolkit that makes all of this possible. It is extremely customizable with powerful apis and an amazing community contributing powerful plugins to extend the functionality even further.

After doing some tests and verifying possibility of my desired functionalities, it looked like the best thing I could ever think of. It also integrates great with Next.js.

I will definitely use this stack for more than just this blog. You can follow me on twitter to see what I'll do next as I usually do small previews of my current/future projects there.

closing words

It was a more challenging and equally more rewarding project than I thought. I started the development with an open mind and that allowed me to learn about a ton of new tools, products and frameworks which I'll definitely use in the future. I'm not only happy with the result, which is very comfortable and enjoyable for me to publish on, but even more happy with the process and the valuable knowledge and expertise that came out of it.

I hope you learned something new or discovered a new tech/tool that might be useful. just like how I did, unexpectedly.

More stuff coming up!

No spam. Unsubscribe anytime. I don't have the time to publish much anyway

protected by reCAPTCHA. Google Privacy Policy and Terms of Service apply.
< all posts