• Home Page
• Computer Blog
• Chess Blog
• Exercise & Diet Blog
• Theology Blog
• Islamic Terrorism Blog
• Contact Us

Radio on the TV

I was in the illustrious surroundings of Rissington last week to deliver a DOM Scripting workshop. My good friend Ann was in attendance. During the latter part of the workshop — which was deliberately more loosely structured than the rest of the day — she pointed me to a really lovely bit of JavaScript form enhancement.

Take a look at the UK and Ireland TV and radio listings on Yahoo. See that search form in the upper right corner? It’s using the standard design pattern of allowing you to specify exactly where you’re searching. But unlike most implementations, this one is built on a rock-solid foundation of semantic markup.

Steve Marshall has the lowdown. Under the hood the form is using radio buttons for choosing where to search. Then, using a combination of JavaScript and CSS, this default representation is augmented to look and behave as desired. Switch off JavaScript and you can still use the search form perfectly well.

What impresses me about this isn’t so much the code (although I’m sure it’s top-notch), it’s the thinking behind the implementation: start with solid semantic markup with good ol’ fashioned form elements for interaction; then think about how it can be enhanced. Nice one, Steve.

Comprehension

Don’t tell Paul but I sometimes listen to the Boagworld podcast. I’m sharing this dark secret with you because recently the podcast featured a good interview with Christian Heilmann.

Christian talks about best and worst practices in writing JavaScript today. It’s well worth a listen.

But when the subject turns to Object Oriented Programming, Christian makes a pointed reference:

And there’s not much magic to it. I mean I get annoyed when I see JavaScript guys going on stage and saying like: Well guys, this is a function and when it’s an object it’s a method and why should I know this? Well you should know this because you need to communicate with other developers as well sooner or later.

Um… that would be me. In my books, presentations and workshops I’ve often explained methods and properties as being like functions and variables, just within the scope of an object (hence the dot syntax). But I never, ever said And why should I know this?

What I was trying to do was explain objects using reference points that I think most people will understand. I know that for me personally I had a lightbulb moment when I grokked methods and properties as being like functions and variables. The whole point of explaining this terminology is precisely so that people can communicate with other developers. As Christian says:

And these people speak that lingo and rather than you having to explain yourself for 15 minutes you could communicate in 3 minutes.

Exactly! That’s why I think it’s important that I take the time to at least explain the terminology of objects (i.e. methods and properties) even if I don’t delve into the technical details. My aim, like Christian, is to encourage better understanding and communication.

Evidently Christian takes issue with my teaching techniques. That’s fine. But I wish he wouldn’t put words in my mouth by claiming that I’m telling people that they shouldn’t have to learn the terminology around JavaScript objects.

Then again… maybe his comment wasn’t aimed at me at all and there is some other conference speaker out there who is going around telling people that they don’t have to know what the words “method” and “property” mean. If that’s true, then I agree with Christian. Such exhortations are not useful. But in lieu of any source for Christian’s imaginings of what he thinks he heard, I’ll take the egotistical paranoid route and assume he’s talking about me.

Anyway, I guess I’ll have to make sure from now on that I’m clearer about what I’m saying. More importantly, I’ll have to make sure that I’m clear on what I’m not saying.

ABBRacadabra

In Chapter 8 of the DOM Scripting book I’ve got a little script that looks through the contents of an HTML document, finds any instances of the abbr element and then constructs a definition list with the information contained within them. Then there’s a section in the chapter called A browser bomb in which I explain how the script needs to be forked because Internet Explorer refuses to recognise the abbr element—part of a longstanding spat with Netscape. This means not only that you can’t do any scripting on abbreviations, you can’t style them either.

But now it turns out that Internet Explorer has an interesting quirk. If you write:

document.createElement("abbr");

…suddenly the browser recognises the element and you are free to script and style abbreviations (you don’t even need to append that newly-created element to the document). This applies to any elements that IE doesn’t recognise, which could be very hand in migrating to HTML5.

It doesn’t qualify as an error so I’m not going to add it to the errata but I sure wish I had known about this when I was writing the book.

Bulletproof Ajax workshop in Brighton

My first public appearance in 2008 is coming up in two weeks. I’ll be spending a day delivering a Bulletproof Ajax workshop. In case you couldn’t tell from the title, it’s based on the book of the same name (wot I wrote). The workshop will be held in the cosy and comfy environs of the Clearleft office building in the heart of Brighton.

This is an entry-level introduction to the hows and whys of implementing Ajax. I’ve given this workshop before and it’s always gone smoothly though I think I might update some of the material; maybe ditch some of the introductory DOM Scripting stuff and spend more time on implementation and design challenges. I’d love to do more hands-on stuff and get people writing stuff but I find this a real challenge when it comes to code (it’s a lot easier with something simple like microformats). I’d be interested in hearing any ideas for making this workshop more interactive.

If you can convince your boss to part with the asking price of £395 per person, maybe I’ll see you on January 25th and we can climb that Ajax learning curve together.

2007 CFeMmys Open

CFLib gets a dose of fresh air…

Another Massive Apple Security Update

Taking feeds out of our web search results

How to Use Your Web Analytics Software to Improve Your Website

Important Spry/AIR Resource

Design Bookmarklet

Model-Glue Cookbook

New & Improved: ePO 4.0 a “Must Have” for Integrated Security

eWeek: RoR2 Catches Up With ColdFusion Development Speed

Semantic On-Page Tabs

Create links to different topics on one page. Since all of the information is included on the same page, it will still be displayed if JavaScript is turned off. Easy to set-up.

Redirect to Last Page Visited

This script will redirect the user to the page where he left your site at the last visit. Redirect is only performed if the user enters the main page of your site from any other site. If the user enters your site by direct link from any search engine or another site, the redirect is not performed allowing the user to see the appropriate content.

jQuery Crash Course

For those who would like to learn more about jQuery, one of the more popular JavaScript libraries, here’s a crash course written with code-savvy Web designers in mind.

Toggle Additional Info

Add this snippet to your forms when you need additional information but don’t want to display the input boxes unless it is necessary. Easy to implement and expand.

Rollover Text - Hide and Show

Use this script to provide tooltips, FAQs, and other information. The tip is shown when the mouse rolls over the title. You can use any valid HTML element, even links.

renderSelectOptions

This script grabs all of the select boxes on the page and renders them in divs at the bottom. Useful when you need to copy options from a select box.

Verify/Notify for Duplicate Fields

When requesting certain information, such as an e-mail address or a password, it’s usually best to have the user enter the information twice in order to verify that a typing error did not occur. This script will do just that, and will provide a message for your user that it has been done.

Autofill and Select Form Fields

When testing forms you don’t need to keep filling in the different fields. Use this function to automatically fill-in input blocks and select values in the form for you. Very easy to use.

Page Viewer

Use this script to load Web pages inside an iframe. Easy to set-up. Everything is adjustable to fit your Web site.

Agree Before Posting

Sometimes you may need to make sure your visitors agree to specific terms before submitting their comments. This script will disable the input fields until they agree to your terms. Easily adaptable.

Outsmart Google’s Toolbar

Use this script to eliminate the yellow-colored fields in your forms caused by Google’s AutoFill feature. Also provides a bit of info for your visitors.

Daily Welcome Cookie

This script sets a cookie, with an alert window that only comes up the first time you visit the page each day. Good for calling attention to daily specials and news updates. Can be configured to work in other ways also.

Find All Elements By Class

A function that returns an array of elements based on DOM element, tag, and class name. For instance, getElementsByClassName(document, ‘tr’, ‘info’) will return an array of all “tr” tags under the document node having the “info” class.

Rainbow Link on mouseOver

Implement this script into your Web pages to make all links change color on mouseover event. Colors can easily be added and changed.

Local Search Box

This script can be used to create a dropdown search box for your Web site, just like we use on our forums. You can also create dropdown search forms, hint boxes, and menus.

@media Ajax, day 2

The second day of @media Ajax certainly kicked things up a notch. While day one covered a lot of the day-to-day questions of JavaScript that I could relate to, day two was a trip to the future.

The tone was set in an opening keynote by Brendan Eich, the creator of JavaScript, giving us the lowdown on JavaScript 2. I last saw Brendan speak at XTech 2006 in Amsterdam. Back then he was telling us what was coming; here he was showing us what’s arrived. I understood about 50% of what he showed us, which I thought reflected well on Brendan’s explanatory prowess.

John Resig, creator of jQuery, gave a rundown of his library, focusing on prototyping. By taking questions throughout—and responding to all of them thoroughly—it was clear that he wasn’t giving a canned demo; he could have happily talked for an hour about any aspect of coding with jQuery. A lot of people in the room were already using jQuery and, by the time John finished, I suspect a lot more are going to investigate it. I picked up some nifty tips and tricks for myself.

Dan took to the stage and invited us on a mind-bending journey into the depths of metaprogramming. I always knew that JavaScript was a very flexible and adaptable language but Dan really showed just how malleable it could be. But, as Dan pointed out, the best way to really get your head around this stuff is to code it for yourself.

Alex Russell of Dojo fame was up next but instead of just diving into his library, he painted a much broader picture. From my own conversations with Alex, I had a feeling that he would be a great speaker and he was. He began by applying Maslow’s hierarchy of needs to applications and took us forward in time to a Web of the future that’s being hacked together today. I didn’t agree with everything he had to say but boy, did I ever enjoy listening to him say it!

Then it was the turn of Douglas Crockford who had earlier been compared to both Yoda and Gandalf by Brendan. Douglas covered some of the same territory as Dan, demonstrating the flexibility of JavaScript as well as showing its weaknesses. He also expressed his concerns about the direction that JavaScript 2 is headed.

All of that set the scene nicely for a lively closing panel.

As always, I really enjoyed moderating but I definitely felt a bit of my depth. The panel consisted of:

• Brendan Eich,
• Douglas Crockford,
• Alex Russell and
• Stuart Langridge.

They were a little reticent at first but once the subject matter got on to the burning issues like security, the conversation took off. Highlights included Alex bitchslapping Yahoo for not being truly open source with YUI and Douglas declaring that CSS is inherently shit.

All in all, I think it was a good way to wrap up a really good conference. I was very impressed with the level of presentations and the audience interaction. The two-day schedule was clearly very well thought-out. Perhaps the Ajaxians should have been on day two and John could have been on day one but that’s a minor quibble. Overall, @media Ajax was pretty darn great.