New blog, new technologies

Written on

I have just finished building my new blog using HTML5 on the front end, and Node.js on the back end. It is hosted on heroku.

I previously used BlogEngine.NET, but wanted to write my own blog engine using some of the technologies I have been working with recently - technologies that I am passionate about and will be working with a lot more in the near future.

Writing my own blog engine from scratch using bleeding edge technologies was really fun, and I learned a lot along the way. Some of these things are discussed below.

git + heroku = win

If I have a new blog post or new functionality to my website, I constantly commit changes to my local git repository. When I am ready to "go live" I simply commit to my git repository, and then push my changes to heroku. Publishing new blog posts or new functionality is literally as simple as typing:

git push heroku

After those three little words, my changes are live. It is simple, fast and powerful.

HTML5

I tried to use semantic markup and make use of the new HTML5 tags where it made sense to use them. Every page on this website is valid HTML5.

HTML5 in Internet Explorer (IE)

My new blog works in most browsers, and most modern mobile phones. That took some effort. I mainly had problems in IE7 and IE8 due to the fact that I was using HTML5 which is not supported in those browsers. John Resig does a great job in explaining why HTML5 tags do not render well in IE7 and IE8: because those browsers don't apply CSS styles to tags they don't understand.

Luckily, there are workarounds. The most popular one seems to be HTML5 Shiv. It is a script that uses a technique where older versions of IE are tricked into rendering unknown tags by creating a DOM element with JavaScript.

The following JavaScript would trick IE7 and IE8 into correctly rendering a <header> tag:

<script type="text/javascript">
    document.createElement("header");
</script>

You can include the full HTML5 Shiv script inside a conditional comment, so that it is only included for versions of IE older than IE9:

<!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSS3 and Responsive Design

I also put some effort into making this website look pretty decent on a range of browsers, screen-sizes and devices. Using CSS3 media queries, you can specify certain CSS rules that should target specific classes of devices - based on screen size, for instance. If you are using a desktop browser right now, there is a HTML5 icon at the bottom of this page. If you are reading this from a mobile device, it will not be visible. The CSS3 code for this particular piece of adaptive rendering is shown below:

footer #html5 {
    float: right;
}
@media all and (max-width: 360px) {
    footer #html5 {
        display: none;
    }
}

The first CSS rule applies to all browsers - it pushes the icon to the right of the footer. The second rule is embedded within a CSS3 media query, which will only apply to devices with a maximum width of 360 pixels: for those devices, the icon is hidden. I have done similar things in other places across the site - including adjusting font sizes appropriately.

Old blog post redirects

I use a Node.js module called express for helping handle HTTP connections on the server side. With express, it is easy to handle a URL and send a response:

app.get("/foo", function(request, response) {
    res.send("Hello World");
});

I use express to permanently redirect my old blog post URL's to the new URL format I use. To stay search-engine-friendly, I redirect using the HTTP 301 status code: permanent redirect. Here is a sample of code similar to what I have running on the server to help me with redirects:

// www.alexyork.net/blog/post/hello-world.aspx
app.get("/blog/post/:urlFragment.aspx", function(request, response) {
    var urlFragment = request.params.urlFragment;
    var post = BlogPosts.getByUrlFragment(urlFragment);
    response.redirect(post.newUrl, 301);
});

HTML5 and the future

I have been in the web development game for over 10 years - but I have never been as excited about web development as I am today. With HTML5 and the umbrella of related technologies and API's that go with it, coupled with awesome modern browsers for both desktops and mobiles, the future of the web is brighter than ever.

But enough talking - let's get back to coding!


Comments