Ryan Rampersad's Chronicles
an retired blog of thoughts, opinions, ideas and links
  • About
  • Podcast
  • Links

Archives

My First MooTools Presentation

On Thursday, May 27th, I gave my very first MooTools presentation to an eagerly awaiting AP Computer Science class. The presentation was in three parts, the first a general overview of javascript itself, the second a micro-guide to MooTools glowing finesse with elements, events and effects, and finally a complete section on MooTools classes to compared to those in Java.

An introduction slide for my first mootools presentation

The MooTools website, the MooTorial and the mooWalkthrough all made appearances, giving extra credit to the third as my own project.

The presentation in all was 54 slides and lasted about 52 minutes with a Q&A segment. The content in the presentation was in fact enough to get the class to work on a not-too-rudimentary project involving MooTools the next day.

The Presentation

AP Computer Science MooTools Presentation

View more presentations from Ryan Rampersad.

You can also download the PDF or the PPTX. (If I wasn’t poor, I would have used Keynote.)

Enjoy!

missing argument 1 when calling function mutator.call

I’ve been doing some hefty MooTools development lately, and I ran into a odd ball error in that endeavor. I put it aside for a while, ignoring it while I worked on other code. Eventuallly, I had to face it though, so here are my remarks in that journey.

First, the error in question is formally given in Firefox/Firebug as follows:

missing argument 1 when calling function mutator.call
value = mutator.call(this, value);
mootoo…e-nc.js (line 1226)

(more…)

Queue Ajax Requests in Mootools

On a recent project, I used ajax to render a full cell of a table upon clicking it. I found that without some kind of queue, my clients would click on a bunch to expand them, but only the first would render. Mootools offers a plugin in mootools more called Request.Queue, but that wasn’t what I was looking for, since there was only a single Request object involved, not multiple.

I was reading the documentation of Request to see if I missed something, because I thought this was core functionality. Apparently, there is something built into mootools more that does just that, it chains requests, literally forming a queue.

Straight from the options of Request:

‘chain’ – Any calls made to start while the request is running will be chained up, and will take place as soon as the current request has finished, one after another.

Adding that option to Request worked perfectly, so I was able to click on a bunch of table cells and let them render freely.

I think that there should be a note in Request.Queue that there is already functionality for repeated requests with the same Request object built into the core.

Testing Events in MooTools Classes

I was adding some much needed events to my GoodCarousel plugin for MooTools recently. I added what I thought others might need,

startUp, beforeSlide, afterSlide, end, startOver, mouseEnter, mouseLeave

But since I’m lazy, I didn’t want to explicitly write a function for each of those events and then put them in options argument. I’m just too lazy. So here’s what I did instead.

		gc = new GoodCarousel("good-carousel", {width: 495, height: 300, loops: 1});
		var events = ["startUp", "beforeSlide", "afterSlide", "end", "startOver", "mouseEnter", "mouseLeave"];
		var fn = function(event) {
			console.log(event);
		};
		events.each(function(evt, i){
			gc.addEvent(evt, fn.pass(evt));
		});

I made an array of event names and a function that simply accepts an argument and logs the argument to the console. The next part is where the events are actually added. In the each, gc.addEvent is used to add each event. The fn.pass(evt) allows me to pass the event name to the function I’m calling so that it can be logged.

MooTools: takeOut and putBack methods

Sometimes you don’t want to replace an element with another one, you just want a placeholder, so you can put it back later. I wrote takeOut and putBack to help out with that.

Element.implement({
    
    takeOut: function(elementType) {
        var elementType = ($type(elementType) == "string" ?
                           elementType: "span");
        
        this.placeholder = ($defined(this.placeholder) ?
                            this.placeholder : new Element(elementType).setStyle("display", "none").addClass("takenOut_"+this.get("id")));
        
        this.placeholder.inject(this, "before");
        return this.dispose();
    },
    
    putBack: function() {
        if ( !$defined(this.placeholder) ) {return false;}
        this.inject(this.placeholder, "after");
        this.placeholder = this.placeholder.dispose();
    }
});

As you can see, I have the two methods. takeOut has an optional argument, elementType. You can specify a different tag-name (of an element) to be the placeholder of the original element after you take it out. It’s quite handy when you normally take out div tags but need to work on a tr of a table which don’t allow child span tags. A class is also added on too the placeholder just so you can see what it is supposed to be.

putBack isn’t so exciting, it just replaces the span with the original element. No big deal.
But take a look at the value of this, it’s not simply hiding an element, it’s completely removing it and still knowing where to put it if you need too.

It is annoying how SyntaxHighligher Evolved can’t display that code as well as mooshell can.

The End of 2009 & Thankful Notes

So it’s the end of 2009. I addressed this year in a recent post of mine and I really don’t have anymore to add to that. But instead, I’d like to give my thanks to a bunch of organizations and software.

MooTools

MooTools has been my javascript fasination since the dawn of time and I still love it. This year, Mootools has made bounds and strides, coming a long way to setup an incredible foundation for the future of the library. Today, actually, on the eve of the new year, the MooTools team released an upgrade helper for migration from version 1.11 to 1.2. You can checkout some related blog posts about that on Clientcide and the MooTools blog. You can download this wonderful helper at the bottom of the download page. In short, thank you Mootools for keeping me in touch with javascript, giving me a reason to help out the community and get away from that pesky Java.

Google

Well, Google does a lot for me. It provides Gmail, Reader, News, tons of other stuff I can’t discern easily enough from everyday use and of course, a pretty decent search engine. I backup my Gmail accounts with Thunderbird these days, I read my feeds for news continuously throughout the day and of course, I search every now and then. So, thank you Google, for giving me all of this free stuff. (Though I ask you keep your hands off my data!)

WordPress

I love blogging. Therefore, I like WordPress. It has served me well this year, even through a storm of vulnerabilities and a couple of major upgrades. I’d love to make a theme for this blog, based on Hybrid of course and maybe develop a plug-in or two. So thank you WordPress for giving me the ability to share my knowledge and thoughts with the world! I’d also like to give thanks to the plug-in authors:

Matt Mullenweg for Akismet, Michael Torbert for AiOSP, Takayuki Miyoshi for Contact Form 7, Ronald Heft for Google Analyticator, Arne Brachhold for Sitemaps, Michael VanDeMar for Login LockDown, Mark Jaquith for Subscribe to Comments, Viper0007Bond for SH Evolved, Andy Skelton for WordPress Stats, Austin Matzko for WP DB Backup, Thaya Kareeson for WP Greet Box, Donncha O Caoimh for WP Super Cache and finally, Michael Yoshitaka Erlewine for YARPP.

Thank you guys. Thank you so much.

Microsoft

I’m not ashamed to thank Microsoft for Windows 7. So far, I love it. I can’t wait until I get to beta test for Microsoft again. I’ll sign an NDA if I can get early beta testing for anything. It’s a great OS, it works, it’s simple. I hosted a Windows 7 party in October and I am so very glad they allowed me to do so! My guests liked Windows 7 as they had a number of problems with Vista. So thanks Microsoft for doing a great job.

Who else now? I’m sure there are tons of others I should thank. So thank you guys, for a great year, a great time and so much stuff.

Mootools Forge Released

Mootools Forge

Mootools Forge


It’s the moment everyone has been waiting for: the Mootools Forge has been released. I talked about it in January of 2009. We knew it was heading for a fall 2009 release, and just a few weeks before 2010, here it is!

So here’s a brief overview of the Mootools Forge.

  • Popular plugins get a promotion plug on the Forge home page [see most popular]
  • Recently added plugins get a temporary plug on the Forge home page [see most recent]
  • You can login via linking your twitter account or just normal registration
  • Search for plugins by name or tag type
  • The forge code is open source, check it out

The Mootools Forge is getting bigger everyday; it was released only a few days ago, and it already has a good number of plugins.

If you’re a plugin developer, get your plugins in a GitHub repository and into the Forge.

If you’re a plugin user, check it out. Go now.

GoodCarousel – A Carousel with Mootools

Hey there. I’m trying to get this plugin into the Mootools Forge but I’ve been having a hard time getting it to work. So in the mean time, checkout the repository on github.

GoodCarousel is a plugin made with Mootools 1.2.3. It is made to slide over to, not fade to, the next slide and uses inline elements to draw data for the slide titles, descriptions and images.

GoodCarousel Demo

GoodCarousel Demo

What it does

It creates a carousel like those found on cNet but instead of fading, it will slide over. The carousel draws its data from inline elements: h3, p and img within in a div with a specific class. This allows you to use the carousel but also keep the data indexable.

Usage

You can see a fully working demo page here. There are a few steps you’ll need to follow in order to get it to work.

  1. You need to determine the space you have for your slides. The space cannot change so fluid layouts probably won’t work. The demo page uses 495×300 pixel images for slides because that is the space alloted to it by the layout. I found the space by using the layout tab in firebug.
  2. When you make your images, keep in mind that the title and description text will be displayed on the left side of the image so putting in the right-top corner is probably the best bet. Experiment with it.
  3. Once you have your slides, you can easily build your html structure so GoodCarousel can draw data from it.
    <div class="carousel-data">
    <h3>Slide Title</h3>
    <p><a href="http://what.the.slide.links.to/">Slide description or subtext</a></p>
    <img src="path/to/slide-image.png" title="image title" rel="rel - for lightbox support" />
    </div>
    

    Each div with carousel data will make a slide in the carousel.

  4. The carousel nav is automatically sized based on options you set when initialize GoodCarousel.
    	window.addEvent("domready", function() {
    		gc = new GoodCarousel("good-carousel", {width: 495, height: 300});
    	});
    

    Make sure you set the width and height you used for your images. GoodCarousel will take of how big to make the container and how small each nav should be.

You have to include the GoodCorners javascript file and css file in the head of your page, as always.

<link rel="stylesheet" href="path/to/good-carousel.css" type="text/css" />
<script src="path/to/mootools-1.2.3.js" type="text/javascript"></script>
<script type="text/javascript" src="path/to/good-carousel.js"></script>
<script type="text/javascript">
	window.addEvent("domready", function() {
		var gc = new GoodCarousel("good-carousel", {width: 495, height: 300});
	});
</script>

Remember to set the width and height that your slides will be.

Downloads

You can pick up GoodCarousel with the stylesheet, transparent background and double arrows on the demo page as a zip. The zip contains a compressed and uncompressed version for both the css and javascript. You can use the demo page for setup reference.

Notes

You may need to edit the stylesheet that accompanies GoodCarousel. You can easily customize the height of the nav, text color, hover color and so on by editing the uncompressed good-carousel.css file.

This post was written for GoodCarousel 1.1 but will probably make sense with subsequent versions. It will also work just fine with Mootools 1.2.4.

mooWalkthrough Feedback for the Future

The mooWalkthrough has been around for a couple years now. I know that people read it but I don’t see or hear much feedback such as likes and dislikes about the content, pacing, structure and so on.

mooWalkthrough

mooWalkthrough

Every school year I take a couple weeks and rewrite some of it. Last last year I bit the bullet; I restructured everything and made the new mooWalkthrough 1.2.x edition, which we all know and love today. I’ll have ample time this school year to try to make it even better. Right now though, there aren’t any solid plans. The mooWalkthrough is supposed to be a guide so people can begin to play with Mootools in a hand-in-hand kind of way, or at least, that’s the idea I came up with. So I’d like some feedback and some suggestions about the future of the mooWalkthrough.

  • The structure of the content – The introduction of Mootools, General Knowledge, Elements, Events and Effects, is this good enough as an introduction to Mootools?
  • Future Content – Perhaps another branch that introduces Mootools-more?
  • Demos and Sample Code – There are new solutions such as jsbin and MooShell that can solve the demo part but, do the current code samples look fine?
  • Wiki-Factor – The mooWalkthrough is basically a big installation of dokuwiki. Anyone want to help write some pages?
  • Other Stuff – Anything you can think of to make it better? Other thoughts, comments?

Just leave a comment with your feedback or suggestions.

Thanks!

GoodCorners – Rounded Corners with Mootools

I admit that this plugin is really lame. Just use border-radius and stop supporting old versions of Internet Explorer. Sorry to waste your time.
Good Corner Example

Good Corner Example

GoodCorners is a tiny Mootools plugin that can apply the CSS3 border-radius to elements using a unified syntax so you can have beautiful rounded corners.

Usage

GoodCorners can be used in a couple different ways. Both parameters are optional. Omitting both will automatically round any elements with the gc class already on them. If you don’t supply a specific border radius, the default is 10px. Here is the GoodCorners syntax:

GoodCorners.round( [selector] [, radius settings]);
/*
	Radius settings:
		radius
		topleft
		topright
		bottomleft
		bottomright
*/

// Examples:
// To round images in a gallery
GoodCorners.round("#gallery img");

// To do some extreme rounding
GoodCorners.round("#extreme", {radius: "100px"});

Notes

In all cases, you will need to define a border on the elements you wish to style with typical stylesheets.

/*for default use*/
.gc {
  border: 10px solid black;
}

/*assuming you have a white background, easy to change*/
#gallery img {
 border: 10px solid #000;
}

GoodCorners doesn’t support KHTML out of the box because Mootools doesn’t provide a build in method for detection, that I know of.

What it works in

GoodCorners works in browsers that supports the border radius property in CSS3 or least a proprietary variant of it. Browsers that support this property are: Firefox 3.5, Safari 4 and Chrome 2.

GoodCorners doesn’t do anything putting the directives into a stylesheet can’t do but GoodCorners makes it easy to apply rounded corners with javascript without worrying about those pesky style name variations. There is a full version and a compressed version. Really, the only reason you need GoodCorners is if you want to round elements from javascript.

Enjoy!

Randomize an Array with Mootools

Mootools doesn’t offer a native way to randomize an array but it does offer a way to get a single random element from an array.

You can extend Mootools to have an Array.randomize method. It’s really easy to do.

Array.implement({
	randomize: function() {
		return this.sort(function() {return 0.5 - Math.random();});
	}
});

Now you can easily call randomize on an array and you’ll get a random array out of it. I think this should be added to Array.Extras in the Mootools More library.

mntbd.com design

It’s been about a month since I last published a blog post but during that time I haven’t been sitting idle. My other website, which is private file hosting, has had a front-page redesign. Check out the main page of mntbd.com.

mntbd javascript clock

mntbd javascript clock

What you’ll see there is my pretty neat javascript clock! It is something I made maybe three months ago. Before I released it, I had wanted to make it slightly better codewise. The clock is pure javascript and css, it even generates its own elements for the blocks. I used YUICSS in order to make it look consistant and of course the wonderful Mootools library to do all of that fancy javascript.

My plans for mntbd are a private uploading system and also a private shortlink system, which once coded, would be released to the public for people’s own private use.

This marks my return to blogging, at least, I hope.

PHP Functions with Options

Inspired by class options in Mootools, I wrote a little bit of code to mimic that functionality in PHP functions.

While this certainly isn’t the most elegant solution it is very simple. Using this, you can set default options for a function to use generically without you needing to supply anything else. If you do want to override an options though, it is as easy as putting a key-pair inside of the last argument of the function.

First, let’s look at how Mootools does it.

var myClass = new Class({
	Implements: Options,
	options: {
		"visble": true,
		"duration": 1500,
		"etc": false
	},
	initialize: function(required, options) {
		this.setOptions(options);
	}
});

If you look at it, you pass an object (which is key-pair like structure in javascript) to the constructor and it merges it with the default options object already inside of the class.

While I didn’t implement it on a class level and it certainly isn’t an inherited method like it is in mootools, it works similarly.

  function setOptions(&amp;amp;amp;amp;$new, $default) {
	$new = array_merge($default, $new);
  }
  
  function myServerAjaxLogic($required, $options) {
   setOptions($options,
	array(
		"type" => "json",
		"debug" => false
		"etc" => false
	);
	// do something
	return $required;
  }
  
  function useHTMLForAjax($data) {
	return myServerAjaxLogic($data, array("type"=>"html"));
  }

The first function, setOptions, accepts the first argument as the array argument and the second argument is an array that is already inside of the function. Once that happens, you can access any of the options that were either originally/unaltered from the defaults or transparently access it from the passed in options array. The setOptions function access the options array of the calling function via reference which means it modified the array directly inside of reassigning it.

This type of feature can be useful in different situations. I use it extensively when switching between json, html and plaintext output when using ajax with mootools, as in the example. If you want to use it, just drop setOptions into your code and off you go.

Coming Soon: mooWalkthrough 1.2.x

Can you believe I left this post alone without a link to the mooWalkthrough? The 1.2.x edition is out right now waiting for you to read it. It’s practically begging you.

I’ve been working on the next version of the mooWalkthrough, 1.2.x. It works with the 1.2.x version of Mootools.

I wrote it this time to be a lot shorter in terms of words. It shouldn’t take you more than an hour to read through the basics. That’s because I don’t spend time making jokes and filling up the page with long lines of useless junk. Just to give you a perespective on the size of the walkthrough now, the first version of the walkthough was about 40.2kB. The previous version, walkthrough-1.2, was about 43.8kB. The new walkthough comes in at a tiny 31.7kB. At this point in time, it’s also covering slightly more in terms of functionality.

I wrote the new walkthrough to also accomadate some more complex aspects of mootools, like Request. Is Request really so complex though? It is if you don’t know the basics. So, I split it up inside the walkthrough. It’s basically a big experiment. I haven’t written that part yet, I will soon though. I’d like to get the basic part up though first. I’d like to cover a lot of advanced uses of Mootools and of course some of the plugins that come with Mootools. (Of course, tons of plugins will come with Mootools soon via mootools-more, but I mean the original set like Fx.Slide.)

I’d like to have any feedback you have concerning the mooWalkthrough. I tried to make it not like a tutorial but instead a walkthrough of tools.

So that’s enough about me.

State of the Mootools

Tyler left a comment on one of my early blog posts, Mootools is not dead. His comment follows:

What would you say about this now? I agree with the subtext suggested by the authors of your excerpted posts. There has been an undercurrent in the MooTools-o-sphere for more than a year now: that developers’ insolence leaves the community with much to be desired.

The framework itself is an enigma. How else could you classify something proven to be so powerful, attractive, and yet mesmerizing to those who gaze upon it?

The undercurrent continues to flow, and MooTools momentum has reached a standstill. The various community services (lighthouse, github, google groups, mootools docs, mootools forums, blog, mootorial) have been disbanded or relocated into a dysfunctional, confusing, quagmire. Followers couldn’t help but scratch their collective heads, and newcomers aren’t given the indicators they might need to adopt.

Surely by now, most of the people who have developed a project with MooTools (such as I) have asked themselves, “How much longer do I have to keep asking myself ‘Is MooTools the solution on which I should standardize’?”

And I should add, my play with interrogative in the language of that statement is intentional. I have been reluctant to let MooTools go, though every inch of my being says it has little hope.

(emphasis mine)

You can read my reply to his comment in that post, but in this post, I’d like to ask something else.

I want to know what people think of the State of the Mootools. My feelings shift often. I wrote a new edition of the mooWalkthrough; I love moo that much. Other days, I wonder where it’s heading and where to find things. Where is everyone? While we don’t need a super leader, we do need someone to give us regular mootoolers some direction. More than what the core team has done so far.

What are your feelings on the direction of Mootools? The community, the library and the current feeling that Mootools gives off? Do you ask the same question as Tyler?

Next>

© 2021 Ryan Rampersad's Chronicles.