- Home
- Blog
- Web Design 11 Things You Might Not Know About jQuery
11 Things You Might Not Know About jQuery
- 9 min. read
-
William CraigCEO & Co-Founder
- President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
jQuery was released 9 years ago. Since then, the open source project has made an immeasurable impact in the world of web development. It’s fascinating to look into the origins of an open source project as big as jQuery.
And no one can give us a more insightful tour of the project’s source code better than the guy who created it, John Resig. Resig recently annotated the first known copy of jQuery’s source code. In doing so, he offers up a unique perspective on the project’s simple beginnings.
I’ve annotated the original 2006 version of jQuery and put it online: http://t.co/5sKTJ7HlhN Lots of memories and interesting hacks! — John Resig (@jeresig) April 7, 2015
Below are some jQuery facts I learned from reading Resig’s source code commentary. 1. jQuery was originally called JSelect. But the jselect.com domain name wasn’t available, so JQuery it was. (The name capitalization changed to “jQuery” later on.) 2. Oddly, jQuery had a Creative Commons license. Creative Commons (CC) licensing is most associated with creative works. Stock photos, PSD templates, icon sets, UI kits, the like. But CC licenses aren’t well-suited for open source code.
Or, rather, there were better open source licensing options, even at the time jQuery was released. Even the folks at Creative Commons recommend that we use free and open source licensing such as MIT or GPL for software. The Open Source Initiative, an organization dedicated to promoting open source software, is against releasing open source code under certain Creative Commons licenses. Resig acknowledges that using a CC Attribution-ShareAlike license for jQuery was a “poor choice.” The project’s licensing switched to the MIT license soon after.
Source3. jQuery was created without a version control system. Today it would be unimaginable for an open source project to be released without using a version control system (VCS) such as Git. Like, how would you even post it up on GitHub? But the founder of jQuery didn’t use a VCS while developing the initial source code of the project. To be fair: not using a VCS — even on big projects — was common during the time jQuery was released.
The jQuery project eventually started using version control (it went with SVN) only after Resig received contributions to his JS library. 4. The jQuery name was “stolen” from another project. “jQuery” was also the name of a Java SQL library. But Resig only found out about the naming-conflict later on, after he was contacted by the project owners of the Java library. Resig said that he “felt bad,” and he “definitely wanted to avoid causing any confusion”. I’m chalking this one up as an innocent oversight. 5. jQuery launched in New York City. The public debut of jQuery was in January 14, 2006 at BarCamp NYC. BarCamp is a conference centered around technology; mostly Web and open source technologies. 6. jQuery was heavily inspired by other open source projects. Throughout his annotation, Resig mentions the following projects as being instrumentally influential in the development of jQuery:
The only one still active is Prototype. The latest version of Prototype shipped about a year ago (v1.7.2). The others on the list are no longer being developed.
XPath reached W3C Recommendation status way back in 1999. Unlike HTML and CSS, newer standards haven’t been developed for it. 7. The first jQuery plugin is “JSON for jQuery”. Created by Michael Geary and released on January 25, 2006, JSON for jQuery allowed you to easily request and output JSON data. By default, the plugin is also the first demonstration of jQuery’s potently powerful extensibility. The Plugin API is one of the reasons why jQuery is so successful.
8. JSLint was used for jQuery’s quality control. Throughout the original jQuery source code, Resig highlights some of the not-so-good JS in it, such as “gnarly” regular expressions. (His code-quality standards is much higher than mere mortals like me.) Resig says these were all eventually addressed using JSLint, a popular code analysis tool. 9. jQuery didn’t have any Ajax functionality. Asynchronous web apps were all the rage in the early- to mid-2000s. Nowadays, all web apps are expected to be async-capable. It’s nothing special.
But, back then, it was a truly revolutionary concept. All web developers at the time were jumping on the bandwagon. We all wanted to avoid reloading the entire page just to update a tiny portion of the DOM.
But jQuery strangely did not come with any Ajax helper methods in the first release. 10. jQuery didn’t use curly braces if it didn’t have to. (You know who else didn’t used curly braces back then? Chuck Norris.) It’s a conventional best-practice to always use curly braces for block statements, even if JavaScript makes them optional in some cases.
Using curly braces prevents mistakes. Especially in teams. If you ran your scripts through a code analysis tool like JSLint, it will complain about your missing curly braces. But the jQuery project originally preferred omitting optional curly braces.
“I really dis-liked having unnecessary braces,” Resig explains. “This …unfortunate… style preference plagued us for quite a while and caused all sorts of avoidable logic errors.” So in the first version of jQuery, you’ll find code such as this:
if ( !b ) for ( var j in a ) this.style[j] = a[j]; else this.style[a] = b;
With curly braces, the above would be written as:
if ( !b ) { for ( var j in a ) { this.style[j] = a[j]; } } else { this.style[a] = b; }
SourceSide note: I was also a fan of not using curly braces if I didn’t have to.
At the time, I thought it was easier to read. No, honestly, it was because going sans curly-braces resembled the syntax of a cool, new web app development framework that released around that time. 11. The core jQuery methods are timeless. Your favorite jQuery methods such as .css()
, .toggle()
, .show()
, and .hide()
are still supported in the API. Even with massive additions to jQuery’s API, no breaking change was ever introduced to them after almost a decade. “There’s a strong chance that you could take circa-2006 jQuery-using code and drop in a modern version and have it still work,” says Resig.
SourceThis one you already know:jQuery makes web development easier. What first drew me to jQuery was its syntax. I remember thinking how concise and straightforward it was. Selecting and operating on the DOM only took a few lines of code because of the way the $()
function worked.
You didn’t have to instantiate an object to hold your selected elements, loop through the object, and bind event listeners on each element in the object. You could chain your DOM selection to as many methods as you wanted in just one statement. To think that this was a feature in jQuery right from the start is just mind-blowing.
I remember when jQuery first came out. I think I was using Prototype + moo.fx. Or maybe it was Dojo.
Or maybe Prototype + script.aculo.us. I really can’t recall, since it feels like I used them all. For sure, at some point, I settled on MooTools.
I adored MooTools. I even wrote a book about it. (To the two people who bought the MooTools book: Thanks, Mom and Dad, you’re awesome.
You’ve always been supportive.) But, admittedly, I was getting stuff done much quicker with jQuery. Also, it was easier for me to get less-experienced devs on board with jQuery because of its intuitive syntax and concepts compared to Protoype, Dojo, or GWT. jQuery played nice with other libraries, recognizing the trend that modern web development techniques were heading towards the reliance on many third-party project dependencies.
As I read through John Resig’s annotation, it quickly became apparent to me that ease-of-use was a foundational philosophy baked right into the project since day #1. You’ll find commentary in the annotated jQuery source code such as these:
- “This was something that I was very passionate about as it allowed you to write some very terse code“
- “I’ve always been fond of the
.wrap()
method. It’s one of those things that’s a real pain to write from scratch but is super-convenient to have as a single method.”
Also, jQuery was one of the few open source projects that stressed the importance of good, user-friendly documentation. This notion was almost counter-culture in that era of open source and web development. The line of thinking back then seemed to be along the lines of “You’re a developer.
Figure it out.” An open source tool for developers in the mid-2000s. And it had the developer’s UX in mind? Seriously? That was outlandish.
jQuery’s user-friendly philosophy is what made it very appealing to regular web developers like me. And if you look at the biggest, most successful OS projects right now — Bootstrap, WordPress, Sass, Chrome (which even ships with developer tools right off the bat) — this idea of making things easier for developers is a unifying commonality among them. jQuery is more than just a tool that helped us build sites and shaved off months from our dev processes.
jQuery’s greatest achievement is not that it’s used on millions of sites. That’s just an incidental outcome. For me, the greatest thing about jQuery — and it’s something I already knew way before reading the annotated version — is this little, 83kb JS library led massively monumental changes in open source culture and the web development industry.
I’m not quite sure that was what John Resig set out to do. But I also don’t think he really had any say on the matter after releasing his humble JavaScript library nine years ago in BarCampNYC. Resig created 40 comments on jQuery’s source code.
See all of it here: Annotated jQuery Release. Also, you might want to read his blog post about the annotation. Additionally, to find more interesting jQuery facts, read the project’s official History docs.
Related Content
- 10 Promising JavaScript Frameworks (2008)
- 14 jQuery Plugins for Working with Images (2009)
- Create a Slick and Accessible Slideshow Using jQuery (2009)
- Getting Started with jQuery (2010)
Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter.
-
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
-
WebFX is a full-service marketing agency with 1,100+ client reviews and a 4.9-star rating on Clutch! Find out how our expert team and revenue-accelerating tech can drive results for you! Learn more
Make estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost CalculatorWeb Design Calculator
Use our free tool to get a free, instant quote in under 60 seconds.
View Web Design CalculatorMake estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost Calculator