Barbarian Meets Coding Titlebarbarianmeetscoding

WebDev, UX & a Pinch of Fantasy

2 minutes readpersonal

Packed September: Paris, Kraków and my first hackathon: East sweden Hack

Wo! This year’s September has been crazy! I think I have never ever done so many stuff in a month before: travelled to Paris with Malin, participated in my first hackaton, travelled to Poland as part of my job at Medius (the Kraków office is freaking awesome btw), rid horses, ran races… uff XD

East Sweden Hack

East Sweden Hack 2013

As I said above, this month I had the opportunity to participate in my first hackathon and I must say that it completely blew my expectations out of the water by being unbelievably awesome :). The venue, the food, the organizers who did an outstanding job, coaches, my teammate, the other teams, everything and everyone was great. If you ever get the chance to join one of these events, don’t hesitate; you are going to have a blast. If you are going to remember something after reading this blog post, let it be just that :).

Kristofer Gustafsson and Jaime Gonzalez, Team Inspirr

As you may know, hackathons usually have a topic, which oftentimes is related to using some API or technology provided by the sponsors of the event. In this case, the city of Linköping, the county of Östergötland and diverse state related entities provided a series of open data APIs to help us improve, in some way, the lives of the inhabitants or the occassional visitors of this area of Sweden. So, with that premise in mind, and the limitations imposed by the perhaps a little bit uninteresting APIs we decided to build a local recommendation engine, which we called Inspirr.

So, following our own personal agenda, which was to geek out and tinker with new technologies, we went and built Inspirr with the MEAN stack (as in MongoExpressAngularNode) or to be more accurate the -EAN stack, since we did never get the chance to setup a DB xD. Below is the result for you to see and try:

Inspirr Screenshot

The hack in itself was a blast, we performed the kind of development that I love (or almost, we did abandon TDD quite fast due to our limitations in this completely new stack and the time constraints XD), being laser focused on our MVP, growing the application as if it was a living entity, iterating fast, deploying to production (heroku) every hour…

Here is our final pitch. Beware of my dreadful Swedish xD.

As I was cycling home, I couldn’t help but to think that I had taken part in something special. ^_^

It’s looking like October will be a much calmer month and one ideal for programming! :) I am looking forward to start working on a new side project. I’ll keep you updated. Good night!

4 minutes readjavascript

Learn TypeScript to Improve Your JavaScript

TypeScript is JavaScript for C# Developers. The CoffeeScript of .NETters. It is a superset of JavaScript that brings all the goodness of type-checking, classes, modules, lambda expressions and awesome tooling to the web front-end. Everything to make for a more productive and better JavaScript development experience.

Regardless of its many benefits, this brief article is not going to be a TypeScript tutorial nor a how-to. Instead, I will focus in the TypeScript feature that suprised me the most, the quality of the JavaScript generated by the TypeScript transcompiler and the transcompiler itself as a tool to learn JavaScript best practices.

Microsoft's TypeScript may be the best of the many JavaScript front ends. It seems to generate the most attractive code.

Before we start, note that you can try all article code samples yourself at the TypeScript playground as you read along, making modifications here and there to TypeScript and seeing how it reflects in JavaScript (notice also how the web-based text editor provides code autocompletion for you TypeScript, sweet!).

Screenshot of TypeScript playground

Let’s start with a class definition then:

// This is a TypeScript class definition
// It uses some syntactic sugar to declare and initialize public members
class Barbarian {
  constructor(public name: string, public weapon: string) {}
  attack() {
    return (
      this.name +
      ' enters a frenzy, wields his ' +
      this.weapon +
      ' and strikes the enemy.'
    )
  }
}
var conan = new Barbarian('conan', 'bastard sword')
conan.attack()

// It produces this JavaScript
var Barbarian = (function() {
  function Barbarian(name, weapon) {
    this.name = name
    this.weapon = weapon
  }
  Barbarian.prototype.attack = function() {
    return (
      this.name +
      ' enters a frenzy, wields his ' +
      this.weapon +
      ' and strikes the enemy.'
    )
  }
  return Barbarian
})()

var conan = new Barbarian('conan', 'bastard sword')
conan.attack()

As you can see in the example above, TypeScript does two interesting things when transcompiling classes:

  1. it produces an Immediately-Invoked Function Expression (IFFE pronounced iffy) that creates a new lexical scope to avoid polluting the global namespace.
  2. it defines the class methods in the Barbarian prototype, which basically means that all instances of Barbarian will reuse the same function (instead of each one its own function as it would have happened if we would have defined attack inside the Barbarian function).

A similar approach is used for modules:

// This is a TypeScript module definition
// It defines its API as exports

namespace Character {
  export class Barbarian {
    constructor(public name: string, public weapon: string) {}
    attack() {
      return (
        this.name +
        ' enters a frenzy, wields his ' +
        this.weapon +
        ' and strikes the enemy.'
      )
    }
  }
}

var conan = new Character.Barbarian('conan', 'sword')
conan.attack

// It produces this JavaScript
var Character
;(function(Character) {
  var Barbarian = (function() {
    function Barbarian(name, weapon) {
      this.name = name
      this.weapon = weapon
    }
    Barbarian.prototype.attack = function() {
      return (
        this.name +
        ' enters a frenzy, wields his ' +
        this.weapon +
        ' and strikes the enemy.'
      )
    }
    return Barbarian
  })()
  Character.Barbarian = Barbarian
})(Character || (Character = {}))

var conan = new Character.Barbarian('conan', 'sword')
conan.attack

In this case we use another IFFE to wrap the class definition and add it to the Character namespace. The Character namespace is, in turn, initialized if it did not exist before by using the Character || (Character = {}) expression, a common JavaScript construct to initialize variables to a default value.

Finally, whichever are the TypeScript constructs that we use (and we’ll see a lot of them in the next example), the JavaScript that is generated is completely clean and pristine. See it with your own eyes:

// ****\*\*****
// TypeScript
// ****\*\*****

module Character {
export interface ICharacter {
name: string;
weapon: string;
hp: number;
attack(ICharacter): void;
}

    export class Barbarian implements ICharacter {
        hp: number;
        constructor(public name: string, public weapon: string) {
            this.hp = 100;
        }
        attack(enemy: ICharacter) {
            console.log(this.name + " enters a frenzy, wields his "
                + this.weapon + " and strikes " + enemy.name);
        }
        attackMany(enemies: ICharacter[]) {
            console.log("moooob attack!!!!");
            enemies.forEach((e) => this.attack(e));
        }
    }

    export class Mob<T extends ICharacter> {
        theMob: ICharacter[];
        constructor() {
            this.theMob = [];
        }
        attack(enemy: ICharacter) {
            this.theMob.forEach((c) => c.attack(enemy))
        }
        add(dude: ICharacter) {
            this.theMob[this.theMob.length] = dude;
        }
    }

}

import Barbarian = Character.Barbarian;
import Mob = Character.Mob;

window.onload = () => {
var conan = new Barbarian("conan", "sword");
var krull = new Barbarian("krull", "axe");
conan.attack(krull);

    var logenNinefingers = new Barbarian("Logen", "bastard sword");
    var angryMob = new Mob<Barbarian>();
    angryMob.add(conan);
    angryMob.add(krull);
    angryMob.attack(logenNinefingers);

};

// ****\*\*****
// JavaScript
// ****\*\*****

var Character;
(function (Character) {
var Barbarian = (function () {
function Barbarian(name, weapon) {
this.name = name;
this.weapon = weapon;
this.hp = 100;
}
Barbarian.prototype.attack = function (enemy) {
console.log(this.name + " enters a frenzy, wields his " + this.weapon + " and strikes " + enemy.name);
};
Barbarian.prototype.attackMany = function (enemies) {
var \_this = this;
console.log("moooob attack!!!!");
enemies.forEach(function (e) {
return \_this.attack(e);
});
};
return Barbarian;
})();
Character.Barbarian = Barbarian;

    var Mob = (function () {
        function Mob() {
            this.theMob = [];
        }
        Mob.prototype.attack = function (enemy) {
            this.theMob.forEach(function (c) {
                return c.attack(enemy);
            });
        };
        Mob.prototype.add = function (dude) {
            this.theMob[this.theMob.length] = dude;
        };
        return Mob;
    })();
    Character.Mob = Mob;

})(Character || (Character = {}));

var Barbarian = Character.Barbarian;
var Mob = Character.Mob;

window.onload = function () {
var conan = new Barbarian("conan", "sword");
var krull = new Barbarian("krull", "axe");
conan.attack(krull);

    var logenNinefingers = new Barbarian("Logen", "bastard sword");
    var angryMob = new Mob();
    angryMob.add(conan);
    angryMob.add(krull);
    angryMob.attack(logenNinefingers);

};

If you want to know more about TypeScript here’s a great talk by the Helsbergnator (hell yeah! XD) from this past Build 2013:

This post was inspired by Stefan Ingvarsson “Introduction to TypeScript” session on our local .NET User group. If you are a .NET developer near Linköping (Sweden), come and join us on facebook or at swenug.se!! :).

SweNug logo
1 minute readpersonal

Back from Vacations

Hi everyone! Vacations are finished and I am back! I spent most of them visiting my family in Asturias and it was great! Lots of nice company, food, drinks and nature. I also did not touch a computer in 3 weeks, doing a little bit of life with the normal folk that surround us :) so I have come back to Sweden with a huge hunger for programming. Watch out! Good things are coming! :)

Malin and I on vacations in asturias
2 minutes readbarbaric-monthly-june-2013

Barbaric June: Being Focused and Productive With ilPomodoro

Barbaric Monthly is my attempt at building/improving a coding project per month so that I can experiment with old and new technologies, learn ad infinitum, remain excited about the craft and nurture my passion for software development. This Barbaric Monthly is about practicing knockout.js building a web-based Pomodoro technique client: il Pomodoro.

Hello my fellow coders! Soon I’ll be going on vacation to a remote and undisclosed location for the next three weeks! Unfortunately I won’t have access to these beloved devices that we call computers, and least of all to the internetz, that’s why I thought it would be nice to write one last blog post before I step into the wilderness, perhaps, never to return - one never knows what prowls within the unknown :).

It has been a while since the last barbaric monthly since I have being mainly focusing in studying and getting my WebDev fu up to speed for my current job at medius. Although I haven’t really been working solely on any project in particular, I have tinkered on an off with il Pomodoro, a simple web based Pomodoro technique app written with knockout.js.

The project is in a very early stage providing the most basic functionality within the pomodoro technique: creating tasks, dividing them into pomodoros and a pomodoro timer. Check it out at www.barbarianmeetscoding.com/iPomodoro and GitHub.

screenshot of the il pomodoro web app

As I mentioned above, it is mainly written in knockout.js but it also uses require.js for AMD and jasmine as testing framework. You can see it as a little more advanced example than those of my barbarian meets knockout.js series.

And now it is time to say good bye. Have an awesome summer everyone!! :)

1 minute readbarbaric-tip-of-the-week

Barbaric Tip of the Week: Writing Consistent, Idiomatic JavaScript

Barbaric Tip of the Week is a weekly series whose main purpose is to share tiny bits of knowledge that I find specially useful and interesting.

Hello there! This week’s Barbaric Tip are just some resources to help you improve your JavaScript fu:

Neo learns JavaScript