A beautiful look at the web, with a reality check on just what the web is supposed to be: a collection of hyperlinked things.

Jeremy Keith's In Praise of the Hyperlink

You may not even notice right away, but I added shading to the boxes on this site. This is the final product of over three hours of working on my design.

No, I didn't struggle with making shading images for three hours. I tried to redesign my whole site from scratch. I'm getting a bit bored with seeing the same thing for over a year, and I've been told at least once that my design needs an overhaul.

I messed around with some different layouts and different looks, and some of the changes seemed good. One of my strategies was to put the side boxes with links to the bottom of the page. Although it did look a bit better and cleaner, I didn't want to lose the navigation "above the fold". I think when visitors come for the first time, these links may be the only reason they stick around.

Of all the experimenting I did, one thing was clear: I need to introduce images to add another dimension to this design. I decided that I could do this to the current design. So I did. And that's why I made the shaded boxes.

I think that rather than redesign the whole site, I'll continue to make minor improvements, move things slightly, add images, change the colours, rework the header or footer, etc. It's just too much to redo the thing from scratch, and then I'd lose all the work I've done so far.

Let me say it again in case it's not brutally obvious: I'm not a designer. I don't consider myself a designer. I have always been interested in art, and I like to draw and paint. I also know CSS inside and out. I think I know good design when I see it. But I'm no photoshop ninja. I have ideas in my head, but by the time I'm "finished" I'm looking at an ugly cheap pile of crap. This is an area I'd like to improve, but for now it's just a bit of a hobby.

Many people don't get the difference between a web developer and a web designer.. "Wait, we still have to pay someone to draw the thing? So what do you do exactly??" So maybe it would be in my best interest to tackle some web design.

If any designers out there want to pass on some tips on how to improve or which sites can teach me the tricks, I'd be very grateful.

I just wanted to give a quick congratulations to Peter-Paul Koch of QuirksBlog. He just finished a JavaScript book, ppk on JavaScript. Way to go! If you're interested in learning more about JavaScript, or, as ppk said,

if you want to congratulate me, buy the book.

Update: You can pre-order the book at Amazon.

Seth Godin gives another example of the Internet leveling the playing field. This time it's a girl named Emily finding success selling her artwork online. Seth says:

[This] should be proof to you that the whole thing is raveling (which means the same as unraveling, in case you were curious). That all the systems that kept all the processes in place and leveraged mature industries and experienced players are slowly (or quickly) filtering to the masses. Faster than you thought it would happen.

Just the other day, I saw on the CBC National a piece about a Canadian comedian, Russell Peters, who struggled to find an audience. Thanks to Google Video, his popularity has had an enormous boost. When asked about the effect of the Internet, he just said something like "that Internet thing.. I don't understand it but.. it's crazy."

Indeed, the Internet is already a place where individuals can reach wide markets and find success on their own, without the need for traditional media, Hollywood, television producers or other people in suits. The old system was great at producing one-hit-wonders that everyone liked and nobody loved. Now, there is room for everyone to find their own market, their own audience, their own place in the world.

You might have heard of unobtrusive JavaScript, but what the hell is it? Well, it's the separation of all your JavaScript from your HTML. That means putting all your JavaScript either in a <script> block, or even better, in an external file.

Why bother? Yes, sometimes it's easier to put JavaScript into onclick or onload attributes. But it's better to separate your content (HTML) from your presentation (CSS) from your behaviour (JavaScript). It keeps your HTML clean. It also makes things easier to maintain.

It's not just about the physical separation of JavaScript from HTML. It's the absolute separation. Your HTML should work without JavaScript. For example, if you have an empty <body> tag, and then attach use Ajax to pull content from the server and stick it into the body, that sucks. If somebody comes to your site without JavaScript (ie. the Google spider), they will get an empty page.

It's important that your whole site works without JavaScript. This way, your content can be used by people without JavaScript. Google's spider doesn't support JavaScript (to my knowledge). So, if you want your content to be indexed, make sure your HTML content can stand alone without JavaScript.

Unobtrusive JavaScript means adding JavaScript functionality on top of an already functional HTML site. This improves things for those with JavaScript without taking anything away from those without. Let's look at some simple examples.

The onload attribute on the <body> tag is popular. Instead of doing this:

<script>
function myLoadScript() {
   // do fancy stuff
}
</script>

<body onload="myLoadScript()">

you can just do this:

<script>
window.onload = function () {
   // do fancy stuff
}
</script>

<body>

There's no difference in functionality, but it does let you put your script in another file and have less stuff in the HTML. This way, you can change or remove your onload function without changing the HTML.

Here's another example. Let's say you have some JavaScript in a link to launch a popup window:

<script>
function showPopup() {
    window.open('myPopupPage.html',null,"width=600,height=400,toolbar=no");
}
</script>

<a href="javascript:showPopup()">I love popups!</a>

If somebody doesn't have JavaScript, this won't work. That sucks. You can do this instead:

<script>
function showPopup() {
    window.open('myPopupPage.html',null,"width=600,height=400,toolbar=no");
    return false;
}

window.onload = function () {
   document.getElementById('popupLink').onclick = showPopup;
}
</script>

<a id="popupLink" href="myPopupPage.html" target="_blank">I love popups!</a>

If somebody doesn't have JavaScript, they'll still get the normal link popup from the HTML alone. You won't be able to customize the size, toolbars, etc. but at least it will still partially work.

Notice that the showPopup() function now returns false. This will stop the page from doing what it normally does when you click the link. In other words, you'll only get the JavaScript popup, not two popups.

This technique can be applied to more complex JavaScript including Ajax techniques. If you have a form that is submitted in the background, and uses JavaScript to redraw the page without refreshing, great. Just add this functionality using JavaScript alone. Make sure that without JavaScript, the form just submits and the page refreshes the old-fashioned Web 1.0 way.

I will quickly mention something to silence those who are screaming at their monitors. document.getElementById doesn't work in every browser (like Internet Explorer 4 or Netscape 4), so you may want to use object detection to make sure it's supported. My policy is that if someone is using an older browser, they get the same thing as if they had JavaScript turned off.

I hope these techniques will help you to create wonderful, clean, sexy and modern unobtrusive JavaScript. Have fun!