Anders Jönsson

Deferred promise in JavaScript

noreply@blogger.com (Anders Jönsson) — Thu, 03 Nov 2011 22:54:00 +0000

One way to handle async behavior in your JavaScript application is to use deferred promises (CommonJS Promises/A). By using promises you can program in a way that focus more on the flow of the application than on specific callbacks. If you see everything as an async behavior (meaning that something will happen, but you don’t know when) you can also see the user interaction as an async behavior which has some benefits. Deferrers may also be used to simplify APIs/function calls by removing all callbacks from input parameters.

There are different frameworks for deferred promises; most of them have a similar syntax. You can setup things that will/will not occur and how to handle them. The syntax is pretty straight forward; you use “when” for the things that will happen/could happen and “done”/”fail” to handle success and failure actions. With the deferred object you can either resolve them and go to done action or reject them and go to fail action.

In this example I will use jQuery’s (which also is used internally for ajax calls). I have a “when” with two functions which both returns a deferred. If both functions resolve the deferred the done action will be invoked. The first function “userConfirmation” prompts at load and the result is used as an argument when resolving the deferred. The second function “userInput” wait until the user clicks the button, if the value has changed the deferred is rejected otherwise its resolved.


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Deferred</title>            
</head>
<body>

    <form method="post">
        <input type="text" id="data" value="yes" />
        <input type="button" value="ok" id="ok">    
    </form>

    <script type="text/javascript" src="http://code.jquery.com/jquery-git.js">
    </script>

    <script type="text/javascript" >

        var userConfirmation = function(){
            var deferred = $.Deferred();
            var answer = confirm('press ok');
            return deferred.resolve({'answer': answer});        
        };

        var userInput = function(){
            var deferred = $.Deferred();

            $('#ok').click(function(){
                var text = $('#data').val();
                var obj = {data:text};
                
                if(text !== "yes"){
                    deferred.reject(obj);        
                }else{
                    deferred.resolve(obj);    
                }
            });
            
            return deferred.promise();
        };

        $.when(userConfirmation(),userInput())
            .done(function(confirmation, input){
                alert('user confirmation: ' + confirmation.answer 
                    + ' and user input: ' + input.data);    
            })
            .fail(function() {
                alert('fail');
            });

        // .progress(function() {
        //         when someone calls "deferred.notify()"
        //         alert('progress);
        // })

    </script>

</body>
</html>

If you want a progress of the resolves you can add a “progress” function what will be called every time someone calls “notify” on a deferred. (jQuery v1.7)

For more information and examples, please see:
http://api.jquery.com/category/deferred-object
http://www.erichynds.com/jquery/using-deferreds-in-jquery
https://github.com/briancavalier/when.js

Stockholm Webmonkeys - Tuesday, 18 October @ Betsson

noreply@blogger.com (Anders Jönsson) — Fri, 07 Oct 2011 11:07:00 +0000

After a well deserved break we are back - in style! This time we'll explore the synergic effects of web development and art. We will also take a deep dive into the world of LESS - The dynamic stylesheet language which helps creating and organizing CSS more efficiently.

We hope this will be an inspiring event which will tickle your creative nerve and give you the tools to go off and create your own experiments!

Someone at our last event asked what the business case is for bleeding edge technologies like WebGL. Our response to this is simply: "awesome needs no use-case" ;)

http://www.webmonkeys.se/

noSuchMethod / method_missing / doesNotUnderstand / __resolve in JavaScript

noreply@blogger.com (Anders Jönsson) — Tue, 02 Aug 2011 10:00:00 +0000

There is a powerful concept in some languages that lets you as a developer handle undefined methods call on objects. It sometimes refers as "method_missing", "noSuchMethod", etc. This means that if someone tries to call a method that’s not on the original object you can try to figure out what the intention was or do some other magical stuff.

If you’re fortunate enough to live in Mozilla land you can use this concept by naming a function to “__noSuchMethod__”.

Example:

Browser support?
FireFox = Yes
Chrome / Opera / Safari / Internet Explorer = No

Node.js = maybe*

For more information, please see:
• https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/noSuchMethod
• https://mail.mozilla.org/pipermail/es-discuss/2008-August/006901.html

Front-end Code Standards & Best Practices

noreply@blogger.com (Anders Jönsson) — Mon, 25 Jul 2011 09:34:00 +0000

Interesting reading: "Front-end Code Standards & Best Practices" http://na.isobar.com/standards/

Mixins and mixers in JavaScript

noreply@blogger.com (Anders Jönsson) — Sat, 25 Jun 2011 21:25:00 +0000

Mixins is a powerful way to reuse code between different objects and types. Although JavaScript does not support mixins at the language level the approach can easily be mimicked by code. By using mixins you can extract code/functionality from one object/type and apply it to other object/types. Mixins can also be used to add roles to objects, and thereby take a somewhat DCI influenced approache. You can also use the mixin for areas like cache, security, transformations, etc.

The mixer (or augmenter) is something you have to write by yourself, or copy mine. It’s easy, just go over all the things you want in the mixin and copy them to the target.

Below is an example where I add JSONify functionality from a mixin, "JSONifyMixin", to a target type, "Book":

/* jsonify-mixin.js */
var JSONifyMixin = function(){
};

JSONifyMixin.prototype.JSONify = function(){
return JSON.stringify(this);
};

/* book.js */
var Book = function(author, title){
this.author = author;
this.title = title;
};

mixer.mix(Book, JSONifyMixin);

/* demo.js */
var book = new Book(
"Andrew Hunt",
"The Pragmatic Programmer: From Journeyman to Master");

// {auther : "Andrew Hunt",
//  title : "The Pragmatic Programmer: From Journeyman to Master"}
var json = book.JSONify();

You can see the mixer as strict or loose. The strict mixer will fail if the function that you are trying to mixin already exists on the target object. The loose mixer will just ignore them.

Depending on your needs you have to decide if you want to mix on object or type level. Example:

Type:
mixer.mix(Book, JSONifyMixin);

Object:
var book = new Book(...)
mixer.mix(book, JSONifyMixin);

For more examples and some materials from a presentation I had, please see https://github.com/archive/mixin

Happy mixing!

Stockholm Web Monkeys - Tuesday June 21st

noreply@blogger.com (Anders Jönsson) — Wed, 08 Jun 2011 19:20:00 +0000

Mmmyeah, it’s that time again! Webmonkeys all over Stockholm are gathering for one final opportunity to monkey about before the summer. As usual there will be food, drinks and a sweet mix of web technologies. We will cover Javascript OO design patterns, bleeding edge 3D technology using WebGL/CSS, and pragmatic insights into developing mobile web applications.

Please see http://www.webmonkeys.se/ for more information!

TDD/BDD and design

noreply@blogger.com (Anders Jönsson) — Tue, 10 May 2011 20:21:00 +0000

I really like TDD/BDD. I really do. To drive my code from specifications/tests is not only fun but it will often help me to design my systems better. And making good design decisions is always nice, isn’t it?

The sad part though is that many folks have an illusion of what TDD/BDD can help them with, especially when it comes to the design part. This is a topic that has been covered many times before, but still there is an idea that by just doing TDD/BDD you will get a better designed system and that is my folks the illusion. The problem is that if you suck at designing systems, the design that you get by doing TDD/BDD will unfortunately probably also suck. It will suck less than if you didn’t do TDD/BDD but it will not help you creating that wonderful design that you were hoping for. If you don’t know what to look after or what is bad smells, you will probably not find them nor smell them only by doing TDD/BDD. That is of course sad, very sad in fact, it would be nice if TDD/BDD magically solves the knowledge/experience/skill problems and automatically produced nice design and good design decision.

It’s like this; if you suck at woodwork, buying an expensive knife won’t make you a great carver. It will still only be you, the knife and the crappy piece of wood.

But here’s the good part, if you are good at designing systems, TDD/BDD will probably help you with creating great designed systems which is flexible, easy to change, has the right responsibilities and all the other good fluff that we all like.

So I encourage you to keep doing TDD/BDD, but remember to learn about good design and good design principles.

To quote a somewhat famous Bob:

"Is TDD a replacement for design? No. You still need all your design skills. You still need to know design principles, and design patterns. " ... "The bottom line is that TDD is a_ design technique but should not be the _sole design technique. All the old design rules and skills still apply; and TDD is a powerful way to inform and augment them."
(http://blog.objectmentor.com/articles/2009/10/08/tdd-triage)

Fluent interfaces, jslint and "unexpected end of line"

noreply@blogger.com (Anders Jönsson) — Sun, 17 Apr 2011 18:49:00 +0000

A couple of days ago when I was running jslint (jsl.exe) against my JavaScript code I got the following warning:

"lint warning: unexpected end of line; it is ambiguous whether these lines are part of the same statement"

The warning was pointing at ".from(allProducts)" in the following code:

var enabledProducts = new Query()
 .from(allProducts)
 .select(["name","price"])
 .where("enabled")
 .isEqualTo(true);

Humm... so there was a problem with recognizing the fluent way of writing? Just for fun I changed the code so that the dots appear after the function name:

var enabledProducts = new Query().
 from(allProducts).
 select(["name","price"]).
 where("enabled").
 isEqualTo(true);

Now jslint was happy again, but not I, for this way of writing is totally doolally .

In the configuration I found the following parameter:

"+ambiguous_newline # unexpected end of line; it is ambiguous whether these lines are part of the same statement"

I turned it off and everything was green again.

Då var det dags igen! Stockholm Web Monkeys

noreply@blogger.com (Anders Jönsson) — Thu, 10 Mar 2011 07:00:00 +0000

"Hello web monkeys!

Our next meeting has a massive lineup, so you don’t want to miss this
opportunity for all the bananas in the world. Like always, there will
be something to eat, drink, listen and to discuss about. And did we
mention it’s free?

We only have 40 seats available, so please register yourself at:
http://bit.ly/h4Mvqv

Agenda:
18:30 Sandwiches & monkeying around
19:00 Dude where’s my threads? - introduction to node.js (Karl
Böhlmark)
20:00 UX for monkeys (Michael Stratton)
20:30 SVG Animation (Hakim el Hattab)
21:00 HTML5 discussion: What's good, what's missing, web browser
implementation takes (Robert Nyman)

Location: Fantasy Interactive, Stureplan 2, Stockholm

For more information, see: http://groups.google.com/group/stockholm-web-monkeys
Follow us on twitter: @SthlmWebMonkeys

See you there!
/David, Marcus, Anders"

Different ways of handling “this” changes (self/createDelegate/bind)

noreply@blogger.com (Anders Jönsson) — Sun, 06 Mar 2011 21:48:00 +0000

Sometimes “this” won’t point at the object you want it to do. So in those occasions you have to write some code to fix it. For example the jQuery framework will always change what "this" points to, sometimes for good and sometimes for bad.

Here are three different ways of handling "this". There is no right and wrong. You must decide which one you want to use based on what you like best (and performance issues).

var self = this

var demo1 = {

  attachOnClickForAllCheckboxes: function(){
      var self = this;
      $("input[type=checkbox]").click(function(checkbox){
          self.doThisOnClick.call(self, this.value);
      });      
  },

  doThisOnClick: function(checkboxValue){
      console.log(typeof this.doThisOnClick === "function");
      console.log(checkboxValue);
  }

};

createDelegate(this, function(){})

var createDelegate = function(instance, delegate)
{
  var self = instance;
  var wrappedDelegate = function() {
      return delegate.apply(instance, arguments);
  } 
  return wrappedDelegate;
}

var demo2 = {

  attachOnClickForAllCheckboxes: function(){
      $("input[type=checkbox]").click(createDelegate(this, function(checkbox){
          this.doThisOnClick(checkbox.target.value);
      }));      
  },

  doThisOnClick: function(checkboxValue){
      console.log(typeof this.doThisOnClick === "function");
      console.log(checkboxValue);
  }

};

.bind(this)
Note: Please read http://pmuellr.blogspot.com/2010/06/bind-considered-harmful.html

Function.prototype.bind = function(obj) {
     var that = this;
     return function() {
          return that.apply(obj, arguments);
      };
};

var demo3 = {

  attachOnClickForAllCheckboxes: function(){
      $("input[type=checkbox]").click((function(checkbox){
          this.doThisOnClick.call(this, checkbox.target.value);
      }).bind(this));      
  },

  doThisOnClick: function(checkboxValue){
      console.log(typeof this.doThisOnClick === "function");
      console.log(checkboxValue);
  }

};

Design Stencil Kit

noreply@blogger.com (Anders Jönsson) — Sun, 27 Feb 2011 23:02:00 +0000

Yahoo har en del snygga designstenciler som man kan använda om man vill mocka gränssnitt. Stencilen finns för massa olika format, se mer på: http://developer.yahoo.com/ypatterns/about/stencils/

Exempel:

Stubs i JavaScript

noreply@blogger.com (Anders Jönsson) — Thu, 17 Feb 2011 19:29:00 +0000

Det finns många olika Mocking/Stubbing-ramverk för JavaScript som kan förenkla dina specifikationer. Dock så behöver man inte alltid dra in ännu ett ramverk för att göra enkla stubbningar. I exemplet nedan har jag en funktion som visar en varningsruta om man besöker sidan med en viss webbläsare:


var demo = {
  checkBrowserVersion : function(){
      if($.browser.msie && $.browser.version === "6.0"){
          alert("Warning...");
      }
  }
};

"alert" och jQuery kan vi enkelt stubba bort och ersätta med egen kod. I specifikationen nedan så använder jag Jasmine som specifikationsramverk. I "beforeEach" så sparar jag först undan den gamla alert/jQuery innan jag sätter om det till det som jag vill ha:


describe("Browser specifications", function() {

describe("When browsing with ie 6.0", function() {

  beforeEach( function() {
    _alert = window.alert;
    _$ = $;

    window.alert = Function.createDelegate(this, function(message) {
      messageCaught = message;
    });

    $ = {};
    $.browser = {
      msie : true,
      version : "6.0"
    };
  });

  it("A warning message should appear", function() {
    demo.checkBrowserVersion();
    expect(messageCaught).toEqual("Warning...");
  });

  afterEach( function() {
    window.alert = _alert;
    $ = _$;
  });

});

});

Efter att specificationen har exekverats så sätter jag tillbak alert/jQuery till det som det var innan. Lätt eller hur?

Sommarens snyggaste t-shirt?

noreply@blogger.com (Anders Jönsson) — Thu, 20 Jan 2011 21:03:00 +0000

Det har väl knappas undgått någon att det för några dagar sedan lanserades en officiell HTML5 logga. Loggan är som en mashup mellan Autobots logga och Supermans:

I och med loggan finns det nu en rolig site där man kan läsa lite om den samt generera egna badges: http://www.w3.org/html/logo/

Så sommarens coolaste t-shirt (för über webbnördar) blir väl:

(http://html5shirt.com/)

Stockholm Web Monkeys - HTML5 development on google projects

noreply@blogger.com (Anders Jönsson) — Sat, 08 Jan 2011 22:08:00 +0000

Stockholm Web Monkeys - HTML5 development on google projects (18th of
January)

For mor information: http://groups.google.com/group/stockholm-web-monkeys/browse_thread/thread/8f05fcb83d0d0697?hl=en

Tip of the day: dynaTrace & WebStrom

noreply@blogger.com (Anders Jönsson) — Thu, 06 Jan 2011 21:20:00 +0000

Lately I have been using two awesome tools for JavaScript web development, dynaTrace and WebStrom.

dynaTrace (free) is a tool for profiling web pages, for example JavaScript performance and markup rendering . The current version supports IE 6 and newer which make this an interesting alternative when you must fix slow scripts in IE. Of course there are plenty of tools for this kind of things in Firefox and Chrome, but not in IE 6/7. I’m not saying that I like spending time fixing problems in IE, but sometimes you must.
http://ajax.dynatrace.com/ajax/en/

WebStorm (not free) is an IDE for web development. It’s a good IDE with a remarkable good JavaScript handling. For example you can do different refactoring’s (rename, move, etc.), find usages on function across all of your files, use go to definition on functions, etc.
http://www.jetbrains.com/webstorm/

Happy scripting!

En simpel dictionary i JavaScript

noreply@blogger.com (Anders Jönsson) — Mon, 03 Jan 2011 23:07:00 +0000

Jag behövde en simpel abstraktion för en dictionary i JavaScript så jag satte ihop följande:


var Dictionary = function(){
   this._dictionary = {};
   this._count = 0;   
};

Dictionary.prototype.count = function() {
   return this._count;
};

Dictionary.prototype.add = function(key, value) {
   if(this.get(key) === undefined){
       this._count++;
   }
   this._dictionary[key] = value;
};

Dictionary.prototype.remove = function(key) {
   this._count--;
   delete this._dictionary[key];
};

Dictionary.prototype.get = function(key) {
   return this._dictionary[key];
};

Dictionary.prototype.exists = function(key) {
   return this._dictionary[key] !== undefined;
};

Dictionary.prototype.forEach = function(func) {
   for(var key in this._dictionary){
       func(key, this._dictionary[key]);
   }
};

Med hjälp av ett object och lite prototyping så blev det helt okej. Funktionaliteten drev jag fram genom följande specifikationer:

Koden för specifikationerna var (använder mig av Jasmine Test Runner):


describe("Dictionary Specifications", function(){

   describe("When having a dictionary with one key value pair", function(){
  
       var dictionary;
      
       beforeEach(function(){
           dictionary = new Dictionary();
           dictionary.add("key1", "value1");
       });
      
       it("should be able to get value by key", function(){
           var value = dictionary.get("key1");
           expect(value).toEqual("value1");
       });
      
       it("should get correct number of pairs in the dictionary", function(){
           var count = dictionary.count();
           expect(count).toEqual(1);
       });

   });

   describe("When having a dictionary with two key value pair", function(){
  
       var dictionary;
      
       beforeEach(function(){
           dictionary = new Dictionary();
           dictionary.add("key1", "value1");
           dictionary.add("key2", "value2");
       });

       it("it should be possible to loop through all pairs", function(){
           var concatenatedKeyValues = "";
           dictionary.forEach(function(key, value){
              concatenatedKeyValues += key + ":" + value + ";"
           });
           expect(concatenatedKeyValues).toEqual("key1:value1;key2:value2;");
       });

   });
  
   describe("When adding two pairs with the same key", function(){
  
       var dictionary;
      
       beforeEach(function(){
           dictionary = new Dictionary();
           dictionary.add("key1", "value1");
           dictionary.add("key1", "value2");
       });
      
       it("the last added value should be used", function(){
           var value = dictionary.get("key1");
           expect(value).toEqual("value2");
       });
      
   });
  
   describe("When removing an added pair", function(){
  
       var dictionary;
      
       beforeEach(function(){
           dictionary = new Dictionary();
           dictionary.add("key1", "value1");
           dictionary.remove("key1");
       });
      
       it("it should not be in the dictionary", function(){
           var exists = dictionary.exists("key1");
           expect(exists).toBeFalsy();
       });
      
       it("it should return undefined if trying to get it", function(){
           var value = dictionary.get("key1");
           expect(value).toEqual(undefined);
       });
      
   });
  
});

Snygg bok i HTML5

noreply@blogger.com (Anders Jönsson) — Mon, 29 Nov 2010 21:25:00 +0000

Otroligt snygg bok gjord i HTML5: http://www.20thingsilearned.com/. Grym artwork.

Closure Compiler (JavaScript)

noreply@blogger.com (Anders Jönsson) — Fri, 19 Nov 2010 11:00:00 +0000

Closure Compiler är ett verktyg för att effektivisera JavaScript-filer utifrån nerladdningstid och körtid. Verktyget kompilerar om JavaScript-koden till ny JavaScript-kod som skall vara mer effektiv och ta mindre plats än originalkoden:

"It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls."

Ett snabbtest på en av dn.se JavaScript-filer, http://www.dn.se/js/dn/dnse-min.js, visar intressant resultat:

"Original Size: 302.05KB (87.6KB gzipped)
Compiled Size: 212.31KB (71.18KB gzipped)
Saved 29.71% off the original size (18.75% off the gzipped size)"

Utifrån vad som går att läsa på nätet så är det ganska många tunga aktörer som använder Closure Compiler till sin JavaScript-kod, bland annat har jQuery gått över till att köra Closure Compiler:

"Output from Closure Compiler is showing solid improvement over YUIMin" - John Resig (skaparen av jQuery)

Läs mer på: http://code.google.com/intl/sv-SE/closure/compiler/
Ett online verktyg finns på: http://closure-compiler.appspot.com/home

ALT.NET – vad hände sen?

noreply@blogger.com (Anders Jönsson) — Tue, 26 Oct 2010 12:35:00 +0000

Det var ett tag sedan nu som ALT.NET-eran började ebba ut. Här i Sverige var det lugnt på maillistan sedan en tid tillbaka och sista spiken i kistan kom när Google utan förvarning valde att ta bort gruppen (någon som vet varför?). Dock är det viktigt att veta att ALT.NET inte bara var något temporärt eller något som bara var aktuellt under en viss tid, snarare tvärt om. Tankarna och idéerna som taggades som ALT.NET är lika högaktuella idag som för några år sedan. Viljan att ständigt förbättra sig, testa nya möjligheter och att finna nya metoder/tekniker lever vidare.

Vissa tycker att ALT.NET misslyckades, att vi inte nådde ut till den stora massan samt att det blev ett forum för inbördes beundran. Andra tyckte den fick en snedvridning mot tooling samt till olika ramverk. Oavsett om detta är sant eller ej så tycker jag ALT.NET lyckades bra, speciellt med tanken på vilka förutsättningar som fanns. I och med rörelsen fick en mängd nya människor upp ögonen för att det fanns något bättre. Utöver det bildades många olika nya nätverk där kunskap och erfarenheter utbyttes. Men det var inte bara de nyupplysta som gynnades av detta, många av de gamla eldsjälarna som drev arbetet långt innan ALT.NET som begrepp myntades fick ny energi av alla hungriga nykomlingar.

För den som inte brydde sig om ALT.NET-rörelsens tankar och idéer eller aldrig förstod vitsen med rörelsen kommer lugnt att jobba vidare idag såsom de gjorde förut, det blir nog ingen ändring där på länge. De låter sig glatt matas med hur man skall jobba samt med vilka verktyg.

Tankarna, idéerna och viljan till något bättre finns kvar och frodas runt om i världen, med eller utan etiketten ALT.NET.

jsAutoBind - let it bind for you

noreply@blogger.com (Anders Jönsson) — Wed, 15 Sep 2010 19:18:00 +0000

One day when I was manually wiring up element events to functions in JavaScript I thought, why can't a light-weighted convention based framework do this for me? And if it can, can it also handle state changes from JavaScript into the UI?

That was the reason for this micro framework, just a simple thing that would do all the plumbing for you. A way to stop thinking about HTML elements in the JavaScript code and instead just focus on the business logic. Before we go any further, let`s see a sample:

Lets say that we have the following UI:

We want to have validation on the name field and on the date field. The name should also be mandatory (that's why the button is disabled). You shall only be permitted to click on "Save" after the name has been validated correctly.

The HTML markup is simple (for full markup see below):

For the behaviors we need some sort of model, in this case we have a behavior model named "sample2Behavior" in JavaScript (more about the naming further down):

In this model we have described the behaviors for the view (HTML markup) and this will automatically be binded to respective elements event:
- "init" it's like a constructor and will be the first thing thats is processed when the behaviors is loaded.
- "save" is when the button is clicked
- "name" is the validation for the name field
- "signDate" is the validation for the date field

When we in the "name" function change the value for the "canSave" variable, the state for the "save"-button will automatically change in the UI also. This means if the validation is ok, the button will be enabled - and you don't have to care about updating the UI.

If you run the workflow it willl look like this:

When the name textbox loses focus, the validation will begin:

If the validation is successful the save button will be enabled:

When you click on it you will see a message box:

And all this without any binding code! All right, there is no magic at all - the way this work is that the framework goes through all the functions in the behavior model (JavaScript object) and then match them by name to the view model (HTML markup). By convention all buttons will be binded using the click event, text boxes by the changed event and so on. If there is something with a prefix "can" it will try to bind this to the disabled state of the element.

By default the framework will look for a variable with the file name plus the suffix "Behavior". So in this case the file name is simple2 so the variable name would be simple2behavior. You can of course ignore this and manual specify the name for the behavior model (see sample four).

The full markup with the call to jsAutoBind function "Bind()":

As you can see in this sample i use jQuery to handle the DOM, but you can use whatever framework you like. The only thing you have to do to change this is to create a file that follows the contract in "jsAutoBind-3rd-party-contract.js" so it works with you favorite framework.

There are some more samples that shows different scenarios, e.g. when you want to specify what model to use and in which context. Please look through the sample code. The samples and source code is located at http://github.com/archive/jsAutoBind.

This is the 0.1 alpha release, which means that the framework is not complete nor have it been tested in different browsers. Right now it should work i Firefox and Chrome. There is plenty of things left to do. Play around with it and see if you like the concept.

(No, this is not like Knockout, its a different approach. Although Knockout is a really cool framework.)

Loggning av funktionsanrop i JavaScript

noreply@blogger.com (Anders Jönsson) — Thu, 09 Sep 2010 04:26:00 +0000

Ibland kan man behöva logga hur olika funktioner anropas samt med vilka parametrar. Det finns många sätt att göra det på, nedan är ett sätt där man slipper smutsa ner själva koden med en massa loggningsuttryck. Jag har i detta exempel valt att skapa en simpel "logger" som tar hand om hela arbetet.

Exempel:
Jag har följande funktioner i objektet "box" som jag vill skall loggas när de anropas:


var box = {

   begin: function(time){
      // Stuff
   },

   getStatus: function(){
      // Stuff
      return this.buildStatusMessage();
   },

   buildStatusMessage: function(){
      return "some status";
   },

   stop: function(time, reason){
      // Stuff
   }

};

Med hjälp av loggern kan jag nu skriva följande för att initialisera loggning för "box" objektet:


logger.determinator.set("\n");
logger.initializeFor(box);

Nu när jag kör lite olika funktioner på "box":


box.begin("10:00:00");
var status = box.getStatus();
box.stop("22:00:00", "00x00");

alert(logger.getLogEnties());

Så kommer följande log visas:


calling function 'begin' with argument(s): '10:00:00'
calling function 'getStatus'
calling function 'buildStatusMessage'
function 'buildStatusMessage' returned 'some status'
function 'getStatus' returned 'some status'
calling function 'stop' with argument(s): '22:00:00' '00x00'

Loggern fungerar på så sätt att den wrappar alla funktioner samt deras returvärden. På detta sätt kan jag skära mellan anropen som görs till funktionerna.

Principen är enkel, det man gör är att man skriver över original-funktionen med en annan funktion som både loggar och gör anropet till original-funktionen. Efter att man har anropat original-funktionen så loggar man det eventuella returvärdet för att sedan returnera det. På så sätt bryter man inte kedjan.

Loggen som jag använder i följande simpla exempel ser ut så här:


var logger = {

 log: function(){
     var enties = "";
  
     return {
         write: function(entry){
             enties += entry + logger.determinator.get();
         },
         get: function(){
             return enties;
         },
         clear: function(){
             enties = "";
         }
     };
 }(),

 initializeFor: function(context){
     for (func in context) {
         this.setupLoggingFor(func, context);
     }
 },

 writePreCallLogEntry: function(func, args){
     var entry = this.buildCallingLogEntry(func);
     entry += this.buildArgumentsLogEntry(args);
     logger.log.write(entry);
 },

 buildCallingLogEntry: function(func){
     return "calling function '" + func + "'";
 },

 buildArgumentsLogEntry: function(args){
     var entry = "";
     if (args.length != 0) {
         entry += " with " + " argument(s): ";
         for (index = 0; index < args.length; index++) {
             entry += "'" + args[index] + "' ";
         }
     }
     return entry;
 },

 writePostCallLogEntry: function(func, returnValue){ 
     var entry = "function '" + func + "' returned '" + returnValue + "'";
     logger.log.write(entry);     
 },

 setupLoggingFor: function(func, context){
     var self = this;
     var originalFunc = context[func];
  
     context[func] = function(){
         self.writePreCallLogEntry(func, arguments);
      
         var returnValue = originalFunc.call(this);
      
         if (typeof returnValue !== "undefined") {
             self.writePostCallLogEntry(func, returnValue);
             return returnValue
         }
     };
 },

 getLogEnties: function(){
     return logger.log.get();
 },

 determinator: function(){
     var currentToken = "";
     return {
         set: function(token){
             currentToken = token
         },
         get: function(){
             return currentToken;
         }
     };
 }(),

};

Det är i "setupLoggingFor" som jag byter ut original-funktionen med en anonym funktion som wrappar original-funktionen. "func" är själva funktionen och "context" är i detta fall "box" objektet.

HTML5 och H.264

noreply@blogger.com (Anders Jönsson) — Sat, 04 Sep 2010 20:05:00 +0000

Jag snubblade över en intressant blogg för ett tag sedan: http://itpastorn.blogspot.com.

Till exempel så var dessa mycket intressanta:

Stockholm Web Monkeys: Second Encounter

noreply@blogger.com (Anders Jönsson) — Thu, 27 May 2010 19:50:00 +0000

Tips:

"Hello all web monkeys.

As previous announced it´s time for the second meeting. The meeting
will take place at the 15th of June at Avega. We already have two
great speakers lined up, Peter Svensson and Fredrik Bonander.
Looking forward to see some old and new faces there!

SWM: Second encounter

Schedule:
18:30 - 19:00 Mingle and Sandwich
19:00 - 19:10 Welcome to SWM
19:10 - 20:00 Using Google's MVC object with Google Maps API 3 -
Fredirk Bonander.
20:00 - 20:30 Prototyping intranets with Dojo's Layout Containers -
Peter Svensson
20:30 - 21:00 TBD
21:00 -> Beer at Bar 101

Location: Avega, Avega Group, Grev Turegatan 11A, 114 46 Stockholm
We only have a limited number of seats so only the first 40 to reply
to this post will get a seat. If you replied on the last message your
already registered.

For more information, see: http://groups.google.com/group/stockholm-web-monkeys
Follow us on twitter: @SthlmWebMonkeys

If you have ideas and would like to contribute, don't hesitate to
contact us or drop a message in the discussion group!"

Mustache i JavaScript

noreply@blogger.com (Anders Jönsson) — Mon, 24 May 2010 18:24:00 +0000

För ett tag sedan stötte jag på en template-motor i JavaScript vid namnet Mustache. Mustache skulle vara en snabb och lättviktig motor och utifrån det jag har testat så verkar detta stämma.

Syntaxen är enkel, för att fylla i ett värde på en viss plats så används notationen {{värde}}.

Exempel: Här vill vi fylla i vissa värden i en sträng för att sedan visa det för användaren:


var template = "The price is {{price}} {{currency}} per piece when buying {{threshold}} pieces.";
    
var data = {
  price: 145.95,
  currency: "EUR",
  threshold: 9870
};
    
var html = Mustache.to_html(template, data);
    
document.getElementById("price-information").innerHTML = html;

"Mustache.to_html" tar in templaten och data för att sedan göra sin magi.

Exempel: Här vill vi visa en lista för användaren med lite data.


var template = "<ul>{{#list}}<li>{{level}} pieces: {{price}} {{currency}} / piecs</li>{{/list}}</ul>";
    
var data = {
  currency: "EUR",
  list: [{
    level: "100 - 199",
    price: 145.95
  }, {
    level: "200 - 299",
    price: 125.95
  }, {
    level: "300 - 399",
    price: 105.95
  }]
};
    
var html = Mustache.to_html(template, data);
    
document.getElementById("threshold-information").innerHTML = html;

Output:

Enkelt eller hur? Läs mer på: http://mustache.github.com/

Kod:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>mustache demo</title>
</head>
<body>
    <h1>Prices</h1>
    <span id="price-information"></span>
    <br/>
    <br/>
    Thresholds:
    <div id="threshold-information">
    </div>
</body>
<script type="text/javascript" src="lib/mustache/mustache.js">
</script>
<script type="text/javascript">

    (function(){

        var template = "The price is {{price}} {{currency}} per piece when buying {{threshold}} pieces.";
    
        var data = {
            price: 145.95,
            currency: "EUR",
            threshold: 9870
        };
    
        var html = Mustache.to_html(template, data);
    
        document.getElementById("price-information").innerHTML = html;
    
    })();

    (function(){

        var template = "<ul>{{#list}}<li>{{level}} pieces: {{price}} {{currency}} / pieces</li>{{/list}}</ul>";
    
        var data = {
  currency: "EUR",
            list: [{
                level: "100 - 199",
                price: 145.95
            }, {
                level: "200 - 299",
                price: 125.95
            }, {
                level: "300 - 399",
                price: 105.95
            }]
        };
    
        var html = Mustache.to_html(template, data);
    
        document.getElementById("threshold-information").innerHTML = html;
    
    })();
</script>
</html>

_Why

noreply@blogger.com (Anders Jönsson) — Sun, 16 May 2010 18:14:00 +0000

Tips: _Why: A Tale Of A Post-Modern Genius, http://www.smashingmagazine.com/2010/05/15/why-a-tale-of-a-post-modern-genius/