Prototype Dissected

In getting to know Prototype a little better, I decided to go through the latest version of the Prototype library (1.5.0_pre0) and detail every method and property that was available. In doing so, I got a much better understanding of how the code works. Here are the files in a 1280x960 and a widescreen 1440x900 version.

1280x960

prototype1280.png

1440x900

prototype1440.png

1280x960 on White

prototype1280w.png

1440x900 on White

prototype1440w.png

And with WHITE backgrounds, as requested.

Enjoy!

Update: thanks everybody for the positive comments. Here are the original Fireworks files for each one: Black, Black widescreen, White, and White widescreen.

A vector PDF of the cheat sheet is now available thanks to the efforts of Youri op 't Roodt (wicked name, by the way).

Published February 20, 2006 · Updated March 02, 2006
Categorized as JavaScript
Short URL: http://snook.ca/s/531

Conversation

143 Comments · RSS feed
Hatem said on February 20, 2006

Really Great ! am wondering what did you use to make this graph ?

Mike Papageorge said on February 20, 2006

Shouldn't I be able to click on one of the boxes and have it slide open to show me the raw JS? J/K

Great work - it helps to see it like this.

Tom Mulder said on February 20, 2006

Nice, this helped me find something i was looking for.

Can you also create some white background, so we can use it as a quick printed cheatsheet?

Jacky said on February 20, 2006

Quite a good look at the library. Seems that I have missed some interesting use of the library. Agreed to have a white background so that we can print it out for reference.

Michael Moncur said on February 20, 2006

Thanks! I was just looking at Prototype, and this is one of the best bits of documentation I've found...

Jonathan Snook said on February 20, 2006

I've now with WHITE backgrounds!

bramus! said on February 20, 2006

Excellent cheatsheet! Kudos!

Zach said on February 20, 2006

You finally did it :) Nice work Snook mate. Impressed me yet again.

jensc said on February 20, 2006

nice thanks ... but a pdf would be nicer :-) (esp. if it's all vectors) ... cheers

Adam Thody said on February 20, 2006

This is now the desktop on my secondary monitor...Awesome!

kmccaul said on February 20, 2006

Made my day, thanks!

Jim Rutherford said on February 20, 2006

Once again, excellent work Johnathan! I also vote for a PDF, and if you don't have Acrobat Pro, I would be happy to convert these diagrams for you!

Jon said on February 20, 2006

Cool!

Totally want a PDF -- I'd like to turn this into a poster.

Arpan said on February 20, 2006

I too would love a PDF version. Would look much better in print.

Johnny said on February 20, 2006

PDF would be great so I can print them on A3!

Great work, thanks

Chimere said on February 20, 2006

Thank you, make a poster i'll pay cash.

doug said on February 20, 2006

Very nice idea to make your cheat-sheets your desktop background. This looks great! Mind sharing what you used to put this together?

CountZero said on February 20, 2006

great idea, this overview sheet. I think it'll help me a lot. thanx!

Gre said on February 20, 2006

Just another thank you. Prototype is brilliant, but really suffered from a lack of documentation, I will be trying to print this out at work tomorrow :)

Jonathan Snook said on February 20, 2006

doug: I had started off doing this in Visio but the anti-aliasing was making it hard to read so I started again in Fireworks.

As for PDF... um, let me see what I can do.

Justin Palmer said on February 20, 2006

Great work Jonathan! This is a testament to how clean the Prototype api is.

Nathan Logan said on February 20, 2006

That's purdy. Real purdy.

Thank you much.

Carson McComas said on February 20, 2006

Dang, awesome man. Wow, seriously. Oh, and put me down for the PDF version too. :)

To anyone else looking for good docs on prototype, make sure you check out this resource (it also has links to other good ones):

http://wiki.script.aculo.us/scriptaculous/show/Prototype

Dustin Diaz said on February 20, 2006

Again, this goes to show how louzy the original documentation is for Prototype. Excellent work Jonathan. I'll be printing this out at work.

Youri op 't Roodt said on February 20, 2006

This is just what I needed, but as others have suggested PDF would be sweet.

Galen said on February 20, 2006

I've been hesitating to get into Prototype due to the complete lack of documentation but this might just be the helping hand I needed. Well done.

shorty114 said on February 20, 2006

Wow, that's insane.

Jesper Rønn-Jensen said on February 20, 2006

Thanks a lot for sharing this. Your chart make the code a lot easier to understand for the vast majority of webdevelopers (including myself) that are sometimes too lazy to dissect the code.

Very good work!

rolandog said on February 20, 2006

Wow... "It's beauuuuutiful"

You've got a great site design, too...

Louis C. said on February 20, 2006

haha, that's cool

Balú said on February 20, 2006

Wow... very cool... good job!!.

Mark Holton said on February 20, 2006

Wow... awesome. Thanks for this great prototype reference!

Zach Hoeken said on February 20, 2006

this is cool and pretty, but for a more practical reference, check out:

www.sergiopereira.com/articles/prototype.js.html

its really good.

thewebguy said on February 20, 2006

nice! very cool, good looking too. can you post the fireworx file? i think i will be here another hour re-arranging for 1280x800 (damn you, crazy widescreen laptop!)

btw your site is beautiful.

Jonathan Snook said on February 21, 2006

just a quick note that I've updated the article to include the original Fireworks files if anybody is interested.

thewebguy said on February 21, 2006

<33

thewebguy said on February 21, 2006

d'oh, sorry, i meant to say "<33".. thanks for the pngs!

Idris said on February 21, 2006

Helpful, but more details would be great. Howabout including what each function takes as parameters and returns?

Douglas Clifton said on February 21, 2006

Dave Child is going to be upset! Just kidding. Nice work Jonathan, and judging from all the comments, you're getting a terrific response.

said on February 21, 2006

just marvelling at your site design..

Slowpoke said on February 21, 2006

NIce work with the prototype stuff, it inspires me to have a go at using it for something. But, uh, I'm afraid this sites design steals the show. It's just amazing.

Guillermo said on February 21, 2006

Thanks for the taking the effort to make this!

I'm sure lots of people will find it handy.

marko said on February 21, 2006

Thanks Jonathan for sharing your findings. I've created a PDF as you asked. More info on our blog. http://blog.brains4all.com/brainblog/archives/2006/02/prototype_cheat_1.html

said on February 21, 2006

Jure said on February 21, 2006

Realy great yob.

Jens Meiert said on February 21, 2006

Well done, great!

Graham Bradley said on February 21, 2006

I had looked at Prototype before but couldn't immediately see any documentation, and therefore didn't see what the fuss was all about.

Having quickly glanced at this, I've suddenly realised what it can do. Sam should be very grateful!

geoffrey said on February 21, 2006

great job !

Jabbslad said on February 21, 2006

Love it, great job!

laze said on February 21, 2006

Really good, usefull, nice design! Great!

zoober said on February 21, 2006

This helped me too.

Chad said on February 21, 2006

nice site, nice wall paper, and nice links. *New Subscriber to your feed.

Thanks

Ramin said on February 21, 2006

You can easily make PDF's of these using this website: www.expresspdf.com

Kai said on February 21, 2006

I've been using Prototype for a little while and this "Cheat Sheet" comes in really handy!

Thanks for donating such a nicely done graphic to the community!!!

NeN said on February 21, 2006

great job, Tnx

dawg said on February 21, 2006

test, nice comment system

Marko Mihelcic said on February 21, 2006

nice m8 .... *save* khm ... *set as desktop background* ;) that's gonna make stuff easy'r now!

mark said on February 21, 2006

amazing visual and organization. good work. thanks! :)

david said on February 21, 2006

wow, you had a lot of time on your hands huh? hahaha very very nice man thx for the hard work

Carlos said on February 21, 2006

Thanks a lot for this!!

Fin said on February 21, 2006

These are fantastic, and printed out very good indeed.

Thank you very much!

Flashy Jackson said on February 21, 2006

THANK YOU SO MUCH!

~ Flashy Jackson

Thanh said on February 22, 2006

Great Job, thank you so much :)

jeremy said on February 22, 2006

Thank you for this. I am stupefied by the wicked cool design of this site too...

All thats going through my head is "Note to self: yo, kid! you better start eating your design wheaties! Did you see the CSS balls on that 900 lb design gorilla? dude's droppin' bombs like hiroshima!"

ron said on February 22, 2006

this is fantastic. thank you very much.

any plans on making one for scriptaculous? because if there was, and you were going to do it, that'd be hella cool. and i'd totally download it and thank you with another comment.

anonymous said on February 22, 2006

I've made it my desktop background!

said on February 22, 2006

whoa

Nick said on February 23, 2006

Are you 'snook' the coochie crook?

Mario said on February 23, 2006

Are the items colored green, globals????

Jonathan Snook said on February 23, 2006

green items are properties. blue items are methods.

Nathan Funk said on February 24, 2006

Very impressive. Thanks for the overview.

A J King said on February 24, 2006

Sir: You are a genius. This is a magnificent product and a great service to others. Thank you.

Bruno said on February 25, 2006

I have converted them to pdf's as many of you have requested.

Find the files here

Johnny said on February 28, 2006

These PDFs are converted images and so have no use at all. Jonathan should print'm himself directyly from the app he made the graphics in!

Bruno said on February 28, 2006

I would be more than happy to take the original pngs and print them as pdf's in case Jon does not have the tool to do it.

Bruno said on February 28, 2006

I would be more than happy to take the original pngs and print them as pdf's in case Jon does not have the tool to do it.

Johnny: if you believe there is no use for them, don't use them.

Brian Wisti said on February 28, 2006

This is great! I already have it set up as my desktop background. Thanks for going to the trouble :)

tiandike said on March 01, 2006

perfect! Can you provide a chm help for prototype?

JEff said on March 02, 2006

Dude! Thanks for this! This prottype disected poster is just awesome! Just what I was looking for!

Thanks Again!

Youri op 't Roodt said on March 02, 2006

The PDF's so far only contain images, I think people are asking for a vector version so you can blow it up as big as you want. I completely recreated a vector image from scratch and tried to respect the original image as much as possible.

Free to download for everyone:

prototype.pdf

Wow said on March 07, 2006

Its really nice

jason carlin said on March 08, 2006

Oh my god! This is the best thing anyone's ever done. What a helpful little monkey you are! I'm gonna go stare at this for an hour or so.

enej said on March 08, 2006

Does anyone know where I can download prototype 1.5 easily? (in one file)

Thanks

Jonathan Snook said on March 08, 2006

Grab the latest from here.

Shaun said on March 08, 2006

Love the layout

Test said on March 10, 2006

this is really cool

Adam said on March 11, 2006

WOW nice sheets! have already helped me with being a noob to this, I saw this article when it was first posted but didnt think much of it (never had a serious use for JS) but then I wanted to try out ajax with a little system i was building. Few hours searching didnt really get anywhere.

Then I remembered I saw ajax mentioned on 24ways and tried Prototype. I was ajaxing in seconds

Fantastic!

said on March 12, 2006

nice comment system - so creative and awesome

Ether said on March 13, 2006

That's really great! Helped me alot. Thanks for great work.

Nicholas Wright said on March 15, 2006

Awesome! If only this came in 1024x768 it'd be my wall paper!

Guest said on March 15, 2006

you could probably easily fit a color key on the images (suggestion)

pawlik said on March 15, 2006

Thanks a lot!

SuhBaeBruceElvis said on March 16, 2006

Gooooooooooood!!!

moraes said on March 17, 2006

Beautiful and useful. Thank you for the version with white background. :)

Jon Ashley said on March 17, 2006

Jonathan - If you'll send me your Fireworks vector PNG I'd be happy to create a vector PDF to send back.
Thanks for providing this to the community!

BTW, great blog commenting design! ~Jon

Jon Ashley said on March 17, 2006

Ooops! I missed the PDF link at the very top. Good stuff Jon, thanks!

R.PILLOT said on March 26, 2006

Too strong, thanks a lot !!!

Jon said on March 27, 2006

This thing is amazing, especially the PDF, but do the fonts seem kinda small to anyone else?

nori said on March 29, 2006

hoo!

Verde said on April 05, 2006

Nice work, it gonna be very usefull for me thanks alot ;)

rhapsody said on April 06, 2006

Great work!

Kelli said on April 15, 2006

Thank you thank you thank you! Very nice work, and quite helpful. :)

daniel said on April 17, 2006

Hey Cool, WEb2.0 is great..-..

Patrick Haney said on April 18, 2006

Someone has too much time on their hands...

Great work Jon, this is going to come in handy for a lot of people I'm sure, including myself whenever I get around to taking a look at Prototype.

rck said on April 29, 2006

Thank you, this helps a lot while working with Prototype.

mitch said on May 01, 2006

respect man!!

Michael Müller said on May 08, 2006

Hey man, great blog and site btw! I'll be visiting again!

Sudar said on May 13, 2006

Thank you very much. This is my desktop now.

Fletcher Moore said on May 15, 2006

Great stuff. Wish I had cheatsheets this nice for JS and PHP...

Deathy said on May 18, 2006

Great cheatsheet, going to be using it a lot :)

Rene said on May 22, 2006

I to, like ron would be more than happy if you made a sheet over scriptaculous, that would just be awesome - REALLY!

But thanks for the truely awesome work on prototype champ

Kjell Bublitz said on June 13, 2006

Thank you soo much for this. This one came handy.

Nate See said on June 15, 2006

Great work! This is really handy. Need a laminated poster sized version so it's always in my face.

kasra said on June 18, 2006

wow..thanks alot!

Jery said on June 20, 2006

Great work. When I look at the png its much easy for me.
Thanks

Chris Snyder said on June 20, 2006

This has obviously struck a chord with the community, well done.

But you're only 30% finished. API documentation has to include arguments and return values to be useful for day-to-day work.

I hope this is the start of a more complete project!

etng said on July 04, 2006

It's seems so good.Thank you for your good work.

John Clothes said on July 07, 2006

I think you should continue developing this project and keep the good work

kaleem said on July 20, 2006

Great job man this is wht u call Good work Keep it up :)

Duc Nguyen said on July 22, 2006

Wouldn't it have been a lot better, and taken you a lot less time if you used UML instead of straight graphics?

Jonathan Snook said on July 22, 2006

Duc: Typing the words takes just the same amount of time no matter what format you use.

Nj guy said on July 22, 2006

well UML ould be better but nice work tough cant take that from u

Peter Dorsi said on July 26, 2006

Great Work!!! I printed out a copy for everyone at the office!

Paul said on August 06, 2006

Thank for the work.
One beauty remark, I saw the 'position' contains clone() 2 times.

Parkgost said on August 20, 2006

Very Good

Mag said on August 29, 2006

You should publish some detailed tutorials on how to implement such work.
Thanks a lot.

Cory Hudson said on August 29, 2006

I've gone through the new String functions/methods that Prototype 1.5 has added and written up a post:

Using Prototype's New String Functions

It's some pretty powerful stuff that is giving me a serious crush on Ruby.

josh said on August 30, 2006

Great work. When I look at the png its much easy for me.
Thanks

Joe said on September 07, 2006

good job, keep going like this

tag said on September 17, 2006

pretty nice work, this is really fantastic.

kim said on September 18, 2006

Great job, I love your work. Hope we see some more of your ideas

bev said on September 22, 2006

thanks muchly...

Erde said on September 25, 2006

Great work and looks very good!

Tomba said on September 27, 2006

Well done, keep goin on like that ... Thanks and greetz, Tomba

Fernando Emmanoel Borba said on September 29, 2006

Great job! Impressive!
Congratulations from Brazil.

CableGuy said on October 08, 2006

Wow! This is just what I needed!

Afrika said on October 12, 2006

I have just printed it out. The white one. Thank you from germany!!

Lagerverkauf Markt said on October 13, 2006

Good Job; I'm sure lots of people will find it handy.

Miejsca aRcHiTeKtUra said on October 14, 2006

<div align="right">PDF is great for printing, anyway, thanks a bunch for this documentation! +</div>

Hotel said on October 18, 2006

<center>Nice work, thanks for the good documentation....</center>

worker said on October 18, 2006

This helped me a lot with my work, thank you Jonathan.

download Auto Pip Bot torrent said on February 16, 2011

Nice post. Grazie

refrigerator repair orange county said on March 10, 2011

è stato molto interessante da leggere. Voglio citare il tuo post nel mio blog. Si può? E voi et un account su Twitter?

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.