Dynamic port & Bower + Grunt scripts with Heroku host

I use Heroku to host some project like Osprey, and I need to admit that this is really a nice platform to host your personal projects for free. It’s really easy to start with but you need to know a few of things…

First of all, check the Node tutorial provided by Heroku.

Bower & Grunt

If you have some bower or grunt scripts to launch after the npm install and before the npm start, you need to add a bash script reference in your package.json file. Your package.json file will contain a postinstall command:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "node server.js",
  "postinstall": "bash ./build.sh"
},

And your build.sh file should contain all the commands to build the rest of your project (copy, move files, etc…)

#!/bin/bash
./node_modules/bower/bin/bower install
./node_modules/grunt-cli/bin/grunt

Dynamic port

Heroku assigns dynamically a port to your app. So, if you have set a fixed port in your server.js file, it will not work with the heroku deployment. The port is added to the process.env.PORT variable so you need to pull it from there. You app.listen method should look something like this:

var port = process.env.PORT;
app.listen(port || 3000);

Google Photos, bring back your filters (Deimos, Ariel, Triton, Phobos, etc…)

Since Novembre 2016, Google has “improved” the Google Photos app, but they simply removed all filters for something that is not equal… I’ve sent a feedback through the Google Photos contact form (https://photos.google.com/ > left menu > give feedback).

The workaround is to download an old version of Google Photos and install to a simulator or on your phone. You can find all APK versions on the APKMirror website.

If you don’t know which version is needed for your phone, check on Google your phone architecture version and dpi. For example, for a Nexus 5X, it’s arm64 – dpi 420 (default), so you need to download the 540717 (October 31, 2016) version which corresponds to: arm64, Android 4.1+, 400-480dpi

Forum posts

Google Forum – Is there way to use the previous filter?

Google, bring back your filters! They were good!

Developer / Coder / Programmer, you may have to celebrate something today!

That’s my list of events related to computer science that you have to celebrate at office with your colleagues. So you have no excuse to clean out your computer in February, do a backup in March or celebrate all your killed Bugs during the year in December. There is a lot of other days to celebrate, you can find my list and feel free to contribute.

And please, don’t forget to bring croissants at office…

January Event
15 Jan Wikipedia Day
25 Jan Macintosh Computer Day
28 Jan Data Privacy Day
February Event
04 Feb Facebook’s Birthday
08 Feb Clean Out Your Computer Day
20 Feb Introduce a Girl to Engineering Day
22 Feb World Thinking Day
March Event
14 Mar Pi day
31 Mar World Backup Day
April Event
05 Apr Annual CSS Naked Day
21 Apr High Five Day
27 Apr Morse Code Day
May Event
01 May CSS Reboot Day
22 May The Ethernet Birthday
25 May Geek Pride Day
June Event
23 Jun Alan Turing’s Birthday
July Event
06 Jul Take Your Webmaster to Lunch Day
22 Jul Pi Approximation Day
26 Jul System Administrator Appreciation Day
September Event
07 Sep Google Commemoration Day
12 Sep Programmer’s Day
20 Sep Software Freedom Day
October Event
16 Oct Steve Jobs Day
November Event
25 Nov Update Your Parents Browser Day
30 Nov Computer Security Day
December Event
02 Dec Kill a Bug Day

Cheers.

W04Y17 – Git, create a new repository from a current branch, disable HTTP logs in Express, Android mass storage and kill process on specific port

Create a new repo from an existing branch

As you know, it’s strongly recommended to create a new repository if a branch depends to another branch in your project… Basically, if you need to clone a repo twice and checkout each to a different branch to launch your project, it’es very bad!

So, the simplest method in three steps to create a new repo from a current branch is to:

> create your **new_repo** in GitHub
> cd to your local branch 
> git push git@github.com:youraccountname/new_repo +old_branch:master

Now, your new GitHub repository is up to date. The master branch corresponds to the branch in your old repo with all history preserved which is a very good point!

How to disable HTTP request logs in Node/Express.js

When you launch your application built on Node/Express, you’ll probably see a lot of logs for each resources (css, images, js, etc…)

GET /resources/styles.css 200 0ms
GET /js/lib/jmyawesomelib.js 200 0ms
etc...

The solution is to move the logging plugin below the resource plugin in the app init! or comment your morgan module (works on Express.js 4)

//app.use(morgan('dev'));

No more logs!

Mass storage troubleshooting

I figured some problems lorsque je branchais my Google Nexus 5X to my Macbook (also on a Windows machine too). It was impossible to do a mass storage to retrieve the phone content (photos, videos, downloaded files, etc…). I tried all the solutions found on forums and the only software that saved my life is Android File Transfer by Google for OSX.

Download Android File Transfer

Kill process running on a specific port

To kill a port that is running on a specific port, you need to execute the following commands. First, get the list of process running with corresponding ports and info:

netstat -a -o -n

Now, you get a list of process running on your machine, you only have to pick the PID corresponding the port you are looking to kill and replace 8080 below.

taskkill /F /PID 8080

Successfully killed, bye bye 🙂

SAP UI5 – Data binding without XML view for the sap.m.Table component

Here I’ll describe the best method I’ve found to bind data to the sap.m.Table component without using XML view, so only with JavaScript, programmatically.

Link to the sap.m.Table component in the SAP UI5 documentation.

First, you need to declare your dataset:

var oData = {
    'History': {
        'Entries': [
            {
                'Type': 'nonFolder',
                'Name': 'LCMCompare',
                'Time': 'Jan 9, 2017 2:01 PM',
                'modifiedCount': '1'
            },
            {
                'Type': 'nonFolder',
                'Name': 'Another one',
                'Time': 'Jan 2, 2017 5:55 PM',
                'modifiedCount': '9'
            },
            {
                'Type': 'nonFolder',
                'Name': 'First comparison',
                'Time': 'Jan 9, 2017 4:41 PM',
                'modifiedCount': '4'
            }
        ]
    }
};

After that, you need to declare your columns definitions:

var oTable = new UI5Table({
    headerText: 'Compared:',
    columns: [
        new UI5Column({
            header: new UI5Label({
                text: 'Type'
            })
        }),
        new UI5Column({
            header: new UI5Label({
                text: 'Comparison Name'
            })
        }),
        new UI5Column({
            header: new UI5Label({
                text: 'Date/Time'
            })
        }),
        new UI5Column({
            header: new UI5Label({
                text: 'Difference'
            })
        })
    ]
});

Now, it’s time to declare the table and to define the binding between the data and the columns: (in my case, I’m naming history as the root as my datasource)

var oModelTable = new sap.m.JSONModel(oData);
oTable.setModel(oModelTable, 'history');
var oTemplate = new UI5ColumnListItem({
    cells : [
        new UI5Text({
            text : '{history>Type}'
        }),
        new UI5Text({
            text : '{history>Name}'
        }),
        new UI5Text({
            text : '{history>Time}'
        }),
        new UI5Text({
            text : '{history>modifiedCount}'
        })
    ]
});
oTable.bindItems('history>/History/Entries', oTemplate);

The last line in this example will bind your data following the root > and the path to the array to iterate through. Your table will be rendered with the data in your oData object. I would suggest to attach this binding with an object in your store, so changes will appear automatically.

Preview of the result: sap-m-table_ui5_result