Sitepoint’s latest title is aimed at the average Front-end developer/designer and promises to teach her the intricate workings of the jQuery library. In fact, if we’re to go by the title, it promises to take her from “novice to ninja”. Let me be honest, I was originally skeptical of the book, but upon finding out that it was co-authored by the esteemed mrspeaker my mind was quickly changed.

As with any good book, the first chapter outlines what the subject matter is. The authors talk about jQuery itself and touch briefly on the DOM. You have to remember that this book is aimed at developers or designers that don’t really know that much about JavaScript, the DOM, or jQuery, so the book is accordingly written in such a way that it won’t confuse the pants off your typical photshop-wizz turned HTML/CSS guy.

So if you know JavaScript well, you might not enjoy this book — it will probably annoy you, simply because it doesn’t go into a huge amount of detail on what’s happening behind the scenes. But, for those that it’s aimed at, I think it does a pretty good job.

One thing that we have a problem with, in the jQuery community bubble, is the overzealous generation of redundant nomenclature. This book doesn’t fall short on this front. jQuery’s methods are referred to as “actions”.

The second chapter covers the most basic usages of jQuery, selecting stuff and doing stuff. It’s all innocent and simple — I like it. To keep the reader focused the authors have slipped in “A few tricks”. Among them is the popular add-a-class-on-mouseover, remove-it-on-mouseout.

Nearing the end of chapter two, the book has the following to say about the hover method:

I’m off to University in just over a month and I thought it’d be a good idea to get a head start, academically. I’ve applied to study Computer Science, and, as only sense dictates, the first language we touch upon will be Java, the big brother of JavaScript… kidding; I can hear Crockford screaming! So, with all this spare time I’ve decided to learn Java, or, at least begin on the journey!

I downloaded Eclipse and the “Java runtime”, only, of course, to find out that I already had about 10 different Java runtimes already installed. I fired everything up and then stopped; I had absolutely no idea what to create… What can I say? The command-line doesn’t excite me! Yes, I know pretty much anything can be created with Java, even hardware-accelerated games, but all the beginner-tutorials out there only show you the monotonous command-line drivel.

I also purchased a book recommended by the University; I believe it’s the one we’ll be learning from in the first year. It’s called “Objects first with Java” and goes into a tremendous amount of (unnecessary?) detail; I haven’t really got past the first few pages. I’ll tell you something about objects; you’re never going to learn squat about them from tutorials or books. Yeh sure, you’ll get an idea about what they are but you’ll never appreciate the abstraction provided by OO language until you dive in.

Now, don’t get me wrong about this whole University thing; I am looking forward to the “experience” but I’m not exactly overly-excited about the impending course material. I haven’t even begun and I’m already finding it dull; I’ve no doubt that I’ll be pleasantly surprised though… I’m sure the first lecture will prove enthralling!

I’ll be honest with you; I’m only going to University because “that’s what one does after school”. Heck, most people go to Uni for exactly the same reason (they just don’t know it); it’s what’s expected of us. You can say what you want about it but essentially, University is yet another device used to extend and perpetuate the status-quo; i.e. us working and the government getting richer. I just can’t wait; out of uni with a load of debts and then into the monotony of a “career”. Eventually I’ll have additional burdens that will require monetary attention and before you know it I’ll be where most of the British upper-middle-class finds itself, paying off debts… living the dream!

Isn’t it amazing, I haven’t experienced any of this impending fate yet and I already have the capacity to be utterly dismissive and totally negative about it all! Here’s hoping the grass is greener!

I’ve got a great idea; let’s annoy the hell out of 75% of IE6 users by showing them a “you should upgrade” message, even though none of them have the actual capability to upgrade! Seriously, what a superb idea! It’s like having a “fly to work” sign instead of a train station, when everyone knows that only 25% of humans can actually fly!

Yes, a recent survey by Digg revealed that only one quarter of all IE6 users have the power to change. This minority is made up of two groups: those that simply don’t see a need to upgrade and those that prefer IE6 to other browsers.

So, without sounding too pessimistic, trying to get IE6 users to upgrade is almost entirely pointless! Your efforts would be better spent teaching 75% of humankind how to fly!

I haven’t really got a good idea; in fact, I’m equally as clueless as most of you… How on earth are we going to solve the IE problem, or, rather the “Microsoft” problem?

Have you ever read about that world record that was set when a bunch of people somewhere jumped up at exactly the same time? Speculation has it that the earth was temporarily knocked off its axis, which, consequently saved the earth from a massive meteor strike!? Well I haven’t, but I do have a similar idea that is almost guaranteed to work.

Imagine, if every single website on earth suddenly broke in IE – users of IE would be utterly confused and annoyed – there would be an epic stream of complaints battering every IT department this side of the sun! Eventually it would result in the demise of IE (all versions). So you see, it is possible! Together we can bring down IE, it just takes a tad of collaboration!

Okay, this really annoys me sometimes; you read a blog post or article, it was interesting, you scroll to the comments section looking for an interesting discussion regarding the content of the post but all you find is countless grammatical or technical corrections contributed by “helpful” readers!

For me, the comments section of a blog post is where users can contribute thoughts concerning the material covered in the post; not spelling mistakes, or a complaint about the site’s content. Apparently not everyone feels this way, because whenever I go to read the comments there’s always a few egotistical children leaving comments about the damn grammar!

Now, I’ve probably done it a couple of times in the past myself but I’ve stopped – I eventually realised I was only doing it to gratify my own needs; I wasn’t really interested in the grammatical correctness of any post – my ego just required a frequent pampering, apparently in the form of grammatical superiority.

Sometimes it may be appropriate to point out these mistakes; if the mistake will cause obvious grief to other readers who take heed from the post then by all means contribute your correction, but if it’s a tiny, barely-noticeable mistake then please keep it to yourself… or, if you feel your alter-ego “Grammar Nazi” kicking in then, by all means, send the owner of the site an angry email.

I have a secret; I delete non-spam comments sometimes! Yes, it’s true! Do you know why? Because this is my website and as such I feel it my responsibility to police the content of it – if a comment is defamatory or just downright rude then I’ll delete it, or if I feel the comment adds absolutely nothing to the post then I’ll delete it. For example, if your comment contains just one word like “Wow!” or “First!” or “Interesting!” then it’ll probably be deleted; why are you wasting your time writing such drivel?

I rarely have a problem though; this is a tiny blog with a tiny readership; something I’ve come to appreciate greatly!

I do feel sorry for the guys at Smashing Magazine! With over 100,000 subscribers they really do get some crap appearing in their comments!

Yes, finally I’ve joined the masses on Github and I plan to sporadically share special things on there, starting with the following recent developments:

“literalHTML”

A tiny but powerful modification allowing you to specify HTML/DOM structures inline in your JavaScript code, an example:

var className = 'active';
var myMenu = |
    <ul>
        <li class="{className}">Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
|;
 
// myMenu is now a DOM object:
myMenu.nodeName; // "ul"
myMenu.childNodes; // [ <li.active>, <li>, <li> ]
 
// Do something:
jQuery('body').append(myMenu);

View here »

“getDescendants”

Something I required for a project; a function to gather all descendant-elements down until a certain depth is reached:

<div>
    <ul>
        <li>Something <strong>interesting</strong></li>
    </ul>
    <p>Something <span>else</span></p>
</div>

Examples:

var div = document.getElementsByTagName('div')[0];
getDescendants(div, 1); // -> [ <ul>, <p> ]
                        // i.e. children
getDescendants(div, 2); // -> [ <ul>, <p>, <li>, <span> ]
                        // i.e. children + grandchildren
getDescendants(div, 3); // -> [ <ul>, <p>, <li>, <span>, <strong> ]
                        // i.e. children + grandchildren + great-grandchildren

View here »

I’ll hopefully be adding to the repositroy with new exciting discoveries in the near future; visit my profile and “follow me” to stay updated!

Not too long ago I acquired a copy of “Learning jQuery 1.3“, a recently released ‘PACKT’ publication written by Karl Swedberg and Jonathan Chaffer. The only books I’ve previously owned relating to web development were not framework/library specific so reading this one was a totally new experience.

The book is mostly aimed at beginners but does cover some more advanced topics so may be of interest to the more savvy web designer or developer. Actually, anyone wanting a solid jQuery reference would benefit from this book!

I’d guess that one of the troubles with writing a book just about a specific topic is that you’re limited to its confines. This book does not start by discussing the DOM API or JavaScript itself, but instead it begins by first explaining the intent of jQuery and then by detailing the jQuery wrapper function and how you can utilise the power of CSS within this magical dollar symbol. jQuery is wonderful but, in my opinion, without a solid foundation in JavaScript you can never be as good as you could be.

The authors did a wonderful job and I don’t think anyone could ask for a better book about jQuery but I cannot help but raise the question of whether or not jQuery is the practical place to start.

I have this image in my head of some hotshot interface designer longing for some hotshot Ajax’y coolness to suit his ego; he wanders into Waterstones and picks up a copy of this jQuery book he’d heard of, he takes it home, and willingly begins on the long journey of learning “jQuery”. If the world were what I wanted, then this guy would soon realise the error of his ways and how he should have learnt JavaScript before venturing into it’s squeeky clean abstractions; but, unfortunately, the world is not like that; the reality is more upsetting – not only will this designer never realise the error of his ways but he’ll live on, writing jQuery everyday, creating bouncy effects and “jQueryfied” web interfaces. Why is that a problem? – Because he will never be able to program in JavaScript he’ll lack the fundamental knowledge that would otherwise ensure him complete cross-browser and timeless sanity!

When do you know you’ve gone crazy? – When you’re more impressed by a tool than what you can create with it!

I reckon the great majority of people in this industry would unconditionally subscribe to the conception that an Apple Mac makes you more productive. This little white magical box somehow enhances your ability to produce amazing things, right? Oh and let’s not forget all the other Apple stuff. The iPhone, Ipod, iMac, MacBook, Mac mini – they’re all magical creations tht enhance our existence!

I guess it’s all down to the modern-day infatuation with shiny new technology coupled with manipulative marketeers operating you like a puppet! I mean, seriously, do any of you think that Apple, the corporation, cares a smidge about how productive you are or how innovative your creations are? They don’t! They really don’t give a damn!

Don’t get me wrong, I love new technology – I think it’s great. But I’m not going to consign to this crazed kind of addiction that so many people have. No, I don’t need that new MacBook, I’m perfectly happy with my three year old PC running XP! And speaking of Operating Systems, no! I don’t need Vista, OSX or Windows 7 – I can manage quite happily without all that!

Real web designers use Macs!

Oh I see; all this time I was under the delusion that one’s credibility in this industry was platform agnostic but obviously I’m totally wrong. What was I thinking!? Of course, I see it now, the extent to which a developer is good at his/her job can be solely measured by the software and hardware they use! How could I have ever thought otherwise!?

Grow up! This industry isn’t about my hammer being better than yours; it’s about what I create with my hammer, and what you create with yours! Like the old saying goes "A bad workman blames his tools" – actually, I’d take it further: "A bad workman feels so passionately about his tools that he values them more than his actual work!"

I actually find this quite comical:

There is absolutely no reason in the world you should use anything other than Keynote. Period. I don’t care if you’re on a PC — if you’re serious about speaking, buy a MacBook just for presenting. There is an astounding difference (not an exaggeration) between the tools, canvas placement, typographic control, and overall aesthetics in Keynote compared to PowerPoint. Once you become familiar with Keynote, which isn’t an arduous process, the productivity and just plain enjoyment you’ll experience using it over PowerPoint is completely worth any switching costs.

Obviously Cameron Moll feels that to succeed as a speaker you MUST BUY A MACBOOK!

I’m going to stop now, I feel I may explode!

If you suck at something on a PC you will also suck at it on a Mac!

PS, congratulations Apple, you’ve actually made me want to hold on to my PC out of protest!

jQuery, MooTools, Prototype, YUI and Dojo all have at least one thing in common; they’re all partial abstractions of JavaScript, the “official” client-side programming language. Each of these frameworks enables further abstraction whether it is through “plugins”, “extensions” or “classes”. So where does the abstraction end? Or rather, where should it end?

The point in abstraction is to make something simpler by factoring out details. If we take jQuery for example, it abstracts away cross-browser pains; it essentially covers up the difficulties. This can make for faster development but can sometimes result in an abstraction leak.

The law of Leaky Abstractions, a term coined by Joel Spolsky, states that “All non-trivial abstractions, to some degree, are leaky”. A “leak” occurs when an abstraction breaks and you have to resort to a lower level abstraction to solve the problem. So, if jQuery fails to provide cross-browser sanity in a particular situation then you’re left to battle it via “pure” JavaScript (a lower level abstraction).

This highlights a common controversy: is it necessary to know JavaScript at all? Are you comfortable operating on a wafer-thin high-level abstraction like jQuery, MooTools, Prototype or any other framework? What’s your course of action when your beloved abstraction leaks?

How low can you go?

So, given that all abstractions are, to some extent, leaky, how low should you go? I think this can be answered with another question, how low can you go given the constraints of the platform? With our jQuery example the platform is the browser; this piece of software does not offer anything lower than JavaScript, so surely that’s as far as you should go!

Similarly, with CSS frameworks like BlueprintCSS and 960gs you should go as low as you can, which, in this situation is CSS itself.

Using frameworks is absolutely fine as long as you know the technology on which the abstraction was formed. If you want to use jQuery, learn JavaScript; if you want to use a CSS framework then learn CSS!

This get’s more complicated in the area of software engineering because the platform allows you to go very low. Should all .NET developers know how to write C++, should all C++ programmers have a strong grasp on Assembly? I can go on forever…

It’s a compromise!

If we define “control” as a reasonable level of supervision over a piece of functionality (whether it’s a form validator or an image cropper) then it has a negative correlation with abstraction; in other words, the higher the level of abstraction, the less control you have.

Recently I discussed the benefits of creating a jQuery plugin but I failed to point out the obvious flaw: by creating a plugin or extension for any framework you’re raising the level of abstraction even further covering up the details), thereby decreasing the level of control someone has over it. Fortunately, because it’s JavaScript, we never really lose control; we can change the plugin source at any time. But the end user of your plugin probably won’t know JavaScript to the same extent as you. The level of control they have is dictated by the level of customisation you offer with the plugin; but, the more customisation you offer, the bigger in size the plugin will be. Therefore the entire process is a compromise between control, simplicity, and most importantly, speed!

The higher the level of abstraction the slower it will be. Higher abstractions may speed up development time but the processing time will usually be longer.

document.getElementById(‘elem’) will always be faster than $(‘#elem’)!

Food for thought…

I was originally quite sceptical about the usefulness of this "technology" but I’ve come to realize where its true value lies, here’s an overview:

The first thing to note about Ubiquity is that it’s not a new technology; it’s a platform which makes use of current technology. Technically it’s a "Firefox addon" and that’s all it will ever be to the end user, but for us it is a usable platform on which we can develop specialised commands tailored to the user.

The reasons I was initially sceptical about Ubiquity:

• It’s not new; it takes pre-programmed commands and executes pre-programmed functionality, nothing special
• I heard about it a while ago (like 3-4 months ago) but didn’t hear of it again until 3 days ago.
• I could make something similar with a GreaseMonkey script. (I eventually realized I was totally wrong!)

Even after my subsequent realisation I wouldn’t say it’s a very revolutionary piece of software; essentially it’s just as I stated in the first bullet point, a pre-programmed interface with a limited comprehension (limited in that it only understands pre-programmed commands).

What can Ubiquity do?

• It can do anything!
• … with certain obvious limitations!

Developing for Ubiquity

This is so easy; in fact, you should go and download Ubiquity right now and try it out!

Here’s a quick tutorial; we’re going to create an MDC (Mozilla Developer Center) search command so we can search on the fly (scroll down to see the end result):

I thought I’d explore a more conventional and structured approach to the traditional rant. So here goes, a few things that bug me (quite a lot) when surfing the web:

Before I begin, please note that these opinions are my own – I hope I don’t upset anyone!

Unconventional navigation

Navigation is probably the most essential aspect of a website, it’s layout and usability is of absolute importance and must not be mistook for "just another element". Conventions are there for a reason; so that people know what the hell to do when landing on your homepage. Don’t try and be clever!

People always try and be too clever by extending they’re company’s tagline or motto into the navigation. Here are some examples of BAD NAVIGATION:

• PURPOSE | TRUST | PRIDE | RESPONSIBILITY | SCALE | FUN
• WHAT WE DO | WHAT WE’VE DONE | WHAT WE’RE THINKING | WHO WE ARE
• SURFACE | SUBSTANCE | SPEAK

While you may be able to decipher the meaning behind each navigation item they are definitely not conventional; Mr and Mrs Average wouldn’t find it very easy! I imagine navigating through websites with naming like that shown above would be easiest for children or people who’ve never touched the internet; it’s these people who have no preconceptions about how the internet works and what the conventions are.

Here’s a "translated" version of the above examples:

• ABOUT US | PORTFOLIO | NEWS | POLICIES | JOBS | GAMES
• SERVICES | PORTFOLIO | BLOG | ABOUT US
• HOMEPAGE | ARTICLES | FORUM

The difference between the two versions is clear; it only takes an impulsive millisecond to understand the latter set while it takes a great deal longer to understand the original set!

This isn’t just conversation; I genuinely get bugged by this kind of thing – people trying to be too clever, especially when there are conventions in place.

Over responsiveness

First rule of engagement: If you’re going to give something a hover state then it should be clickable! A hover state of any type, whether it’s a change in colour or underlined text, insinuates that the element can be clicked. The only time I find this acceptable is with tabular data, it’s useful when an entire row is highlighted because it allows you to see corresponding columns clearly. Most other scenarios bug the hell out of me!

Also, I hate when a website attempts to anticipate what I’m going to do. An example of this would be when buttons trigger events onMouseDown instead of onClick.

Functionless Controls

These are normally a result of a lack of degradability. When something looks like a button and I click it and nothing happens I get annoyed (and I’d imagine most people would too!). So, please make sure JavaScript controls are not visible when JavaScript is not enabled.

Ego Inflation Badges

What’s an ego inflation badge? – Well, here are some examples:

Feedburner stats will soon be seen in the same light as those hideous web counter LCD displays you used to find in website footers. Yes, they’re popular now but soon everyone will realize just how tacky they are. Yes, they can be integrated quite nicely into the design of a site but that doesn’t mean they’re any less egotistical.

As for the valid XHTML/CSS nonsense, I cannot stand them! Validation means nothing, it is only a means to crush bugs and any browser issues you may be experiencing, beyond that it’s just a totally unnecessary formality. If you have one of those ‘valid…’ badges a the bottom of your site, get rid of it! I used to have one ages ago but I soon came to realize how utterly pointless they are. If you do insist on having one then at least make sure your pages are actually valid! (otherwise it’s like you going to an anti-fur rally wearing a fox scarf!)

Donate!

I hate exiting the supermarket and seeing an old guy with a charity tin muttering words of plead right in my face! But I manage to walk past without punching him in the face because I say to myself, "It’s for charity; a noble cause". But I definitely draw the line when it’s not for charity – i.e. those massive Paypal donate buttons on personal websites. I’m totally okay with it on open-source projects but when it’s on somebody’s personal portfolio or blog I get annoyed. Having a ‘donate’ button (of any type) on your personal website suggests three things:

• "I’m so crap at my job that I can’t get money by conventional means"
• "I think I’ve helped you so much through my witty blog posts that you should pay me!"
• "This new ‘donate’ button will make me look more professional!"

Would Jeff Atwood suddenly start demanding money to continue blogging? No! So you shouldn’t either!