.parents() reverses a jQuery collection

The title just about says it all. Not a big deal, until you try to filter by :even or :odd or generally try to get at specific items in your collection and they’re in the reverse order from the way they are your markup. An easy fix though, because javascript arrays have a reverse method. You can make your own jquery reverse() method:

$.fn.reverse = [].reverse;

which can be called on a jQuery collection just like any other jQuery method!

Tags: jquery

WTF is that [front-end dev thing everyone’s talking about]?

The number of front-end dev tools, frameworks, libraries, testing suites, and so on, seems to be rapidly increasing. At an insane rate. So insane, it’s hard to keep up. And, should you attempt to keep up, a tutorial on one such tool will mention at least two others…

bq. “Oh, phantom.js…that sounds cool. Okay…step one, install with Homebrew. Homebrew, wtf is that!?”

And so on. So this post is to keep a personal reference of all these tools as I learn what they are, with a quick definition and some links. I’ll add more as I go.

Bower
Bower, made by Twitter, claims to be “a package manager for the web”. So, much like other package managers, it allows you to find, download, and install packages via the command line. However, packages can be anything…images, js, css. Nice intro tutorial here.
Homebrew
Homebrew is a package manager for Mac. That means, it is a command-line utility that will download and install software on your Mac.
Node (Node.js)
The definition on the node.js site isn’t super helpful. Essentially, node.js is a server-side implementation of JavaScript. With node.js, you can create an HTTP server (and do a lot of other things) in JavaScript.
npm (Node Package Manager)
Nodejitsu has a nice definition. npm is a tool for finding and installing node modules.
package manager
A package manager is a tool/utility that helps you find, download, and install programs (packages). Instead of having to Google something, find the latest version, download it, unzip it, and put it in the right directory, only to find it requires *another* piece of software, a package manager takes care of all that. Good explanation here of package managers.
Phantom.js
[Phantom.js](http://phantomjs.org/) is basically Webkit without the graphical browser (the “head”, thus it’s called a “headless Webkit”). It allows you to test javascript code and even browser rendering from the command line. A good starter tutorial here.

There is no fastest javascript loop

I was all jazzed about speeding up my javascript loops by:

  1. Caching the array lengths
  2. Decrementing instead of incrementing

…as described in various places, including in Even Faster Websites.

However just about the only thing that can be firmly established is that for...in loops suck big time. Everything else seems to vary with the particular loop and the particular browser. A couple of benchmark tests here and here. For example, decrementing seems to be faster only in Safari!

Bubbling Be Damned on iOS

After experiencing some unexpected behavior (or rather lack thereof) on a mobile web app I’ve been working on, I was poking around stack overflow and came across an interesting tidbit that explained the problem:

In iOS Safari, click events don’t bubble up as they do in any other browser, unless they are attached to links or inputs.

So, this pretty much sucks. I actually was binding to a link element, but I was also using jQuery mobile, which inserted a couple of spans inside the link elements, and those little buggers did not pass the click even up the DOM tree.

Complete explanation on quirksmode.org, and a workaround. I didn’t entirely understand why the workaround should, er, work, but I’m going to try it out.

Tags: javascript ios

Javascript objects are pretty chill, unless they’re undefined

I’ve made some (probably rookie) javascript mistakes recently where I’ve assumed the presence of an object, tried to access a property of said object. Like:
var total = cart.total
Or even assumed the presence of a property, and tried to access a property of that property. Like:
var adults = cart.numTravelers.adults
In these cases, if cart or cart.numTravelers is undefined, you’ve got a fatal problem on your hands. For example:
TypeError: Cannot read property 'adults' of undefined
Moral of the story, check if stuff is undefined before you try to do shit with it! Otherwise, Javascript gets its panties in a bunch. Any easy way to do this is:
if( typeof variable != "undefined" ){
     //do something since x is defined.
};
But another interesting, and nicely readable solution I found is:
function doSomething(variable)
{
    var undef;

    if(variable === undef)
    {
         alert('Hey moron, define this bad boy.');
    }
}

Any day you use the mod operator is a good day

The other day at work I had occasion to use the magical little modulus operator: %, and I was pretty damn happy about it.

Mod returns the integer remainder left after dividing one number by another:

  • 8 % 4 = 0
  • 101 % 100 = 1
  • 3 % 10 = 3

It (in my limited experience) doesn’t come in handy very often, but when it does, it’s very tidy and nice. Let’s say you want to pair one set of values in an array of known length with a set of values in an array of unknown length. Like maybe you have an array of n names, and you want to pair each name with a color, 8 of which you have stored in an array called colors.


for(var i=0; i< names.length; i++) {
    $('#names li')
    .eq(i)
    .css('background-color',colors[i % (colors.length)]);
}

Voila! The colors will repeat for however many names you have in your array.

Tags: js modulus

JSON.parse hates null values

Or at least in Android 2.2+ on a phone and not in an emulator. A couple of takeaways from this bug-quashing episode:

You can’t do it all yourself

This is something I’d started to learn at the end of my “freelancing career” for lack of a better term, and it has only been reinforced since I started working for a company.

In earlier days of the web, one person could do it all herself: design a logo, business cards, site layout; write or edit the copy; create some images and write the html and css. That’s really all there was to it. SEO didn’t exist, and javascript was relegated to adding “flair”.

Obviously that’s not the case any more. Even when building the small informational sites I was doing, there were so many ever-changing facets to the process, that it was very hard to keep up. The explosion of mobile web browsing added an enormous new layer of complexity. A single person just can no longer be expert at all of the necessary aspects of web development.

One year later

At work I’m involved in building a mobile web application. We had gotten a lot of pieces in place, and it was basically functional. At this point the company brought in a UX consultant to give some thought to the flows for the app and give the UI some much-needed polish. Before he started, I was thinking “Ack…do we really need this guy…can’t we just do it ourselves?” (I now realize I have this initial reaction to a lot of things). The answer is No. Or, Yes, but it would have been much more difficult and probably much less successful.

Of course it remains to be seen whether the app will be a success regardless, but bringing in an outside consultant has given us:

  • Obviously, a ton of expertise we didn’t have in-house in our small development group, especially around mobile design and usage.
  • An outside voice that can challenge people when necessary. He has inherent authority because the company hired him specifically for his advice.
  • Time. We (pardon my horrible corporate jargon) just didn’t have the bandwidth to put the thought and effort into the UX/UI that this mobile project deserves.

Bang! Self-invoking function!

I came across a code snippet the other day that started with a bang (ha!):

!function(){
  // do stuff
}();

I didn’t know what the heck was up, nor was I sure how to Google for the answer. Turns out it wasn’t too hard to find: “bang before anonymous function” turned up the answer on stackoverflow.

It basically comes down to developers getting cute and saving 1 character. Code style and terseness. But it is the same, functionally (ha again!) as:

(function(){
  // do stuff
})();
Tags: javascript

Inside the jQuery wrapper

Cody Lindley wrote one of my favorite books on jQuery and I recently came across another enlightening tidbit from him: Peeling Away the jQuery Wrapper and Finding an Array. I knew you could do something like this…

$('div')[0]

…to get at the non-jQuery-wrapped DOM element that is the first div in that collection. I really never thought twice about why that was possible, but if that collection is an instance of a jQuery object, and not an array at all, then it isn’t immediately clear why this should work. The article explains this, along with how to get an array of elements out of the jQuery object, and why that might be useful.

I love articles that pull back the curtain on jQuery and explain a piece of its inner workings. Sometimes that is much more helpful than a tutorial on how to use jQuery to build this or that widget.

Tags: jquery