Thursday, May 10th, 2007
MooTools Video Tutorial
Category: Screencast
, Examples, Recording, MooTools
Rick Blalock has released a free version of his MooTools video tutorial that covers:
- Lesson Two - De-Cluttering the Membership Page
- Lesson Three - Using MooTabs to Condense Related Products
- Lesson Four - Using a MooTools ‘Light Box’ to Create a Friendly Gallery
- Lesson Five - Using Fx.Styles to Control Font Size
- Lesson Six - Creating a Sliding Sub Menu with MooTools
- Lesson Seven - Implementing Reflection Javascript for Images
- Lesson Eight - Creating a Sliding Image Menu
- Lesson Nine - Using AJAX with the Sliding Image Menu
2.9 rating from 91 votes
I especially like the reflection tutorial. Imagine, adding class name to an image - the doors this will open up for us all!
I will not add my rant about reflecting images using Javascript, but I am saying it in my head.
Needs narration…
I’ve just tried watching one of these, using the latest version of Flip4Mac and I just get a green screen. Guess its likely to be WM10 or WM11 encoded so just a warning for Mac users.
Yeah there is a known problem for MAC users and newer encoding of the WM players. Sorry about that but can’t do anything currently for it.
Shawn, I hear a narration when I watch the videos.
Nice video serie!
I was kinda shocked to see MooTabs in there LOL I’m the one who coded it, but I never thought anyone knew about it…! :)
great job on MooTabs. :-) I just thought I’d create a series using it because it’s so useful. I thought I wrote you about it, no?
Yes I remember now!…
I wish I could put more time into it… I started working on a completely new version that offers more flexibility (both for the design/look of the tabs, but also for it’s usability). Haven’t worked on it for a while now though… I’ll have to get back to it! Especially with 1.1 out now! :)
Rick, how about uploading them to Google Video?
Great job with the tutorial. You have a great way of explaining things that doesn’t make it seem to intimidating for the new user. However, there are some things that I take offense with.
Forgive me if I’m taking things out of context. The video links wouldn’t work, so I could only see this one on YouTube, which could have been created by someone else, or perhaps you explain why you do things the way you do them in an earlier video.
But why do you use deprecated onclick events for the Ajax, call “code reuse” copying and pasting the same code over and over, and make your menu links list items instead of actual links so that users with JavaScript enabled (ie Google) can’t use them? And why Dreamweaver when all you’re doing is editing HTML code?
If people are paying money for your tutorials, and they have a sincere desire to learn how to do something, don’t you owe it to them to teach it right? Or do you explain those caveats in the full version?
I mean, I can understand keeping things simple for the sake of tutorial, but… this seems to be taken to an extreme degree, and I’m pretty sure “onclick” isn’t any harder than addEvent. Especially if you can show them how to make all their links (links, not unordered list items) work with only one function. ESPECIALLY considering that anyone going to the Mootools forums asking for help with such code would first and foremost be told to clean it up.
Perhaps you should wait until you have a strong grasp of the technology before you sell lessons on it.
I just watched the lessontwo.
That has got to be the ugliest, most complex code I’ve seen for a simple collapse/expand.
And when he copied that block of code and pasted it two more times right below, I almost choked. Then he couldn’t get it to work properly the first three times because he had so much redundancy in weakly typed strings.
I can’t even imagine what the mootools code would look like if one tried to do something actually complex.
@zoro:
Please don’t use the coding examples provided in that video as an indication of what well scripted Moo-based code looks like. This guy’s just hacking some crap together for the sake of looking smart. Mootools is all about unobtrusive JavaScript and REAL code reuse (as in, not copying and pasting “reuse”).
zoro, please dont think that mootools is a complicated framework just because of this awful awful tutorial.
wow, the man in charge of these tutorials really knows nothing about mootools. That was the worst tutorial ive ever seen, and it makes mootools look so much more complicated than it actually is. I really hope no one trusts that this guy knows what hes talking about…
come to the mootools forums if you need to know how to do something, and you will be taught the right way to do it…
Guys,
The MooTutorials are basic. There is no effort what so ever (obviously) to keep, for instance, AJAX code codified. The tutorial series came because of several clients of mine (Who know nothing about javascript). They wanted to be able to add some CSS styles and be in control of what they were doing. This was the simplest way of doing it and I made tutorials while I did it.
It is not meant to be a replacement for the MooTools docs or general javascript practices. This tutorial was meant to help people learn and, nothing more.
If you would like to write a simple javascript tutorial with unobtrusive code that has no reuse (that is a continuation of the current series) then contact me and I’ll pay you to do it (seriously, as an “Optimizing javascript” is planned).
But just keep in mind I am trying to help people who haven’t a clue first. Not the javascript guru looking for fewer lines of code.
How is teaching someone the wrong, more complicated way and then later teaching them the easier, better way more effective than just teaching the simpler method in the first place? It’s like teaching someone how to use the spacer.gif hacks of table-based layouts, just so you can teach them CSS later.
@Michelle:
Ok. I give. After thinking about the comments on this page, I agree, it would have been better to teach it the way you’re suggesting. It would have also given MooTools better credit for what it is.
But, since you and the rest of the MooTools zealots wish to purify the web of javascript heretics like myself - would you like to make a series optimizing the code for production sites?
Rick, I’m not a zealot who wants to purge the web of JS heretics. I have no problem with you if you want to put script tags in your pages. I just don’t like it when people teach other people to put script tags in their pages. Especially when the framework itself makes it so much easier not to.
thanks googd article resim