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
1440x900
1280x960 on White
1440x900 on White
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).
Conversation
Really Great ! am wondering what did you use to make this graph ?
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.
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?
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.
Thanks! I was just looking at Prototype, and this is one of the best bits of documentation I've found...
I've now with WHITE backgrounds!
Excellent cheatsheet! Kudos!
You finally did it :) Nice work Snook mate. Impressed me yet again.
nice thanks ... but a pdf would be nicer :-) (esp. if it's all vectors) ... cheers
This is now the desktop on my secondary monitor...Awesome!
Made my day, thanks!
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!
Cool!
Totally want a PDF -- I'd like to turn this into a poster.
I too would love a PDF version. Would look much better in print.
PDF would be great so I can print them on A3!
Great work, thanks
Thank you, make a poster i'll pay cash.
Very nice idea to make your cheat-sheets your desktop background. This looks great! Mind sharing what you used to put this together?
great idea, this overview sheet. I think it'll help me a lot. thanx!
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 :)
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.
Great work Jonathan! This is a testament to how clean the Prototype api is.
That's purdy. Real purdy.
Thank you much.
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
Again, this goes to show how louzy the original documentation is for Prototype. Excellent work Jonathan. I'll be printing this out at work.
This is just what I needed, but as others have suggested PDF would be sweet.
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.
Wow, that's insane.
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!
Wow... "It's beauuuuutiful"
You've got a great site design, too...
haha, that's cool
Wow... very cool... good job!!.
Wow... awesome. Thanks for this great prototype reference!
this is cool and pretty, but for a more practical reference, check out:
www.sergiopereira.com/articles/prototype.js.html
its really good.
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.
just a quick note that I've updated the article to include the original Fireworks files if anybody is interested.
<33
d'oh, sorry, i meant to say "<33".. thanks for the pngs!
Helpful, but more details would be great. Howabout including what each function takes as parameters and returns?
Dave Child is going to be upset! Just kidding. Nice work Jonathan, and judging from all the comments, you're getting a terrific response.
just marvelling at your site design..
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.
Thanks for the taking the effort to make this!
I'm sure lots of people will find it handy.
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
Realy great yob.
Well done, great!
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!
great job !
Love it, great job!
Really good, usefull, nice design! Great!
This helped me too.
nice site, nice wall paper, and nice links. *New Subscriber to your feed.
Thanks
You can easily make PDF's of these using this website: www.expresspdf.com
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!!!
great job, Tnx
test, nice comment system
nice m8 .... *save* khm ... *set as desktop background* ;) that's gonna make stuff easy'r now!
amazing visual and organization. good work. thanks! :)
wow, you had a lot of time on your hands huh? hahaha very very nice man thx for the hard work
Thanks a lot for this!!
These are fantastic, and printed out very good indeed.
Thank you very much!
THANK YOU SO MUCH!
~ Flashy Jackson
Great Job, thank you so much :)
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!"
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.
I've made it my desktop background!
whoa
Are you 'snook' the coochie crook?
Are the items colored green, globals????
green items are properties. blue items are methods.
Very impressive. Thanks for the overview.
Sir: You are a genius. This is a magnificent product and a great service to others. Thank you.
I have converted them to pdf's as many of you have requested.
Find the files here
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!
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.
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.
This is great! I already have it set up as my desktop background. Thanks for going to the trouble :)
perfect! Can you provide a chm help for prototype?
Dude! Thanks for this! This prottype disected poster is just awesome! Just what I was looking for!
Thanks Again!
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
Its really nice
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.
Does anyone know where I can download prototype 1.5 easily? (in one file)
Thanks
Grab the latest from here.
Love the layout
this is really cool
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!
nice comment system - so creative and awesome
That's really great! Helped me alot. Thanks for great work.
Awesome! If only this came in 1024x768 it'd be my wall paper!
you could probably easily fit a color key on the images (suggestion)
Thanks a lot!
Gooooooooooood!!!
Beautiful and useful. Thank you for the version with white background. :)
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
Ooops! I missed the PDF link at the very top. Good stuff Jon, thanks!
Too strong, thanks a lot !!!
This thing is amazing, especially the PDF, but do the fonts seem kinda small to anyone else?
hoo!
Nice work, it gonna be very usefull for me thanks alot ;)
Great work!
Thank you thank you thank you! Very nice work, and quite helpful. :)
Hey Cool, WEb2.0 is great..-..
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.
Thank you, this helps a lot while working with Prototype.
respect man!!
Hey man, great blog and site btw! I'll be visiting again!
Thank you very much. This is my desktop now.
Great stuff. Wish I had cheatsheets this nice for JS and PHP...
Great cheatsheet, going to be using it a lot :)
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
Thank you soo much for this. This one came handy.
Great work! This is really handy. Need a laminated poster sized version so it's always in my face.
wow..thanks alot!
Great work. When I look at the png its much easy for me.
Thanks
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!
It's seems so good.Thank you for your good work.
I think you should continue developing this project and keep the good work
Great job man this is wht u call Good work Keep it up :)
Wouldn't it have been a lot better, and taken you a lot less time if you used UML instead of straight graphics?
Duc: Typing the words takes just the same amount of time no matter what format you use.
well UML ould be better but nice work tough cant take that from u
Great Work!!! I printed out a copy for everyone at the office!
Thank for the work.
One beauty remark, I saw the 'position' contains clone() 2 times.
Very Good
You should publish some detailed tutorials on how to implement such work.
Thanks a lot.
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.
Great work. When I look at the png its much easy for me.
Thanks
good job, keep going like this
pretty nice work, this is really fantastic.
Great job, I love your work. Hope we see some more of your ideas
thanks muchly...
Great work and looks very good!
Well done, keep goin on like that ... Thanks and greetz, Tomba
Great job! Impressive!
Congratulations from Brazil.
Wow! This is just what I needed!
I have just printed it out. The white one. Thank you from germany!!
Good Job; I'm sure lots of people will find it handy.
<div align="right">PDF is great for printing, anyway, thanks a bunch for this documentation! +</div>
<center>Nice work, thanks for the good documentation....</center>
This helped me a lot with my work, thank you Jonathan.
Nice post. Grazie
$this->normalizeEntities16bit("232") stato molto interessante da leggere. Voglio citare il tuo post nel mio blog. Si pu$this->normalizeEntities16bit("242")? E voi et un account su Twitter?