Hello there, and welcome to my new website. This is my first post on this brand new blog. I'm really excited by starting using it but I don't really know where to start. So, I will use this post to introduce some of the many things I experimented and learned in making this website.

All right, the site is almost complete, if I had to I'll say it's ready at 90%. After a bit more than two weeks of works I start to see the end of the tunnel.

About the engine

This site runs on Python and Django with a custom blog application I wrote. I started to write this app for the site I made for my friend Aries, and improved it a bit for my own use. This engine now supports the following features:

• Categories and sub-categories
• Tagging, using the excellent django-tagging app.
• Comments, using the native django comment app.
• Post groups. Posts can be part of a series of post represented by a PostGroup. Custom navigation allow to easily move from one post of the group to another one. Posts within a group can be ordered independently of their publication date.
• Orphan page. A post can be set as orphan and it will be excluded from the blog timeline. and accessible using a custom url.
• Author, as django provide by default a multi-user backend it was necessary to support post author.
• Content localization using my django-babelfish app.
• Blog Roll. Links can be grouped by categories (and subcategories), semantic can be provided using the rel attribute.

You can find the version I currently use on this site in the develop branch of my python github lib.

About the front-end

I could have made my site front-end with HTML4 and CSS2.1, with a fancy header in Flash, yes, I could have. But there is no point in doing the thing you're comfortable with. And since there was quite a battle these days on how HTML5 can beat Flash or not I really wanted to give it a try.

There's two reasons I wanted to drop Flash for my website. Firstly, because I support web standards since years (I really started making games in VMRL, not Flash), even if that means having a hard time with compatibilities, and secondly, because the recent moves in Adobe policy towards linux and the web in general annoy me so much I just want to get rid of it as fast as possible (I prefer not to expand myself too much on this subject because this is a lost cause).

Let's see what are the HTML5/CSS3 features I used on my site:

• History : This one is probably one of the greatest improvement in HTML5. It allow a page to change the location in the adress bar without actually change the page itself, and then, manipulate the browser's history to enable a new kind of in-site navigation. The code I use is based on the excelent history.js lib by Benjamin Lupton.
• Canvas : It would have be shame to not use it. In my case I use it in the header, it allow me to create a quick and dirty particles system and animate the character sprite. What's great with canvas is that it allow you to work at a pixel level to create effects.
• CSS Transitions : Many animations on the html part is done with CSS Transitions (the page resize during the ajax navigation, the menu hover, etc...).
• CSS Multiple Backgrounds : The header parallax motion is done with several background image animated using the background-position attribute.
• Semantics : This one il the less obvious because it doesn't change anything visually, but for search engine and screen-readers it's like honey. That imply using many custom html tags such header, footer, article, section or figure.

By the way, the general site design try to use exclusively CSS3 features instead of images when it's possible (for shadows, round corners, pictogram in combination with unicode, etc...) with fallback for old browsers (or crap browsers).

What's next

I wish that this small introduction gives you the envy to read more about how I done this piece of work. I'll probably start a making of series around miscelaneous parts of the site.

HTML5 is really promising, even if it's not a real spec yet. But so what? Interoperability issues have been a daily reality for web designers and developpers for years, so it's just another layer to deal with and the good practices used in website conception allow to integrate these features while keeping a really good compatibility.

I hope you'll enjoy it.