Using a third party API like Facebook Connect makes it tricky because you need to specify a URL on your Facebook app, and it either needs to be localhost or your live domain, like app.herokuapp.com.

The solution:

1. sudo vim /etc/hosts and add a line like this

127.0.0.1    app.herokuapp.com

2. Your node/heroku app runs on port 3000, but the IP configured above will only work for port 80, the default for http. We need to redirect all 80 traffic to port 3000, with the command below.

sudo iptables -t nat -I OUTPUT -p tcp -d 127.0.0.1 --dport 80 -j REDIRECT --to-ports 3000

Notice that the above command works for local requests. If you have external traffic on the server, you need to run this other command:

sudo iptables -t nat -I PREROUTING -p tcp --dport 80 -j REDIRECT --to-ports 3000

That is it. Remember to use HTTP and not HTTPS locally as well, else you will get a browser warnings or an error.

Mongodb stores dates on the UTC timezone as default, but your Node app will create Date objects using your local timezone.

Most apps don’t need date granularity at hour level, only day, so dealing with timezone issues is crazy.

A better approach? Store your dates as a string using the ‘YYYY-MM-DD’ format. It will be much simpler, and you will still be able to query your DB filtering by date, since string comparison will work perfectly.

Sales.find({id:id,date:{"$gte":startDate,"$lt":endDate}},function(err, purchases){

});

Overlay image on video

ffmpeg -i input.mp4 -i 1.png -filter_complex "[0:v][1:v] overlay=25:25:enable='between(t,0,20)'" \
-pix_fmt yuv420p -c:a copy output.mp4

—————————————————-

Add audio to video (if video has audio, needs to map video from input 0 and audio from input 1)

ffmpeg -i matrix-16.mp4 -i port-audio.mp3 -map 0:v -map 1:a -acodec aac -strict -2 output.mp4

—————————————————-

Add audio to video: stream copy

ffmpeg -i video.avi -i audio.mp3 -codec copy -shortest output.avi

Omitting the -map option will use the default stream selection. This will work if your video input has no audio.

This example uses -codec copy to stream copy (no re-encoding; quality is preserved and it is fast).
The -shortest option will make output.avi the same duration as the shortest input.

—————————————————-

Add audio to video: re-encode

If your output doesn’t like the original formats, or if you want to change formats you can specify the encoders:

ffmpeg -i video.avi -i audio.mp3 -c:v libx264 -c:a libvorbis -shortest output.mkv

—————————————————-

To manually choose specific streams

Sometimes the default stream selection won’t give you the result you want. In this example video.mp4 has video and audio, and audio.m4a only has audio. Use -map to choose video from video.mp4 and audio from audio.m4a:

ffmpeg -i video.mp4 -i audio.m4a -map 0:v -map 1:a -c copy -shortest output.mp4

-map 0:v – From input 0 (the first input, which is video.mp4) choose the video stream(s).
-map 1:a – From input 1 (the second input, which is audio.m4a) choose the audio stream(s).

—————————————————-

Mixing/combining two audio inputs into one (needs tweaking, see below for a better version)

Take video from video.webm, and use the amerge filter to combine the audio from video.webm and audio.oga:

ffmpeg -i video.webm -i audio.oga -filter_complex "[0:a][1:a]amerge=inputs=2[a]" -map 0:v -map "[a]" -c:v copy -c:a libvorbis -ac 2 -shortest out.webm

—————————————————-

Generate silent audio

You can use the anullsrc filter to make a silent audio stream. The filter allows you to choose the desired channel layout (mono, stereo, 5.1, etc) and the sample rate.

ffmpeg -i video.mp4 -f lavfi -i anullsrc=channel_layout=stereo:sample_rate=44100 -c:v copy -shortest output.mp4

—————————————————-

Concat mp3

ffmpeg -i "concat:intro-1.mp3|audio.mp3" -acodec copy output.mp3

—————————————————-
Overlay many images at the same time

ffmpeg -i output.mp4 -i 1.png -i 2.png -i 3.png -i 4.png -i 5.png -i 6.png -i 7.png -i 8.png -filter_complex "[0][1] overlay=0:0:enable='between(t,4,9)'[v1];[v1][2] overlay=0:0:enable='between(t,9,15)'[v2];[v2][3] overlay=0:0:enable='between(t,15,20)'[v3];[v3][4] overlay=0:0:enable='between(t,20,25)'[v4];[v4][5] overlay=0:0:enable='between(t,25,31)'[v5];[v5][6] overlay=0:0:enable='between(t,31,33)'[v6];[v6][7] overlay=0:0:enable='between(t,33,39)'[v7]; [v7][8] overlay=0:0:enable='between(t,39,47)'[v8];[v8][1] overlay=0:0:enable='gt(t,47)'[v9]" -map "[v9]" -map 0:a -pix_fmt yuv420p -c:a copy 1.mp4

—————————————————-

Cut video length at the end

ffmpeg -i input.mp4 -c copy -t 00:00:10.0 background.mp4

—————————————————-

Cut beginning and end of video

You can use the -ss option to specify a start timestamp, and the -t option to specify the encoding duration. The timestamps need to be in HH:MM:SS.xxx format or in seconds.

The following would clip the first 30 seconds, and then clip everything that is 10 seconds after that:

ffmpeg -i input.wmv -ss 00:00:30.0 -c copy -t 00:00:10.0 output.wmv
ffmpeg -i input.wmv -ss 30 -c copy -t 10 output.wmv

Note that -t is an output option and always needs to be specified after -i.

—————————————————-

overlay 2 audio files, adjusting respective volumes

ffmpeg -i audio.mp3 -i 2.mp3 -filter_complex "[0:a]aformat=sample_fmts=fltp:sample_rates=44100:channel_layouts=stereo,volume=2.5[a1]; [1:a]aformat=sample_fmts=fltp:sample_rates=44100:channel_layouts=stereo,volume=0.3[a2]; [a1][a2]amerge,pan=stereo:c0<c0+c2:c1<c1+c3[out]" -map "[out]" -c:a libmp3lame -q:a 0 -shortest output.mp3

—————————————————-

Concat 2 videos with list.txt

ffmpeg -f concat -i list.txt -c copy background.mp4

list.txt should be:
file 1.mp4
file 2.mp4

—————————————————-

Adjust framerate and resolution of video

ffmpeg -i 3.mp4 -r 25 -s 1920x1080 output.mp4

MongoDB
MongoDB Tutorial
Cloud MongoDB Service MLab
toArray in MongoDB

Node.js/Express.je
HTML to Jade/Pug Converter
Bcrypt module usage
Social authentication with passport

Event-Driven Programming: As the name implies, a programming paradigm where the flow of the program is governed by events. There is a main loop monitoring things and triggering the appropriate callbacks.

Noje.js: Contrary to what some programmers think (I heard it a couple of times), Node.js is NOT a web server. Instead it’s a JavaScript runtime environment, which uses Google’s V8 engine to interpret JavaScript. It has an event-driven architecture capable of asynchronous I/O, which makes is quite suitable for web and real time applications.

Callbacks: A piece of code (usually a function) passed to another piece of code (usually another function, passed as an argument) to be executed at proper time. Useful when you want to specify how a function is supposed to execute part of its task (i.e. how to compare two numbers) or when you want your code to be executed once the function is done and the result available.

Functions as first-class citizens: In order for callbacks to work, functions need to be first-class citizens in the specific language. This means that they need to support all the operations that other entities support, including being passed as an argument.

Nested callbacks: If you need to do synchronous stuff with Node.js you might need to nest callbacks to achieve the desired result, and you can store functions inside variables to help. Example:

var updateQuery = function(value){
    client.query('UPDATE T_STATE SET value='+value,function(err,result){
    if(err)
        throw err;
    });
};

client.query('SELECT value from T_STATE',function(err,result){
    if(err)
        throw err;
    else{
        var stateValue =  result.rows[0].value;              
        stateValue++;
        updateQuery(stateValue);        
    }
});   

Node.js and callbacks: Callbacks are everywhere in Node.js and related libraries (i.e., Express.js). Usually those callbacks handle error first and then execute the specific code.

Stack, Heap, Queue, Event Loop: JavaScript function calls get a stack frame on the stack (with arguments, local variables, etc.). Objects are allocated in the heap. When you call web APIs (e.g., XMLHttpRequest or setTimeout) those go in the queue (as messages). When events with listeners happen, they also go into the queue. Whenever the stack is free, the event loop will get the first message from the queue and put it on the stack for execution.

Useful resources:

Event-Driven programming with analogies
Understand the event loop

It assumes you have Git and Heroku toolbelt installed. You can view a more detailed tutorial here.

1. Create the app locally (you can view a “Hello World” example here)
2. git init
3. heroku create appname
4. git push heroku master
5. heroku ps:scale web=1

You can then use ‘heroku open’ to launch and test it.

Note: One important aspect to understand about Git is that it thinks about data as snapshots of files over time. Every commit will generate a new snapshot, that is independent of previous ones. This is very different from the approach used by most other version control systems, where data is thought as files and changes to those files over time.

1. Installing Git on Linux

sudo apt-get install git-all

2. Creating a Git Repository

There are two ways to create a new Git repository. You can either use an existing folder/project, or clone one from a remote server. If you are using an existing folder, go inside it and type

git init

If you want to clone a repository:

git clone https://github.com/project/

3. Getting information about the repository

git status

4. Tracking a file

If you create a new file, it won’t be tracked by Git immediately. You need to use the ‘add’ command to do so.

git add file.c

5. Staging files

Once you change files, Git will know. But that doesn’t mean it will automatically use those modified versions on the next commit. If you want to do so, you need to ‘stage’ the modified file. You do so using the same ‘add’ command.

git add file.c

6. Committing Changes

git commit

or if you want to add a message to the commit:

git commit -m "bug fix 1"

or if you want to include even files that weren’t staged with the ‘add’ command:

git commit -a

7. Removing files

git rm file.c

8. View changes over time

git log

9. Getting a remote project

git fetch [remote-project]

or if you want to get and merge:

git pull [remote-project]

10. Pushing your project to remove server

git push [remote-project] [branch]

usually this will look like

git push origin master

Because when you clone a project Git automatically calls the remote project ‘origin’.

Small Teams Working on the Same Git Project
– No one pushes to master.
– For every feature (or update on a feature), create new branch.
– Send pull request for reviewing (one of us is the reviewer).
– Merge pull request into master.

If you follow Facebook’s setup guide, you’ll notice that the example provided to activate a webhook for the first time is in Node.js:

  app.get('/webhook', function (req, res) {
    if (req.query['hub.verify_token'] === 'YOUR_VERIFY_TOKEN') {
      res.send(req.query['hub.challenge']);
    } else {
      res.send('Error, wrong validation token');    
    }
  });

I saw on online forums many people looking for a PHP version of that code, so here you go:

<?php

$challenge = $_REQUEST['hub_challenge'];
$verify_token = $_REQUEST['hub_verify_token'];

if ($verify_token === 'my_token') {
    echo $challenge;
}
else{
    echo "Error, wrong validation token";
}

?>

This can be a problem, however, if you need to load data for a widget from another domain. For instance, suppose you are developing a widget that your partners will use on their websites and it will load data from your server.

A really clever solution is called JSONP, which stands for “JSON with Padding.” It works by “exploiting” the fact that <script> tags can load files from other domains.

Here’s a simple example of how it works:

1. Create your HTML file (On Domain A)

<html>
<body>
<h1 id="maintitle><h1>
</body>
</html>

As you can see, it has no title. We are going to get the title from another website, and put it there using JavaScript.

2. Create a JavaScript function to change the title (On Domain A)

<html>
<body>
<h1 id="maintitle><h1>
<script>  
function changeTitle(data){
    document.getElementById("maintitle").innerHTML = data.title;
};        
</script>
</body>
</html>

Notice that this functions receives a parameter “data” which contains the title, and then changes it on the HTML.

3. Create the server side script that returns the data (On Domain B)

<?php
if($_GET['callback']){
  $f_name = $_GET['callback'];
  echo "$f_name({'title':'Hello World!'});";   
}
else{
  echo "Error: You must pass a callback parameter";
}
?>

This script checks whether a GET parameter called ‘callback’ was provided. In positive case, it returns a JavaScript function named after that parameter, and the title as data (in this example the title is “Hello World”).

Now suppose we put that script on serverdomain.com/server.php. If we opened serverdomain.com/server.php?callback=ChangeTitle the server would send back the following:

ChangeTitle({'title':'Hello World'});

This is the same name of the JavaScript function we created on step 2. That is no coincidence. You are going to see why now.

4. Use another <script> tag to load the data from the other server (On Domain A)

<html>
<body>
<h1 id="maintitle><h1>
<script>  
function changeTitle(data){
    document.getElementById("maintitle").innerHTML = data.title;
};        
</script>
<script src="http://serverdomain.com/server.php?callback=ChangeTitle"></script>
</body>
</html>

The second <script> tag will ping our server and essentially load this code:

ChangeTitle({'title':'Hello World'});

This will call the ChangeTitle function defined on the first <script> tag with our title as a parameter, and that function will then change the title of the HTML.

Nice huh?

5. Making the Request Dynamically

The example above makes the request by placing a <script> manually on the HTML of the page. You can also do that dynamically with JavaScript, which becomes quite handy for dynamic web applications:

function myFunction(data)
{
    //do stuff
}

var script = document.createElement('script');
script.src = 'http://example.com/?callback=myFunction';
document.getElementsByTagName('head')[0].appendChild(script);

The code below will also work on newer browsers:

document.head.appendChild(script)

Common problems:

1. Notice that both domains must be using the same protocol (HTTP or HTTPS), else you’ll get an error.

node.js – event-driven runtime environment for developing server-side applications . Allows you to develop in JS, and it’s quite fast. It also handles concurrent connections quite efficiently.

express.js – minimalist server-side web framework for node.js

React – javascript library for building user interfaces

angular.js – client-side, web applications framework, especially suitable for single-page applications

knex.js – SQL query builder for JavaScript

backbone.js – javascript library with a RESTful JSON interface, based on MVP

socket.io – javascript library for real time web apps. enables biderection communication between server and client

As for databases, MySQL seems to still be the default choice, by MongoDB and PostgreSQL are following closely.

Here’s an interesting post about the topic (though from 2014): Which Technologies Do Startups Use? An Exploration of AngelList Data