Screencast 04: Beer, music, Textmate, and YUI

Saturday, February 24th, 2007

In the fourth installment of the screencast series, I demonstrate how to do a very simple tree toggle with JavaScript, CSS, and HTML. However, I don’t feel that this was the point of this particular screencast, since there are, perhaps, already a bajillion tree togglers out there already. This one instead, focuses on how I get stuff done.

There are times when you just want to see how somebody works on a daily basis. You know, just to peak over someone’s shoulder without them knowing you’re there. I picked a simple task (such as the tree toggler) and put myself in an environment that I am most comfortable in (beer, music, textmate, and YUI). And voila! This short movie was put together without me talking this time, but hopefully you will enjoy the music. Cheers!

Download the Quicktime Version (18 MB | 14 minutes 34 seconds)

If you cannot see the video below: get the DivX Web Player (available for both Win & Mac)

16 Responses to “Screencast 04: Beer, music, Textmate, and YUI”

David Golightly
February 24th, 2007 at 3:45 pm

Great video! And I’m so getting hooked on DomQuery now - can’t believe I’ve been working without it!

Looks like you didn’t actually finish debugging though… you do
```
if (el.hasClass('on')) {
    el.replaceClass('on', 'off');
} else {
    el.replaceClass('off', 'on');
}
```
This didn’t work the first time you click it, because you still hadn’t assigned the class “on” to your LI’s - but after the first click, the class had been added by the script, so it worked.

Still, good post! Looking forward to see what you do next!
Dustin Diaz
February 24th, 2007 at 4:08 pm

David, to be fair, I did in fact have this:
```
if ( Dom.hasClass(el, 'on') ) {
    Dom.replaceClass(el, 'on', 'off');
} else {
    Dom.replaceClass(el, 'off', 'on');
}
```
Even so, I still had it incorrect. The two should in fact be flipped around (if their default state is on). Nevertheless, great catch :)
Bobafett
February 24th, 2007 at 4:23 pm

Dustin,

I really appreciate your screencast.

However, I would have honestly preferred it if you spoke/exlained what you were doing rather than having Nirvana play in the background.

Being an amateur JS monkey I have no idea what you were doing with your code.. verbal explanation would have helped :(
Mike-2
February 24th, 2007 at 4:36 pm

Wow… you use a text editor and Firefox?!!? Me too! I also listen to music while I work. I feel like I really “get” you now. I think of myself as somewhat of a connoisseur of the screencast genre, I enjoyed your correct use of “quirky” and “light-hearted” textual commentary to convey a laid-back, no-worries attitude. Some naysayers might dismiss such tropes as insincere, even affected, but I say if you are looking to avoid that, why watch screencasts at all?
Dustin Diaz
February 24th, 2007 at 4:54 pm

@Bobafett: I’m glad you enjoyed it at the least. If you’re looking for full blown explanations in detail I would encourage you to watch some of the previous screencasts (episode 1, episode 2, and episode 3). I’m sure you’ll get much out of those. To my own defense, this was to get a peak of more or less how I work on a daily basis, and less of a tutorial.

@Mike: I don’t know whether to take your comment serious or not. This screencast was definitely meant to be light-hearted, so I’m glad you could appreciate that :)
Jack Slocum
February 24th, 2007 at 7:28 pm

Very nice screencast Dustin. I very recently converted to the Mac and I’d like to one day make a screencast. What software are you using?

And when can we get you using Ext and making screencasts? ;)
Pete Frueh
February 25th, 2007 at 10:17 am

bitchin ;)
Tim
February 25th, 2007 at 3:39 pm

Thanks for sharing your Javascript knowledge, good musical tastes (Nirvana)…
…too bad you couldn’t share the beer ;-)
Todd Ditchendorf
February 25th, 2007 at 5:09 pm

Hey Dustin… interesting to see how you use TextMate. Since you’re using TM on OS X, you might like to add my TM XML plugin TeXMLMate to your workflow for validating your XHTML. Check it out if you get a chance.

(sorry for the public pimpage, but I couldn’t find contact info on the site).

BTW, since your site is about accessibility and usability on the web… I can’t help but recommend that you make a change to this text area input. Not sure if this is intentional, but on safari, the cursor is invisible, making input very very difficult. poor usability, imho. just my 2 cents.
Dustin Diaz
February 25th, 2007 at 8:30 pm

@Jack: I use a video capturing software called iShowU which was a great $20 investment. I had originally bought it when it had less features, and since then they’ve updated some things that allowed me to drop in the background music, and do “forced mono” which before I had to do another export with quicktime (which would take about 15 minutes). So for your own personal benefit, if you’re really going to be screencasts, I would also shell out another $30 for QuickTime Pro so you get all the other benefits of exporting to several other formats etc.

When will I start using Ext? I’m already using DomQuery, what more do you want? ;) On a more realistic note, I feel that I have most of what I want out of the base of YUI (eg: utilities.js). Using Ext would just take the fun out of development - it’s much more fun making your own Ext’s :)

@Pete: Sweet.

@Tim: Maybe years from now, there’ll be a mechanism to share beer over the internet… someday…

@Todd: I will take a peak at your plugin. Also, it wasn’t my intention to screw up the fields in safari. I’ll have look at that.
Mike
February 26th, 2007 at 5:07 am

Great screen cast. I really like to watch over your shoulder.

I´m a long time reader, first time writer.
Please post some more of this kind. It´s appreciated over here in Sweden.
justin
February 27th, 2007 at 12:29 am

So uh, what do you know about the “type” attribute that makes it not required for externals?
Dustin Diaz
February 27th, 2007 at 12:41 am

The type attribute shouldn’t technically be required, since in fact, that should be determined by the source you’re pulling in. So I generally leave it out.
web
February 27th, 2007 at 2:44 pm

F that, Keep the Nirvana rockin. I love seeing other people work. I’m diggin these screen casts.

When are we going to see user submitted screencasts? or ipodscreencasts? or ipods in screen casts, or ipods in casts on screen ?!

This comment just got awkward. [/end]

cheers.
Tommy Maintz
March 2nd, 2007 at 5:04 am

I second Jack using Ext in your screencasts :p
Ext really makes developing for the web alot more fun (and easy).
Focusing on it will bring a lot of new experiences to your viewers I guess.
daniel
September 22nd, 2007 at 9:12 am

for me it’s not working :(
could somebody say what i’m making wrong? :(

link: http://www.ragtek.org/brutkasten/yui1.html

thx

./with Imagination

Screencast 04: Beer, music, Textmate, and YUI

16 Responses to “Screencast 04: Beer, music, Textmate, and YUI”

Leave a Reply

Get "JavaScript Design Patterns"

Flickr