I wrote a book: Firefox OS in Action en

By creator1988 on Tuesday 29 July 2014 10:50 - Comments (4)
Category: -, Views: 2.323

About 9 months ago an acquisition editor from Manning Publications first approached me, asking whether I was interested in writing a book about Firefox OS app development. Being a contributor, module peer for keyboard, and evangelist for Telenor, that actually made sense. Even when almost everyone in my environment that ever wrote a book said: "Yeah, it sounds fun, but actually its horrible". In a way they were right, especially the start was though; but during the process I actually had more and more fun. The fruit of the labour has now been bundled in an early access version of my book "Firefox OS in Action".

http://manning.com/jongboom/jongboom_cover150.jpg

So if you're interested in getting started on developing apps for Firefox OS, get a quick start and buy the early access version. New chapters will be added when they are done, and you'll get the final and fully edited copy when it comes out. To put it in the words of a reader:
Thank for writing a great book. I read the "Welcome to the Future" part of your book it is just awesome. Every developer who want to develop app for Firefox OS is confused and don't know how to start. I think this book provide a content at one place and clear the all the doubts of developer. Information about UI is also great. I am eager to read your whole book.
BUY BUY BUY! And if you don't care about Firefox OS, just buy it for the beautiful images that I created in paint for the early access version. I'll also buy you a beer when you're in Amsterdam.

Plus it's the deal of the day so you get 50% off today with code: dotd072914au

Fix your own smartphone OS en

By creator1988 on Tuesday 18 March 2014 10:27 - Comments (5)
Category: Frontend, Views: 16.073

If you're an avid smartphone user there will be times when there is behavior on your phone that just doesn't make sense, and that annoys the crap out of you. Well, you're not alone! Same thing happens to me, and I'm even a full time developer on Firefox OS. One of the things that bugs me the most is the behavior of the address bar in the browser. When you scroll enough down, it will disappear, but the content jumps up under your finger. And content jumping is the @#*&*#@&#&$ annoying.

Time to fix it!

So Firefox OS is built on top of open standards, HTML, JavaScript, blah, blah, blah, but the only real important thing here is, is that every (system) app is built on top of web technology. And thus, it's not compiled. That's actually pretty cool, because what I could do is grab the source code of the whole frontend of the OS; make changes; and then push to my phone. Sure. But that takes long, and maybe you miss a build prerequisite, etc. Luckily, because the browser app is basically a website, we can just pull the app from the phone and edit it.

Read more »

Simple EventEmitter in one line in javascript

Door creator1988 op dinsdag 07 januari 2014 15:12 - Reacties (1)
Categorie: Frontend, Views: 2.645

Chances are that if you have a large javascript application that you'll need an EventEmitter at one moment or another because events are great to wire separate modules together without them having to expose implementation details. Too bad that you'll need to pull in dependencies, another library, extra risk, etc. Especially if you're testing some simple scenario or small app that's a lot of boilerplate. Behold: a dependency-less event emitter (1 line of javascript!):

JavaScript:
1
2
3
function createEventEmitter() {
  return document.createElement('div');
}

All DOM elements implement DOM Level 3 events, which you can abuse as a nice event emitter. Great thing is that you get cancelation and bubbling as well. Bad things:
  • It's about 5x times as slow as EventEmitter.js (source), but you can very easily swap out this by EE if required in a later stage.
  • Dispatching events is a bit cumbersome because you need to use this syntax: `new CustomEvent("eventname", { detail: "eventdetail" })`
Usage:

JavaScript:
1
2
3
4
5
var ee = document.createElement('div')
ee.addEventListener('awesome'function() { console.log('omg omg omg'e.detail) })
ee.dispatchEvent(new CustomEvent('awesome', { detail1337 }))
// omg omg omg, 1337 /* output from the console.log */
// true /* event did not get canceled */

Simple function logger in JS

Door creator1988 op maandag 06 januari 2014 12:57 - Reacties (4)
Categorie: Frontend, Views: 2.155

Every now and then I end up in a code base where I don't have a clue about the flow yet; like today when testing out the new keyboard application that we're developing for Firefox OS. To see whether the flow is actually sane I plug in a simple function logger that allows me to see which functions are called and with what arguments.

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  function log(args) {
    var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;
    // stole this from http://stackoverflow.com/questions/1007981/how-to-get-function-parameter-names-values-dynamically-from-javascript
    function getParamNames(func) {
      var fnStr = func.toString().replace(STRIP_COMMENTS'');
      var result = fnStr.slice(fnStr.indexOf('(')+1fnStr.indexOf(')')).match(/([^\s,]+)/g);
      if(result === null)
         result = [];
      return result;
    }

    console.log(args.callee.namegetParamNames(args.callee).reduce(function(objkix) { 
      obj[k] = args[ix]; 
      return obj
    }, {}));
  }

Now you can take advantage of this by putting a call to this function on the first line of any function you want to trace:

JavaScript:
1
function a(bc) { log(arguments); }

When calling the a function, it will log the function name and an object with argument names and values:

JavaScript:
1
2
a(45);
// a { b: 4, c: 5 }

Remember to disable "use strict" because accessing callee is not permitted anymore.

Simple async queue in javascript

Door creator1988 op donderdag 02 januari 2014 13:51 - Reacties (2)
Categorie: Frontend, Views: 2.457

Normally I fall back to caolan's async module, but I'm not in a node.js environment and I needed a simple async queue with concurrency 1; which can be done in a one liner.

JavaScript:
1
2
3
4
5
6
7
8
9
10
var q = [ 
  function a(n) { console.log('a'), setTimeout(n30); },
  function b(n) { console.log('b'), setTimeout(n10); }
];

function queue(qn) {
  q.length ? q.shift()(queue.bind(thisqn)) : n();
}

queue(qfunction() { console.log('done') });

You could use arguments.callee rather than queue to bind to the current function, but it has been deprecated since ES5.

It's also easy to use it with promises, let's say I have a function |sendKey| that returns a promise and I want to send a string char by char:

JavaScript:
1
2
3
4
5
6
7
8
var input = 'sometext'
var q = input.split('').map(function(c) {
  return function(n) {
    sendKey(c).then(n);
  };
});

queue(qfunction() { console.log('done') });