Hello world!

A brief intro of this blog, why I chose these technologies and what I'm going to do

Why blog?

I've always been keen on writing about programming. Along time, I've previously had two blogs, both that were running with WordPress. Now, this will be the third one, fully built from scratch with Next.js. I believe that writing down helps with the learning process and my intention is to write about Web and applied AI in the context of Web, which will help me better understand concepts about AI.

Why Next.js?

First of all, I've been working with Next.js professionally for about 6 years now and I believe in the phrase that every Doctor should have a taste of their own medicine. Therefore, as a geek, I had to build it from scratch with Next.js. The architecture is very simple: Next.js as core framework, MDX for writing blog posts and Tailwind CSS for styling. Being able to combine Markdown with JSX feels like a superpower in terms of content writing and embedding React components into blog posts.

The tech stack:

Why MDx and Tailwind CSS?

While I assume that Next.js seems like a logical choice, I'd like to explain why I chose MDX and Tailwind CSS.

This is an MDX post, I can use regular Markdown (MD), and I also have the ability to render interactive React components (x).

Which means I can create highly interactive blog posts, for example here is the classic React counter example code:

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState<number>(0);

  return (
    <div className="inline-flex items-center gap-2 rounded border border-zinc-200/60 dark:border-white/10 px-2 py-1">
      <button
        type="button"
        className="rounded bg-zinc-100 dark:bg-zinc-800 px-2 py-1 text-sm"
        onClick={() => setCount((c) => c - 1)}
      >
        −
      </button>
      <span className="min-w-8 text-center tabular-nums">{count}</span>
      <button
        type="button"
        className="rounded bg-zinc-100 dark:bg-zinc-800 px-2 py-1 text-sm"
        onClick={() => setCount((c) => c + 1)}
      >
        +
      </button>
    </div>
  );
}

And here is a live Counter component rendered:

0

Now, regarding Tailwind CSS, I'm still learning to use the tool. Tailwind CSS has good documentation, it took about one day to understand the concept and it got me hooked into it's philosophy:

  • It's a utility-first CSS framework, which means the CSS files are very lightweight as you re-use the same classes all over. Not only that it's small, but Tailwind CSS only compiles the CSS classes that were used in the project into the output CSS file, which makes it as lightweight as possible.
  • The code is portable. For example, I can lift and shift the above code snippet in any React + Tailwind CSS project and it would look and work exactly the same.
  • It's simplicity and ease of use won me over. Everything is done by adding classes, it has good intellisence and code preview mechanism, which means I don't have to navigate to some obscue CSS files to understand how it works - check out their plugin integrations

What's next?

I'm planning to write a series of Web Apps that levrage the power of AI, which I can share and discus the learnings about the technologies used.

I'm looking forward for the evolution of this project.

← Back to home