claudiuapetrei.com

Just finished coding the beta version of my website (yah... the one you are viewing now), so thought I would write a quick case study to explain the whys and hows that went in to the development process.

Whys

Design I don't do design work. I collaborate with designers, and just code the psd to html/css that they give me. But giving that this is my personal website, I wanted to do my own design. OK let's face it there's really no design here. Just the way I like it simple, intuitive, clean and technical, I don't really like fancy stuff so I thought my website should reflect that.

Backend The website backend is in python, using the django framework. I could have done the project in php, actually for small projects I prefer php, but this is a personal project so having fun and experimenting with new stuff is a must. I have been coding in php for about 5+ years, so I chose python since I'm not so familiar with it and, let's face it, coding python is more fun.

Django was the obvious choice as the python web framework. It has great documentation, there are tons of online tutorials and components, and the irc channel is very active and friendly, having about 500+ users online.

Ajax Over the last years most of my projects have been internal web applications. For speed and ease of use javascript/ajax is the key word. So I have gained a lot of experience in using ajax and now I try to implement as much as possible on every project. I use the jquery framework for most of the hard lifting.

Hosting This is actually the first project I have built for google app engine. I have to admit I'm a big google fan. I know that google's evil :)), but there products are just out of this world. The main reason I chose GAE was because I am considering moving some of my personal projects there and this is a perfect project for testing there services. If I like it then I don't lose a lot of time refactoring the code for my hosting and if I like it, then I have a nice project to play with on GAE.

Height resizing I added footer at the bottom of the page even if the page content is just 1 line and if there's a lot of page content it should slide until it reaches the appropriate height. Just thought that would be neat :)

Hows

Ajax I built my own functions for handeling the ajax part. In short this is how it works :

  • You click on a link
  • Jquery intercepts that operation and stops it.
  • The link address is added to the url as a hash (http://site.com/url#/address)
  • When the url changes the ajax part kicks-in and loads the content.
  • When the ajax request finalizes the old content fades out and the new content appears.

Search engine optimization

Usually a website is built for people to visit it. I agree that direct visits, social media websites, directories etc.. are important but I don't think any website can say that they wouldn't like some extra visits.

The fact that it's fully ajax powered does not mean that it's not search engine friendly. Seriously, if you take a look at the html page it's just a normal webpage, with normal links. The “magic” is just that the javascript intercepts the requests and does it's stuff, if you disable javascript it's works perfectly well as any normal website. You can give it a try: go to firefox Edit>>preferences>> content and uncheck the enable javascript option, then refresh.

Django

For everything to be ok with django and ajax requests I just had to add in the templates :

{% if not request.is_ajax() %}
{% extends 'layouts/default.html' %}
{% endif %}

So if the request is ajax don't load the base tempate file.
Side note: I don't like django's default templating languages, instead I use Jinja2, witch is similar but a lot more powerful. (IMHO)