Simple hdmi activate script

This is a simple script I bound to ‘meta+F7’ to activate a second hdmi display I am using:

disper -l | grep $EXTERNAL
function on {
    disper -e -d $INTERNAL,$EXTERNAL -r 1920x1080,1920x1080
    touch $LOCK
function off {
    disper -s -d $INTERNAL -r auto
    rm -f $LOCK
if [ $? -eq 1 ]; then #there is no EXTERNAL, run single command
elif [ -f $LOCK ]; then


The dark side of the force

I have been spending a lot of time lately working on a new javascript based interface. As with any js project we ended up with a lot of layers. For instance for a simple numeric input there are:

The fun part is that we needed of course some functionality which did not existed in the kendo component (adding support for financial shortcuts: 10k => 10,000).

Since I still have an OOP structured mind, with lot of years of java pattern I thought: Ok, will create a component which extends on kendo and re-wrap.

This would look similar to:

$(function() {
    // wrap the widget in a closure. Not necessary in doc ready, but a good practice
    (function($) {
        // shorten references to variables. this is better for uglification 
        var kendo = window.kendo,
            ui = kendo.ui,
            NumericTextBox = ui.NumericTextBox;
        // create a new widget which extends the first custom widget
        var NumberInput = NumericTextBox.extend({
            // every widget has an init function
            init: function(element, options) {
                var that = this;
      , element, options);
            _keypress: function(e) {
                //override here!!
            options: {
                name: "NumberInput"
        // add this new widget to the UI namespace.

Well, this seemed ok and it worked ok but still requires a lot of work to wrap into an usable aurelia component which maps all the events and options: precision, step …

At this moment it struck me! This is javascript! BUHUHU, there is no need for all this. I could just do this in our wrapper:

    attached() {
        this.taskQueue.queueTask(() => {
            //assuming ak-numerictextbox="k-widget.bind:numericTextBox; in the template
            this.numericTextBox._orig_keypress = this.numericTextBox._keypress;
            this.numericTextBox._keypress = this._keypress;

Now I have switched to the dark side of the force! More details on this github.


A few thoughts about http fetch

Fetch is the “de facto” standard now if building a new javascript code. Even if not yet supported by all browsers it is warmly recommended. There are numerous examples of usage but after reading a lot of them most of them seemed to miss the answer to my questions. These where:

  • how to proper do error handling including having a default error handler which can be overriden
  • how to do http POST?
  • how to use in real-life application? I mean one would expect to do a fetch for a login api and then all other api to work (i.e. have cookie support).

The following code (typescript) will try to answer the above questions:

function myFetch(path: string, params: Object, customCatch: boolean = false): Promise {
    let requestParams: RequestInit = {
        mode: 'cors',
        cache: 'default',
        credentials: 'include' //this is REQUIRED to enable cookie management
    requestParams.body = $.params(object); //generate a query string: 'param1=val&param2=val';
    requestParams.headers = {
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" //this is REQUIRED for POST with this payload
    requestParams.method = 'POST';
    return fetch(path, requestParams)
        .then(response => {
            if (response.ok) {
                return response.text();
            } else {
                throw (response);
        .catch(err => {
            //please note that "TYPEERROR: FAILED TO FETCH" is a very BAD error message. From the spec:
            //"A fetch() promise will reject with a TypeError when a network error is encountered, 
            //although this usually means permission issues or similar"
            if (customCatch) {
                //this allows to override error handler with a custom function
                throw (err);
            } else {
                if (err instanceof Response) { //server error code, thrown from else above
                    //handle this error
                } else { //this is network error
                    //handle this error
            return null;
//fetch with default error handling
myFetch('/api', {user: 'toto', task: 'info'})
        response => {
            if(response != null){
                //handle response
//fetch with custom error handling
myFetch('/api', {user: 'toto', task: 'info'}, true)
        response => {
            if(response != null){
                //handle response
    .catch(errResponse => {
        //handler errResponse (both error status and network error)



Dynamic Aurelia

From someone used to developing in a “traditional” way, switching to a javascript framework is like crossing over to a different universe where the laws of physics do not really apply. They might seem similar but they’re not. Take inheritance for instance, the foundation stone of OOP and throw it down the drain. No more inheritance, everything is composition right now.

Yet in time you will learn the new laws and adapt. Making the decision on which framework to choose has been one of the toughest things I had to do, but finally I am content with choosing Aurelia. It’s structured and comprehensible.

One of the things less documented, however, is the way to do dynamic composition programmatically (in code), as opposed to declarative (in html). This means adding a new element in the DOM and loading a component into it or loading directly some html string with Aurelia markup.

I currently found 3 ways of doing this, and even if I don’t know which is the recommended, one I will mention all of them below. I want to thank all the articles and gitter help I got in making the code below work.

Using the compositionEngine.compose()

The compose element is the way Aurelia allows you to insert a dynamic component into the page. What if there is no compose markup and you want to add a variable number of components?
This corresponds to the following use case scenario: I have a menu navigation which opens tabs for each different application module. Each module is implemented as a component (they do not inherit a base class!). When the user opens a menu entry, a new tab is created and the corresponding component loaded. A working example can be found in this gist.

To add a new tab, a new DOM node is created using basic javascript, then the CompositionEngine.compose is called provided with a viewModel, the component name, and a slot to attach to, the newly created element.

this.instruction = Object.assign(this.instruction, {viewModel: menuId, host: el, viewSlot: vSlot});
this.compositionEngine.compose(this.instruction).then(controller => {

Please note that the limitation I currently found to this method is that if 2 instances of the same component are created they will share the same instance of the viewModel. Test here by opening “second module” twice and changing the value. This is due to the fact that the viewModel is obtained using container.get() which by default returns a singleton. One solution is the mark the viewModel with transient(), another would be to create the viewModel instance and add it to the child container (I guess this is Aurelia does internally for the components). Also don’t forget to call unbind and detach on the component if you also plan to allow for the components to be removed.

Using enhance

A simpler method is to insert the markup for the compose element directly and call templatingEngine.enhance on it. This also does not suffer from previous viewModel reusage limitation.

              content: '<compose view-model="' + menuId + '" id="' + moduleDivId + '"></compose>',
              encoded: false
      let el = document.getElementById(moduleDivId);
      let view = this.templatingEngine.enhance({ element: el, bindingContext: {}, overrideContext: {}});

See more info here.

Please note that I think the api has changed recently since I am experiencing some trouble with this method on latest aurelia-templating.

Using the viewCompiler

Both previous methods add a component dynamically in html in a place where no previous markup exists. At some point however one might wish to load a chunk of html containing aurelia markup in the current DOM. Take the usecase where parts of a form are user generated and are loaded from the server at runtime. Check the gist here. As you see, when the html is loaded, binding also takes place.

The dynamic part happens here:

        let viewFactory = this.viewCompiler.compile(html, this.resources);
        let view = viewFactory.create(this.container);
        view.bind(viewModel, createOverrideContext(viewModel));
        let viewSlot = new ViewSlot(containerElement, true);
        return () => {


Update NumericTextBox precision on the fly

As currency selection changed you naturally want to change the precision and format of a NumericTextBox which contains an amount in the given currency (damn JPY for not using the same precision as everyone else).

At a first glance one might think this can be accomplished using computed properties and something like:

    @bindable precision:number = 2;
    get step():number {
        return Math.pow(10, - this.precision);
    get format():string {
        return "n" + this.precision;
<input type="number" ak-numerictextbox="k-value.two-way:value;;;;"/>

However this is not possible and in this specific case there are no kendo functions to achieve this.

The only option, short of recreating the control each time the currency changes is to use the setOptions method as described here:

    precisionChanged(newValue, oldValue){
        let step = Math.pow(10, - this.precision);
        this.numericTextBox.setOptions({format: 'n' + newValue, decimals: newValue, step: step});

Please note the value(value()) is a very ugly hack. See running gist.


Dispatch change events in custom components

This is the first post about Aurelia and the Kendo-UI-Bridge. It’s a brave new world for me.

The goal was to create a custom component (which wraps a ak-combobox) and dispatch a change event in a similar way to the standard components (i.e ak-combobox, ak-datepicker, etc.).

<input ak-datepicker="k-value.two-way:" k-on-change.delegate="onChange($event)"/>

For these components, the change event is dispatched after the model changes.

In my component code I had initially wrapped the k-on-change from the base component and continued dispatching it.
This however did not had the desired effect. The wrapping component emitted the event before the model was updated (binding was updated).

<dictionary-combo value.two-way="model.currency" k-on-change.delegate="onChange($event)"></dictionary-combo>
      this.dispatchCustomEvent(this.element, "k-on-change", {value: this.value});
    dispatchCustomEvent(element:Element, type:string, detail:Object, bubbles:boolean){
        let newEvent;
        if (window.CustomEvent) {
            newEvent = new CustomEvent(type, {
                detail: detail,
                bubbles: true
        } else {
            newEvent = document.createEvent('CustomEvent');
            newEvent.initCustomEvent(type, bubbles, true, {
                detail: detail

The solution is to delay the event. Stop propagating the initial event and add the action of sending the new event to the aurelia taskQueue. This would ensure the event occurs after the binding and can be done:

       console.log("dictionaryCombo.onChange: " + this.value);
       //wrong way: this.dispatch()
       this.taskQueue.queueMicroTask(() => this.dispatch());

Refer to this gist for complete example.

Please note that I found this, thanks to the wonderful guys on the aurelia-kendo-ui gitter to which I remain grateful

Parsing network stream into http request/response

The need was to convert the network stream into clear text http request/responses while doing some decoding of the response body. For instance:

request uri + queryString => response body

  1. Capture the stream – easy using tcpdump
  2. Filter the http stream – easy using wireshark with a tcp.port eq 80 filter
  3. Export http #1. using wireshark file -> export objects -> http. This works fine only for files. It does not work for POST requests. FAIL.
  4. Using tshark and a combination of -Tfields and -e parameters. Did not worked easily enough even if I suspect it would. FAIL.
  5. Using tcpflow:  tcpflow -r test.pcapng -ehttp. This generates some nice flows but it had some disadvantages: requests and responses are in different files and are flow sorted not time sorted. I think this can be overcome by writting a script which parses: report.xml using something like this. FAIL.
  6. Final idea was based on pcap2har which parses a .pcap file to a har. Some changes to and voila:'Flows=%d. HTTP pairs=%d' % (len(session.flows), len(session.entries)))
for e in sorted(session.entries, key=lambda x: x.ts_start):
    if e.request.msg.method == 'GET':
        print 'GET', e.request.url
    elif e.request.msg.method == 'POST':
        print 'POST', e.request.url, urlencode({k: v[0] for k, v in e.request.query.items()})
    if e.response.mimeType == 'application/octet-stream':
        print decode(e.response.text, options.password)
        print 'unknown:', e.response.mimeType, e.response.raw_body_length
    print '\n'
#write the HAR file


Ubuntu 16.04

I’we used ubuntu since edgy days and migrating from gentoo. Things got better each time, until they started getting worse or until I started to expect not to have to fix and patch each time. So now I don’t feel like giving any impression, just a list of bugs:

Read fast or die

I have spend a lot of time today trying to find and fix an issue which ended up to be a fun discovery at the end.

The following java error occurred when loading a pdf file from an url stream: missing CR

This looked like a java lib error since java version was a bit old so the first idea was to replace the code with some apache httpClient based code to load the URL. This generated the following error, very similar. CRLF expected at end of chunk: 121/79
at org.apache.commons.httpclient.ChunkedInputStream.readCRLF(Unknown Source)
at org.apache.commons.httpclient.ChunkedInputStream.nextChunk(Unknown Source)
at Source)
at Source)
at Source)

Since this was a windows machine and the requests passed via localhost another try was to use another interface. The result was similar.

After some search I found a nice tool: which does not requires any install and can be used even on localhost to generate a pcap compatible file which can then be inspected in wireshark.

The result was strange. Opening the capture in wireshark on my machine showed: [7540 bytes missing in capture file] in the tcp stream. This corresponded to a lot of packets: [TCP ZeroWindow], [TCP ZeroWindowProbe].


Since this was a VMWare install and I previously had some trouble with vmware software switches I assumed this was related to the network card config however it also happened on localhost.

After some more investigation I realized this was only happening when several request where made in parallel. I confirmed this by looking in the code.

The code contained a worker pool. Each worker/thread constructed the url the used then returned an inputStream.

DataSource source = new URLDataSource(reportUrl);
return source.getInputStream();

However all the results were handled in sequence. As such while one url inputStream was read, the server continued to send data on all others request but this data was not read on the client side fast enough. As a result the tcp window got indeed to 0 and the strange error occurred.

Of course the solution was to fully read the data in each worker.

Searching for signal

For the last few years, one of the tool I have greatly used is a Huawei E587 modem. It’s a great little device which gave me a lot of freedom. Even if it is quite old, it outperforms, even without an external antenna any smartphone I used for tethering and especially my new Samsung Galaxy S5 Neo which, as a parenthesis, has one of the poorest software I have ever seen, reminds me of a circa 2000 windows pre-installed on a laptop and filled with junkware.

However, as many other devices, the reporting of signal strength is very simplistic. My goal was to be able to identify the best spot for the external antenna defined by the best signal strength.