It would seem that it’s often a tall order to build sites in a way that will work without Javascript as the baseline, but instead going straight for the all-singing, all-dancing full-blown AJAX rich-media awesome experience. I tend to think you can have your cake and eat it too. That’s if you’re epically brilliant.

I love all the new bells and whistles we’re able to roll out on sites these days, just using native browser technologies. But bells and whistles shouldn’t come at the expense of a functional base

I do believe I just quoted myself there. Slightly weird… But anyway, if that’s your kind of thing, do have a read and feel free to share your thoughts.

Published at HenryTapia.com – Experiencing and designing things

UPDATE 2: TurnTubelist is now LIVE. Go now and play with it and let us know what you think. We are still tweaking it but we decided to get it up and out there. More details to come soon…

So Webjam 8 was the biggest and best so far by all accounts. There were brilliant presentations and competition was as tough as ever, but it was to Mr Speaker’s and my absolute delight to win first prize for TurnTubelist, a little pet project we’ve been mucking around with in our spare time. Props where due, Mr Speaker (aka Earle Castledine) presented brilliantly as always in his own inimitable style, not to mention his JavaScript prowess in turning a beer-idea into something well cool. When it’s available, I’ll also put up the vid of the presentation hereThe vid is now at the end of this post.

Mr Speaker at Webjam. Photo by Halans

TurnTubelist demo. Photo by Halans

Sneak-peek at TurnTubelist

TurnTubelist is a web application that lets you crossfade YouTube videos and build your own playlists for continual YouTube fun. It currently works entirely on the client-side using HTML, CSS and lots of JavaScript (mainly jQuery). It’s not up yet but we aim to put a beta up on the web really soon.

Earle has come up with some neat wizardry that hooks up to YouTube via their API, does some nice AJAX to search for YouTube vids without interrupting playback and stores your playlists in a cookie. Not to mention, the sliders, keyboard shortcuts and a whole bunch of other stuff.

I worked on the graphics, the user interaction design and got my hands dirty with some jQuery for a lot of the user interface bells and whistles. There’s still a lot of work and testing to be done, but I think it’s just about time to put it out there to get some feedback.

Stay tuned for when we launch the beta, this thing is a hell of a lot of fun to use if I do say so myself.

In the meantime here’s the presentation video:

Published at HenryTapia.com – Experiencing and designing things

Once you start getting a few such libraries going on a site, you can end up with a whole pile of script includes in your header for minor user interface enhancements here and there. This can be a hassle to deploy over various page templates/master pages/etc, particularly if you work with large sites. More importantly, you want to minimise requests to the server if they’re not necessary – it’s been shown that reducing HTTP requests can reduce response times and improve server performance.

There are various ways you can reduce HTTP requests from the front-end (like using CSS sprites to reduce image requests, aggregating CSS and JS files), but the tip I want to share is to not include multiple javascript libraries (eg. jQuery plug-ins) on your pages but having your main JavaScript file load the relevant libraries on demand, as the need arises.

JQuery has a handy method for dynamically loading script files: $.getScript()

But you don’t want to load all libraries on $(document).ready (thus when each page loads), instead you only want a plug-in to load when it’s needed. You can do this by testing for the existence of the relevant element(s) first. You can’t do this (as I found when I looked at Firebug’s console) by saying:

if ($(".tabs")) {
	$.getScript(URL, callback function)
}

This will work in other helper libraries like MooTools (as it’s just short form for document.getElementById), but jQuery will return an array of all matched elements, so even if that array is empty it will never return false. This is actually a good feature of jQuery as you don’t have to test for the existence of anything before applying behaviours.

There’s an easy way to get around this (which wasn’t obvious to me right away). Make sure the array length is greater than zero, of course:

if($(".tabs").length > 0) {
	$.getScript(URL, callback function)
}

So a more complete code snippet would look like:

$(document).ready(function(){
	if($(".tabs").length > 0) {
		$.getScript("/scripts/jQuery.idTabs.js", function(){
			$(".tabs").idTabs();
		});
	}
});

Basically, if you include that snippet in your main JS file, then whenever you have an element with given the class “tabs”, then it will load idTabs.js from the location specified and then initialise Sean’s neat script, and you’ll have yourself nice easy tab behaviour.

Thanks to my co-worker buddy Nick at the Valley for introducing me to the $.getScript feature in jQuery.

Update 23/06/08:

It seems in Firefox 3 and Safari Webkit, objects loaded via $.getScript() aren’t instantly available when called via the callback function. Adding a setTimeout of as little as 100ms seems to get around this like so:

$(document).ready(function(){
	if($(".tabs").length > 0) {
		$.getScript("/scripts/jQuery.idTabs.js", function(){
			setTimeout(function(){
				$(".tabs").idTabs();
			}, 100);
		});
	}
});

Published at HenryTapia.com – Experiencing and designing things

Update: 31/05/2010

I’m no longer using this technique on the site since the redesign – I’m using jQuery Tools Overlay. The examples below will still work but they use the new overlay library.

We interrupt the travelogues to talk about some geeky stuff that’s been going on around these parts.

I’ve recently been using grids of thumbnails to link to Flickr photos as they relate to blog posts (e.g. my previous post). One thing I’ve wanted to do is find a way to show these images without sending viewers over to Flickr and away from my site for fear that they might get lost (if they are navigationally challenged) or simply be pulled into something more interesting and not return. This would be a good excuse to add a little Script.aculo.us and AJAX sweetness to my blog posts.

What I needed was:

• To be able to embed images into blog posts and just link to my Flickr account rather than hosting the photos myself;
• A list of thumbnails for when there are several images to show;
• To avoid encouraging users to go off-site without resorting to pop-ups and such;
• A JavaScript solution, ideally, but I wanted to avoid adding more libraries (e.g. Mootools) and if possible re-use the ones my already rather bloated Wordpress theme already uses (in this case Prototype).

Solution:

Here’s an example of the end product. Click on the thumbnails…

Plaza de las Tres Culturas

Monument at Plaza de las Tres Culturas

Statue of JPII

Basilica de Guadalupe

Obsidian carving

Temple of the Moon at Teotihuacán

At the Temple of the Sun at Teotihuacán

You can hit escape, click the close button or anywhere outside the box to close the overlay. Mouse over the image and click on previous or next to view other images (when part of a series). Even use keyboard shortcuts (P and N). NICE.

For this I had to use my many and varied skills (such as searching on Google, copying and pasting code snippets, checking my Facebook) to come up with the best solution. The end result was shamefully easy and involved:

• Floating the thumbnails and captions in a grid (using a DL element) was a nice reusable way of displaying the thumbnails regardless of container and text size. TJK Design has a good scalable technique for this.
• Modal windows are becoming a good solution for contextual user interactions when used appropriately. They are becoming fairly familiar to users, especially those who use Windows Vista (where they have the annoying tendency to come up every 10 seconds or so), and are quite appropriate for viewing larger images in the context of a gallery.
• Using AJAX to load the images (as I wanted to load an external image rather than load all the images within the page or launch another window).

I found a few great contenders but I settled on the very excellent Lightbox 2 by Lokesh Dhakar, as it did exactly what I needed, looked good and used prototype and script.aculo.us. If I wanted overlays in general for other interactions or content, I would have gone with one of the scripts previously mentioned, or the very cool ModalBox, and if I was using the Mootools JavaScript framework (which would have been ideal, I really like Mootools) I would have used MOOdalBox.

I was pleased to find I didn’t need to really hack any JavaScript out at all in order to get this going, I just had to make a few changes here and there to tie it in with my current Wordpress scheme.

This type of interaction is something you will see more often in sites rich in functionality. I’m currently starting to use these type of techniques at work in order to build user friendly standards-based e-commerce user interfaces. The down side of the ease of using these types of libraries is that it’s very possible there will be a flurry of overuse leading to massive user annoyance. Use wisely…

Published at HenryTapia.com – Experiencing and designing things

Generally speaking, I’ve been one to follow the aforementioned flowchart (ie. just say no), but having been in the role of “The company Flash guy” previously, I was used to sprinkling bits of Flash here and there on various websites I worked on. Being a search-friendly, usability and accessibility sort-of-guy, I generally avoided full Flash site development like the plague, but I’ve found some interesting reads on Flash best practices, for those times you choose to use it.

Geoff at Deconcept discusses Flash and search engines, yes those two things can work together:
A modern approach to Flash SEO

Glass Onion (my employer until a few days ago) have been wise to the technique Geoff mentions for a while, using a little JavaScript called SWFObject, which detects the presence of the Flash plugin and replaces a piece of accessible, search-friendly XHTML with your razzle-dazzle Flash piece. It just so happens to also get around the whole EOLAS mess that forces IE users to click on a Flash piece to activate it.

The very wise Bobby van der Sluis, writing for Adobe explains how to similarly do this using his UFO (Unobtrusive Flash Objects) script, and explains the whole technique with examples in this tutorial:
Developing Flash websites using progressive enhancement

The whole concept of progressive enhancement fascinates me – you get the best of both worlds, the accessibility and search engine friendliness of web standards, coupled with the beauty and enhanced user experience of AJAX, or in this case, Flash.

Along with the accessibility features being built into the Flash plugin by Adobe, other flash enhancements are being written in the form of small scripts like SWFObject and UFO. One I’ve just recently seen and found interesting is:
ASUAL’s SWFAddress

SWFAddress is a small script that sits on top of SWFObject and provides deep linking for Flash websites and applications. In other words it enables the Back, Forward and Reload buttons of the browser and creates unique URLs with page titles that can be sent over email or IM.

SWFAddress involves attaching a JavaScript file (after the SWFObject js file) to the head of the page and then adding a little ActionScript to your Flash movies.

The thing to remember with all these techniques is that they still involve building on a base of HTML. We then enhance this basic accessible version with CSS, JavaScript and Flash. It’s a bit of extra work but it’s worth it for the search engine factor as well as accessibility (not just blind people, think about all those mobile devices out there – they’re not all Flash ready yet). If the budget (or inclination) is not there to take these extra steps, refer back to the Flash Website Flowchart…

Published at HenryTapia.com – Experiencing and designing things