Blog rewrite: What's under the hood
September 17, 2017

Let me just begin by saying rewriting existing projects is hard. But what’s even harder is writing a blog post about it. Specially when the distraction is just a Chrome Tab away.

The reason for this rewrite, as I discussed in the previous post is my obsession with cool JS tech. Over the last couple of years I've come across so many of them that I had to use them in my personal projects. It is always a good feeling to learn something new and build something cool at the end of it.

It began with my old blog not having an interface for writing/editing blog posts. Adding that feature turned into a task of rewriting the whole blog. Typical software engineering stuff, nothing unusual there. Sure, the site may be over engineered. But what the heck, when you have the time and enthusiasm to learn new things, why not?

The new site runs on top of a NodeJS backend and uses React for the UI. Following is the list of libraries that keep the lights on.

  1. react—as the UI layer for building interfaces
  2. redux—for state management
  3. webpack—for module bundling
  4. babel—for ES6 and above compilation to ES5
  5. styled-components—for css-in-js
  6. react-remarkable—for rendering markdown
  7. react-simplemde-editor—for editing markdown
  8. react-loadable—for lazy loading react components

The new site has a markdown editor with preview, an admin panel with drafts and post management and it is also a test bed for anything new that I’m trying to implement. Speaking of which, my latest fascination has been data visualization. Ever since I came across this AMA by Mike Bostok, I’ve been fascinated by d3.js. Speaking of which, I’m planning to build something cool with D3 and Semiotic.

The source code still needs a bit of organizing and polishing. Hope to make it open source when I clear things out.

Anyway, I hope this post inspires you to go create/re-create your own site. Until then happy coding!