Eduardo Trujillo

For the past few years, I’ve given this blog a fresh coat of paint every few months, even if I don’t post any new content. Sometimes it’s a major redesign or refactor, involving switching the underlying language or framework. I’ve gone from PHP, to a Node.js server, and back to basics, a static site. Other times, the changes are more subtle and in the background.

As time has allowed in the past few weeks, I’ve been working on modernizing the blog’s project. However, it’s not a departure from using Hakyll, in fact it’s the opposite. My two main goals this round were to improve the visual appearance of the site and to make the code itself easier to build and deploy.

Improving the site’s appearance wasn’t something I planned throughly. After all, I’m a programmer first, designer second. I decided to go with an iterative approach. This worked well with my schedule because I have limited time to work on side projects, and I don’t necessarily work on the same project every time.

Each iteration began with me looking at the current design and layout, and asking myself questions like “What can I make better?”, “What am I trying to achieve?”, and “How do I optimize the site for that?”. This was an interesting mental exercise because these are not things I always think about.

Next, I would make a few changes to the layout or styles, and play with them for a while. If I felt that it was an overall improvement, the change stayed, otherwise I rolled it back and tried something else.

Now, I realize I’m probably describing what is a generic iterative design process. What’s interesting to me is being able to spend time on it, given that my past redesigns were mostly driven by a change in the stack powering the site. This goes back to my decision to keep things simple and making my blog statically generated.

On the engineering side of things, my sole goal was to keep simplifying. There were also iterations, but different questions were asked (“Can I get rid of that?”). I basically looked at all the “moving pieces” and dependencies of the project used to generate and serve the blog, and tried to figure out what could be removed.

One big dependency of the project was Node.js. Even though the site is generated by Hakyll, I still needed a way to compile my SCSS files, along with a package manager to obtain dependencies like Foundation or Font Awesome. On top of that, the project was a bit stuck in the past. Dependencies were pulled by Bower rather than NPM, and it was using Gulp rather than Webpack.

I first tried to migrate to Webpack, but later decided that it wasn’t helping much. I still relied on Node. As I kept looking, I found two packages on Hackage regarding building Sass/SCSS projects using just Haskell by using libsass: hsass provided a Haskell API on to of these bindings, and hakyll-sass showed how to use this in a Hakyll context.

I added hsass as a dependency and used a similar approach as hakyll-sass without importing another dependency. A simple SCSS compiler for Hakyll can be defined in just a few lines:

sassCompiler :: SassOptions -> Compiler (Item String)
sassCompiler options = getResourceBody >>= compileSass options
where
compileSass :: SassOptions -> Item String -> Compiler (Item String)
compileSass options item = join $unsafeCompiler$ do
result <- compileFile (toFilePath $itemIdentifier item) options case result of Left sassError -> errorMessage sassError >>= fail Right result_ -> pure$ makeItem result_

On top of that, I also took a minimalistic approach with dependencies. I dropped most external resources, such as Google Analytics, Typekit, and MathJax, and replaced them with resources served from site itself. This greatly simplifies CSP policies, reduces the number of requests a browser has to do to read this blog, and is privacy-friendly.

Tracking is just gone, and I don’t plan to add it back, unless the needs of the site change. Right now, it’s just overkill for this blog. Typekit was replaced with Inter UI, a gorgeous open source font. MathJax is now self-hosted rather than pulled using a CDN. Foundation and Font-Awesome were already self-hosted.

Dependency management through NPM was replaced with shallow Git Submodules. Rather than cloning the entire repository, Git fetches the repository at the specific version/commit needed.

Finally, you may have noticed that the sidebar is gone. I tought about it and came to the conclusion that I don’t use my Twitter that actively anymore. Now, there is nothing to steal focus from the core of the blog, the content.

With the sidebar gone, I still wanted a place to highlight content, and place links to other sections of the blog. The home page now has a “leaderboard” component. It’s an experiment. Over time, it may stay or leave. We’ll see.

Anyhow, I still haven’t talked about how all this is deployed. I hope I can get to it on a future post.

Alternative Formats
This post is also available in Markdown: View source