
John Resig annotates original jQuery source code - tomlemon
http://genius.com/5088475
======
cryptoz
Very neat content, but does it have to be formatted like this? I respect that
it preserves the original file, but it makes it very difficult to read.
Comments added to the source code would serve much better for the purposes of
understanding the code.

This tool makes it impossible to read the annotation and the source code at
the same time. Clicking on 'set' for example, about 20-30 lines in, lets you
read the annotation, but not the function. You have to hide the annotation to
read the code.

Wouldn't inline/multiline comments be so much better than this?

Edit: Citation/example:
[http://i.imgur.com/CHOFGML.png](http://i.imgur.com/CHOFGML.png)

~~~
maxmcd
This formatting style for annotated sources always seems to work so well:
[http://robflaherty.github.io/jquery-annotated-
source/docs/01...](http://robflaherty.github.io/jquery-annotated-
source/docs/01-core.html)

~~~
lelandbatey
Indeed, that side-by-side annotated style is great. For those who would like
to create similar pages, the original program is Docco[0], a Javascript
project. However it's been ported over to many other languages and can be
found in these projects:

\- Pycco[1] Python

\- Rocco[2] Ruby

\- Shocco[3] POSIX Shell

\- Many more, as found here[4]

Note each of these projects support highlighting different languages. For
example, the Pycco[1] project uses the Pygments library for language handling,
and thus supports many different languages. Others, like Shocco[3] only
support one language (Shell in the case of Shocco).

[0] - [http://jashkenas.github.io/docco/](http://jashkenas.github.io/docco/)

[1] - [https://github.com/fitzgen/pycco](https://github.com/fitzgen/pycco)

[2] -
[http://rtomayko.github.io/rocco/rocco.html](http://rtomayko.github.io/rocco/rocco.html)

[3] - [http://rtomayko.github.io/shocco/](http://rtomayko.github.io/shocco/)

[4] - [http://jashkenas.github.io/docco/#partners-in-
crime-](http://jashkenas.github.io/docco/#partners-in-crime-)

~~~
nosefrog
I agree, Docco-style docs are really easy to read.

I built srcco, a Docco-style doc generator that links every variable,
function, etc. within your project to its definition (similar to
sourcegraph.com -- full disclosure: I work at Sourcegraph), to demonstrate how
to build things on top of our free/open source language analysis framework,
srclib[0].

You might find it interesting (the links in the code have white backgrounds):
[http://sourcegraph.github.io/srcco/srcco.go.html](http://sourcegraph.github.io/srcco/srcco.go.html)

It only works for Go because the only Go toolchain keeps track of comment
ranges (because srcco removes the comments from the source code), but it
wouldn't be too hard to add comment ranges to the other toolchains. If you are
interested in language analysis for languages like Java, Python, Haskell, or
Javascript, I would be happy to help you make your first contribution. Ping
me: samer@sourcegraph.com.

[0] - [https://srclib.org/](https://srclib.org/)

------
Stratoscope
It's very kind of John to mention my first jQuery plugin in the notes.

Unfortunately, it was not a very good plugin and probably set a bad precedent.

Like so many new jQuery developers, I went "Chaining? Whoa. Chain all the
things!"

So I attached the plugin to $.fn, not thinking about the fact that what the
plugin did had very little to do with the current element selection.

I may have been the first to make this mistake, but at least I wasn't the
last. :-)

Perhaps I redeemed myself by coming up with the idea to use $.prototype for
plugin methods instead of copying the method references by looping through
$.fn (we kept $.fn as an alias of $.prototype for compatibility). So a $(...)
call became a lot faster.

~~~
Terr_
I suspect a lot of the "unnecessary chaining" that occurs is really a problem
of people (A) making something that requires jQuery and they don't want to
think about how to ensure that dependency, while (B) liking the idea of
associating their little thing with a big-name project.

Then you get things like $("#target").MakeBobsFancyBoxWidget()

------
nothrabannosir
What surprises me is the lack of comments in the original file. This leads to
e.g.:

    
    
        this._get(i).$$tmpFunc = f;
        this._get(i).$$tmpFunc(i);
        this._get(i).$$tmpFunc = null;
    

with the comment (from now):

 _So this may look crazy — it certainly does to me! Why not just do:
f.call(this._get(i))? If I remember correctly, and I just did some double-
checking and I think this is the case, but IE 5 didn’t support .call()! The
original version of jQuery event worked back to IE 5… I can hardly believe._

I personally hate coming across snippets of code like this (usually from
myself ): ). What do I do here? Can I just replace this with .call? Why did he
not do .call? Performance? Or just MSIE5 (if I ever figure that out in the
first place).

All my respect to mr. Resig, of course! What an almost legendary piece of
software. Just interesting to see that this commentless programming is
something of all pedigrees.

And a note to people saying "learn from this," please also learn that without
the original author and rapgenius, we would never have understood that part.
Or at least I wouldn't.

~~~
kolme
Also with all my respects to mr. Resig, but this is not really code to learn
from. It's full of bad habits and it's hard to read. Poorly named, mostly
uncommented and pretty hacky.

Not really judging, it was just a bunch of handy hacks he had for personal
use.

Another reason it's hard to follow is of course: writing a CSS selector is not
a trivial task, and that with all the browser quirks workarounds. I'm sure
getting it working properly wasn't a walk in the park.

That said, he often talks about how he wanted to make the code look "cute" by
making it as compact as possible and to save weight. Although weigh matters a
lot in the web, the source code is a terrible place to optimize. Instead,
write readable code, with sensible names, and then compact it with tools.

~~~
joshuahutt
> and then compact it with tools.

Did we have minification tools back then?

~~~
kolme
Jepp:
[http://www.crockford.com/javascript/jsmin.html](http://www.crockford.com/javascript/jsmin.html)

------
danso
The annotations are also a great reminder of how programming used to be not so
long ago. It's hard to imagine having to search Internet Archive for your own
source code in this age of Github:

[http://genius.com/5088475](http://genius.com/5088475)

> Note: This may not be the first first code released, but it appears to be
> the earliest copy that we’ve found, so far. This is a copy that was indexed
> by the Internet Archive on Feb 3rd 2006, so about 2.5 weeks after the
> initial release. It’s very likely that a few things changed in that time
> period and I’ll try to make a note of some of those, that I can remember,
> inline.

------
alelefant
I'm sorry, but this has to be said. This guy loves exclamation points! Almost
every paragraph features one. It reminds me of a great Seinfeld episode:

Jake: Well, maybe I don't use my exclamation points as haphazardly as you do.

Elaine: You don't think that someone having a baby warrants an exclamation
point.

Jake: Hey, I just chalked down the message. I didn't know I was required to
capture the mood of each caller.

Elaine: I just thought you would be a little more excited about a friend of
mine having a baby.

Jake: Ok, I'm excited. I just don't happen to like exclamation points.

~~~
elwell
That's just negation in JS.

~~~
alelefant
Well played.

------
tomlemon
John also spoke at the March Code Genius. You can check out his full talk
here:
[https://www.youtube.com/watch?v=H4sSldXv_S4](https://www.youtube.com/watch?v=H4sSldXv_S4)

------
IgorPartola
Anyone else already find the XSS in genius.it?

Edit: wow, the whole thing is seriously broken. Emailing them now.

Edit 2: It's not as broken as I thought, and these guys are quick to reply and
try to figure things out. To be clear, I haven't gotten it to run arbitrary
JS, just include arbitrary HTML, which isn't as dangerous.

~~~
tomlemon
Let us know this'd be very helpful! tom@genius.com

~~~
paulirish
BTW would really love to link to a particular annotation.

~~~
IgorPartola
I noticed it when [http://genius.com/5104616](http://genius.com/5104616) was
broken where John included the <div> tag.

------
pearjuice
Though Resig's anecdotes are fun and interesting to read, it doesn't help that
much with understanding the actual source code. Here's a better version in
terms of readability and depth:

[https://robflaherty.github.io/jquery-annotated-
source/](https://robflaherty.github.io/jquery-annotated-source/)

[https://robflaherty.github.io/jquery-annotated-
source/docs/0...](https://robflaherty.github.io/jquery-annotated-
source/docs/01-core.html)

Sadly, no longer updated since jQuery 1.6.2 which was released in 2011.

~~~
gregor7777
Out of curiosity, do you know of any other ubiquitous projects that have had a
similar treatment?

~~~
ben336
Backbone, Marionette and Underscore all have annotated source like this linked
on their project websites.

------
buzzkills
Wow, makes me feel a little better that he had 75 open source projects before
he had a 'hit'. :)

~~~
misiti3780
where did you see that ?

~~~
swavaldez
It was stated in one of his annotation

------
Vekz
Maybe I missed the release announcement on this genius.it thing but thats the
real story

[http://genius.it/https://news.ycombinator.com/item?id=933629...](http://genius.it/https://news.ycombinator.com/item?id=9336297)

------
Zelphyr
If you're a new or relatively new developer I highly recommend reading through
things like this. All too often developers get in the habit of writing a lot
of code without also reading what other more experienced developers have
written.

------
pdevr
Amazing that it has been more than nine years since the original release (Jan
14, 2006)!

How long did it take for John to write this initial version? Any idea?

~~~
jeresig
I don't have exact records but based upon what I was inspired by, and what
else I was working on at the time, it roughly equates to the fall of 2005. I
was in college at the time and taking classes so I was working on it on-and-
off as my schedule allowed. I finished it up over winter break and went with
some friends to BarCamp NYC 2006 and released it there.

~~~
pdevr
Thanks John, always good to hear straight from the horse's mouth!

------
gcb0
on mobile: i only see the code. sigh. why even serve me a different page? I'm
running full blown Firefox.

------
stevebot
So glad jQuery came along and became what it is. Scary to think of a world
where it was just bundled alongside Prototype. For those not versed in
Prototype, those were dark days (at least for me).

~~~
kedean
I always kind of wished that MooTools had won out in their battle to overtake
Prototype's crown. It had a much more sensible namespace, and focused much
more on solidly structured code over "how short can I make this".

------
golergka
Is there a list of other source code annotations on Genius? Their "tech"
section of the web site is full of crappy startup news and doesn't even link
to this gem.

------
seanalltogether

      if ( !b )
        for ( var j in a )
          this.style[j] = a[j];
      else
        this.style[a] = b;  
    
    

_I really dis-liked having unnecessary braces. This… unfortunate… style
preference plagued us for quite a while and caused all sorts of avoidable
logic errors._

I really wish this kind of coding was removed completely from some languages.

------
staunch
I found myself wishing this was a screencast.

~~~
jtokoph
Paul Irish has done a few videos where he walks through some of the jQuery
code: [http://www.paulirish.com/2010/10-things-i-learned-from-
the-j...](http://www.paulirish.com/2010/10-things-i-learned-from-the-jquery-
source/)

~~~
swavaldez
I can't believe that article was five years ago already! >.>

------
swavaldez
Anyone knows if there are outdated sites that still using early versions of
jQuery? =))

~~~
jeresig
I don't have any links off-hand but I know that there was a Nintendo.com sub-
site that was using a pre-1.0 version of jQuery. Even though the overall code
quality is rather low it did have decent browser support - unless browsers
actively begin breaking their APIs (unlikely) those old versions of jQuery
will probably keep working forever!

------
daniellmb
I've archived the original 2005 jquery script (aka jselect)
[https://github.com/daniellmb/jquery-
archive](https://github.com/daniellmb/jquery-archive)

------
yukinon
Firefox 36, OS X. This doesn't seem to be working for me at all.

------
wehadfun
I would actually like this in an IDE. Visual Studio kind of does this with
header comments but it would be great to be able to show/hide comments with
links, rich text,...

~~~
ThrustVectoring
Vim's folding doesn't do this out-of-the-box, but you can set it up to do so.
Clickable links aren't doable, though copying and opening in a browser tab is
something like seven keystrokes on my current setup.

~~~
beaumartinez
In modern Vim (with netrw), you can type `gx` when the cursor is over a URL to
open it in your browser.

------
igravious
What's the standard the Genius uses to perform annotations? Anybody know?

------
ggamecrazy
It's 500'ing for me, anyone else seeing this?

------
curiously
would love to see a frontend framework that uses jQuery syntaxes only.

