Screencast 01: YUI Basics and DOM Hijacking

Sunday, August 27th, 2006

I’ve finally decided to launch an idea I’ve had in the back of my mind for quite some time so today I present to you the first episode of the WSwI Screencasts. In this episode I demonstrate some of the fundementals of the Yahoo! User Interface utilities and how we can add progressive enhancements to our webpages with only applying the basics.

As a confirmation to the loyal Podcast listeners, this is not a replacement. The podcasts will still continue to hit the web sound waves and hopefully the screencasts will behave as a solid compliment. Enjoy!

Download the Quicktime Version (19 MB)

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

52 Responses to “Screencast 01: YUI Basics and DOM Hijacking”

shfx
August 28th, 2006 at 1:25 am

Woho! I’m #1 :D now I need to download quicktime :)
Tommy Maintz
August 28th, 2006 at 1:38 am

Great addition to your already very interesting website.
Hope to see you can keep these pod- and screencasts coming.
Tobie Langel
August 28th, 2006 at 1:48 am

Excellent screencast. I really liked the concepts explained here. Posted about it on my blog.
Adam Spooner
August 28th, 2006 at 6:59 am

Great screencast, Dustin! It’s on my list of to-do’s to check out the YUI and after watching this I’m finally ready to. Quick question for us TextMate users…are you going to release your YUI snippets to the public?

Thanks
Jesper Haug Karsrud
August 28th, 2006 at 7:34 am

Great screencast! Especially liked the part about dollarsigns, and the way they work in YUI compared to Prototype.

A great first, looking forward to the next one.
David Caunt
August 28th, 2006 at 7:43 am

Wow what a great screencast! You managed to cover usability, javascript syntax, and the fantastic YUI library at the same time.

As an intermediate javascript programmer I found there was plenty of new stuff in there for me.

Looking forward to the next podcast :)
Kevin Reagan
August 28th, 2006 at 8:54 am

Great intro! Thanks! Looking forward to future “episodes”.
Jeff L
August 28th, 2006 at 10:26 am

Very nice Dustin, I look forward to more screencasts and trying out some of the stuff you showed in the this one.
Eric Miraglia
August 28th, 2006 at 11:48 am

Cool stuff, Dustin. Thanks for sharing this!
JD
August 28th, 2006 at 12:05 pm

Stop smacking your lips and clearing your throat. Good stuff.
Dustin Diaz
August 28th, 2006 at 1:16 pm

@Tommy: I do hope to keep them coming. I have to start with the basics first, so this will leave much room for other advanced topics.

@Tobie: Thanks for the link reference. I’m glad you understood the concepts, that shows that I’ve explained it well enough.

@Adam: There are a few other snippets that I want to add to Textmate before I release anything. Otherwise, releasing a Textmate plugin for YUI really hadn’t crossed my mind until you mentioned it.

@Jesper: Indeed, I wanted to make it clear that these were not replacements for Prototype, but a lot of people seem to be familiar with Prototype, so I threw it out there. As a previous frequent user of the Prototye framework, I can appreciate what it might mean to others.

@David: Your comments are encouraging. Thanks for the feedback.

@Kevin: I’m glad you’re looking forward to them. This will hopefully keep the ball rolling if enough people are interested.

@Jeff: Thanks :) As said, more to come.

@Eric: Good to see you in this neck of the woods. Hopefully this will help people understand some of the underlying concepts in YUI and encourage them to use it.

@JD: *clears throat* I’ll keep that in mind *smacks lips*
Igor
August 28th, 2006 at 3:59 pm

Hi Dustin!
Please don’t get me wrong but I think this screencast was very messy and difficult to follow. The subject was worth attention but it could be squeezed into a smaller clip.
I think that screencasts like this are a great learning resource and I hope that you make a lot more of them and a bit more focused.
As they say: Practice makes perfect.
Thank you for your effort!
Dr J
August 28th, 2006 at 7:29 pm

Dustin,

Glad to see you are doing screencasts. I’ve been reading your site for quite a while, but never listened to the podcast. After watching this screencast, I think I’m going to add your podcast to may already huge list of podcasts.
Carson
August 28th, 2006 at 8:51 pm

Love it Dustin, thank you - keep this stuff up.
Dustin Diaz
August 28th, 2006 at 9:07 pm

@Igor: At which point was it messy? And if you’re saying it could be squeezed into a smaller clip, at what point was it difficult to follow? Should it have been longer? I appreciate your honest feedback, but I hope that you can provide some concrete details as that will most likely improve them in the future :) Indeed, practice makes perfect, but perfection can be defined to its own scope. Eg: I believe this was “as perfect as it’s gonna get” for a “first episode.” I was quite happy with the way it turned out - especially considering the time I spent on it.

@Carson: Will do.
Ross
August 28th, 2006 at 9:59 pm

Excellent YUI demo. Look forward to the next screencast.
Cheng Siang, Heng
August 28th, 2006 at 11:49 pm

I really appreatiate the work you have done. It makes me undestand something in javascript. Thank for the good work.
Sébastien Guillon
August 29th, 2006 at 12:37 am

This is absolutely great, I’ll join the others in saying I’d like to see more of these coming.
Ross Bruniges
August 29th, 2006 at 1:23 am

practical demonstrations are the best best best way to teach - this is going to be essential viewing for me - bloody brilliant stuff!!
fred Moerman
August 29th, 2006 at 5:30 am

this was actually usefull!
not that I expected anything else, but on ‘the Internet of DOOM’ it is far, far between the realy interesting bits.
tnkx
Ciro
August 29th, 2006 at 5:32 am

Good introduction about YUI. I would like to see a more expert screencast :-)
Nate
August 29th, 2006 at 6:59 am

Thanks for the great demo. As someone who is dabbling with the different JS libraries, it was very nice to see what you can accomplish and HOW you can accomplish it. I thought it was easy to follow, the examples were great, and you brought everything full circle.

Looking forward to more of these in the future!
Thomas Messier
August 29th, 2006 at 7:44 am

Great screencast, it’s impressive that you actually took the time to do all this, thanks. I do have a question though. Is there any particular reason why you code things like this:

foo = function() {
return {
init: function() {
// Code here
}
};
}();

As opposed to this:

foo = {
init: function() {
// Code here
}
}

Calling foo.init() for both of the above seems to produce the same result, and the second syntax is shorter, so I was under the impression that it’s not just a matter of preference.
Thomas Messier
August 29th, 2006 at 8:03 am

On second thought, I think I get it. It’s useful if you want to define some variables to be used only within that function scope, which you can’t do if you just define an object. Subtle, but clever. Any other reasons?
Dustin Diaz
August 29th, 2006 at 11:32 am

@Thomas: I like the modular format of returning an object just so that I can get my private properties and methods. That really is pretty much the main reason. It prevents any collisions and avoids the global scope. Keep in mind you can do this with the prototype as well to do some clever stuff. Eg:
```
var Foo = {  };
Foo.prototype = function() {
  var private_var = 1;
  return {
    go : function() {  },
    do_something : function() {  }
  };
}();
var bla = new Foo;
bla.go();
```
AndyC
August 29th, 2006 at 12:36 pm

Great introduction to YUI - thanks Dustin. Ignore the comments about it being messy. It went at just the right pace for me. Looking forward to the next instalment!
vig0
August 30th, 2006 at 9:16 am

Nice introduction to YUI. Thanks.
Will
August 31st, 2006 at 8:41 am

Thanks Dustin. I’ve been interesting in learning more about YUI for a while now and this was a great introduction.
JG
August 31st, 2006 at 9:26 pm

Great screencast! Very easy to follow and provided a bag full of tips and tricks. Having coded JavaScript since ‘98, I’m still NEW to the “object literal” format. My old school approach to JavaScript objects were to declare everything inside a function. All my vars were private, as well as functions (unless I mapped them to be public). I’ve been looking for a way to obtain the private/public feature again through “object literal” notation. You cleared this up for me in the screencast. Again, thanks!
Marien
September 1st, 2006 at 4:23 am

Hi Dustin,

Just wanted to let you know that you’ve made my javascript skills better for quite some time now.
Esspecially the yahoo library stuff has made my work easier and more fun to do. Since this screencast were the basics, i still learned from it, i’m really looking forward on the more advanced stuff! So keep on screencasting!
Dan Webb
September 1st, 2006 at 8:35 am

Alright Dustin,

Yeah, good stuff. You’re coding style is nice and clean. By the way, what screencasting s/w did you use?
Travis Young
September 3rd, 2006 at 11:12 am

Great idea and very edutaining! Thanks for sharing with the world! Looking forward to the next one.
howie
September 3rd, 2006 at 11:17 am

How will be the Howard Stern of web podcasts?
Brendon
September 4th, 2006 at 11:36 am

Hey Dustin, well done. My only suggestion would be to set your mouse cursor off the screen while primarily using the keyboard for interaction. It’s a little distracting and although it’s quite small, it can still cover up an important character or two (in future screencasts).
Matt
September 6th, 2006 at 3:05 pm

Great stuff! It’s like MTV for web developers. Thanks! Hope you have more in the future.
rtpHarry
September 8th, 2006 at 6:45 am

Hey Dustin, seems in the past few weeks you have been everywhere! I stumbled upon your podcast in iTunes (only one is archived still :( but i found the rest on Odeo and manually put them on my iPod), then I start watching a video and it turns out its your screen cast. Inspired I set about looking for more examples, and what do I find? Top 10 things you can do with YUI which i used one of the examples to make a slide out “email a friend” feature. When I finally wrestled it into submission (the first time i’d seen javascript in about 5 years was on your screencast) I thought the perfect thing to finish it off would be an ajax form. Guess where I ended up…

Anyway, point 1) how about encoding the screencast in ipod format? Have you tried it? is it unreadable?

And a side point, that light grey text you use on this comment form… well I have google toolbar with autocomplete and all I can see is a vaguely grey fuzz, just thought u’d like to know!
Jacqui
September 12th, 2006 at 12:46 pm

Thank you, Dustin. This is great. I’ve sent this to several developers who wanted a quick overview of YUI.
genius551v
October 2nd, 2006 at 6:57 pm

more, more, MORE, M O R E ! ! ! plz…. :-) this is great!

tranzparency

October 15th, 2006 at 12:24 am

That didn’t work out so well.. Oops, too much free as in beer. Let me try again. Awesome screencast by the way!


			YAHOO.example = function() {
				var $E = YAHOO.util.Event;
				var $D = YAHOO.util.Dom;
				// return value.  Uses the function.
				return {
					init : function() {
						$E.on('my-link', 'click', this.foo);
					},
					foo : function() {
						$E.stopEvent(e);
						alert("You've been hijacked");
					},
					bar: function() {

					}
				};
			}();

			YAHOO.util.Event.on(window, 'load', YAHOO.example.init, Yahoo.example, true);

John T.

October 25th, 2006 at 7:24 pm

I am having a heck of a time lately with variable scope.

Based upon your coding style, I am struggling with this example. Prior to this project I am on , I have stayed away from this “scoping” problem.

I simply want to be able to manipulate the value of a “public” variable. In this example, how would I modify the dustinDiaz var from within my init function???

Thanks.


YAHOO.example = function() {

		var $D = YAHOO.util.Dom;
		var $E = YAHOO.util.Event;
		var $A = YAHOO.util.Anim;
		var $M = YAHOO.util.Motion;
		var $DD = YAHOO.util.DD;
		var $ = $D.get;

		// Public Variables??
		var dustinDiaz;

						return {

							init : function() {

								// I WANT TO CHANGE THE VAR
								// dustinDiaz, but cannot!
								dustinDiaz = "coder";  // Won't work

							}
						}

	}();

	// Fire when available
	YAHOO.util.Event.onAvailable('doc',YAHOO.example.init, YAHOO.example, true);

Gags
November 24th, 2006 at 5:56 am

Perfect.

There seems to be so many programming resources aimed at beginners or forum discussions by complete experts and this came at exactly the right level.

Grap the intermediate developers out there and help us get up there….

Thanks for your time.
Yahoo! User Interface Basics and DOM Hijacking :: Tech Videos, Screencasts, Webinars
November 27th, 2006 at 1:29 pm

[...] Video is here. Tags: AJAX, Companies, Development, Javascript, Screencasts, Technologies, Yahoo! [...]
fireyy blog » Intype,åŸºäºŽWindowså¹³å°çš„TextMate?
January 29th, 2007 at 5:12 am

[...] BlogAboutArchivesResourcesWeb ColorLinks Intype,åŸºäºŽWindowså¹³å°çš„TextMate?Intype,åŸºäºŽWindowså¹³å°çš„TextMate? WEBLOGWEBLOG Tagged as: Intype, TextMate ç½‘ä¸Šè¯´Mac OS Xä¸‹çš„TextMateå’ŒLinuxä¸‹çš„VIMå¾ˆé…·ï¼Œå…·ä½“æ€Žä¹ˆä¸ªé…·æ³•…ä¸çŸ¥é“…æœ‰è€å¿ƒçš„å¯ä»¥çœ‹çœ‹è¿™ä¸ªï¼Œé‡Œé¢çš„ç¼–è¾‘å™¨å°±æ˜¯TextMate. è™½ç„¶ç›®å‰åœ¨ä½¿ç”¨çš„editpluså·²ç»å¾ˆä¸é”™äº†ï¼Œä½†æ˜¯äººï¼ˆæˆ‘è‡ªå·±ï¼‰æ€»æ˜¯ä¼šçŠ¯è´±çš„ï¼Œæœ‰äº†æ–°çš„ä¸œè¥¿ï¼Œæ€»ä¼šæœŸå¾……(ç®€æ´çš„ç•Œé¢å’Œå®Œå–„çš„ä»£ç ç‰‡æ®µæ˜¯æˆ‘æ‰€æœŸå¾…çš„) Intypeæœ€æ–°çš„å‘å¸ƒç‰ˆæœ¬å¯ä»¥åˆ°è¿™é‡Œæ‰¾ï¼Œæ–°çš„Alpha 0.2.0.236ç‰ˆæœ¬å·²ç»å¯ä»¥æ”¯æŒæ›´æ¢å—ä½“äº†ï¼Œæ¢ä¸Šâ€œæ–°å®‹ä½“â€ä»¥åŽï¼Œä¸æ–‡ä¸å†æ˜¯ä¸€å †æ–¹æ¡†ï¼Œä½†æ˜¯è¯´å®žè¯…è‹±æ–‡å—ä½“æŒºéš¾çœ‹çš„ã€‚ç›®å‰ä¸æŽ¨èé©¬ä¸Šæ¢ç”¨ï¼Œå› ä¸ºè¿žåŸºæœ¬çš„Undo/Redoè¿˜æ²¡æœ‰ ^_^ [...]
Using SciTE with TextMate Style Snippets - Monday By Noon
March 12th, 2007 at 4:29 am

[...] Ever since watching Dustin Diaz’s first screencast, I was incredibly jealous of TextMate (specifically the keyboard triggered snippets). I was on a mission to find an alternative that wasn’t limited to Mac OS X as it was clear there wouldn’t be a Linux version of TextMate. There are quite a few suggestions on the TextMate site itself, but I found nothing that mimicked the Snippets functionality of TextMate properly. E TextEditor came out for Windows, making me even more jealous. Now there was an application for Windows that performed similarly to TextMate, and I had nothing to work with. The author of E indicated that there would eventually be a Linux version, but not until the Windows version was final. After a continued search, I finally came upon SciTE Snippets. [...]
Joey
September 24th, 2007 at 12:50 am

Easy to follow, fun and not boring! Thanks for this and everything else you do for other people. By the way, I also enjoyed your Youza mf YouTube vid, but I don’t recognize the song, mind telling me? It’s funny as hell and I have to go watch it again now..
Yui Yahoo User Interface Video Screencast - Englisch
November 17th, 2007 at 5:35 am

[...] Das sehr ausfÃ¼rliche und in die Tiefe gehende Yui Video Tutorial finden Sie hier. Sie benÃ¶tigen den DivX Web Player. Diesen kÃ¶nnen Sie direkt auf der Video Seite runterladen und installieren. [...]
Ken L.
December 14th, 2007 at 11:54 pm

Hey Dustin,
Thanks for the great tutorial. I have a question. Some yui examples on the developer.yahoo.com/yui website wrap their code like this:

(function(){code to execute}();

Is there much of a difference of doing it this way than the way you showed in the screencast? Are there advantages of doing it one way over the other? Thanks a lot.

(I believe this is the format you showed in the screencast)
YAHOO.example = function(){ return { init: function(){code to execute} } }(); YAHOO.util.Event.on(window,'load',YAHOO.example.init, YAHOO.example,true);
Eric
December 18th, 2007 at 6:34 pm

First - many thx for the great tutorial! I just finished coding a hijacking of the dom the old fashioned way but this is a great way to intro YUI which I’m just starting to use. The only criticism I have of the screencast, constructive I hope, is that the format makes it hard to scroll forward and backward in the cast - which I like doing as I follow along taking notes or trying out the code.

thx again!
Eric
December 18th, 2007 at 6:36 pm

hah! whoops - and now I see the ‘download the quicktime version’ link. Perfect! Never mind except for the thx and great tutorial and all :)!
John
January 4th, 2008 at 4:04 am

FYI the Xvid codec works great with your screencast. The only problem I had was I had to hack on my pluginreg.dat to make Firefox recognize that Windows Media Player plays divx and xvid files. The usual caveats for modifying pluginreg.dat apply - close firefox first, make sure to change the plugin count too (above the plugin entry in pluginreg.dat)
Dudewheresmycar
February 3rd, 2008 at 11:49 am

Where does YAHOO.log go.

How can i see it.
FELIPE
July 8th, 2008 at 6:02 am

Hi Friends, another blog about YUI in English and Portuguese:

PORTUGUESE (ORIGINAL):
http://www.yuiblog.com.br

ENGLISH:
http://64.233.179.104/translate_c?hl=pt-BR&sl=pt&tl=en&u=http://www.yuiblog.com.br/&usg=ALkJrhi4nv78sbIyG5wawrfomkXvWZbsLw

./with Imagination

Screencast 01: YUI Basics and DOM Hijacking

52 Responses to “Screencast 01: YUI Basics and DOM Hijacking”

Get "JavaScript Design Patterns"