I’m not saying these abstractions are the best way to code in Javascript (just ask the Yahoo guys), since Javascript object oriented nature was not thought to do it so. But sometimes it makes easier for not Javascript devs to work.

One of these abstractions is Simple Inheritance by John Resig.

I think is really cool because of its simplicity: a few lines of clean code that let you do things in Javascript you shouldn’t be doing :)

Let’s see it:

/* Simple JavaScript Inheritance
 * By John Resig http://ejohn.org/
 * MIT Licensed.
 */
// Inspired by base2 and Prototype
(function(){
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
  // The base Class implementation (does nothing)
  this.Class = function(){};

  // Create a new Class that inherits from this class
  Class.extend = function(prop) {
    var _super = this.prototype;

    // Instantiate a base class (but only create the instance,
    // don't run the init constructor)
    initializing = true;
    var prototype = new this();
    initializing = false;

    // Copy the properties over onto the new prototype
    for (var name in prop) {
      // Check if we're overwriting an existing function
      prototype[name] = typeof prop[name] == "function" &&
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          return function() {
            var tmp = this._super;

            // Add a new ._super() method that is the same method
            // but on the super-class
            this._super = _super[name];

            // The method only need to be bound temporarily, so we
            // remove it when we're done executing
            var ret = fn.apply(this, arguments);
            this._super = tmp;

            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }

    // The dummy class constructor
    function Class() {
      // All construction is actually done in the init method
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }

    // Populate our constructed prototype object
    Class.prototype = prototype;

    // Enforce the constructor to be what we expect
    Class.prototype.constructor = Class;

    // And make this class extendable
    Class.extend = arguments.callee;

    return Class;
  };
})();

Ok, nothing extremely different from other implementations, what makes it easier to understand.

The 3 points I really like about it are:

    /xyz/.test(function(){xyz;})

That’s the way it checks the environment supports functions decompilation, in case it does and the code this._super() is found in the current object property code (of course, has to be a callable object), then the same named method will be called in the Parent Constructor when calling this object property.

    Class.prototype.constructor = Class;

That’s not needed from the functional point of view but it makes our Constructors more reliable.

    if ( !initializing && this.init )
        this.init.apply(this, arguments);

This condition makes possible the init method to be called just once on object creation via the new operator, since the way the Constructor prototype object is created consists in copying the object generated by new this() call (let’s say a “Parent Class” object).

One thing we could improve would be to name the Class.extend method like this:

    "use strict";
    Class.extend = function extend(prop) {
        var _super = this.prototype;

so we could do this:

    // And make this class extendable
        Class.extend = extend;

in order to avoid the deprecated arguments.callee property.

Another not JS nature improvement would be to clone every “[object Object]” or “[object Array]” property, instead of making objects to inherit shared references properties, so each instance would have an independent copy of these properties. In anycase I don’t think this makes a lot of sense…

        var cintilloDirecto = jQuery('div[id=cintilloDirecto]');
        if( cintilloDirecto )
        {
            var isEmpty = jQuery(cintilloDirecto).find('a img').attr('src').match('empty.gif');
            if(isEmpty == null){jQuery(cintilloDirecto).parent().removeClass('hidden')}
        }

el cual, además de utilizar un nombre de variable bastante discutible “cintilloDirecto” (quién no esté de acuerdo que lea cualquier libro acerca de código legible o técnicas de programación y exponga de manera clara su punto de vista) demuestra una terrible falta de “saber lo que se está haciendo”.

Para empezar la función global jQuery no tiene que ser aplicada una y otra vez sobre un objeto devuelto por la misma. Y lo peor de todo es la comprobación de la siguiente condición:

        var cintilloDirecto = jQuery('div[id=cintilloDirecto]');
        if( cintilloDirecto ) // cintilloDirecto nunca va a ser un falsy value

Ya que jQuery siempre devolverá un “jQuery object” incluso cuando el css selector utilizado no concuerde (match) con ningún elemento presente en el DOM.

De modo que el código refactorizado quedaría algo así:

        var directo = jQuery( '#cintilloDirecto' );

        if( !!directo.find( 'a img[src="empty.gif"]' ).length ) {
            directo.parent().removeClass( 'hidden' );
        }

Cómo decía por ahí un tweet que leí una vez: “Un bebé ballena muere cada vez que un backend developer programa frontend.” ;)

The point is we wanted to have autocompletion for airport selection without using AJAX, but prefetching a huge file containing the whole airport list (why? ummm, not my decision). Of course the airport file is huge (around 400KB, not gzipped), so before I came to the company the guys decided to load this file via AJAX request after “dom:loaded” but still was delaying too much the first user interaction.

My second try consisted in taking advantage of Web Workers:

• https://developer.mozilla.org/En/Using_web_workers
• http://dev.opera.com/articles/view/web-workers-rise-up
• http://www.html5rocks.com/tutorials/workers/basics

And it worked really well! Of course using as well an AJAX request as the fallbak for IE mostly. The major advantage is not the file transfer itself (since this should be ~ the same using a Worker object instance or an AJAX request or whatever other file loading alternative) but the time the Javascript engine consumes to treat the huge variable literal first assigment (in my case a really big Array of strings), where with a Worker gets done without blocking the execution of the rest of your javascript code.

I just did something like this:

Main javascript file

if(!!window.Worker) {
    var worker = new Worker('myWorker.js');
    worker.onmessage = success;
}

Worker file

if(!IE) {
    postMessage(hugeArray);
}

So the success method gets executed just after the Worker loaded the file with the airport list and had ready the hugeArray variable to be treated by my autocompleter functionality. The performance got considerably increased (in my case something like 10 times faster in FF and 3 times faster in Chrome 6).

Y Nicholas claramente llegaba a la conclusión de que cuando se quiere comprobar la existencia de la propiedad independientemente de si se trata de un atributo propio o heredado del prototype del “objeto padre” (por llamar de alguna forma a la función a partir de la cual se construyó), la mejor opción es:

(atributo in objeto)

Y si lo que necesitas es comprobar un atributo propio del objeto (no heredado, es decir, definido sobre el objeto directamente y no existente en el “objeto padre”) puedes usar hasOwnProperty(). Pero por supuesto teniendo en cuenta una serie de restricciones como bien apuntaba Kangax:

- Cuidado con los Host Objects.
- Cuidado con propiedades definidas en ambos objetos al mismo tiempo.
- Y cuidado con algunas implementaciones del standard ECMAScript.

En definitiva, la cuestión es saber lo que estás haciendo y echarle un vistazo de vez en cuando al standard, además de comprobar resultados en los distintos navegadores antes de dar por cierta cualquier afirmación (eso es lo que tiene Javascript, nunca puedes estar seguro al 100% en el 99.9% de las situaciones).

Note: Most of the info in Ninja Techniques posts are based on the wonderful posts these guys;

• http://perfectionkills.com
• http://www.nczonline.net
• http://javascriptweblog.wordpress.com
• http://allyoucanleet.com
• http://dmitrysoshnikov.com

had written, together with the Standard ECMA-262.

First of all, Javascript is an implementation of the ECMAScript language.

ECMAScript is an object-oriented programming language for performing computations and manipulating computational objects within a host environment. ECMAScript as defined here is not intended to be computationally self-sufficient; indeed, there are no provisions in this specification for input of external data or output of computed results. Instead, it is expected that the computational environment of an ECMAScript program will provide not only the objects and other facilities described in this specification but also certain environment-specific host objects, whose description and behaviour are beyond the scope of this specification except to indicate that they may provide certain properties that can be accessed and certain functions that can be called from an ECMAScript program.

Let’s take a look at some definitions directly from the ECMAScript standard:

• type:
  
  

  An ECMAScript language type corresponds to values that are directly manipulated by an ECMAScript programmer using the ECMAScript language. The ECMAScript language types are Undefined, Null, Boolean, String, Number, and Object.

• primitive value:
  
  

  member of one of the types Undefined, Null, Boolean, Number, or String as defined in Clause 8 (types definition).

  e.g. “hola”, 1, true etc.

• object:
  
  

  member of the type Object.

  e.g. var a = new Array();

• constructor:
  
  

  Function object that creates and initialises objects.

  e.g. Array

• prototype:
  
  

  object that provides shared properties for other objects.

  e.g. Array.prototype

• native object:
  
  

  object in an ECMAScript implementation whose semantics are fully defined by this specification rather than by the host environment.

  Some native objects are built-in; others may be constructed during the course of execution of an ECMAScript program.

• built-in object:
  
  

  object supplied by an ECMAScript implementation, independent of the host environment, that is present at the start of the execution of an ECMAScript program.

  e.g. Math

  One, the global object, is part of the lexical environment of the executing program. Others are accessible as initial properties of the global object. Every built-in object is a native object.

• host object:
  
  

  object supplied by the host environment to complete the execution environment of ECMAScript.

  e.g. window

• etc. (See all definitions here)

Conclusion got from these definitions:

Javascript is an implementation of something more general and platform independent! Ok, this we knew it. And there are entities which behaviour and features are defined by the standard and other kind of objects that depend on the particular implementation.

These are the Javascript aspects I’ll treat in next posts:

- Objects and Functions.
- Inheritance.
- Scope chain.
- Arrays.

And for each of then, I’ll try to give a Javascript framework example where it is clearly used the concept we’re treating in that moment. Ok, so let’s start with the first Javascript feature I’d like to face:

Execution Context

Definition:

When control is transferred to ECMAScript executable code, control is entering an execution context. Active execution contexts logically form a stack. The top execution context on this logical stack is the running execution context. A new execution context is created whenever control is transferred from the executable code associated with the currently running execution context to executable code that is not associated with that execution context. The newly created execution context is pushed onto the stack and becomes the running execution context.

Basically, the evaluation of a certain type of code creates an execution context which is set on the top of the “execution contexts stack”. On the other hand, there are 3 kind of executable code:

- Global code (Code defined in the main program block, so outside of any function(){} block).
- Eval code (Code executed by eval()).
- Function code (Code inside a function(){} block).

And each of them have their own features. In general, let’s say that each context created has associated a Variable Object where is kept some of the needed data for the specific context and related code to run. In the case of Function code, its Variable Object associated to the context created when the control is transferred to it, is called Activation Object. For Global Code the Variable Object is the same Global Object (in browsers – window).

That’s all about Execution Contexts?

Of course not, since an execution context has a Variable Object plus a Scope chain (there has to be a way to access variables defined in parent methods) and a Context Object (our well known friend this).

Which info holds the Variable Object?

In context associated to global code:

• variables
• function declarations

In context associated to function code (Activation Object):

• variables
• function declarations
• formal parameters
• arguments object (which is a map of formal parameters but with index-properties)

What is the Scope chain? And Eval code? …
This is just the main structure of the article, I’m preparing the examples, extended explanations and frameworks code (…)

javascript as the rest of the programming languages has good and bad parts.

Here it goes some funny conditions results that make us think about why didn’t we choose working as lawyers, doctors or whatever other time consuming occupation but programmer:

"" == "0"     // false

0 == ""      // true

0 == "0"    // true

null == undefined      // true

" \t\r\n " == 0      // true

You can play and check the previous expressions here:

Result

true

TIG: you can get it in Ubuntu like this: sudo apt-get install tig
Is a quite nice command tool that lets you explore you’re git repositories in a more comfortable way than the plain git commands like git status, show etc.

and a git auto completion script: http://gist.github.com/58383

In Anycase, every day I Keep On learning more a more About GIT, and really love it.

Regards,
Daniel

 gem install bundler

As you have noticed is a ruby gem. The installation guide was pretty accurated, the problem came with the actual mysql lib dependency that I had in my Fikket source code.

The Bundler command “bundle install” could not get it working.

Solution: installing the libmysqlclient15-dev

And everything was ready to go. So if you have this problem when doing: gem install mysql –> install first the mysql dev library!

Regards!

Daniel

PS: In dev env I was only using sqlite, that’s why before using Bundler I didn’t have to fight against the mysql lib installation.

1. Es un framework de PHP más que un framework de desarrollo genérico. ¿Por qué? Pues porque mayormente se trata de una librería de clases muy útiles y por lo visto bien desarrolladas, pero no está enfocado a facilitarte el resto de tareas repetitivas aparte de la implementación en sí de un proyecto. Como por ejemplo: el despliegue, la estructura del mismo etc.
2. La documentación a mi entender deja que desear (aunque hay cosas mucho peores por supuesto). No es comparable a la que puedes encontrar en el sitio y la comunidad de Symfony.
3. La configuración de un sitio con este framework me da a mí que te la tienes que trabajar tú solito. Otra gran diferencia respecto a Symfony o Ruby on Rails.

Pero vamos, que tampoco soy yo nadie para echarle tierra encima al Framework. Seguro que en seis meses hablamos y os digo todo lo contrario.

Un saludo, y en seis meses hablamos.

Por algún motivo que escapa a mi vago conocimiento de sistemas, la instalación es correcta pero los escritorios virtuales que obtengo no son accesibles desde el cliente xvncviewer. Todo esto me refiero mediante ssh en mi servidor ps de Dreamhost.

Tras comprobar que en mi portátil funciona sin problema, me estoy planteando que el problema viene de alguna configuración en el apache de Dreamhost que no me permite crear adecuadamente los escritorios.

Cualquier sugerencia es bienvenida. Para comenzar mi andanza en el maravilloso mundo de VNC leí un par de artículos y la documentación que aparece en la página de realvnc.

Os animo a darme una pequeña lección acerca de este software y su configuración ;) ¡Bienvenida sea!