Javascript Boot Camp Tutorial
Into JavaScript? Have I got good news for you!
If you're interested in JavaScript-driven web apps, snazzy visual fx, and generally confusing people into thinking your site is Flash—but oh-so-much better—you should buy our JavaScript Performance Rocks! book while it's still in beta. Written by Thomas Fuchs, the creator of Scriptaculous, and yours truly, the maker of funny jokes and shiny graphics.
We cover everything from The Most Ridiculous Performance Fix Ever (and it is ridiculous), to serving strategies, DOM diets, loop unrolling (for those really extreme cases), how to play nice with the garbage collector, and everything in between. And it comes with our custom profiling tool, The DOM Monster, which analyzes your pages and suggests fixes. This package is only $24 right now but will be $29 as soon as it's done, in mid-June 2009... but if you snag your copy today, you get the final version by email just as soon as it's ready and save a noteworthy 5 bux! You can't lose.
Downloads
As promised, the entire slide stack is downloadable; and the source code I used to write the Javascript Boot Camp portions of the presentation, as well (not the Prototype code).
- Source Code
- Slides (PDF, 3MB)
Like this presentation? Like me? Would you Digg this story to help get the word out? Thanks! :)
Links
Specific libraries/developer tools I mentioned in my talk:
- FireBug
- Javascript Shell (FireFox only)
- Prototype.js
- Scriptaculous
- moo.fx & moo.ajax
- JSUnit
- jQuery (sorry, not jsQuery, my bad)
- TrimPath
- Behavior.js
- event:Selectors (like Behavior, only a bit more modern; uses Prototype.js)
Libraries/tools others brought up during the talk (thanks, guys!):
- JSON libraries (for secure eval()ing)
- MochiKit
Web sites etc:
- Mozilla DOM reference
- Mozilla JavaScript Reference
- Ajaxian
Delicious lists:
Errata
First, I'd like to say that it was an amazing experience for me, because it really was.
This was my first-ever 3-hour tutorial, and my first trip to OSCON. To say I was "intimidated' would be an understatement, but luckily I was a bit zonked out on cold medicine so I didn't have a chance to really be too scared. Also, the crowd was just a great group of people... everyone was patient with my coughing and water breaks (sorry I coughed into the mic, guys!), and they asked great questions.
Special thanks to the gentleman who helped with the audio and reminded me to cough away from the mic, and to the other gentleman who brought me apple juice and water for my throat. Also, a super big round of thanks to the conference folks who fixed the power and whatnot. You guys rock! I literally could not have made it through without you.
wtf is this?
Uh, a 3-hour Javascript tutorial that I gave at O'Reilly OSCON 2006, perhaps?
I just download the pdf and God! I love it. Can I ask you what font you use in the head above the content. It's very cute.
Best regards.
Amy - wow, what a truly delicious slide show. Something, in fact, that I would love to print out... but with all that black background, it'd take a small fortune in toner just to make it through! I don't suppose kind words and begging could pursuade you to offer a printable version with a white background...? (perty please, with sugar on top?)
Amy! This is fantastic. I love you.
No, really...I love you.
The slide presentation was fabulous. Great Job!
I was at oscon and was present at your tutorial. I also provided you with positive feed back on the oreilly web site. I enjoyed it very much, and will likely use it every day as I start working with javascript next week.
So thank you! And don't worry about the coughing, it wasn't that bad. Guido van Rossum, the creator of Python, did a 40 minute session and he coughed more than you did, and he was less fun to listen to.
Great slideshow - I need this believe me! Any chance of an audio / video cast of your tutorial?
cheers, Leo
I got a cold right after attending this talk. I'm pretty sure your coughing into the microphone amplified the germs and projected them into the audience. Thanks a lot! Jerk!
This is just what I needed, a wonnderfully compact introduction to JS.
Thank you so much!
Your slideshow was insanely helpful! Thanks so much for producing it! It must have taken forever to create, what with the coloured syntax ... and the 108 slides XD.
Regardless, thanks so much!
Hi, There seems to be a javascript issue with this page making it completely unusable in IE. FF reports prototype is having issues with onMouseOut.
Where are the slides from "When Interface Design Attacks!" ?
Good show, I enjoyed the session.
Slide 40 is incorrect. It mentions JSON but it's usage is of the object literal. JSON is much stricter: JSON.org.
Hm, whenever I move mouse appears cute little popup that says: A runtime error has occured. Do you wish to debug?
Not so much of a recomendation for javascript tutorial. (or maybe it is IE6 bug?)
Holy Smokes! That was really great! Better than any book I've read on the subject.
I feel like I just found $50 in my back pocket!
Really great slides!
Working with JavaScript, you are probably also interessted in Log4js the logging API for JavaScript: http://log4js.berlios.de
Thanks a lot ! really really helpful. Great Job !
Hey everybody, working on responding to you all:
First, thanks to everyone who said nice things here or by email, and also to those folks who pointed out a few minor mistakes in the presentation (I've never claimed to be perfect, thank god!) I'll address those ASAP. I just can't describe how busy I've been. If only I could do this blog full-time... :)
About the JS errors on this page... I don't get them in FireFox, and for this site, frankly I don't test in IE (well over 80% of my visitors are in FF/Saf). IMO, I have to do enough of that at my job ;) I've got FireFox 1.5 and FireBug, so I'd probably catch 'em. Are you folks in FF getting errors using FF 1.5? Is it possible that it only happened during high load on the server and the JS files weren't fully loaded on your computer yet?
The heading font is Carnation, which is a free font (I think I got it from dafont.com).
And about printing it out... did you try looking at the Javascript source file also linked, and would that satisfy you? Because changing the whole presentation to a light color would be a bitch -- I got the syntax colored text by taking screenshots of my text editor with the text blown up real big, and so that'd take a long time to re-do.
Don't forget that if you're interested in more, drop me an email so I can notify you when my O'Reilly Javascript book comes out (written with Chris Cornutt!): amy aht infocookie dawt com. (No, I'm not from insert-geographical-area-here; I just don't want any more spam...)
Hey, I was raised in insert-geographical-area-here. Some good people live there. Don't knock it!
Amy, you have a great writing style. I'm not sure exactly what it is about your writing that accomplishes this, but it is very easy to stay interested while reading, and things are presented very clearly. I don't see you trying to flaunt your knowledge while compromising clarity, which is what I see with many technology authors. I'm glad to see that you can convert your writing style flawlessly to a presentation style. It has me thinking...I would love to see your presentation style used to produce an animated or video instructional someday. Anyone for an Amy Hoy screencasts? It wouldn't have to be "live" like that Rails 10-minute-blog style of screencast. I'm talking about something fully planned and edited, with graphics (and kittens).
Hi - The links don't seem to work for the Sourcecode and Slides...?
Same deal as Sam....links no worky for me.....
PLEASE FIX!! Javascript Boot Camp Tutorial links doesn't work anymore... PLEASE FIX!!
The links to the slides are broken (http://static.slash7.com/presentations/oscon2006/javascriptbootcamp.pdf) Is there a mirror somewhere ? (or could someone post the files somewhere ?)
Hi Amy I'm interested in the boot camp files too, please fix!
The URL for the PDF is broken