2021 Tech Stack and Design Update

Drop some confetti—maybe not too much—to celebrate this launch. Your pal has redesigned this site, updated the underlying tech stack, and mostly gone back to basics. Also, following the tradition, this might be one of the only two posts that he’s gonna write this year.

Self deprecation aside, this site now uses 11ty and the design/css is inspired from Edward Tufte’s project—Tufte CSS. Continue reading if you want more details.

Why 11ty?

In 2020, I drank the Next.js Kool-Aid at once. And make no mistake it is a great framework. But it was too much for a simple, silly website like this one. For example, last deployment failed for reasons that I didn’t bother finding out. All I was trying to do was to add a new post. Anyway.

11ty has been one of the most talked about static site generator in my Tech Twitter Bubble and supposedly it is a simpler static site generator. It spoke to my heart by aiming to be an alternative to Jekyll.

It also isn’t a JavaScript framework hence produces zero boilerplate client-side JavaScript. So this site doesn’t have any JavaScript code (yet). Only some CSS and good ol’ HTML. However, if I wanted to add an npm module, I can do so easily.

Another advantage is that it uses independent template engines and works with multiple template languages. Although this was little concern to me because all my writings (don’t laugh!) are in markdown.

All in all, it’s so simple that I was able to move from Next.js setup to 11ty in one afternoon.

Tufte CSS

I’ve not yet extensively worked with sans-serif fonts. Around the time I was slow burning the idea for the next redesign, I stumbled upon this project. Immediately, I was drawn into its resemblance with classical, yet modern textbook feel. The page background is faded yellow and the typographical hierarchy just sang with each other in harmony on the page.

I was smitten by the idea of paying extra attention to little details like side notes.^[1] The css took care of it in a way that doesn’t force the readers to jump their eye to the bottom of the page. They also work elegantly in devices with smaller width. The implementation is messy and I personally don’t want to insert html tags directly.

The Typeface

Tufte CSS recommends using ET Book, which was designed as an alternative to Monotype Bembo.^[2] But my preference was to use Newsreader because of two reasons: First, the typeface is especially designed for continuous on-screen reading and feels more polished than for screen usage compared to ET Book. Now, I know you’re rolling your eyes on my two posts a year track record but I think it works just as well ET Book if not better. Generous x-height makes it more readable on screen if used at size 14px and above. Second, the ET Book weighed around 1.4MB. Newsreader is a variable font, fetched directly from Google Fonts. Pretty AND fast.

See y’all next year!