This post is to introduce a new content management system and page template for stevebob.net. The frontend and backend have been completely re-written to be consistent with modern websites. There’s also an RSS feed, and rounded corners!

The style of the old site was designed to look 8-bit, using bright colours, square corners and the pixelated fractal tree (which lives on here). The new style is designed to look more modern. The colour scheme is basically the same, but the colours are washed out. Also there is a new tree. Click on it to redraw.

Now, some history. When I started this site, it was just a static page displaying this with a header bar containing links to the several other apps I had. Once I had some more apps made, the user interface became too cluttered, and so I made a home page that had a list of apps and a description.

The problem with this was that every time I released a new app, I would have to go in and manually update the html file to contain a link to it. To amend this, I created the site that was in use up until now.

Out with the old…

I wrote a php site that looks in the directory that contains all the apps, and makes a list of apps that it displays on the home page. Each app had a “.app” file that contained a description of the app, along with what to call it, using a markup language that I defined myself in php.

Then I decided I wanted a blog. The technical details of that can be found here, but the tl;dr of it is that I ended up writing what was effectively a separate website, entirely in perl, to serve as my blog. And it worked. I had a web interface for writing content and uploading photos, that was password protected, and even had a concept of user accounts. Everything was stored in a mysql database. The exact text I entered into the interface for writing content, was stored in the database. This was so I could go back and edit the post again later and have it look the same. When the post needed to be rendered, it was processed by some perl I wrote that introduced html tags where I thought were appropriate. So I effectively wrote another markup for blog posts. This worked fine until I recently needed to embed code in a post. I used a simple approach with pre tags, but it rendered incorrectly. It turned out that every double newline was being replaced with a new paragraph and the pre tag was being ignored.

I wanted the most recent post of the blog to appear on the homepage in the content area. This is where it all really started to fall apart. Remember, the website was written in php and the blog in perl. My quick fix was to run the perl script that printed out the content of the most recent post from inside the index.php of the home page, and the output was printed in the content section.

Pretty bad huh?

Since my current projects are much bigger than the apps I built in the past, I want to make more frequent blog posts to show progress, so I needed a nicer way of creating contentt.

…in with the new

You will be glad to know that the entire content management system for both apps and blog posts has been completely re-written.

Each blog post has its own directory, containing an xml file with all the text content of the post, along with elements for describing images. There is also a html element, the content of which is literally inserted, which is useful for inserting canvas elements or iframes. Also in the directory is any supporting media, such as images or javascript files. The text content is written in markdown. Apps are a similar story. Each app directory contains an xml file with the name and url of the app.

A ruby script is used to generate the entire website, based on the apps and posts it finds. It creates a directory structure containing static html files which make up the site. Templating is done using erubis. XML parsing is done using nokogiri. Markdown rendering is done using maruku.

Also, less.js is used instead of CSS. I always complain that CSS sucks and is a pain to write. Less lessens the pain somewhat by allowing variables and mathematical expressions to go inside the stylesheet. Rather than putting div elements everywhere to have several elements with the same left indentation (say), or having to duplicate some value all through the css file, a variable can be used.

The new system is faster for page loads since the code that generates the page isn’t run every time the page is loaded. It’s safer since a bug in the website can be caught at “compile time”. Also, there is a security benefit since code injections attacks can’t be used against a static site.