John Resig annotates original jQuery source code(genius.com) |
John Resig annotates original jQuery source code(genius.com) |
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
- 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/
[1] - https://github.com/fitzgen/pycco
[2] - http://rtomayko.github.io/rocco/rocco.html
Is this intentionally divergent or is it some kind of bug?
I agree that clicking to go to next is annoying. Perhaps mouse over or scrolling should automatically show the annotation.
I'm more interested now in how this application got pushed to production in its current state.
Definitely one of the biggest challenges in building this product is getting the annotation interface to work consistently in a “host page” environment over which we have pretty much no control or advanced knowledge. So for instance, the jump-you-to-the-top bug isn't something we've seen in the general case; we're currently getting to the bottom of why it's happening on this particular page.
Great content tho, enjoying the read.
I often find that long comments can break my flow when reading code -- but of course, commenting is necessary, so perhaps it could be useful to pull them aside in an IDE. Does something like that exist?
Then just C-c C-v t and all the source code is in a clean seperate file. You can even set it up to include the comments, link to the comments, or whatever other way you want the output to be. If I ever pursue programming more seriously, I can't image not seriously trying to do it in this manner.
I don't think that's necessarily true; code comments very often refer to a range in the source. Because code is generally designed to be accessed as linear text without hyperlinking facilities, the identification of the range is usually something that the reader has to interpret by applying (sometimes language specific) conventions relating to code formatting, indentation, and the precise placement of comments, and there are a limited set of kinds of spans that conventions cover (e.g., a span that starts in one block but extends to include the following part of the containing block doesn't have a good layout convention to indicate that a comment goes with it.)
Genius-style annotations, because they aren't limited to conventions that work in a strict linear text medium, can easily refer to arbitrary spans of content.
Unfortunately the user interface is a world of pain. It's unusable. It's worse than quora. Good idea, but the execution needs work.
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.
Then you get things like $("#target").MakeBobsFancyBoxWidget()
this._get(i).$$tmpFunc = f;
this._get(i).$$tmpFunc(i);
this._get(i).$$tmpFunc = null;
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.
> 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.
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.
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.
This is a sandboxed domain, like googleusercontent, so not a bug. XSS on genius.com would be a vulnerability.
https://robflaherty.github.io/jquery-annotated-source/
https://robflaherty.github.io/jquery-annotated-source/docs/0...
Sadly, no longer updated since jQuery 1.6.2 which was released in 2011.
http://genius.it/https://news.ycombinator.com/item?id=933629...
How long did it take for John to write this initial version? Any idea?
if ( !b )
for ( var j in a )
this.style[j] = a[j];
else
this.style[a] = b;
I really wish this kind of coding was removed completely from some languages.
srclib is the open-source library that powers Sourcegraph, a code search engine.
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.
this is not really code to learn from
It was a block of unformatted, uncommented, dangerously typecast old-style C, with meaningless single letter names for variables and functions.
So I read it. It took a lot of study and I didn't cheat and run it through a pretty printer. I never really got to the point where I grokked it but my ability to read other code has improved a lot.
So whilst I agree that it's important to write code in the way you describe, I think it's well worth reading code that takes you out of your comfort zone from time to time.
Did we have minification tools back then?
// Arrrrghhhhhhhh!!
// I overwrote the event plugin's .load
// this won't happen again, I hope -John
Also, after a long piece of annotated text its annoying that the box pops up at the very bottom of the text rather than side by side.
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
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/
I was able to XSS myself: when I added certain types of malicious code it did execute, but if I reload the page the malicious part is not rendered. In other words, it's filtered on the output, not input, and the rendering is different for content fetched from the server vs content you just created. You can execute code in your own browser, but not for anyone else (as far as I was able to).
Their team is very responsive and took my concerns over this seriously.
Usability is optional for that.