The modern understanding of a web page is that it consists of three distinct parts:
Content (HTML)
Presentation (CSS)
Behavior (JavaScript)
These should be kept separate, ideally each in its own file (or files). What it means for JavaScript is that there should be no inline such as onclick, onmouseover, etc. Ideally there should be little to no inline scripts.
The idea is that content (the text on the page) is independent of:
how it looks like, so the page should be usable even with CSS disabled, or not supported by the browser, and
how it behaves, meaning the page should be usable even with JavaScript disabled. The content should be accessible independent of any mouseovers, animations, and so on.
Basically, I added an event listener to document DOMContentLoaded event and to the onload events of every script, image and the document. I also exaggerated the loading time of scripts and images.
Results
Normal script tag
js: Sat Jul 26 2008 15:53:33 GMT-0700 (Pacific Daylight Time)DOMContentLoaded: Sat Jul 26 2008 15:53:33 GMT-0700 (Pacific Daylight Time)
img2: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time)
img1: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time)
img6: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time)
img3: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time)
img5: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time)
img4: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time)
img8: Sat Jul 26 2008 15:53:40 GMT-0700 (Pacific Daylight Time)
img7: Sat Jul 26 2008 15:53:40 GMT-0700 (Pacific Daylight Time)
onload: Sat Jul 26 2008 15:53:40 GMT-0700 (Pacific Daylight Time)
DOM-included script
DOMContentLoaded: Sat Jul 26 2008 15:55:29 GMT-0700 (Pacific Daylight Time)
img1: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time)
img2: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time)
img6: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time)
img4: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time)
img3: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time)
img5: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time)
img8: Sat Jul 26 2008 15:55:35 GMT-0700 (Pacific Daylight Time)
img7: Sat Jul 26 2008 15:55:35 GMT-0700 (Pacific Daylight Time)
script: Sat Jul 26 2008 15:55:39 GMT-0700 (Pacific Daylight Time)
onload: Sat Jul 26 2008 15:55:39 GMT-0700 (Pacific Daylight Time)
In any event, the document onload waits for the script, no matter how it's included.
This post experiments with different patterns for indicating progress, you know, those "loading...", "Please wait..." type of things. The progress is shown by using JavaScript to animate the CSS background position.
TheSixtyOne.com
There's this cool site called http://www.thesixtyone.com/, great for discovering new music (if they only agree to ban Foo Fighters, the site will be perfect). Discovering music but also discovering interesting web design patterns, as it turns out.
TheSixtyOne.com shows a progress indicator when you click a song, as if the background shows how the song gets loaded. So I had to try implementing this myself and I also played with two other variants of the background animation.
Here's a video, a little screencast to demonstrate how the loading looks like:
Here are the three examples, take a look at the code, there are no external JavaScript libraries, just some do-it-yourself animation with setInterval()
Example #1 - filling the background
For this you get an image that is at least as long as the container you're about to animate. The height of the background image doesn't matter, could be just one pixel. Here's the image I used.
Ar the start of the animation, the background image is so to the left, it's invisible. At the end of the animation, the background fills out the whole container.
This is a modified version of the previous pattern. Once the background is filled the animation keeps going, so the background escapes from view. Then it's moved back at the beginning and the animation repeats.
If you remember old radios, this pattern looks like you're playing with the dial. Here, the background image is different, just a small square basically. It gets repeated vertically. Here's the backgournd.
It's a great read. I had the pleasure of reading drafts of the book and giving some inputs (Whoa, giving Doug Crockford input with his JavaScript book! Yeah, I know.) and I can only highly recommend the book. But don't take my word for it, go download the free chapter and decide for yourself.
BTW, the Table of Contents from the previous version of the site is still here. There will be some changes, of course, but overall this is more or less the type of content you can expect from this site.
Some time ago I started this site as a wiki and had it for a while, but the amount of spam I was receiving was just insane. Before deleting the database, I had about 300 Megs!?! of spam content.
So now here's a second chance, relaunching as a wordpress-powered blog. I'm planning to rewrite the content anyway, keeping basically more or less only the topics of the previously identified patterns. The patterns will be static pages (with comments, of course) and in addition I'll use the blog functionality to ... well, blog.
If you spot common patterns in your daily JavaScripting and you want to share, please let me know, email ssttoo at gmail or just comment anywhere on the blog or the pattern pages.
Many thanks to colourlovers and Linsomnia for the color palette and the background pattern.
