August 6, 2007

New Web Site

Today I released the new personal web site I've been working on, which you are looking at now. This version only uses CSS for presentation, completely decoupling the display from the XHTML markup. I also have different CSS for screen and print media, which lets me do some cool things. I am using PHP for everything, including the blog archives, so I can include some programmatic behavior in the content and display. Paul asked me why PHP instead of Ruby, but PHP is much more established and almost all decent web applications are in PHP, which means easy integration. My goal for this version of the site was to make it much more visually interesting and exciting to read, and more dynamic in nature.

I originally tried to use JavaScript to make all content load into divs on the existing page, partially because I liked the idea of implementing dynamic behavior like that, but discarded the idea after struggling to make it work right for way too long. The biggest problem was dealing with dynamically loaded JavaScript. I found the most reliable way of ensuring JavaScript would evaluate correctly and in the global scope was to include the JavaScript block in some part of the actual DOM document, rather than evaluating it.

The AJAX framework I decided to go with is script.aculo.us and Prototype. The latter is actually more interesting than script.aculo.us for building interesitng behavior and custom effects. script.aculo.us just provides some stock ones that are nice and useful. I looked at Dojo for a short while, but while it has much better documentation than Prototype, I think Dojo is a little too low-level and I can be more productive with Prototype.

As a side, Prototype evaluates JavaScript returned from an Ajax.Request using calls to eval() in a local scope. Which makes it not do the right thing a lot of the time. I had to modify Prototype's evaluation code so it just inserts returned JavaScript into the page. Prototype also has a bug where it inclues all form elements on submission, instead of only identifying the elements that would be sent if the form was submitted by the browser. As a result, I had to remove the Preview button from the blog comment form.

You might ask why use Prototype to submit and display the results of the blog comment form, but unfortunately MovableType has two pages which it cannot generate PHP for: the search results and comment preview. So for those two situations, I had to use the Ajax class to display the returned XHTML inside the existing page, to maintain the look-and-feel.

Switching to PHP for the blog archives means a lot of old URLs are no longer valid, since the blog archives used to be generated with .html extensions. Rather than return 404 to everyone that's linked to these pages, including my own pages, I put a RewriteRule into the archives directory that will map requests for .html onto .php.

I also decided to discard the MyPhotos photo gallery implementation I had been using. I'd written it a long time ago, before there were really any good photo gallery web applications available, but now it is out-dated and lacks much of the functionality you'd really want. So I've switched over to Gallery, which is probably the most popular of all photo gallery web applications. It's also written in PHP, and has a very active user and developer community, and support for lots of features. It's open source, so I can figure out exactly how it works (unfortunately the API documentation is pretty lean) and customize it. It also uses the Smarty template engine, so I ended up learning how that works. The only thing missing from the current version of Gallery is being able to override module templates from the theme. That's scheduled for release in the next version though.

Unfortunately, trying to do things in pure CSS has one major problem: Internet Explorer. Despite being the most used web browser, it's also the worst web browser. It never supports the web standards the rest of the browsers do, and the web standards it does support it does so in incomplete or incorrect ways. Its parsers are broken, and its rendering is wrong. Internet Explorer really is still the worst thing to happen to the web.

My first implementation does not work with any version of Internet Explorer. I fixed it a little so it would work with IE 7 by removing all uses of CSS @import, but IE 7 still won't work with the dynamic behavior I am using in my custom Gallery theme (based off the Hybrid theme). And if you try and view my site in IE 6, it looks completely broken. I suppose this is a little better than my previous site, which wouldn't even necessarily display in IE at all, because it was valid XHTML which wouldn't parse correctly.

One last thing I wanted to make sure of was that I wasn't going to lose all the work I'd put into the previous site. So before switching everything over, I installed Subversion and checked everything into a new repository. Now that I've switched over, a lot of the old documents are deleted or changed, but I still have them in the repository and can get them back whenever I might want in the future.

Posted by josuah at August 6, 2007 2:45 AM UTC+00:00

Trackback Pings

TrackBack URL for this entry:
http://www.wesman.net/cgi-bin/mt/mt-tb.cgi/1227

Comments

Post a comment

July 2013
Sun Mon Tue Wed Thu Fri Sat
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

Search