Cafe Bucky

I’ve been working on some dom scripting skills lately. A good book for this is DOM Scripting, by Jeremy Keith.

It’s also given me a chance to address something about the web that’s bugged me for a dozen years. What’s that, you say? It’s links! Stinkin’ links! I sometimes want links to give me a choice of target, or to simply give me more detail.

Here’s an example: sometimes people will write “for reference, see this, this, this, and that. It’s a drag, because you need to hover over every link to see where it will go. It’d be better, to say “for reference, see these”, and have the link present multiple options.

Of course, that sounds like putting a menu anywhere. It’s like that, and more. It makes sense some of the time, when you would want to present multiple options, or explain something in more detail. We might also want our information to be obtained dynamically, so that it’s customized to whatever else we have going on with our current web page.

Here’s some sample text with a link:

Let’s click it:

As you can see, the basic idea is a popup div with arbitrary content. The key to making it work is to give each link a unique id, such as id=”example_1”. We would, of course, add a simple means to close the popup. We can easily add images:

The goal is to enable the popup content from two sources:

• from data embedded in JavaScript when the page is delivered (arrays, objects, etc)
• as return value from an XMLHttpRequest call (plain text, JSON, or XML)

I’ll take a step back and explain a few of the puzzle pieces:

• JavaScript, XHTML, etc. to enable all links (or some subset) on a page to call an event handler
• prototype.js, or some other off-the-shelf package, to handle AJAX calls to get dynamic content
• JSON to handle parsing complex content

There’s quite a bit I am not explaining here. When I put up a demo, it’ll become clearer.

p.s. This post was mostly generated via RedCloth. I’m experimenting with Textile to see if it helps me write an entry faster. You can infer that since I’m using RedCloth, I’ve installed Ruby on Rails. This also points to the fact that I’m probably using TextMate. Yep, it’s all true :-) It’s also true that I’ve resurrected my old Perl CLI package, from circa 1992. Stay tuned.

Jeffrey Zeldman tackles the spinners of Web 2.0, and is eager to get on with Web 3.0

The javascript-driven Pictures On A Page package has been updated (along with the demo) – poap-1.0b4.tgz. It features keyboard commands (‘n’, ‘p’, arrows, ‘s’ for slideshow, ’1′-’9′ to set delay).

POAP is now usable in Windows MSIE. There are some CSS quirks to iron out. It also should be updated to cache image src locations when calling into FlexiPhoto.

First off, Happy New Year!

I’ll be at Macworld SF next week, at least on Tuesday and another day. I don’t have a conference pass, so I’ll check out the exhibits and get to events to meet people. A couple of events are the TWiT broadcast, and Deb Shadovitz’s Party For The People. Those are on Tuesday. The Netter’s Dinner on Thursday looks like fun.

I’d enjoy meeting up with folks next week at MWSF, particularly if they’re into PHP/web-dev stuff, or photo databases, or splitting things up with Linux (what do you like to run on which platform, etc.) I’d also like to talk to folks that have had success with Ruby on Rails – I’ve read why’s (poignant) guide to ruby [1] and some other Ruby docs, and totally get it. Looks like an excellent thing to learn. If you know of a web-dev gig, check out my resume. If it seems like there could be a good fit, let’s meet up this week, or at MWSF.

[1] which is a bizarre bit of writing, sort of like Hunter Thompson writing a book about cooking. But there is good Ruby info in there.

Hey, here’s a wild idea: send me to CES in Las Vegas next week! Having never been to one, I can write with a fresh voice and snap a bunch of pix for days on end. I would need hotel, expenses, and conference fees covered. In return, I can craft a slightly gonzo (not dry, that’s for sure!) report for your publication. I even have some practical experience in this area. So go for it!

As I look around for a gig, I’ve seen a number of Web 2.0ish sites lately. Some of them have been by invite, and some are simply “public beta”. This bit is about some not so good patterns I see in those sites. Perhaps they come from a mad rush to get things out the door, or inexperience. Who knows? I should take the time to note that there are a lot of great ideas and implementations out there. I can think of a couple of sites in particular that get a lot of stuff right, but I can’t talk about them yet.

don’t show me your errors

I just got this error on del.icio.us:

I got that from simply visiting my del.icio.us front page. That’s not supposed to happen. What usually happens for a site out of alpha or beta is that they toss up an error page. Perhaps the error page says “try again in a minute”. You never show a stack trace though. It can be a potential security problem. There’s actually more to that error that’s cropped out of the snap: all sorts of info from the Perl Mason package.

Comment: be sure your development and production machines are set up to report errors in the relevant way – also be sure to turn off debugging code before pushing it to production. You do keep development and production versions of the code separate, right?!

tags are single words

Tags should not have spaces – del.icio.us does tags better than anyone. They keep it simple. They also allow the user to click on common tags in order to add to an input field. This is excellent! It means there’s less chance of having 10 slightly different mispellings of a concept (or konnsep, or consept)

There are a couple of other sites out there that are allowing multi-word tags. Don’t do it man! Put down the whitespace, put your hands in the air, and back away from the complexity and confusion! Now I will note that Technorati gets their tags from elsewhere, and they internally convert spaces to ‘+’.

There are other sites that don’t fare so well. I saved a bookmark on one with the tags “php” and “javascript”. Well, I thought I did. It thought my tag was “php javascript”… then, there was no way to undo that without deleting the bookmark and resubmitting it!

The basic problem is that people are used to typing multiple words without commas, and each word represents a unique tag. del.icio.us has got it nailed. When you get into the “tags can have spaces” mode, you get into more complex code, and you start running into what people expect to have happen, based on their experience elsewhere. It can also bring up the question of “do multiple words in quotes count as one tag?”.

Of course, there’s always counterexamples. Here’s an example of what happens when people expect tags to include spaces. The result isn’t very useful. This is from Flickr:

Got that? Should be “transitstrike”, “redcross”, “hotchocolate”, and “nyc”. This’ll get ya to “red” or “cross”, etc.

massive includes

Cut down on the number of css and javascript include files. I’ve seen sites that have pages that load in more than 20 css and javascript files, and for pages that don’t even have AJAX functionality. It’s bloat. It’s sloppy. It’s a lot of extra hits on the web server, and it’s harder to debug. Clean and consolidate the files that your app depends on, especially if the pages in question are transient. Now for an AJAX app, you can get away with loading more in, because the sheer number of capabilities in one page call for it (making the initial page load worth the wait).

target the 3 main browsers

There are three browsers to worry about: Windows MSIE, Firefox, and Safari. It you get those right, you reach a huge audience. If you target only Windows MSIE, you are part of the problem – you’re forcing people to use something insecure if they want to use your app. If you forget Safari, you are only losing a small percentage of users, but that percentage tends to be the most influential in spreading the word about your site.

Another thing to say about browsers: get the current versions of the main browsers right, and don’t worry as much about the old browsers. That sounds like blasphemy, huh? How dare me! My point is this: old browsers are riddled with security problems, and should not be supported. If you make it easy for people to keep using something that endangers their system, you do them a disservice. It’s better to gently nudge. If your app is compelling, that might be all the reason they need to upgrade.

The followup to the Canned Gallery is Pictures On A Page. You can download from poap-1.0b3.tgz. This is entirely a soft launch, as I haven’t seen it on a Windows box yet. It might make breaking noises on MSIE for all I know.

It’s a simple front end for flipping through photos, and has many keyboard commands. A new feature is the ability to flip between different portfolios (see the demo). Another new one is to vary the slide show delay (in seconds) by using the ’1′ – ’9′ keys.

Have fun. Tweak to taste. Let me know if it works for you. Note that the “FP Collection” Portfolio in the demo is grabbing scaled photos of varying jpeg quality from FlexiPhoto. The other Portfolio is just a static directory of images… no php/db.

Browsershots.org is an interesting service that lets you see how your web page renders on many different browsers. You enter a URL, and it distributes the workload of getting your screenshots to different computers. Those machines have a limited amount of time to act on their tickets (doing the capture, and uploading the results to a central server). The whole project is open source, and you can donate money in order to speed up your results. Very useful!