POST http://ifupdown.com/app/manifest/m.txt 405 (Method Not Allowed)

I searched for the error of course but there were shockingly few results. I reasoned though that it had something to do with using post to get a non-server interacting document. I overrode my request object in MooTools to use get.

var r = new Request({url: "manifest/m.txt"});
// ... onComplete, onError, other goodies
r.post(); // won't work on 1and1 for some reason
r.get(); // will work perfectly

And with that, I uploaded it back to the server and it was error free! 1and1 blocks post-requests to regular text files, so just watch out for it. Requesting via post a PHP file is just fine though. Oh, the mysteries.

Since there are multiple versions of line endings, like Unix \n but also Windows \r\n and Mac’s old \r, you need to replace them all just to keep your bases covered. It’s all pretty easy.

var string = 'this is a sentence.\r\n and this is another sentence about nothing!';

// notice that is reassigned? .replace returns!
string = string.replace(/(\r\n|\n|\r)/gm, "<br />");

console.log(string);

This code is simple. Just a string with a line ending followed by a replace statement. I make an explicit note that replace will return the new string, not simply mutate it in place. This caused me a bit of confusion. Also note that the gm at the end of the regular expression means that it will match globally and over different lines, just in case.

You can read the MDC documentation about String.replace too.

In Java Script, you can easily make a factorial function.

  function factorial(n) {
    if ( n <= 1 ) return 1;
    return n * factorial(n-1);
  }

Let’s break down the function. The first line establishes the odd case of zero-factorial, the case where it turns out to be one. Secondly, it accounts for one-factorial which is also one. The second line contains the recursion that everyone is so fond of. You take some value of “n” and multiply it against the value of the value recursed from subsequent factorials.

There’s not really an easier and more meaningful example of recursion than the factorial.

Happy factorialing.

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

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

Enjoy!

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)

I’m not a MooTools source code expert but I’ve read through it, so I remembered that that mutator business had something to do with class creation. That didn’t help much. I brought this to the attention of those in the IRC channel, and while most of the people were sleeping or busy, I got one helpful hand.

15:47:08 | <d_mitar> odd
15:47:11 | <d_mitar> works in chrome
15:47:49 | <ryanmr> I didn’t realize :) it didn’t used to work there either
15:48:51 | <d_mitar> if you set a breakpoint on the mutator call
15:49:01 | <d_mitar> and are very patient
15:49:08 | <d_mitar> you can trace it :D
15:49:24 | <ryanmr> I traced it back to Cookie but I never used Cookie :D
15:49:48 | <d_mitar> does mcl use it? hrm
15:49:54 | <d_mitar> shouldnt do
15:50:05 | <ryanmr> nope
15:51:05 | <ryanmr> when I step through the stack, I trace it back to the dispose method of cookie.

I certainly did attempt to add a break point to the mutator line, but it didn’t get me far. I ended up at cookie every time, so there again, I was stuck. So I asked on twitter too, but no luck there.

After working hard to patch some holes in my basement’s concrete, I came back to this conundrum. I decided to look over my code, and comment each class out as nessesary. That took quite a while, but I narrowed it down to an Observer class. It observes whatever items you attach to it, and then adds some events to reorder the items when certain conditions are met. If I commented out that specific class, the missing argument 1 when calling function mutator.call error would go away. I then tried to comment out all of the actual method bodies to see if I had some to do with it, but it appeared that wasn’t the case.

So then I went to jsfiddle to write up some cleaner tests. The first test was an almost exact copy of my project code, with a few minor (non-error causing) bits of logic absent. Once I hit run after writing it up, I got the error! So my enviroment wasn’t causing the problem either.

The second version was error free. I suspected reserved method names, similar to the way initialize is reserved for MooTools, had something to do with it. So I changed all of the method names, except initialize to end with an XXX. That clearly did something to solve the problem, as in Firefox, it was no longer showing that error at all. To narrow down which method was reserved or forbidden, I added the X’s to each one at a time. It appeared then that watch could not be a method without trouble.

So I wanted an even cleaner example, without all that classy cruft. So I ran the following two lines of code in the Firebug console:

var c = new Class({initialize: function(){}});
var x = new c();
console.log(x.watch);

That of course, confirm my suspicions. Firebug claimed that watch() was indeed a method – a native method. I tweeted about this with a screenshot. I ran the same code in Chrome (since the project code was working there, I wasn’t worried) and I tweeted another screenshot with the results – no problem.

It occured to me then to google firefox watch method. I made my way to the MDC’s watch page. It’s a non-standard apparently and the purpose is:

Watches for a property to be assigned a value and runs a function when that occurs.

I wouldn’t have expected that from some random method called watch.

The solution was now clear, I needed to rename my watch method. That is the fix. To fix the missing argument 1 when calling function mutator.call error when using MooTools in Firefox, do not use the watch method in your code. Instead, try a synonym such as: observe, look, peer, listen, view or stare.

That was my wonderful adventure for the 24th and 25th of June, 2010. Happy coding!

One of the errors that I encountered during development was this oddity:

Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1

After making sure every value was absolutely defined in the code and still getting the error, I was stumped. I asked on twitter what causes this error, but I didn’t get a response so I moved on to google. A thread on stackoverflow provided this insight:

It happens because circlesR values can become negative at some point. The radius of a circle cannot be negative.

This holds true for just about any canvas drawing method. I was using drawImage to draw a sliced up image on to the canvas. The error is alerting you to a negative value in one of the numeric arguments in whatever drawing method was called.

ctx.drawImage(this.avatar, xAxis, yAxis,
			32, 64,
			this.position.x, this.position.y,
			32, 64);

It turns out that my xAxis was negative for some calls. That borked canvas and instead of just saying, there is a negative number in your drawImage call, drawImage cannot accept negative numbers, it gave an index size error.

So in short, make sure you don’t use negative numbers in any canvas calls. To make it easier, just use console.log and copy the arguments of the drawing call and put them inside an array.

Good luck with canvas!

Firebug gave me this, more or less. That wasn’t helpful. (Why did Firebug get full, anyway?)

Firebug’s log limit has been reached. 0 entries not shown. Preferences invalid object initializer[Break on this error]

Let’s say you have some code, and it looks like this.

 var TranslationStrings = {
  onAdd: "Do you want to add this?",
  onDelete, "Do you want to delete this?"
 };

If you don’t notice the mistake in the object, Firebug will. It’s just a little something. It is a comma.

The onDelete, "Do...." should have a colon between the key-value pair. Not a comma, those go after a pair. It should be formed like so, onDelete: "Do...".

So remember, watch out for those javascript object literals with commas and colons.

A Parallel

First, a parallel. I’ve coded in Java the last couple of months because of school. During said time, I discovered scoped blocks in Java. A scoped block might be like this:

public void myMethod() {
  int i = 100, j = 10;
  {
    int k = i * j;
    i = 10;
    j = 10;
  }
  // cannot reference k from here
}

If you’re a java programmer, you might never have seen this happen before. Basically, putting floating brackets, as long as they match up, around arbitrary code, it will be in a different scope. k won’t be accessible from the outside of those brackets. I call these structures scoped blocks.

Now back to javascript

let in javascript acts similarly to the scoped blocks mentioned above.

Using let as a block is similar to the scoped block in java. The let-block won’t allow g to be accessed from the outside, x and m are newly bound values, they will only be around in the block scope.

 var i = 100, j = 10;
 let (x = 10+i, m = j + 5) {
   var g = x + m;
 }

let might make it easy to bind this to another variable in a certain scope, which could prove useful.

For more information about let, checkout the MDC page.

Firebug

I recently came up with a solution to this problem, different from the one I wrote about before. I wrote a little function called log. As you can see, it is the simplest thing in the world.

function log(arg) {
 console.log(arg);
}

So what’s the big deal? Let me explain. If you’re testing in Firefox with Firebug, you won’t notice much difference. But if you need to test in Internet Explorer now, you can just comment one line, that internal console.log which is faster and easier than commenting out all of them by hand.

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

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.