why I want to blog?

Why I Started This Blog

Have you ever wondered why people put their thoughts online for everyone to see? I've asked myself the same question, and my answer is simple: I want to be accountable to myself. There's something therapeutic about reflecting on my experiences, documenting my ups and downs, and chronicling my journey to where I am today.

Inspiration

My inspiration came from Ivan Leo, a research engineer based in Singapore. His blog, ivanleo.com, documents his learnings and life experiences. Ivan was the first person who taught me how to use GitHub, explained what JSON was, and showed me how to deploy on AWS, among other things.

I wanted to create something similar for myself—a space to reflect, showcase new learnings, and explore topics ranging from code to philosophy and everything in between.

The Tech Behind This Blog

For those interested in the technical details, here's what I used to build this blog:

• TypeScript: Ensures type safety throughout the project.
• Velite: Builds a type-safe data layer, transforming .mdx files into the app's data layer using Zod schema.
• NextJS: Provides the framework for a fast, server-rendered React application.
• shadcn: Offers various pre-built components like avatars, buttons, cards, and dropdown menus.
• rehype-pretty-code: A Rehype plugin powered by the shiki syntax highlighter that creates beautiful code blocks for Markdown or MDX.

One of the great features of using rehype-pretty-code is that it works both on the server at build-time (avoiding runtime syntax highlighting) and on the client for dynamic highlighting. This means code snippets look fantastic without sacrificing performance.

Here's an example of how beautiful the code can look:

Line Numbers and Line Highlighting

Draw attention to a particular line of code.

import { useFloating } from "@floating-ui/react";
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

Word Highlighting

Draw attention to a particular word or series of characters.

import { useFloating } from "@floating-ui/react";
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

I can even do ANSI highlighting!

  vite v5.0.0 dev server running at:
 
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
 
  ready in 125ms.
 
8:38:02 PM [vite] hmr update /src/App.jsx

Inline ANSI: > Local: http://localhost:3000/

Hosting and Domain

I chose Vercel to host my blog, which made the setup process incredibly smooth. For my domain, I turned to Porkbun, where I snagged a domain in my name for just $10 a year—an absolute steal! What I love about this setup is that there are no hidden costs or requirements to purchase additional plans before hosting, unlike some other providers (looking at you, Hostinger).

What's Next?

As with any project, there's always room for improvement. Here are a few things on my to-do list:

1. Add a table of contents (just because, why not?).
2. Continually refine the design and user experience.
3. Explore new topics and share more diverse content.

A Quick Personal Update

Exciting news on the work front—I'm gearing up for a business trip soon!

Update: I'm back from my business trip, and it was an incredible experience! The journey was both fun and engaging, offering me a unique opportunity to learn about different people and their perspectives. One of the most fascinating aspects was discovering how individuals can be categorized into different "buckets" based on their approaches, mindsets, and working styles.

This exposure to diverse ways of thinking and problem-solving has broadened my horizons and given me new insights that I'm eager to apply in my own work. It's amazing how a change of environment can spark fresh ideas and foster personal growth. I'm looking forward to sharing more about these learnings in future blog posts, so stay tuned!