Javascript and the Web

Tables

If you're one of those crazy people that actually use tables for tabular data, as opposed to say laying out a website or putting image borders on a photograph, then there are some very cool tricks you can do with tables. I'll try to demonstrate a few of them here (and of course credit the original authors)

First off if you have a table display a lot of information in a lot of columns(whether its hotel rooms, performance benchmarks, web logs, or anything), you should save the visitor the trouble of holding a ruler/piece of paper up to the screen. Just provide them with instead. Here is an example I did.

Secondly if you contain numeric data in your table that visitors may want to order (e.g. most page hits, cheapest hotel, most expensive powerbook) then its a cinch to make the table sortable in javascript. Save your visitors a round trip to the server while you change "ORDER BY desc " in your SQL. No need for it here. The javascript sortable tables will do it for you. Read about it here on kryogenix.orgs website

Last and probably least, if your table doesn't need to be sortable, and doesn't need a ruler, consider zebra stripes they look nice and help people read across a table. Again, its just a simple bit of javascript to include. Read about it on A list apart.

Links and Previews

Visitors should always know where they are going. Whether its to another site, to a page within your site. You should always give your link text some meaning, and always have a title element on your links saying exactly whats happening. Try to get out of the habit of saying thinks like "Click here to see pictures of me in Prague". Its quite tricky at first, but soon you'll get into the habit of saying more meaningful things like "Here are the photos of me in prague" Is there a difference? Yes. Screen Readers say so, and so does Google.

Good question Charlie, what I meant to talk about here was how you can use Javascript to let people know where they are going, and what they are going to see there. So firstly, you should always always let your user know when they are clicking on a download link. We all forget to do it somethings, so Chris Campbell wrote a script to make sure that we don't even have to remember!. Preview Your Links with Ubobtrusive Javascript Just include one script, and every time you link to a download, there will be a pic of a little pdf() icon or word icon() right beside it. By the way, The term Unobtrusive Javascript is used to distuingish between this crap and proper use of the programming language.

Another cool thing you can do is provide a thumbnail preview of images whilst at the same time maintaining a lightweight html page. This script will allow you to display thumbnails on request from the user rather than just throwing hundreds of thumbnails at them. Read Dynamics Thumbnails with DOM Scripting for more information.

That just about completes this round up. One more thing that deserves multiple mentions is a progress bar for file storage. I would really really like to see this implemented on Minds Storage. Here is a demo page for file upload progress bars. I would also like to see GMail get this going on their Sending Mail screen.

Thats all I can think of for now, if there are any super cool Javascript scripts that you think make the web a better place, please post links to them in the comments. In other news Planet Minds has just gotten bigger