Ch-ch-ch-changes

1 March 2022

Hey there. If you've visited Makiroll recently, you may have noticed by now that everything looks slightly different. It was a long time coming, but I finally managed to give this site a custom look, with some optimizations thrown in for good measure. Version 0.2 of Makiroll is not yet the grand-launch-worthy release I have in mind, but it's a step forward.

The first version of Makiroll ran on Ghost, because building yet another WordPress website was out of the question and I wanted a lightweight blogging platform to build on, and used a neat free theme called Liebling. While I didn't have the bandwidth to work on a new look at the time, I had planned to build a custom theme just in time for the site's supposed grand launch in July 2020. The difficulty of living through a pandemic prevented me from hitting my milestones, but I did manage to roll out a new design early last year. Unfortunately, it didn't last.

Warning: geek content ahead

When I decided to relaunch Makiroll this year, I had already set my sights on rebuilding on a platform that was modern, performant, and cost-effective. Not that running a Ghost site 24/7 was costly, but I could use something that could start really small and scale effortlessly. The problem was that I still didn't have the bandwidth to work on a new design, so I ended up porting just enough of Liebling to Next.js to recreate the original Makiroll. Because I was in a rush to get the site up and running, I ended up doing a lazy port, only rewriting the templates while reusing the original scripts and stylesheets. It worked, but it clearly wasn't the best way to do it.

Thus, my primary goal for v0.2 was to do the porting right. I re-implemented all JavaScript functionality, such as animations and the dark mode switch, in Next.js/React and imported the source Sass files right into the project for ease of customization. It was quite a lot of work, but I was able to significantly reduce bundle sizes, improve page load times, and reintroduce the "scroll to top" button on post pages. And while I was at it, I decided to use image optimization features built into Next.js to further improve performance.

I've decided to give non-JavaScript users some love, too. Before today, visitors using browsers with JavaScript disabled were greeted with a blank page:

Not anymore. Animated components such as the welcome banner will look just fine on a browser without JavaScript, so visitors who choose to turn off JavaScript for whatever reason aren't left out. JavaScript is still required on mobile devices, though, as it's the only way I can display the navigation menu. I could refactor the UX but I'd rather save the effort for v1.

On the verge of change

Makiroll v0.2, incremental as it is, represents a step forward for a personal project hampered by pandemic-induced burnout, among other things, and a little victory worth celebrating. This also represents the last step before this humble blog transforms into the personal space and canvas I've envisioned it to be. I recently began working on Version 1, a major rewrite (and rethink) of Makiroll that'll probably take several months, and I look forward to launching it before the year ends, hopefully during a more normal time (we're getting there).

I haven't been able to write much this past month. Focusing on anything has been quite a challenge lately, and I'm still working on it. I'll be back, hopefully in a few weeks, with ramblings on social media and a few other things. In the meantime, I'm active on Twitter again after months of swearing off the platform.

As always, thanks for stopping by, and stay awesome.

Tags