Learning From “Support” Comments in the jQuery Source

Back in 2014 a couple of developers launched a website called You Might Not Need jQuery that listed alternatives to jQuery features using vanilla JavaScript and DOM techniques, along with browser support. The site was shared quite a bit in the community.

In response, a couple of other developers released a Google doc that explains why you should not be too quick to drop jQuery without careful consideration of all the problems it overcomes.

In this post, based on some instructions in that Google doc, I’ll describe how you can examine the DOM bugs and incompatibilities that jQuery attempts to address.

Grabbing “Support” Comments via the Terminal

In the Google doc, there is a “List of browser-specific workarounds that jQuery addresses” where you see a big list of stuff like this:

// line 313:
// Support: IE9-11+
// Microsoft forgot to hump their vendor prefix (#9572)
camelCase: function( string ) {
  return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
},

These snippets are taken right out of the uncompressed jQuery source. Go ahead, do a search for “Support:” in that script and you’ll get tons of hits. Currently (version 3.2.1) there are 104. Even jQuery slim has 94 of such comments.

The Google doc explains how you can grab all those comments using a terminal command:

curl -L https://code.jquery.com/jquery-git2.js | grep -A 5 -n Support:

Many of you will likely understand how to get that to work. On many systems it will work on the first try. For example, it worked fine on my Macbook Air. I’m not sure if that’s because curl and grep work by default on OSX, or if I’ve installed something in the past that allows it to work. I’m not an expert in this area, but you’ll have to try it on your own system.

Windows is a little different and requires installing a couple of tools, assuming you haven’t used any curl or grep commands before. Here’s the steps that match what I did on my Windows machine:

• Download curl. I downloaded the 64-bit version using the download wizard.
• Once you have the zip package, as that Stack Overflow thread explains, just drop curl.exe (found inside the “bin” folder) into your %windir% (type %windir% in the run box).
• Install a grep tool. I’ve opted for Cygwin.

Once that’s all in place, open the Cygwin Terminal and in there you should now be able to execute the command. And keep in mind that those tools are useful for loads of things, not just what I’m describing here. For most experienced software developers, those kinds of tools are pretty standard.

Fixing the curl Certificate Verification Error on Windows

If you recall, the Google doc gives you two different commands. The first one prints a list of all “Support:” comments while the second one just gives you the number of comments. So the first one is probably what you want if you plan to examine each of the support issues in detail.

When you execute the command in Cygwin on Windows, you might notice the following error:

As explained at the end of the error message, you can get around this by using the -k or --insecure flag. So the new command would look like this:

curl -L -k https://code.jquery.com/jquery-git2.js | grep -A 5 -n Support:

I’m not entirely sure if there are any serious security ramifications associated with doing this, but I would assume that as long as you’re accessing a trustworthy location, it should be fine. And note that this error message did not appear when I ran the command on my Mac.

Alternatively, you can change the URL to a non-https version, and you’ll avoid the error without the need for the -k flag.

Printing the List to a File

Executing that command prints out the comments inside your terminal. Personally, I don’t see the benefit to that for anything but a cursory glance at the contents. Fortunately, you can write the terminal output to a file:

curl -L -k https://code.jquery.com/jquery-git2.js | grep -A 5 -n Support: > jq-support-comments.txt

Notice the > jq-support-comments.txt bit appended to the end of the command. This will create a file by the specified name and drop the output into the file instead of in the terminal. You can name the file whatever you want.

Using explainshell.com to Break Down the Command

If you’re relatively new to terminal commands, a handy site to use is explainshell.com. Enter any command and the site will break down each part for you.

Thanks to the site’s nice deep-linking abilities, the full command from the previous section can be viewed here. So if there’s anything in the syntax you don’t understand or want to learn more about, it’s a handy little tool.

I especially like the tool for commands I find online in forums and whatnot, to make sure I’m not doing anything damaging.

Interesting Finds in the Comments

Whether you have the comments in a single file or not (it’s simple enough to just do a ctrl-f on the page source), it’s interesting to examine these comments to see what kinds of things jQuery is fixing. This list of incompatibilities and bugs, of course, is the reason many were warning developers to avoid being hasty about dropping jQuery when the You Might Not Need jQuery website was launched.

Here are a few interesting finds:

// Support: IE <=9 - 11, Edge 12 - 13
// Microsoft forgot to hump their vendor prefix (#9572)
camelCase: function( string ) {
  return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
},

Notice the comment that “Microsoft forgot to hump their vendor prefix”. As explained in this bug, apparently Microsoft messed up when mapping CSS vendor prefixes to their JavaScript equivalents. The examples below demonstrate this. Note the comment next to each line:

el.style.WebkitTransform = 'rotate(20deg)'; // works in Chrome/Safari
el.style.webkitTransform = 'rotate(20deg)'; // works in Chrome/Safari
el.style.mozTransform = 'rotate(20deg)'; // doesn't work in Firefox
el.style.MozTransform = 'rotate(20deg)'; // works in Firefox
el.style.msTransform = 'rotate(20deg)'; // works in IE, not Edge
el.style.MsTransform = 'rotate(20deg)'; // doesn't work in IE or Edge

As you can see, WebKit browsers cover both instances in the case of transforms. But the rule is, for camel casing, the letter immediately after a hyphen needs to be uppercase, including the opening hyphen. So WebkitTransform (not webkitTransform) is the correct JavaScript equivalent of -webkit-transform. Firefox is actually the only browser that seems to do this right.

So the code snippet from jQuery’s source fixes this in Internet Explorer to ensure the following line works:

$(el).css('-ms-transform', 'rotate(20deg)');

Here’s another comment in jQuery’s source that explains a problem in IE9-IE11:

// Support: IE <=9 - 11 only
// Style of cloned element affects source element cloned (#8908)
div.style.backgroundClip = "content-box";
div.cloneNode( true ).style.backgroundClip = "";
support.clearCloneStyle = div.style.backgroundClip === "content-box";

In this case, the bug occurs when you clone an element using jQuery’s .clone() method. If you clear the background image on the clone, the background image of the original is cleared. Probably not what you want to happen.

Here’s another bug, this time addressing a problem in a recent version of Firefox:

// Support: Firefox 51+
// Retrieving style before computed somehow
// fixes an issue with getting wrong values
// on detached elements
style = elem.style;

It’s interesting that in this case the comment seems to suggest (using the word “somehow”) that even the jQuery devs don’t quite understand why the fix works.

Below is one that fixes the return value of el.style.zIndex to ensure it’s a string and not a number:

// Support: IE <=9 - 11 only
// IE returns zIndex value as an integer.
ret + "" :
ret;

Here’s a demo you can try in different browsers to see that IE9-11 will give a different result compared to other browsers.

// returns "string" in most browsers; "number" in IE9-11
    console.log(typeof document.body.style.zIndex);

There are more bugs (mostly IE stuff, shocking I know) noted in comments in the unminified source, so you can check those out if you are curious about the kinds of things jQuery is fixing behind the scenes.

Conclusion

I enjoy reviewing the source of different libraries, and it’s especially interesting to look through the source for a library as well maintained as jQuery.

Even today with all the progress browsers have made, there are still bugs lurking in recent versions of browsers that major libraries and frameworks are attempting to fix. So while it’s nice to be able to write everything in plain JavaScript, being aware of the bugs will help you decide if you want to use certain features and how you might fix them.