I’ve just released version 0.7.0 of Stapes.js, my MVC Javascript microframework. A big change in this release is the deprecation of the create method and the introduction of the new subclass method.

Why the change? The old system worked nicely for single modules, but was broken when trying to create an extension hierarchy. In the old system the creation of a class and the instantiation of that class were the same thing. In really simplified code that looked something like this:

The main problem with this approach is that every property that has been added to Animal after the initial create will become part of the prototype of Dog as well. Even if those properties are instance properties (e.g. Animal.bark = true instead of Animal.prototype.bark = true). This lead to difficult to detect bugs and behaviour.

So, i changed the API so you can create proper classes, based on the new Ecmascript Harmony classes spec. Those of you using Coffeescript or Livescript will feel right at home here.

constructor will become the function that is being called when making an instance with new. All other methods in the object will become part of the class prototype.

The new Module is just a standard Javascript class, so you can add prototype properties using Module.prototype or static properties using direct assignment. Stapes has two convenience methods for this called extend and proto that allow you to quickly add an object of properties to the prototype or directly to the module.

Inheritance can be done by simply calling subclass on a newly created class. The instanceof operator now works correctly too:

Every module now gets a parent property, referencing the parent’s prototype. You can use this to still call a parent method if you’ve overwritten it.

Note that for backwards compatibility the create method on the Stapes global will still work. However, because of the obvious problems it won’t work anymore on submodules. In the future i’ll remove Stapes.create. If you like the old style i recommend you switch to something like var module = (Stapes.subclass()).extend() which is more or less the same as the old Stapes.create().extend() pattern.

So, that’s it. Please leave any questions and remarks in the question section below or file tickets on Github.

Juist, het is weer die tijd van het jaar. Het einde van het jaar betekent: een lijstje, met de beste albums van het jaar. Het ultieme muzieknerd-ding.

2012 was wat mij betreft geen al te best jaar. Ik heb een hoop geluisterd, maar er was weinig wat er echt enorm uitsprong, veel dingen die zo-zo waren. Weinig verrassends. Maar misschien word ik ook wel oud en ben ik niet meer zo van de nieuwe muziek.

Net zoals voorgaande jaren heb ik bij alle albums die op Spotify beschikbaar zijn een icoontje gezet waar je direct op kan klikken, en heb ik een YouTube mix gemaakt met de beste nummers van elk album. Veel luisterplezier en een mooi 2013!

1. Death Grips – The Money Store / NO LOVE DEEP WEB
   
2. Grizzly Bear – Shields
3. Kendrick Lamar – good kid, m.A.A.d city
   
4. Jessie Ware – Devotion
5. dEUS – Following Sea
6. Grimes – Visions
7. The Shins – Port of Morrow
8. Dirty Projectors – Swing Lo Magellan
9. Squarepusher – Ufabulum
10. First Aid Kit – The Lion’s Roar
11. Sharon van Etten – Tramp
12. Leonard Cohen – Old Ideas
13. Macintosh Plus – Floral Shoppe Gratis download!
14. Godspeed You! Black Emperor – Allelujah! Don’t Bend! Ascend
15. Japandroids – Celebration Rock

Voor de archieven: hier zijn mijn lijstjes van 2011, 2010, 2009, 2008, 2007, 2006, 2005 en 2004. En voor wie smult van nog meer lijstjes, check Best Ever Albums, Metacritic, Kindamuzik, Tiny Mix Tapes, NME (scroll naar beneden), OOR, Drowned in Sound, Pitchfork en Sander Spek.

Ik heb ook een lijstje van mijn favoriete films van dit jaar, die kan je hier lezen.

Daar zijn we weer. De Lijst. Voor de eerste keer heb ik naast een lijst met beste muziekalbums ook een lijst gemaakt met mijn favoriete films van het jaar. Voor een volledige lijst van alle films die ik dit jaar heb gezien klik hier. Ik heb zowel documentaires als fictie op de lijst staan.

1. Jagten
2. Moonrise Kingdom
3. Marley
4. Le Havre
5. Holy Motors
6. Cave of Forgotten Dreams
7. Intouchables
8. Little World
9. Teddy Bear
10. Monsieur Lazhar

For those who want to detect if a (touch) browser supports the overflow-scrolling property for ‘native style momentum scrolling’ i’ve written a little script that doesn’t need any dependencies like Modernizr.

Version 0.6 of Stapes.js, my tiny MVC Javascript library has been released.

Thanks to people submitting issues many of the changes are straight from the small but vocal Stapes community :)

New features include:

• A silent flag for set, push and remove that makes it possible to update attributes without change events being triggered.
• The above methods, and update can now be chained, just like many of jQuery’s methods.
• remove now also triggers namespaced events

One change that might be a bit controversial is the removal of the whole Stapes.util module, with lots of Underscore.js-like methods. These were initially added in 0.4, but i’ve come to the conclusion that they’re not needed. The focus of Stapes should be on simplicity and on ‘do one thing and do it well‘. The utility methods are widely available in other libraries (like Underscore), many of them are also available in ES5-compatible browsers (such as Array.prototype.map and Function.prototype.bind.

If you have old code that depends on Stapes.util you might find the compatibility plugin useful.

If this is the first time you’re trying out Stapes, why not build a todo app in less than 100 lines of code?.

If you recently tried reading a Google Plus post without having an account you’ve probably seen something very similar to this:

Lots of UI that you don’t use. And most of it is ‘fixed’ to the screen, so when you’re reading the post most of your screen is filled with useless buttons like ‘Join Google Plus’.

I’ve written a really simple and basic Userscript to remove most of this UI.

If you’re using Chrome:

1. Right click on this link and select ‘Save link as’, save it to the Desktop
2. Open up the ‘Extensions’ window (Window –> Extension)
3. Drag up the file into the window and select “Add” on the pop-up.

Most Javascript programmers know Douglas Crockford’s famous prototypal inheritance utility, Object.create (written here as a global clone function):

    function clone(o) {
        function F(){}
        F.prototype = o;
        return new F();
    }

You can use this utility to do inheritance in Javascript ‘the right way’:

    function Parent(name) {
        this.name = name;
    }

    Parent.prototype = {
        "getName" : function() {
            return this.name;
        }
    }

    function Child() {
        Parent.apply(this, arguments);
    }

    Child.prototype = clone(Parent.prototype);

    var child = new Child("John");

    child.getName(); // 'John'
    child instanceof Child; // true
    child instanceof Parent; // true

The clone function can be made even faster by caching the F function:

    var F = function(){};

    function clone(o) {
        F.prototype = o;
        return new F();
    }

Because the complete prototype is overwritten you can use F over and over again. Speed differences can be pretty big, according to a jsperf.com testcase i made. In IE8 the cached version is up to ten times faster.

I wonder why this isn’t in the default SASS documentation. If you want to iterate over a list in SASS using @each, how do you get the index of the current item? For example, to make odd-even colored table rows?

    $list: foo, bar, baz;

    @each $item in $list {
        .#{$item} {
            // Right, so we want to see if the item index is
            // odd or even, but how do we get the index?
        }
    }

Turns out this is not possible with @each, but you can use a combination of a @for loop and the little-used nth function:

    $list: foo, bar, baz;

    @for $i from 1 through length($list) {
        $item: nth($list, $i);

        .#{$item} {
            @if $i % 2 == 0 {
                background: red;
            } @else {
                background: blue;
            }
        }
    }

Note that lists in SASS start at 1, not at zero.

I’ve just released version 0.5.1 of Stapes.js, my tiny Javascript MVC framework. This is a minor bugfix release, mostly because of a bug that would break events in submodules. If you’re using 0.5, please upgrade to 0.5.1. No API changes are present in this release.

The only other change concerns the scoping of private utility methods in the Stapes object. These methods couldn’t be reached from outside the object, which makes it difficult to write plugins that alter the basic functionality of Stapes. I’ve moved all those methods to a single subobject in the Stapes object called Stapes._ (yes, just an underscore).

So if you would, for example, like to change the way Stapes creates submodules you could overwrite the Stapes._.createModule method. These methods aren’t documented, so you should take a look at the source.

As always, comments and patches are very welcome.

In the first part of this tutorial we wrote a really simple todo list. In this part i’ll show you how to expand it with a templating mechanism, a way to remove the todos and how to use localStorage to save the todos between browser refreshes.

Templating

From the first part you might have noticed that i’ve added some HTML using jQuery in the controller. This is usually not how you should do things in a MVC framework. Instead of writing inline HTML you’re better of using templating.

Like with anything else in Stapes, you’re free to use any templating mechanism you want, but for now i’ll be using the popular Handlebars.js library.

We’ll start by adding the Handlebars.js library to the index.html file and adding a small inline template using a script tag. Add this before the first script tag in the index.html file:

The type="text/html" attribute will prevent the browser from parsing this text as Javascript. We’ll now include a new listTemplate variable to our app.js file to parse the template. Add this to the top of app.js.

In any part of the code you can now get the HTML for this template by simply calling listTemplate as a method.

Now, let’s use the template for our todo app! We’ll be creating a new listView and remove the old jQuery code from our controller. Because we have two views now we’ll be renaming TodosView to InputView. It’s usally best to use a view for a single element, and keep it as simple as possible.

Here’s the complete code for our new app.js

Try refreshing your browser and add some todos. Notice that the number at the bottom of the list (‘todos left’) increases every time you enter a new todo.

A closer look at ListView

Let’s take a closer look a the ListView.

The render function takes care of rendering the todos as a block of HTML code. It uses the template property we set on the view to get the html. The this.template method takes one parameter: a Javascript object that contains the data it should render:

The size method is a part of every Stapes module and returns the number of items. Let’s have a look at the part of the template:

So, whenever this template is rendered the size property is updated with the number of todos in the TodosModel.

The todos property is a little more complicated. getAllAsArray returns all items in the TodosModel as an array, so we can iterate over the items in the template:

Note the {{text}} property. We changed a little part of the InputView to make sure every item in the model has a text attribute. The {{id}} property is automatically added to every object whenever you call getAllAsArray. We’ll see why this is handy in a moment.

Removing todos

Adding todos is nice, but you might want to get something done as well! As you probably saw in your browser every todo now also includes a small checkbox. We’ll be adjusting the ListView to make it possible to remove todos.

Add a bindEventHandlers method to your ListView, just before the render method:

We also need to call this method, so add this to the end of the constructor in your ListView.

Now reload your browser, add some todos and try clicking the checkbox. Hurrah! We can finally get some stuff done ;)

A closer look at the remove function

So, how does the bindEventHandlers() function in ListView work? We add an event handler to all items with the class remove (all checkboxes have this class). Whenever one of them is clicked we get the id for the todo by looking at the parents and getting it from the data-id attribute we set earlier in the template.

After that it’s a simple call to Stapes’ remove function to remove the element by id.

Remembering stuff

We’ll be wrapping up this tutorial with a small addition to our model. Don’t you think it’s irritating to have an empty list every time you refresh the browser? Let’s use the new HTML5 window.localStorage feature to remember it between browser refreshes.

Note that localStorage is available in all recent browsers, including Internet Explorer 8. If you need to support older browsers there are plenty of alternatives to make it work on those browsers too.

So, let’s write some code. We’ll be using the JSON format to save our model into the browser’s localStorage. Change your TodosModel to this piece of code:

Change the init method of the TodosController to this:

Check it out! Add some todos, refresh your browser and voila, all your todos are saved!

A better look at the new TodosModel

The TodosModel module now has a new constructor that gets the todos from localStorage, parses the JSON and uses Stapes’ set on itself to add all the todos to the model. set works just like push, except that it takes key-value pairs and so it doesn’t automatically create new ids.

We use a nifty trick here: set also accepts an object with multiple key-value pairs, like our list of todos. The todos variable gets a Javascript object back from localStorage that looks like this:

Note that in your browser the ids will look different because they are randomily made up whenever you add a new todo.

The save method saves all of the todos in localStorage by getting them from the TodosModel using getAll, then converting them to JSON.

We changed the event handler for the change event in our controller to update the localStorage whenever an event is added or removed from the model. Also note the final line of the TodosController constructor: we need to do an initial render of the ListView to show the list of todos.

Wrapping it up

You should now have a completely functional, persistent todo list in your browser. If you want to experiment feel free to use the jsFiddle i’ve setup.

If you want to learn more you could read the Stapes.js documentation and play around with the more advanced todo example.

If you have any comments or questions feel free to post them in the comments section, send me an e-mail, or send a message to @hayify on Twitter.

Thanks for reading!