Time for Change

For the last few years I’ve hosted my various web project with BlueHost. The service has great uptime and is reasonably priced, however given that its only a web host there are some limitations. For recent projects I’ve needed the flexibility to install and configure server-side software myself, so I’ve started using my Digital Ocean VPS on a much more regular basis. I like having the extra control and Digital Ocean’s lightweight “droplets” are much better suited to the kind of work I’m doing. In the long run I’d like to phase out BlueHost altogether, so I figured that a good first step would be to move my blog to the VPS.

Changing hosting locations forced me to evaluate my infrastructure and make some adjustments. While preparing to migrate my personal website, I found that I was no longer satisfied with how several components had been implemented. Rather than fixing them individually, it seemed like a good opportunity to rewrite the backend using some of the web development experience I’d had in the last year.

Technology Stack

Moving from a web host to a VPS opened up a broad range of technologies that had previously been inaccessible. On BlueHost I used PHP/MySQL for everything since it was preconfigured by the host and fairly easy to use. With the new environment pretty much any Ubuntu-compatible software was fair game — bash web app environment, perhaps?

I ended up choosing to use Node.js, partially because of it’s recent popularity, but mainly because I actually quite enjoy working with it. I’ve done a modest amount of development with Node in the last few months, primarily using it as a socket.io server. The idea of writing server code with async JavaScript sounded a bit weird at first, but it’s actually helped with code quality. There’s definitely a bit of a paradigm shift needed though, especially coming from a C++ background.

In addition to Node I also chose to use the Express web app framework. The design of Express encourages the use of middleware, which are single-purpose extensions that add functionality to a vanilla Express application. Examples include JS/CSS compressors, templating engines and loggers. Since the plan was to go all-in with as much new technology as possible, I opted to use the Jade templating engine for pages and Stylus for CSS preprocessing. I considered using LESS since I’ve had some experience with it in the past, but the brace-less syntax in Stylus won me over.

I’ve used SQL extensively in my own projects and at work. I wanted to try a NoSQL data store, and wound up choosing Redis based on past experiences with it during my URL shortener project. Redis is honestly probably not the best choice for a blog/personal website, but my data requirements are pretty lax and I had no problems getting it to do what was needed.

Workflow

My workflow during development was a little crappy at first, as I mainly developed in vim over SSH. I wrote most of the data backend and web app code from my parents’ computer while at home so I couldn’t really set up my development environment locally. I actually don’t mind using vim - at work this term I use it for pretty much all the programming I do. The problem was that I was flipping through a lot of code/style/layout files for the first while, especially when debugging and figuring things out for the first time. When things go awry, I prefer graphical editors as using vim still isn’t quite second nature yet.

Despite that, after a week or so of using the Express + Jade + Stylus environment, I’m absolutely sold as far as web development goes. The way middleware integrates with Express is great — once it’s plugged in, there’s really no indication that it’s there aside from the fact that it works exactly as you’d hope. For example, by default responses to HTTP requests in Express can be sent as follows:

res.send("my data here")

With the Jade template engine installed, parameters and a Jade layout can be passed in to a .render() method instead of sending raw data:

res.render("frontpage", {title: "Title", image: "Test.png"})

The internals of Express and the Jade middleware load the layout, render it with given parameters and spit out the final HTML blob as the response to the request. There’s virtually no boilerplate code needed in my application itself. Unfortunately the parser error messages from Jade are a bit cryptic, and even small syntax errors can create a large amount of error output.

The Stylus middleware is also pretty cool since it automatically compiles .styl files to CSS at runtime, but as far as the language goes it’s about the same as LESS. There’s a neat package available on npm called Nib, which offers some useful mixins for Stylus as well as a CSS reset.

Design

The other big change that doesn’t directly relate to the technology stack is the new design. The old layout was created when I was first learning HTML/CSS and still hadn’t fully adopted the flat UI concept. With the new site, I did a complete rehaul of the visuals with a different color scheme and simpler elements.

Page content itself can be much richer now as there are proper header, paragraph, and code tags available when writing posts. A code syntax highlighter and the MathJax equation renderer can also be conditionally included by a page or blog post. I’m particularly excited about having MathJax support as it means posts can display Latex content without the need to pre-render an image. Often times it’s possible to write mathematical expressions with plain ASCII symbols, however a better typesetting solution is needed for complex cases. For example, the surface rendering equation frequently referenced in ray tracing theory would be impossible to express without math symbol rendering:

$$L_o\big(x,\omega_o,\lambda,t\big)\;=\;L_e\big(x,\omega_o,\lambda,t\big) + \int_\Omega f_r\big(x,\omega_i,\omega_o,\lambda,t\big)\:L_i\big(x,\omega_i,\lambda,t\big)\big(\omega_i\cdot \boldsymbol{n}\big)d\omega_i$$

There are still a few things I’m iterating on such the font pairing and header design, but changes there should be fairly minimal. Several sections of the site are still incomplete as I’m moving old data to the new system and updating page designs. Blog posts, projects and portfolio entries all have new image requirements, so a lot of the work is updating old graphics to fit the new layout. It’s an ongoing process, but I’m hoping to have it done in a few weeks.