How many times do you need to implement a functionality which has to be run every n seconds and possibly should be stopped and resumed? Not so often probably but it happens and happened to me just today, for this reason I decided to write a mootools Mixin so that I can reuse this code when I need it.

The code

/**
* IntervalController Mixin
* Provides methods to start, stop and resume
* a setInterval functionality
*/
var IntervalController = new Class({
  _started: false ...

read the full post

Introduction

I know since time ago' that writing tests for our applications is one of the programming best practices, django taught me that many years ago, and gipi repeated it to me many times. But as many best practices it costs time to acquire the necessary skills, and time to start the implementation.

Maybe the best thing could be to place the testing phase at the beginning of the development flow, as the test driven development process shows you, so that you're forced to write tests for your application and you are forced to focus on code specifications, targets, runtime conditions, and all these things let's you write a cleaner and reusable code.

Actually is not so simple to change ...

read the full post

GEOMETRIKO is a skill game, written in html5, css3 and javascript, developed by a friend of mine which captured my attention some days ago'. It's available now in a demo version at this url, give it a chance because it's really an enjoyable game. It can be surely improved in some details, comment here if you have ideas or suggestions that can be useful for the developers.

The game

GEOMETRIKO is a turn–based game played on a 4x4 grid, and features four different tiles, aka Tiers, arranged in ascending order. Each player starts with an infinite number of Tier–1 tiles. Every time a player makes a three–of–a–kind he performs a Trip on the board; once a Trip is made it ...

read the full post

What if you need to get the css selector which targets a DOM element given the element itself?

This is the case for example when you want to store some added information over an element and show it after recharging the page. In this case you may store the information in the local storage object together with the path to the element, in other words you must be able to store the element position inside the DOM

In this scenario ...

read the full post

Do you remember the last post about canvas dealing with undo and redo functionality?

Now we'll see how to add a preview functionality, that is I want to see my straight line, or my circle, while keeping pressed the left mouse button and moving the pointer to change the shape size.

The first, bad, idea

Initially I thought that the way was to store the portion of canvas interested by the modification and restore it in the next mousemove call, so that the mousemove function has to respect the following flow:

• restore the previous saved state
• save the state of the portion of the canvas that now will be drawed
• draw the new state

Such flow works, but doesn ...

read the full post

Today I was playing (really working) with a nice animation effect to use for the pagination of a showcase module (or stories).

The concept is quite simple here, we have some items which iterates with a nice effect (fade in this case) automatically or not (decided through options). Every item has a dot controller which shows the item when clicked.

Nothing exceptional here, the cool thing is the effect that I gave to such dot controllers, as it seems that when clicking a not selected dot, the selected one moves forward or backward to reach the clicked point.

Quite difficult ...

read the full post

Ok, the release 0.2 of moogallery is out!, Check out the updated demo here.

The new release offers some new interesting features:

• Youtube and vimeo videos support
• Audio support, mpeg and ogg encoding to assure cross browser capability
• Mobile detection and swipe event handler to navigate through media in the lightbox view (requires Christoph Pojer's mootools-mobile plugin)

Maybe in the future I'll integrate a listener for the changes in the device orientation so that the gallery reloads recalculating the available dimensions. Such thing may be already done manually.

Check out the new release and comment here to let me know which improvements you'd add to the plugin.

moogallery plugin has just been released and charged to the mootools forge. Actually the plugin was already available from ajs, the javascript "addon" library for mootools which I populate with scripts I often use in my work.

moogallery is a plugin for mootools that allows you to create a gallery of images in a table format with tips and lightbox included. It 's enough to provide the container which has to contain the gallery and the path to the thumb and the whole images with related information (title, description, credits) to generate an autosized gallery inside the container in which the thumbs are loaded sequentially. Each thumb has attached an over event (showing the image title) and a click event ...

read the full post

Some times ago I wrote about the private static and instance members in mootools classes. Now it's time to speak about the protected members in mootools classes.

So the goal here is to obtain some members which are inherited from the parent class and accessible to a child class but not outside.

The trick is to use the Object.merge function to merge together the private properties of the parent exposed to the children through a protected method and the private properties of the child. Look at the following code:

1. var ids = 1;
2. 
   
3. var myParentClass = (function(){
4. 
   
5.   var _protected_prop = {};
6. 
   
7.   return new Class({
8. 
   
9.     initialize: function(id, par1, par2) {
10.       this.id = id;
11.       ...

read the full post

Let's see two patterns that may be used to have private members in mootools classes.

Private static members

Here is quite simple, it's enough to use a single execution function and js closures and provide the setter and getter methods to change and retrieve the member's values.

var myclass = (function() {
  var _name = null,
      _age = null;
  return new Class({
    initialize: function() {
      // do some stuffs
    },
    setName: function(name) {
      // do some checks here
      _name = name;
    },
    setAge: function(age) {
      // do some checks here
      _age = age.toInt();
    },
    getName: function() {
      return _name;
    },
    getAge: function() {
      return _age;
    }
  });
}());
var myinstance = new myclass();
console.log(myinstance.name); // undefined
myinstance.setName('jack');
console.log(myinstance.name); // undefined
console.log(myinstance.getName()); // jack

So what happens here is that the two variables

_name and _age

are in the scope of the single execution function, and so not accessible from outside. But their value is retained by the returned object which yes can access them since it is ...

read the full post