Articles

Home

About This Blog, Technical And Otherwise

Why I'm Writing

Knowledge sharing is a big culture of the Tech Community. Whether it’s articles or tutorials about different technologies or within a project in the form of documentation. However, sharing is a really daunting task.

This is where the concept of Digital Garden comes in. The focus of a Digital Garden is about cultivating our own knowledge instead of worrying about how it looks to others. Much like a public second brain. I hope to utilise this page to log the things that I’ve learnt. As opposed to a project demonstration, it’ll be more about the process and ephiphanies of learning. This will be where topics that do not extend to a full-fledged project or tech learnings that are more philosophical in nature will reside.

The Technical Setup

This website is written in Next.js but for blogging purposes, I’m also utilising the MDX library. MDX is a combination of JSX and Markdown allowing both syntax (with some exceptions) in a single file. Behind the scenes, MDX compiles to JavaScript.

In terms of writing, Markdown is much more suitable than JSX or HTML. By adopting MDX, I am making it easier for me to write and edit pages. JSX helps us to create user interface easily in the form of components, but in this context I do not expect my pages to require complex designs. However, when the need for a more complex page comes, MDX will allow us to use JSX components within as well.

An alternative would be to use Remark — a markdown prcessor. It is able, but not limited to, transform markdown into HTML. In my use case, I found that MDX is better due to its easy Next.js integration and ease of customization.

Next.js has support for MDX with its file based routing, that is, we can utilise the same format — page.mdx to create pages. The process to setup and customize MDX is well documented on the Next.js page. I had already built this portfolio website in Next.js so this compatibility was welcome when adding the blog module.


© Wee Kiat, Atwelfth 3.0