Fix your own smartphone OS en

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

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.770

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.251

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.550

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') });

Getting started on Firefox OS apps with AngularJS en

By creator1988 on Wednesday 20 February 2013 11:21 - Comments are disabled
Category: Frontend, Views: 18.254

The part that amazes me most about working day to day with Firefox OS is the incredible way that the existing web eco-system can be reused to target mobile phones. We have seen this with using Weinre to remote debug the FFOS system, using emscripten to cross compile C code into javascript, or just the ease of reusing jQuery within your Firefox OS app; something that I would have killed for back in the days when doing WPF.

Development in JavaScript frameworks has exploded since the mid-2000s, with new players emerging every other day, and application frameworks like Ember.js or AngularJS now taking the lead, giving website developers extremely powerful components at a fraction of the costs. The great thing about Firefox OS is that we can take advantage of the developments in these areas, rather than waiting for a new release from Apple or Google to react on the changing world.

However, building great web applications doesn't end with picking an application framework. Perhaps the most scaring part here is to pick a UI framework, or to get over the data binding syntax. The good thing here is: been there, done that. We have explored a variety of UI libraries, application frameworks and we have experienced first hand which are the pitfalls when building for Firefox OS. That's why we're releasing application boilerplate for writing great looking and structured mobile applications. For an impression: the application can be found on comoyo.github.com/ffos-list-detail (visit in any modern browser).

https://c9.io/janjongboom/dropbox/workspace/ffos1.png

Things we have addressed here:
  • Routing for bookmarkable segments in the application
  • Separation in controllers, views and services through AngularJS
  • Incorporating a UI library with the Firefox OS building blocks, that was also used to build the core UI layer (how is that for native!)
  • Animations between views (slide and modal, plus reverse), optimized to also run smooth on low spec phones
  • Compatibility to also run on Android, iOS and desktop browsers
  • Example app manifest + cache manifest for offline usage
  • RequireJS build system for javascript combination / minification
In general we have tried to give you a quick start to get building great Firefox OS applications. Good thing here is that you will get cross platformability (is that a word?) as a free bonus, as long as you don't use any of the WebAPI's to access native phone features.

The source of the application (fork and start hacking!) can be found on github.com/comoyo/ffos-list-detail.

Comments on Hacker News