Coding Required

A Return to Zen

2024-09-124 min read

Welcome to the new Coding Required website! If you are reading this in Medium, go here www.codingrequired.com to see a vastly better reading experience.

The Little Problem with Medium

After using Medium for a while, I realized my focus switched from writing and sharing my experience to read, view, and clap counts. Any article that didn't have engagement felt like a failure. Any topic that didn't perform well needs to go, and anything that does should be doubled down. I felt like I had lost the reason I had started my writing. It was a way for me to put my thoughts down, share real experiences, and be of use to someone, hopefully. I needed my zen back.

The Zen-spiration

Ulysses, my favorite writing tool, is the epitome of a zen writing experience. When I am writing, it removes everything and leaves me with just me and my thoughts. I wanted to replicate this in my blog and provide the ultimate reading experience. At the same time, I want it to be cozy, like reading your favorite book by the fireplace.

Blog Page New Design

To start, I deemphasized everything that's not essential, including the blog name, the mode switchers, the date, and the reading time. This allowed the content to pop up and invite you to read distraction-free.

Let’s Talk Fonts

I went with "Inter" for the fonts, as it's beautiful and optimized for all device sizes, guaranteeing legibility. I also used "JetBrains Mono" for the blog name to emphasize the "Coding" part of "Coding Required." I also used "JetBrains Mono" for the date, as I liked how the numbers were rendered. Finally, I used "Yellowtail" for my signature. I wanted to make the blog post more personal, like a letter penned especially for you and signed by me. The Yellowtail font felt like the sweet spot between handwriting and legibility.

Let’s Talk Colors

	'light': {
        'bg': '#F8FAFC',
        'pre-bg': '#0D1221',
        'text-primary': '#0D1221',
        'text-secondary': `#384352`,
        'text-tertiary': `#728298`,
        'text-disabled': `#CCD5E1`,
        'divider': `#E2E8F0`,
    },
    'dark': {
        'bg': '#161617cc',
        'pre-bg': '#161F2C',
        'text-primary': '#CCD5E1',
        'text-secondary': '#94A4B7',
        'text-tertiary': `#728298`,
        'text-disabled': `#728298`,
        'divider': `#384352`,
    }

For light mode, I wanted it to feel like an old-school newspaper, grey with big, bold text. Using grey instead of white would also mean that your eyes won't be seared by the contrast, which is why I also picked a dark color instead of black for the text.

For dark mode, I wanted it to feel like liquid paper on charcoal-colored paper. The light grey on the charcoal background brings enough contrast without straining your eyes. The color is also inspired by Apple Books and Kindle.

No Feature Images

The feature images that I use often add very little value and are, in the grand scheme of things, a distraction. If their only purpose was purely decoration, I figured they weren't needed anyway.

Framing The Pictures

I also liked the idea of hanging a picture on the wall. Therefore, I decided to add big borders to mimic a picture frame.

The Typography

Luckily for me, Tailwind CSS Typography was everything I required. From the way the content is capped at 65ch width to the margins applied to the elements, it was close to perfect for me. With a few minor tweaks, I made it exactly how I wanted it to be. I also made the font larger on large screens since I have the habit of zooming in to read content on the desktop.

The List Page New Design

For the index page, I once again deemphasized the less important parts, this time including the date and the description. While the description may be relatively important, to me, the title of the article and the link to the article are more important.

The Stack

I used self-hosted Directus for the Headless CMS portion. MySQL for the DB. OVH Object Storage for image storage. Next.js for the blog itself. Tailwind CSS for styling. I store the content as Markdown in Directus and use MDXRemote to render it in Next.js.


The new design returned my zen, and I am happy with the outcome. The blog feels more inviting and readable. I will continue publishing on Medium in the interim but will probably entirely get off Medium in the future.

Anbin Muniandy
CEO & Principal Engineer, YoPrint