5 Most useful ES6+ Features

In this post, I am going to share with you Javascript ES6+ features that I find the most useful:

For…of Loop
Arrow Functions
Async and Await
Template literals
Destructing

For…of Loop

Before either we had to write a full for loop or call the forEach function on the array to iterate over its item.

Previously we had to do this

var animals = ['cat', 'dog', 'monkey', 'goat'];
animals.forEach(function(animal) {
    console.log(animal);
});

// OR THIS

for(var i=0; i < animals.length; i++) {
    console.log(animals[i])
}

var animals = ['cat', 'dog', 'monkey', 'goat'];

animals.forEach(function(animal) {

console.log(animal);

});

// OR THIS

for(var i=0; i < animals.length; i++) {

console.log(animals[i])

}

Now with the new version of JavaScript, we can simply write the For…Of loop

for (let animal of animals) {
    console.log(animals)
}

for (let animal of animals) {

console.log(animals)

}

If we have to iterate over an object’s keys we can use the For…In loop

var address = {
    street: '123 Example Street',
    city: 'TestCity',
    state: 'CoolState'
};

for (let key in address) {
    console.log(address[key]);
}

var address = {

street: '123 Example Street',

city: 'TestCity',

state: 'CoolState'

};

for (let key in address) {

console.log(address[key]);

}

Arrow Functions

If you have done programming in JavaScript you must be familiar that we have to create a LOT of functions in javascript as it is an asynchronous programming language.

With the new Arrow Functions, it makes the code cleaner and also saves you a few keystrokes.

Consider the following example, previously we had to do this

setTimeout(function() {
    console.log('5 seconds later')
}, 5000)

setTimeout(function() {

console.log('5 seconds later')

}, 5000)

Now with the ES6+ syntax, it can be compressed into a single line, in a single like arrow function we don’t have to write the return statement, the value of whatever expression preceding the arrow will be returned.

setTimeout(() => console.log('5 seconds later'), 5000)

1	setTimeout(() => console.log('5 seconds later'), 5000)

We can also create multi-line arrow functions that accept multiple arguments

const compute = (arg1, arg2, arg3) => {
    const total = arg1 + arg2 + arg3;
    return total * total;
}

compute(4,5,6)

const compute = (arg1, arg2, arg3) => {

const total = arg1 + arg2 + arg3;

return total * total;

}

compute(4,5,6)

Async and Await

This is the feature that I use a lot especially when doing server-side programming using Node.JS, but you can also use it on the front-end and it also works in all the major browsers.

With Async and Await keywords, you can write asynchronous code that uses promises appear as if it is synchronous and make the code more readable.

Consider the following example without async await

function doSomething() {
    getData().then((data)=> { //asychronous call
        const dataWithSomething = doSomethingWith(data) //sychronous call
        passDataToAnotherService(dataWithSomething).then((processedData) => { //asychronous call
            doSomeMoreThing(processedData) //sychronous call
        })
    })
}

function doSomething() {

getData().then((data)=> { //asychronous call

const dataWithSomething = doSomethingWith(data) //sychronous call

passDataToAnotherService(dataWithSomething).then((processedData) => { //asychronous call

doSomeMoreThing(processedData) //sychronous call

})

}

Now with Async and Await keywords, we can update the code and make the asynchronous functions look like synchronous functions and it results in a much cleaner code, see for yourself:

async function doSomething() {
    const data = await getData();
    const dataWithSomething = await doSomethingWith(data);
    const processedData = await passDataToAnotherService(dataWithSomething);
    doSomeMoreThing(processedData)
}

async function doSomething() {

const data = await getData();

const dataWithSomething = await doSomethingWith(data);

const processedData = await passDataToAnotherService(dataWithSomething);

doSomeMoreThing(processedData)

}

As you can see with the update the code is much more simplified. To use async-await first you have to create a function with keyword async, then inside the function, you can call asynchronous methods that uses promise and add the await keyword in front of the function call.

Template literals

Template literals is a very useful feature, previously we had to use string concatenation the can quickly get out of hand if we are using multiple values or if want to construct a multi-line string, consider the following example

var bookCount = 100;
var message = 'Your have ' + bookCount + ' books.'

1 2	var bookCount = 100; var message = 'Your have ' + bookCount + ' books.'

The code can be simplified with template literals

var books = 100;
var message = `You have ${bookCount} books.`;

1 2	var books = 100; var message = `You have ${bookCount} books.`;

To use the template literal we have to enclose the string in ` and then enclose the variable name under ${<variable_name>}

Template literals can also expand to multiple lines

var message = `
    You have ${bookCount} books in your library.
    The most popular title in you collection is: ${popularTitle}.
    Your have favourited ${favBookCount} books.
`

var message = `

You have ${bookCount} books in your library.

The most popular title in you collection is: ${popularTitle}.

Your have favourited ${favBookCount} books.

Imagine constructing the above code using string concatenation, it would be an unreadable mess.

Destructuring

Destructuring allows us to extract values from an object and easily assign it to variables.

Considering the following example, here is what we normally do when we want to extract values from an object

var person = {
    name: 'James Bond',
    age: 41,
    occupation: 'plumber'
}

// Without Destructing
const name = person.name;
const age = person.age;
const occupation = person.occupation;

var person = {

name: 'James Bond',

age: 41,

occupation: 'plumber'

}

// Without Destructing

const name = person.name;

const age = person.age;

const occupation = person.occupation;

With destructuring you can simplify the code as following:

//With Destructing
const { name, age, occupation } = person;

// And we can normally use the defined variables
console.log(`The name is ${name}`);

//With Destructing

const { name, age, occupation } = person;

// And we can normally use the defined variables

console.log(`The name is ${name}`);

and we can use the name, age, and occupation as variables in our code.

That’s it!

These the feature that I find the most useful in ES6+, please share if you found it interesting and let me know in the comments what ES6+ feature you like the best.

July 3, 2018

Embedding Rocket Chat using iFrame Auth

Recently I was working on a project where I had to embed Rocket.chat on a website, and when the user login to the website, they will also get automatically logged-into Rocket.chat

The following steps have to be performed:

Check if the user exists in Rocket.chat
If the user exists then login user
If the user doesn’t exist then create the user in Rocket. chat and log in the user

I went through the Rocket chat documentation and figured out the best way to do it would be through a combination of iFrame Auth and the Rocket chat REST API. The iFrame Auth will be used to perform login and Rocket chat REST API to create a new user and generate tokens, but the documentation regarding the iFrame Auth was not quite clear and it was confusing, I also studied the provided example code and then after some fiddling I was able to implement my solution and I will walk you through the steps:

Login, Create Account and Server Setup

When doing iFrame Auth, Rocket chat sends few requests to our server so we will have to create few API’s on our server that Rocket chat server would call to authenticate the user. I am using Node.JS + Express on the server side in the following example but the logic is similar even if you are using a different server or programming language.

Creating a wrapper to encapsulate Rocket chat API

We will call the Rocket Chat API to create a user in Rocket chat and we will also use it to Login the user and get the token.

First, we will have to obtain Rocket Chat Admin UserID and Admin Auth Token, this can be done by simply calling the Rocket Chat Login API:

curl http://localhost:3000/api/v1/login \
     -d "username=myusername&password=mypassword"

1 2	curl http://localhost:3000/api/v1/login \ -d "username=myusername&password=mypassword"

Here http://localhost:3000 is the Rocket Chat URL and in place of myusername enter your Rocket chat admin username and under mypassword enter your password.

You’ll get a response something like this

{
  "status": "success",
  "data": {
      "authToken": "9HqLlyZOugoStsXCUfD_0YdwnNnunAJF8V47U3QHXSq",
      "userId": "aobEdbYhXfu5hkeqG",
      "me": {
            "_id": "aYjNnig8BEAWeQzMh",
            "name": "Rocket Cat",
            "emails": [
                {
                  "address": "rocket.cat@rocket.chat",
                  "verified": false
                }
            ],
            "status": "offline",
            "statusConnection": "offline",
            "username": "rocket.cat",
            "utcOffset": -3,
            "active": true,
            "roles": [
                "admin"
            ],
            "settings": {
                "preferences": {}
              }
        }
   }
}

{

"status": "success",

"data": {

"authToken": "9HqLlyZOugoStsXCUfD_0YdwnNnunAJF8V47U3QHXSq",

"userId": "aobEdbYhXfu5hkeqG",

"me": {

"_id": "aYjNnig8BEAWeQzMh",

"name": "Rocket Cat",

"emails": [

{

"address": "rocket.cat@rocket.chat",

"verified": false

}

"status": "offline",

"statusConnection": "offline",

"username": "rocket.cat",

"utcOffset": -3,

"active": true,

"roles": [

"admin"

"settings": {

"preferences": {}

}

Extract authToken and userId from the above response as we would need it in the next step.

Now we have to authToken and userId of the Rocket chat admin, we can use this to call Rocket Chat API and create new users in Rocket Chat.

import request from 'request-promise-native'

const rocketChatServer = 'http://localhost:3000';
const rocketChatAdminUserId = 'aobEdbYhXfu5hkeqG';
const rocketChatAdminAuthToken = '9HqLlyZOugoStsXCUfD_0YdwnNnunAJF8V47U3QHXSq';

export async function fetchUser (username) {
  const rocketChatUser = await request({
    url: `${rocketChatServer}/api/v1/users.info`,
    method: 'GET',
    qs: {
      username: username
    },
    headers: {
      'X-Auth-Token': rocketChatAdminAuthToken,
      'X-User-Id': rocketChatAdminUserId
    }
  });
  return rocketChatUser;
}

export async function loginUser (email, password) {
  const response = await request({
    url: `${rocketChatServer}/api/v1/login`,
    method: 'POST',
    json: {
      user: email,
      password: password
    }
  });
  return response;
}

export async function createUser(username, name, email, password) {
  const rocketChatUser = await request({
    url: `${rocketChatServer}/api/v1/users.create`,
    method: 'POST',
    json: {
      name,
      email,
      password,
      username,
      verified: true
    },
    headers: {
      'X-Auth-Token': rocketChatAdminAuthToken,
      'X-User-Id': rocketChatAdminUserId
    }
  });
  return rocketChatUser;
}

export async function createOrLoginUser (username, name, email, password,) {
  try {
    const user = await fetchUser(username);
    // Perfom login
    return await loginUser(email, password);
  } catch (ex) {
    if (ex.statusCode === 400) {
      // User does not exist, creating user
      const user = await createUser(username, name, email, password);
      // Perfom login
      return await loginUser(email, password);
    } else {
      throw ex;
    }
  }
}

import request from 'request-promise-native'

const rocketChatServer = 'http://localhost:3000';

const rocketChatAdminUserId = 'aobEdbYhXfu5hkeqG';

const rocketChatAdminAuthToken = '9HqLlyZOugoStsXCUfD_0YdwnNnunAJF8V47U3QHXSq';

export async function fetchUser (username) {

const rocketChatUser = await request({

url: `${rocketChatServer}/api/v1/users.info`,

method: 'GET',

qs: {

username: username

headers: {

'X-Auth-Token': rocketChatAdminAuthToken,

'X-User-Id': rocketChatAdminUserId

}

});

return rocketChatUser;

}

export async function loginUser (email, password) {

const response = await request({

url: `${rocketChatServer}/api/v1/login`,

method: 'POST',

json: {

user: email,

password: password

}

});

return response;

}

export async function createUser(username, name, email, password) {

const rocketChatUser = await request({

url: `${rocketChatServer}/api/v1/users.create`,

method: 'POST',

json: {

name,

email,

password,

username,

verified: true

headers: {

'X-Auth-Token': rocketChatAdminAuthToken,

'X-User-Id': rocketChatAdminUserId

}

});

return rocketChatUser;

}

export async function createOrLoginUser (username, name, email, password,) {

try {

const user = await fetchUser(username);

// Perfom login

return await loginUser(email, password);

} catch (ex) {

if (ex.statusCode === 400) {

// User does not exist, creating user

const user = await createUser(username, name, email, password);

// Perfom login

return await loginUser(email, password);

} else {

throw ex;

}

The above code snippet we have created a few methods that are very self-descriptive. We will use these methods to create and login user into the Rocket Chat when user login to our server.

Creating API’s

import { createOrLoginUser } from 'server/rocketchat';


app.post('/login', (req, res) => {
// ....CODE TO LOGIN USER

    // Creating or login user into Rocket chat 
   try {
    const response = await createOrLoginUser(user.username, user.firstName, user.email, user.password);
    req.session.user = user;
    // Saving the rocket.chat auth token and userId in the database
    user.rocketchatAuthToken = response.data.authToken;
    user.rocketchatUserId = response.data.userId;
    await user.save();
    res.send({ message: 'Login Successful'});
   } catch (ex) {
     console.log('Rocket.chat login failed');
   }
})

// This method will be called by Rocket.chat to fetch the login token
app.get('/rocket_chat_auth_get', (req, res) => {
  if (req.session.user && req.session.user.rocketchatAuthToken) {
    res.send({ loginToken: ctx.session.user.rocketchatAuthToken })
    return;
  } else {
    res.status(401).json({ message: 'User not logged in'});
    return;
  }
})

// This method will be called by Rocket.chat to fetch the login token
// and is used as a fallback
app.get('/rocket_chat_iframe', (req, res) => {
const rocketChatServer = 'http://localhost:3000';
  if (req.session.user && req.session.user.rocketchatAuthToken) {
    // We are sending a script tag to the front-end with the RocketChat Auth Token that will be used to authenticate the user
    return res.send(`<script>
      window.parent.postMessage({
        event: 'login-with-token',
        loginToken: '${ req.session.user.rocketchatAuthToken }'
      }, '${ rocketChatServer }');
    </script>
    `)
    return;
  } else {
    return res.status(401).send('User not logged in')
  }
})

import { createOrLoginUser } from 'server/rocketchat';

app.post('/login', (req, res) => {

// ....CODE TO LOGIN USER

// Creating or login user into Rocket chat

try {

const response = await createOrLoginUser(user.username, user.firstName, user.email, user.password);

req.session.user = user;

// Saving the rocket.chat auth token and userId in the database

user.rocketchatAuthToken = response.data.authToken;

user.rocketchatUserId = response.data.userId;

await user.save();

res.send({ message: 'Login Successful'});

} catch (ex) {

console.log('Rocket.chat login failed');

}

})

// This method will be called by Rocket.chat to fetch the login token

app.get('/rocket_chat_auth_get', (req, res) => {

if (req.session.user && req.session.user.rocketchatAuthToken) {

res.send({ loginToken: ctx.session.user.rocketchatAuthToken })

return;

} else {

res.status(401).json({ message: 'User not logged in'});

return;

}

})

// This method will be called by Rocket.chat to fetch the login token

// and is used as a fallback

app.get('/rocket_chat_iframe', (req, res) => {

const rocketChatServer = 'http://localhost:3000';

if (req.session.user && req.session.user.rocketchatAuthToken) {

// We are sending a script tag to the front-end with the RocketChat Auth Token that will be used to authenticate the user

return res.send(`<script>

window.parent.postMessage({

event: 'login-with-token',

loginToken: '${ req.session.user.rocketchatAuthToken }'

}, '${ rocketChatServer }');

</script>

return;

} else {

return res.status(401).send('User not logged in')

}

})

In the above code snippet, we are creating routes that Rocket Chat will call to fetch the login token and authenticate the user, in the next step we will update the Rocket Chat Setting and include these routes.

Setting up Rocket Chat

There are few configurations that we have to make in Rocket chat to get it working with iFrame Auth.

Step 1:

Go under Accounts->iFrame and update the settings as per the screen-shot below Here we are specifying the routes that we had created in the previous step. http://localhost:8080 is where our local Node.JS server is running.

Step 2:

Go under General->iFrame Integration and update the settings as per the screenshot

Embedding Rocket Chat

Now, after the setting on Rocket chat is done, we will embed Rocket chat into our web page, now embedding Rocket Chat is as simple as adding the iFrame on the page you want to embed

See the example below

<html>
  <body>
    <iframe width='100%;' height='100%' src="http://localhost:3000/channel/general?layout=embedded" frameborder="0"></iframe>
  </body>
</html>

<html>

<body>

</body>

</html>

Here http://localhost:3000 is the address of the Rocket Chat server and adding ?layout=embedded shows are cleaner UI.

Conclusion

That’s’ it! Let me know if you have any questions or suggestions in the comments below.

October 18, 2017

How to setup multi-domain SSL in Node.JS using letsencrypt-express/greenlock-express

Updated (14/June/2019)

Updated (22/June/2018): Support for Let’s Encrypt v2

I have updated the code snippet below to include the support for Let’s Encrypt v2 in the snippet below:

	/**
	 * Setting up https
	 */
	var lex = require('greenlock-express').create({
    server: 'https://acme-v02.api.letsencrypt.org/directory',
    // Let's Encrypt v2 is ACME draft 11
    version: 'draft-11',

		challenges: { 'http-01': require('le-challenge-fs').create({ webrootPath: '/tmp/acme-challenges' }) },
		store: require('le-store-certbot').create({ webrootPath: '/tmp/acme-challenges' }),
    approveDomains: function(opts, certs, cb) {
      if(certs) {
        opts.domains = ['domain1.com', 'domain2.com']
      } else {
        opts.email = 'youremail@example.com',
        opts.agreeTos = true;
      }
      cb(null, { options: opts, certs: certs });
    }
    });
    
    //Optional: Add this line if you want to redirect all your traffic to https
	require('http').createServer(lex.middleware(require('redirect-https')())).listen(80, function () {
  		console.log("Listening for ACME http-01 challenges on", this.address());
	});

	// handles your app 
	var server = require('https').createServer(lex.httpsOptions, lex.middleware(app))
	server.listen(443, function () {
  		console.log("Listening for ACME tls-sni-01 challenges and serve app on", this.address());
	});

/**

* Setting up https

var lex = require('greenlock-express').create({

server: 'https://acme-v02.api.letsencrypt.org/directory',

// Let's Encrypt v2 is ACME draft 11

version: 'draft-11',

challenges: { 'http-01': require('le-challenge-fs').create({ webrootPath: '/tmp/acme-challenges' }) },

store: require('le-store-certbot').create({ webrootPath: '/tmp/acme-challenges' }),

approveDomains: function(opts, certs, cb) {

if(certs) {

opts.domains = ['domain1.com', 'domain2.com']

} else {

opts.email = 'youremail@example.com',

opts.agreeTos = true;

}

cb(null, { options: opts, certs: certs });

}

});

//Optional: Add this line if you want to redirect all your traffic to https

require('http').createServer(lex.middleware(require('redirect-https')())).listen(80, function () {

console.log("Listening for ACME http-01 challenges on", this.address());

});

// handles your app

var server = require('https').createServer(lex.httpsOptions, lex.middleware(app))

server.listen(443, function () {

console.log("Listening for ACME tls-sni-01 challenges and serve app on", this.address());

});

I wanted to set-up a multi-domain SSL certificate using LetsEncrypt for my app “Dead Simple Screen Sharing” because people complained about the long meeting URL, so I bought a short domain mnow.io and edited the code to generate short 6 digit meeting ids, so the new meeting URL became much cleaner e.g https://mnow.io/345686 instead of the original https://app.deadsimplescreensharing.com/meeting/bgasGca-1

But I needed a new SSL certificate for the domain mnow.io, and as this domain will also be pointed to the same server, I required a multi-domain SSL certificate.

I had already configured greenlock-express (letsencrypt-express is now called as greenlock-express) on my server so just had to make some changes in the configuration and add my domain, but simply adding the domain in the domains array didn’t work, so after some trial and error I finally figured it out.

Here is the final code snippet, that you can use, add this in your app.js or server.js:

	/**
	 * Setting up https
	 */
	var lex = require('greenlock-express').create({
		server: 'production',
		challenges: { 'http-01': require('le-challenge-fs').create({ webrootPath: '/tmp/acme-challenges' }) },
		store: require('le-store-certbot').create({ webrootPath: '/tmp/acme-challenges' }),
    approveDomains: function(opts, certs, cb) {
      if(certs) {
        opts.domains = ['domain1.com', 'domain2.com']
      } else {
        opts.email = 'youremail@example.com',
        opts.agreeTos = true;
      }
      cb(null, { options: opts, certs: certs });
    }
    });
    
    //Optional: Add this line if you want to redirect all your traffic to https
	require('http').createServer(lex.middleware(require('redirect-https')())).listen(80, function () {
  		console.log("Listening for ACME http-01 challenges on", this.address());
	});

	// handles your app 
	var server = require('https').createServer(lex.httpsOptions, lex.middleware(app))
	server.listen(443, function () {
  		console.log("Listening for ACME tls-sni-01 challenges and serve app on", this.address());
	});

/**

* Setting up https

var lex = require('greenlock-express').create({

server: 'production',

challenges: { 'http-01': require('le-challenge-fs').create({ webrootPath: '/tmp/acme-challenges' }) },

store: require('le-store-certbot').create({ webrootPath: '/tmp/acme-challenges' }),

approveDomains: function(opts, certs, cb) {

if(certs) {

opts.domains = ['domain1.com', 'domain2.com']

} else {

opts.email = 'youremail@example.com',

opts.agreeTos = true;

}

cb(null, { options: opts, certs: certs });

}

});

//Optional: Add this line if you want to redirect all your traffic to https

require('http').createServer(lex.middleware(require('redirect-https')())).listen(80, function () {

console.log("Listening for ACME http-01 challenges on", this.address());

});

// handles your app

var server = require('https').createServer(lex.httpsOptions, lex.middleware(app))

server.listen(443, function () {

console.log("Listening for ACME tls-sni-01 challenges and serve app on", this.address());

});

In line 10 replace ‘domain1.com’ and ‘domain2.com’ with your own domains, if you have more than 2 domains you can add them in the array, if you have only one domain then you also keep just one single domain in the array.

In line 12 replace ‘youremail@example.com’ with your email address.

The code on line 19 to 23 is optional, you can add it if you want to redirect all your traffic to https, and if you skip it then both HTTP and HTTPS versions of your site will be live.

Let me know if you have any questions, concerns or suggestions in the comments.

October 9, 2017

How to Setup WordPress blog with static homepage (Updated for 2017)

In the blog post, I will guide you through the process of setting up a static homepage for your WordPress blog when using the default TwentySeventeen theme.

The process of setting up a static homepage for your blog is straightforward. follow the steps below to make it happen:

Step 1: Upload your static homepage

The first step will be to upload your static homepage into your site, to do this you’ll have to FTP or SFTP into your blog, you can find the information on how FTP into your blog from your hosting provider and you can use a program like FileZilla or Cyberduck to FTP into your blog.

After you connect to your blog via FTP/SFTP go to the themes folder of your WordPress installation, usually it is located at htdocs/wp-content/themes/<theme_name> as we are editing the default “twentyseventeen” theme in our case the theme_name will be twentyseventeen htdocs/wp-content/themes/twentyseventeen

Then in this folder, there will be a file named front-page.php, rename that file to front-page-old.php, if we don’t rename this file then WordPress will server this page as the homepage, so we have to change the name of the file from front-page.php to something else.

After you have renamed the file, create new file name page_home.php in that folder, and paste the following contents into that file:

<?php

// Template name: Static Front Page

?>

<?php

// Template name: Static Front Page

After the ?> tag paste the html content of your homepage in this file and save the file.

Now go to the htdocs folder and upload all the other static HTML pages you want to upload and CSS files associated with your homepage.

Step 2: Updating Settings in WordPress

Login to your WordPress Admin panel, Go to Pages->Add New, and create a new page with title Homepage and from the Page Attributes section select the Template as “Static Front Page” as shown in the image below, and save the page.

Then we will also need a page to show our blog posts, Go to Pages-Add New and create another page, with title Blog, and edit the permalink of the page to /blog.

Then go Settings->Reading and in the section where it says “Front page displays” select “A static page” and from the drop-down select “Homepage” as the front page and “Blog” as the Post page.

Step 3: That’s it!

Following the above simple steps, you can setup the static homepage, let me know if you have any questions in the comments.

June 2, 2017

DeadSimpleScreenSharing 2: Open source browser based self-hosted screen sharing

This blog post is about a project that I have built, which is called DeadSimpleScreenSharing 2, which the next version of DeadSimpleScreenSharing, and it is much better and faster than the previous version.

It offers audio conference out of the box and supports sharing your screen with any number of users just by sharing a URL, and it is very high quality and super fast.

I am also offering a self-hosted version of the application that you can run on your own server, and the self-hosted version is also white label so you can rebrand it with your organisation’s brand name.

So, here is how you can use this super simple service:

Step 1: Go to http://deadsimplescreensharing.com and click the “Host a Meeting” button

Step 2: It will take you the chrome extension page, where you’ll have to install the extension

Step 3: After installing the extension, click the extension icon, and a window will appear, in that window click the “Host a Meeting” button

Step 4: Done! Your screen is being shared, you can share the URL with others so that they can join your session.

April 6, 2017

Using Postgres with Parse Backend

Facebook killed parse last year, but thankfully they Open-Source the parse backend. Initially, the Parse Backend only supported MongoDB database, but later support for Postgres has been added by the contributor from the community.

So using Postgres with Parse Backend is really quite simple, you just have to install the latest version of Parse Backend, and in the databaseURI specify the Postgres connection string.

Here is an example:

var ParseServer = require('parse-server').ParseServer;

var api = new ParseServer({
  databaseURI: 'postgres://postgres:pass@localhost:5432/parsedev' // Connection string for your Postgres database
  cloud: '/home/myApp/cloud/main.js', // Absolute path to your Cloud Code
  appId: 'myAppId',
  masterKey: 'myMasterKey', // Keep this key secret!
  fileKey: 'optionalFileKey',
  serverURL: 'http://localhost:1337/parse' // Don't forget to change to https if needed
});

var ParseServer = require('parse-server').ParseServer;

var api = new ParseServer({

databaseURI: 'postgres://postgres:pass@localhost:5432/parsedev' // Connection string for your Postgres database

cloud: '/home/myApp/cloud/main.js', // Absolute path to your Cloud Code

appId: 'myAppId',

masterKey: 'myMasterKey', // Keep this key secret!

fileKey: 'optionalFileKey',

serverURL: 'http://localhost:1337/parse' // Don't forget to change to https if needed

});

As you can see in the example above we have specified the connection string to connect to the Postgres database.

If you are not familiar with the structure of the connection string, then here is the breakdown.

"postgres://<Postgres Username>:<Postgres Password>@<DB Host>:<Port>/<Database Name>"

1	"postgres://<Postgres Username>:<Postgres Password>@<DB Host>:<Port>/<Database Name>"

If you have any question, please leave the comment below.

June 18, 2015

How to get customers for your startup- A comprehensive guide.

Marketing and selling products and services for your newly created startup can be a difficult preposition. But, it can easily be done if we think about it logically.

Let’s Start:-

For the sake of understanding, let’s assume we have a SaaS (Software as a Service) startup. We sell something that helps early stage entrepreneurs build their enterprises.

Defining a Persona

Now lets have a look at who our customer is and try to build a persona of our ideal customer.

Some things to consider:

Gender
Age
Martial status
Education
Income
Interests
Aspirations in life.
Employment.
Where does he/she lives

For our startup, our customer is the founder of an early stage startup, and his name is Mike.

Mike is a male
He is 27 years old
Mike lives in San Francisco,
Single and a graduate in business,
Mike has a job and makes around 100k/ year.
He wants to start a startup and make it big in life.
Mike does’t know programming or design and has to rely on other people for these skills.

Now, we have got Mike but,
Mike doesn’t know about us
nor about our awesome product that is going to help him make it big.
We have got to find him and tell him.

Where can we reach mike?

We might be able to meet mike in places where he generally hangs out, like:

On the Social media sites:

twitter
facebook

And Website which provides startup news and updates:

product hunt
betalist
hackernews
inbound.org

Apart from this Mike is also reading stuff about entrepreneurship and success on sites like:

entrepenuer.com
thenextweb
lifehacker
Medium
Forbes
VentureBeat
etc.

Mike also does a lot of things in the physical world:

Mike visits technology meet-ups.
Mike visits coffee shops, building his business plans
Mike visits trade fairs.

What does mike want ?

Since Mike is starting a early stage startup, he is probably looking for ways to:

build a website,
Build his product
Market his product,
Looking for people in his network who might be be interested or willing to help him with his startup.
Maybe he is trying to pitch his idea to investors
Looking for a small office space or a Co-working space among many other things.
Mike might even be looking for his early employees or freelancers perhaps. That might be designers and
developers to help him build his product.

At this point in time we have got Mike with his early stage startup and we know what does Mike wants and the places where he hangs-out and the people he hangouts with.

Now we have got to get to Mike and help him succeed in his startup.

Why do we want to do that ?

Because Mike does not want to buy our SaaS product. Mike wants to succeed in his business. And we are not going to sell our SaaS product to him. Mike will buy a resource from us that is going to help him achieve success in his business.

Marketing that does not look like marketing is the best kind of Marketing.

Up till now what we have done is

Customer Profiling: Identifying who our customer is.
Identifying distribution channels: Finding out where our customer is.

From now on, We will help our customer find us.
There are two ways we can get this done.

In the physical world.
Over the internet.

We can choose both ways or we can choose any one based on our resources and which we think might work best for our product.

The Physical World

We can go to the meet-ups, where mike is hanging out.
To the coffee shops where he is working on his business plans.
To the trade fairs where he might visit to sell his product.
Out-side Co working spaces where he might be visiting.
We can talk to him and tell him about our product and how we can help him.

We can
Find out his contact number/email and call him or email him.

Cold calling is an awesome sort of Marketing, you just need to know whom to cold call and how to execute. People out there have real problems to solve and if we can help them. It is going to be great business.

(One of the biggest examples of cold calling working is today’s business environment is AppAftercare app maintenance business by Einar Vollset.

It is an awesome company, He even runs a course explaining how he markets his products.)

And we can speak to Mike, tell him how awesome our product is and how he is going to be huge success by using it.

Over the internet

We have already figured out where Mike hang outs over the internet, We just need to reach out to him and help him out with his Business.

Building a Side Project.
Teaching.
SEO

1. Building a Side project.

A side project can be a website or a tool that does some kind of leg work for Mike.
For example
Mike needs to get a lot of things done.

He needs a Website, a logo, he needs legal stuff done, he needs to find designers and developers, he needs productivity tools. He needs to learn basics of coding or design. He needs photos for his blog or social media posts etc.

If we can build a tool or a side project that can help Mike in achieving his objective. He is going to come finding us.

One of the awesome companies that are doing this kind of thing is: Buffer

Buffer is company that helps entrepreneurs schedule their social media posts. They need to attract people who are into social media.

They have a side project called:

Pablo is website that helps you design images for your social media posts. This solves a big problem for Entrepreneurs and social media marketers.

When Mike is searching for photos for twitter post and he stumbles-upon Pablo.
He gets to know that there is this SaaS company called Buffer which helps him save time
on his social media marketing and he is likely to buy from them.

2. Teaching

Blogging is a very well known tool for inbound marketing. But what to blog is thing to consider. We need to only blog things that are going to help Mike.

Actionable content, Content from which mike can take away something from and apply to his life and business and get results.

A study by New York Times, claims that the likelihood of an article being shared is the most for articles with
practical utility. articles with actionable content gets shared the most.

Ideas to blog about?

We already know a lot about Mike. Lets just think what would be the core idea Mike would like our advice on?

Answer: Entrepreneurship and success.

Well, this is just one thing. What are the other complimentary things we could help Mike with.

Complimentary ideas

Productivity
Marketing
Getting startup ideas
Validating startup ideas
Building an MVP.
Getting funding etc.

Apart from writing an article, you could also make video or podcasts or slide-share. But the basic idea between all these mediums is the same, that is to help the customer achieve success in his/her pursuits.

And writing an article is just not enough. We will have to tell Mike we exist and here is an awesome article which would be a great help to him.

Distributing your Side Projects/Articles and doing SEO:

Well we have a great SaaS product, a great tool to help Mike and we are also writing awesome articles.

How are we going to make Mike come to us?

Well we know where Mike hangs out on the internet. We can just through stuff on the social media and hope and pray that Mike reads OR we can be proactive in our efforts to reach Mike.

Here’s How:

Now, there are certain people on social media who are called influencers. These people have a large amount of following.

We will need to find out certain influencers who would be interested in distributing our free tools and blog articles to their network of people on social media.

How we are going to do that?

With a certain tool called as Followerwonk, which is available at MOZ.com It helps us sort influencers on twitter with certain keywords in their profile or bios.

for example. If our tool is an open source product. we will sort people with open source in their bios and see if they post other people’s open source products on twitter.

Then we will contact them and ask them to distribute our product.

We could do something similar for product hunt as well. Product hunt is an awesome network that lists digital products.
Though we don’t have followerwonk for product hunt. Product hunt has hunters and we can contact them on twitter and ask them if they will hunt our product.

This same thing we are going to do with our Blog article. One thing to remember though: The quality of our content should be top notch. The better the quality of our product the more viral it will become.

One very good side effect of this will be people will start linking to our blog or free product page.
For example some one is writing some post and they might link to us as a reference. This is going to increase our SEO.

Or someone might be listing free resources for Entrepreneurs and
businesses and they might list our product.

Alternatively, we can also search for blogs on google.
Just typing in Open source software blogs or Entrepreneurship blogs and Google will give us a list if blogs and we can contact those blogs and ask them if they can list or add a link to our free product site or blog article.

Build an email subscription list:

Always try and build a subscription list. The people who are subscribing to your articles really believe in your content. And you should make them search for your articles from time to time.
They are a dedicated audience and dedicated traffic to your blog. Do your upmost to make it really easy for them to signup to your mail list.

What is SEO ?

SEO is search engine optimisation. What is means is that When mike does a google search for a product or problem that we could solve our website ranks higher in the search ranking.

To increase search ranking there are many things Search Engines consider. Among them are

Keywords
Number of links connecting to our site
Traffic coming to our site
Number of social media posts of our site.

What are Keywords?

Key words are words Mike might type into the search engine bar to find something he wants to find.

For example if Mike wants to hire a mobile app development company, He might search
mobile app development companies in San Francisco. or hire mobile app developer.
We need to research keywords that are relevant to our industry and customer

Typically we should try to rank in the top three keywords our customer would search.
Now there are two kinds of SEOs.
Onpage and
OFF page.
Here is a very good guide to Onpage SEO.

For finding out keywords
Think

“will searchers really find what they are looking for when they search using using these keywords?”

Find out what key words competition is using. Tools like Open web explorer and SEM Rush are a great for this kind of research

and google keyword planner is another great tool for keyword research. It tells you how much traffic is there for a particular keyword. It even tells you how much difficult it is to rank for a particular keyword.

And we already have been doing a lot of off page SEO by building free products and Blogs.
Just be sure to sub-domain your free product page and blog site to your startup site.

After getting an understanding of keywords. DO a quick on page SEO. It doesn’t take much time is simple to do and the results are for ever
here is a quick guide.

These key word tools tools will also come in handy when distributing blog articles

Doing Paid Ads.

If we have the budget or if we want to do experiments we can use paid ads for this purpose.
Building a paid ad is an skill unto itself
We will need to answer questions like these ?

What is the goal of the ad?

The goal could be to drive signups, or
influencing people to read our blog post
or
converting people to buy our product.

What keywords to target?

Key word targeting in ads is a skill. You need to find key words that drive traffic but aren’t that expensive to buy.
We discussed some of the tools we could use above.

Which platform to choose?

Ideally we should only choose platforms where our customers visit (mike). Another thing to consider is what mood mike is in when he is on a particular platform.

Research shows that for long form content twitter is a good source, for relaxed entertaining content Facebook is good media.
For getting conventions search engine ads like on google and bing are a good source.

Other things to consider:

What ROI do we want, and at what cost ads are feasible for us.

What does a client pay us VS How much does it cost to get the client is an important thing to consider.

Assuming our goal is to convert the client to buy our product.

Income from client > How much money a single click costs * How many clicks are required to get the client.

##In Conclusion:

Marketing like everything else in life is a trial and error thing. All of the things will not work everywhere.
And running with all the strategies and all the distribution channels that I have mentioned is a not a good idea especially when your resources are limited. Instead try and identify what channels suits you the best and work with it.

So many times it happens that one of the channels brings in more customers than all of the other channel combined.

I wish you best of luck for your adventures.

This blog post is by Mohammed Lakkadshaw. Founder at Mohammed Lakkadshaw & Co. A Mobile and Web design and development company.

April 7, 2015

Mixpanel Tracking in AngularJS

For my recent angularJS application, I needed to integrate Mixpanel.
I didn’t found any light-weight directives which I could include in the application that would allow me to easily track events using Mixpanel in the application, so I built Mixular.
Mixualr is a lightweight angularJS directive which you can use to track events in your application.

Installation

You can install mixular via bower

	bower install mixular

				1
2

							bower install mixular

Or you can clone the repo from Github

How to use it

To use mixular in your application include the Mixpanel javascript tracking library, and the angular-mixular-directive.js in your index.html

Then add mixular dependency in your AngularJS application:

var app = angular.module(“yourApp”, [“mixular-directive”]);

				1
2

						var app = angular.module(“yourApp”, [“mixular-directive”]);

Once you have added the dependency, you can start tracking events in your application, e.g:

<a href=“#/feedback” mixular=“click” eventLabel=“Feedback Clicked” prop-user=“James”>Feedback</a>	

				1
2

						<a href=“#/feedback” mixular=“click” eventLabel=“Feedback Clicked” prop-user=“James”>Feedback</a>

Add the property mixular and specify the events on which you want to trigger the tracking, supported event types are:

click
focus
1. hover
2. keydown
3. keypress
4. keyup
5. mousedown
6. mouseenter
7. mouseleave
8. mouseout
9. mouseover
10. mouseup
11. scroll
12. select

The eventLabel can be used to specify a label for the event e.g “Banner Ad clicked”.

Passing properties

To pass multiple properties for a event you can type the keyword prop followed by the property name e.g prop-product=“Laptop” prop-price=“500”

That’s all

If you have any questions or suggestions regarding the directive, leave them in the comment section below.

Thanks

September 2, 2014

Introduction to SalisJS

I was looking for a Node.JS web framework for my project, and in my quest for finding the best framework, I stumbled across Sails.JS, and I have been using it for a few months now and it is pretty awesome at most of the part, so if you need something like Rails for Node.js, Sails is the way to go.

The Sails.JS is an MVC framework, so there are Models, Views and Controllers.

Models:

In Sails.JS you can create models, and model represents the data model, so if for each table you would have a model and in case of no-sql databases, each collection is represented by a model.
Inside a model you can describe, the attributes present in that model, their datatype and validation rules.

Example of a User Model:
user.js

	module.exports = {
		attributes: {
			firstName: 'string',
			lastName: 'string',
			email: 'email',
			role: {
				type: 'string',
				enum: ['admin', 'user']
			}
	}

				
					
				1
2
3
4
5
6
7
8
9
10
11

							module.exports = {
		attributes: {
			firstName: 'string',
			lastName: 'string',
			email: 'email',
			role: {
				type: 'string',
				enum: ['admin', 'user']
			}
	}
 

					

			

In the above example we have a user model, which has a number of attributes, like firstName, lastName, email and role.
The model structure is pretty straightforward, and Sails.js provides some useful helpers in modules like the enum.
We have added an enum attribute in role, now Sails will accept only the values present in the enum array.

Magic:

The magical part is sails is blueprints. Sails will create CRUD routes based on the data model.
Sails will look at your data-model and will create blueprint routes and REST api.
So, by looking at the model we have created above sails will create REST APIs.
Create User: HTTP POST: /user
Update User: HTTP PUT: /user/:id
Delete User: HTTP DELETE: /user/:id
Fetch User: HTTP GET: /user/:id
Get All Users: HTTP GET: /user

Associations in Model

In Sails you can associate one model with another model, and associations can span across databases.
So if you have user data stored in Postgres and photos stored in Mongodb, you can interact with the data if they lived in the same database.

Many to Many

In this type of association, one model can be associated with many other models and vice versa.
Lets consider an example of a Real Estate, a Real Estate can be owned by multiple people, a person can own multiple Real Estates.
Thus we can create a many to many relationship between people and real-estate.
So, let’s begin:

estate.js

module.exports = {
		attributes: {
			propertyName: 'string',
			Address: 'string',
			owners: {
				collection: 'user',
				via: 'estates'
			}
		}

user.js

module.exports = {
	attributes; {
		firstName: 'string',
		lastName: 'string',
		estates: {
			collection: 'estates',
			via: 'owner'
		}
	}
}

				
					
				1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

						estate.js
 
module.exports = {
		attributes: {
			propertyName: 'string',
			Address: 'string',
			owners: {
				collection: 'user',
				via: 'estates'
			}
		}
 
user.js
 
module.exports = {
	attributes; {
		firstName: 'string',
		lastName: 'string',
		estates: {
			collection: 'estates',
			via: 'owner'
		}
	}
}
 

					

			

So, in the above example we have created two models, one is user model and another one is estate model.

In the estate model we have created a property named owner, which reference the user model model and points to the owners of the property, so this will be an array containing all the owners of the property.

In the User model we have created a property named estates, and it points to the estate model and it will contain all the estates owned by the user.

LifeCycle callbacks in Models

There are lifecycle call-backs present in the models which are very helpful, for e.g: If want to can write some cleanup code when an item in a model is deleted, so you can write the code for that inside the afterDestroy method.

Callbacks on create

beforeValidate: fn(values, cb)
afterValidate: fn(values, cb)
beforeCreate: fn(values, cb)
afterCreate: fn(newlyInsertedRecord, cb)

				
					
				1
2
3
4
5

						beforeValidate: fn(values, cb)
afterValidate: fn(values, cb)
beforeCreate: fn(values, cb)
afterCreate: fn(newlyInsertedRecord, cb)
 

					

			

Callbacks on update

beforeValidate: fn(valuesToUpdate, cb)
afterValidate: fn(valuesToUpdate, cb)
beforeUpdate: fn(valuesToUpdate, cb)
afterUpdate: fn(updatedRecord, cb)

				
					
				1
2
3
4
5

						beforeValidate: fn(valuesToUpdate, cb)
afterValidate: fn(valuesToUpdate, cb)
beforeUpdate: fn(valuesToUpdate, cb)
afterUpdate: fn(updatedRecord, cb)
 

					

			

Callbacks on destroy

beforeDestroy: fn(criteria, cb)
afterDestroy: fn(destroyedRecords, cb)

				1
2
3

						beforeDestroy: fn(criteria, cb)
afterDestroy: fn(destroyedRecords, cb)

Consider the example:

	module.exports = {
		attributes; {
			firstName: 'string',
			lastName: 'string',
			estates: {
				collection: 'estates',
				via: 'owner'
			}
		},
		afterDestroy: function(values, cb) {
			//Write you cleanup code here...

			cb();
			}
	}

				
					
				1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

							module.exports = {
		attributes; {
			firstName: 'string',
			lastName: 'string',
			estates: {
				collection: 'estates',
				via: 'owner'
			}
		},
		afterDestroy: function(values, cb) {
			//Write you cleanup code here...
 
			cb();
			}
	}
 

					

			

To learn more about the lifecycle callbacks, see the official documentation.

Controllers

The main logic of your application will be present in the controllers, the controllers are responsible for responding to the requests.
Although, some magic is provided by Sails, using blueprints to create automatic CRUD API, often times it is not enough and you will want to add more functionality and more types of routes.

Consider an example controller file name greeting.js:

	module.exports = {
		hello: function(req, res) {
				return res.send("Hello world");
		},
		hi: function(req, res) {
				return res.send("hi user");
		}
	}

				
					
				1
2
3
4
5
6
7
8
9

							module.exports = {
		hello: function(req, res) {
				return res.send("Hello world");
		},
		hi: function(req, res) {
				return res.send("hi user");
		}
	}
 

					

			

The above file contains two actions, namely hello and hi, inside these actions we can write the code to do whatever we want, in the above example we are sending messages, “hello world” and “hi user” respectively.

Sails has automatic routing, so the controllers and actions that you have created will be routed automatically, by the following format /:controller/:nameOfAction.

So routes for our above actions will be /greeting/hello and /greeting/hi.

Overriding blueprint actions

If you want override the blueprint actions, like create, update or delete, just create actions in the controller with that name and it will override the default functionality.
Suppose we want override the create functionality for user, so in user controller, we will create an action having the name create.

module.exports = {
		create: function(req, res) {
				return res.send("Hello world");
		}
}

				
					
				1
2
3
4
5
6

						module.exports = {
		create: function(req, res) {
				return res.send("Hello world");
		}
}
 

					

			

The above code overrides the create functionally, now if we send a http post request at url /user, instead of creating a new user it will send a response “Hello world”.

In the similar manner we can override the default behaviour by creating actions having the name create, update and delete.

Policies

You don’t want anyone accessing and performing unintended activity, like deleting all your real estates, so for that we have policies.
If you are familiar with ExpressJS, polices are similar to ExpressJS middle-wares.
The official SailsJS documentation explains policies in great detail, be sure to head over there and read about it in details.

Conclusion

That’s my take on SailsJS, it’s a great framework to build apps in Node.JS.
Let me know if you have any suggestions, questions about this in the comments.

July 27, 2014

Better API documentations

It is a tedious job to write api documentations, and we have been using word documents and excel spreadsheets to create api documents.
But they are difficult to follow and search though, what if there was an easier and cleaner way to create API documents? When I started working on my latest project I was searching for an efficient way to write API documents and a way to generate beautiful documentations, my quest for finding the best api documentation tool lead me to API Blueprint.

What is API Blueprint?

API blueprint is a language based on Markdown which allows you to write API documents clearly, moreover, it has great tools which takes in your API blueprint document and convert it into beautiful HTML API documentation and much more.

Useful tools:

Here are some tools which I find useful, that you can use with your API documentation written using API Blueprint. These tools make the API blueprint documents very powerful. There are tools generate beautify HTML documentation to even create mock API servers.

Creating Online documentation:

There is a web app called as Apiary, which allows you to write in API blueprint format, and it generates beautiful online documentation, it also provides mock API server which will emulate your API based on the documentation, which is pretty useful if you don’t have the API server ready yet and want to use the APIs for prototype the applications.
It will allow you to quickly build and test the API, without writing a single line of code.

API blueprint document into HTML documentation

There is an awesome tool called Aligo which will allow creating beautiful HTML documentation from the API blueprint document.

API blueprint document into POSTMAN collection

A utility called as Blueman allows you to convert the API blueprint domination into POSTMAN collection, which you can import into your POSTMAN REST Client.

Local Mock Server

API Blueprint Mock Server create a local API mock server using the API blueprint which you have provided, which you can use to prototype REST APIs.