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!

As a Javascript programmer you might have read the term ‘MVC’ or ‘Model-View-Controller’ here and there. Or, maybe a friend has recommend you look into a ‘MVC framework’ like Backbone or Ember.js.

So, what’s this whole MVC thing? You could try reading the Wikipedia article but it might be a little abstract. In practice MVC is really nothing more than separating your applications data (model) and presentation (view).

But why would you do such a thing? The most important reason is maintainability, your code becomes more readable and, hence, more maintainable. You’ll also notice that you will become a better programmer, and it becomes easier to add features to a project.

This still might sound a little abstract, so let’s write some code! We’ll be using a super tiny MVC framework called Stapes.js which, not completely coincidental, is something i wrote myself to learn MVC. Stapes is pretty relaxed about how you structure your code, so this approach is just one approach. Feel free to structure your code in every way you want.

For this tutorial i’ll assume you have some basic knowledge about HTML and Javascript and you know how to get a simple webserver running.

We’ll be writing a really simple todo (task list) application. There’s actually a really cool project called TodoMVC that collects todo examples written in multiple frameworks (here’s the one for Stapes). However, those examples are usually pretty complicated and might not give you the best introduction to MVC. So’ll we be doing something a lot simpler in this tutorial.

Setting up

We’ll start by setting up a HTML file. Open your favorite text editor and copy-paste this code, and save it as index.html.

Let’s add some Javascript! Create a new file called app.js and save it in the same directory.

We will be using jQuery for DOM manipulation. With Stapes you’re free to use any Javascript library you want, or just use vanilla DOM scripting. I’ll just assume everyone knows jQuery, so that’s why we’ll be using it.

Okay, let’s set up our TodoModel, TodoView and TodoContoller using the Stapes.subclass method:

Try reloading your webbrowser and entering a todo in the input field. If all went well you should be seeing new todos appearing.

Analyzing the code

Let’s analyze this code a little bit.

With Stapes it doesn’t really matter what you call your objects. Other MVC frameworks might force you into using pre-defined models or views. That’s not a bad thing per se, but with Stapes the philosophy is that you can manage conventions for yourself. So’ll we just end the module variable names with Model or View to indicate the type.

The subclass function creates a new class that you can later instantiate with new. Note how we have a property called constructor. This is the function that is executed when calling new and that you use to setup properties. All other properties in the object given to subclass become part of the class prototype.

Let’s take a look at the TodosView. The constructor exists of an event handler for the input field.

On to the code in constructor: note that we use the bind method on the function in the event handler. This is to fix a common problem in Javascript event handlers where this is scoped to the global window variable instead of the current object. bind on functions is included in all modern browsers, but if you’re using an older browsers (such as Internet Explorer 8) you might need to include a polyfill like the one from MDN.

Here’s the most important line of the view:

$input.val() gets the todo we entered in the input field. The push method of the model adds the todo to its internal data store and automatically assigns an unique id. This action also does something else, it triggers a change event that can be used to update a view. We listen to this event in the TodoController:

Every Stapes object can trigger events using the emit method. We can listen to these events using the on method.

Some methods automatically trigger events, such as push. An event can contain event data in the callback, which you can see in this example. The todoId variable holds the unique id the model automatically assigned when we did the push in the TodoView.

We want to get the text for this todo, so we use get on the model to get the todo text. We then append it using jQuery to the #todos list.

Wrapping it up

Here’s Model-View-Controller in its most basic form: a user action triggers an
event, that is used to update the model. The model fires a ‘change’ event, which is used by the controller to update the view.

If you want to experiment with this example try the jsFiddle i’ve setup.

Hungry for more? Read the second part of this tutorial and i’ll show you how to use templating, remove todos and save the todos to localStorage.