Speeding up that first screenful of data

As websites serve up ever-more complex live (un-cacheable) data, generated from more backend data servers and third-party ad servers, popular webpages are becoming ever-slower to load.

Slowly but surely, this is making the web a more frustrating experience. If your website is facing this problem, here is a roadmap for optimizing your website to keep that first screenful of essential data coming up quickly—no matter how many secondary widgets and ads you must also serve up with it.

RegEx Tester

Here's a little regular expression tester that I whipped up to teach myself regexes (and to un-rustify my JavaScript skills).

This runs purely in the client, so it executes the regex expression using your browser's JavaScript engine. It also sports a history list of your test strings and regex expressions, so you can freely experiment with both test strings & the regexes to apply to them.

Interactive character table

This interactive character table provides you with a handy reference table for all those special characters with their own HTML entity names that you can never remember.

But unlike most other character tables out there, this one uses AJAX techniques to provide you with better information as more people use it. It's able to provide you with up-to-date suggestions for related characters ("people who chose X also chose Y"), most popular characters—and it even keeps track of your own recent choices so that you can rely on it over & over to remember your most-used characters.

TV Grid

There are several TV grids out there, all serving up the same data from Tribune Media Services, or perhaps as resold by Schedules Direct. They have a pretty good deal for hobbyists, or for anyone who has a software DVR on their PC: $5 for a two month subscription (or $20/year) to their data feed.

So I just had to try my hand at making a better TV grid that handles large amounts of data—without having to resort to Flash or a Java applet. I think the results were surprisingly good!

Interactive Unicode character table

As I was developing the original character table project above, I discovered the wealth of information that's available directly from the Unicode website, including comprehensive files of all the Unicode blocks & their characters, plus copious notations & cross-references. This new, improved Unicode character table puts all that information in front of you in an interactive fashion so you can easily plug any character into your webpage. Like the original character table, it even keeps track of the most popular characters, "people who chose X also chose Y", etc. This should be a very useful tool.

If you've ever answered "Yes" when a webpage asks you to install foreign fonts, you'll be astonished to discover how many interesting/obscure characters your machine can display!

Mini-MessageBoard

Back in 2000-2002, We developed a hosted message board system called BestMessageBoard. "BMB" was going to compete with the likes of ezboard, InfoPop's hosted boards, etc. Unfortunately we came too late to the game, we never officially launched the service, and it went into hibernation. But the idea of being able to add a forum or comments section to your content page has always been appealing to me, and as I developed these projects (especially the regex tester & the Unicode character table) I figured y'all might want to be able to discuss regex'es & Unicodes as well as just use those tools.

So, after revisiting my old BMB code and thinking about what I liked & didn't like about BMB, I came up with a nice little plug-in message board called Mini-MessageBoard (MMB). Instead of being an all-encompassing separately hosted message board solution, MMB is a compact widget you can plug into any content page, as a single comments thread as in a blog or newspaper site, or as a full-fledged message board complete with separate forums each with many threads.

A bit of MMB's actual code comes from BestMessageBoard. But BMB was my first major web development project, and almost all of MMB's code is new. I think MMB shows a lot more maturity when you peek under the hood! But I did keep BMB's clean, compact look & feel.

I'll be adding a page for MMB itself soon. For now you can see it in action on every other page here, under the "Your Comments" tab.

As I've been building these learning projects this year, I ended up creating some custom controls that no client app should be without (but curiously aren't built into HTML).

Combobox - HTML provides you with a listbox and a dropdown listbox. But there's no combobox: an edit box coupled with a dropdown listbox. In the original character table & later the Unicode character table projects, I wanted to show the user a list of standard fonts to display the characters in—but I also wanted to let them specify any font they wanted to see. So I created a custom combobox widget.

Better tables - The TV Grid project highlighted something I hadn't appreciated before: how underpowered the standard HTML <TABLE> is! I couldn't find any way to make a <TABLE> element keep both its column & row headers visible where they should be as the body of the table scrolls through the data. For example, if you scroll down a table, the column headers will scroll up & disappear. That's just... lame. You should be able to specify that they stay where they are so they're always visible. Same thing happens to the first column (which usually functions as a row header) if you scroll right in a table that's too wide for the table's width. So I created a custom grid control that handles a "table" whose data spans beyond the visible grid, while preventing the column & row headers from scrolling off the grid.

However I can't say I'm pleased with its performance in Firefox. The column & row headers don't move in time with their columns/rows, but instead wait almost a second before scrolling. IE is much more responsive.

03sep2008 - Firefox 3.0 has not eliminated this bottleneck.

Tab view - The basics of building a tabbed view - where groups of data are split into separate <div>s or <iframe>s and selected by a tab—are surprisingly easy using CSS & JavaScript. Of course, turning it into a usable widget with a good API that handles edge cases & browser quirks ends up being 95% of the work—and was a learning experience in itself! But it's an essential tool to have if your page is more of an online application than a document.

You can see the tabview at work on every project page. I also use it when you register to post in MMB.

NOTE: I realize there are several good-looking JavaScript libraries out there that add widgets like these and more. In general, a good, mature framework is invaluable—it saves time, and if there's a good user community the pitfalls can be avoided or a workaround quickly found. But I also like to learn a new technology at as low a level as possible before kicking back with a cushy, high level framework. It makes me feel more confident when I inevitably hit the limits of the framework's capabilities—or get hit by an obscure bug or quirk in its implementation.

Way back in 4th grade, they showed us a movie about life in the year 1999. It promised us a lot of things. I don't remember if that film specifically mentioned jetpacks, but—get this—they did promise us that you could do your shopping right from your very own computer—in your home! Who thinks up these crazy ideas???

Jetpacks do exist today, and if, um, this youtube is to be believed, there's even a kids' version, but they still don't seem to be practical for general use. However, at least one man is keeping the personal jet dream alive.

Or perhaps the coaxial helicopter is a better approach.

Other nifty visions of the future: Disney's Magic Highway USA (1958), and the truly eye-popping blog, Paleo-Future.

29jul2008 - The day is getting closer!