An HTML5 desktop app with electron4 min read

Electron let’s you build cross platform desktop apps using HTML5 and javascript. Let’s make a  demo desktop app with electron.

If you haven’t  heard of electron from GitHub, you should go through this Build cross platform desktop apps with JavaScript, HTML, and CSS before continuing.

Without wasting our time let’s get started with the app.


The app

We shall call our app Dapp – Demo App.

Let’s also create a project folder named dapp and open command window inside the folder.

All the commands have to be run inside this folder.

The first command would be

npm init

Input the required information and our package.json file would be created.

Now we have to install electron which is available as an npm package.

npm install electron-prebuilt --save-dev

We are installing it as developer dependency.

The package.json file has to be modified to run electron at start

    "name": "dapp",
    "version": "1.0.0",
    "description": "A demo app made with electron.",
    "main": "index.js",
    "scripts": {
        "start": "electron ."
    "keywords": [
    "build": {
        "appId": "in.jijnasu.dapp"
    "author": "Hrishikesh M K <> (",
    "license": "ISC",
    "devDependencies": {
        "electron-prebuilt": "^1.4.10"

Add a start script as shown above.

We have to create a file called index.js, as we have provided it in the package file with the key main.

Let’s just copy the index.js file provided in the electron website.

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true

  // Open the DevTools.

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

The index.js file would load an HTML file called index.html in our main window.

So let’s create one and save it in the same directory.

<!doctype html>

        body {
            width: 100%;
            height: 100%;
            position: relative;
            margin: 0;
            padding: 0;
            font-family: Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
            background-color: #2c3e50;
            color: #ffffff;
        #cont {
            text-align: center;
            font-size: 30px;
            height: 300px;
            position: absolute;
            width: 300px;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -150px;
            border: dashed;

    <div id="cont">
        <p id="time">...</p>
        <p id="date">...</p>
        var time_elem = document.getElementById('time');
        var date_elem = document.getElementById('date');
        window.setInterval(function() {
            var date = new Date();
            date_elem.innerHTML = date.toDateString();
            time_elem.innerHTML = make_valid(date.getHours()) + ':' + make_valid(date.getMinutes()) + ':' + make_valid(date.getSeconds());
        }, 200);

        function make_valid(num) {
            num = parseInt(num);
            if (num < 10) {
                return '0' + num;
            return num;


Now our app is ready to run. Try it out with this command

npm start

Please note that the command window should be open inside the project folder throughout this tutorial.

Now that our app is ready, the only thing left is to package it.

Packaging electron applications

For packaging we use electron-builder.

First install electron-builder through npm.

npm install electron-builder --save-dev

The documentation for electron-builder tells us to modify the package.json file to add the pack and dist scripts.

A unique app id is also required for the build.

So let’s the modify the file.

    "name": "dapp",
    "version": "1.0.0",
    "description": "A demo app made with electron.",
    "main": "index.js",
    "scripts": {
        "start": "electron .",
        "pack": "build --dir",
        "dist": "build",
        "postinstall": "install-app-deps"
    "keywords": [
    "build": {
        "appId": "in.jijnasu.dapp"
    "author": "Hrishikesh M K <> (",
    "license": "ISC",
    "devDependencies": {
        "electron-builder": "^10.4.1",
        "electron-prebuilt": "^1.4.10"

And finally run

npm run dist

Comment below if something went wrong.



Random color generator in javascript2 min read

If you ever tried to create HTML or SVG graphs, it is most likely that you have asked google the question How to generate random colors in javascript? , because I for sure did ???? .

Maybe you have searched it for some other reason. To create some cool UI or something, or maybe to irritate the user with stupid colors ???? .

If you have never searched it or thought about it, well why don’t you go ahead and try it now, it’s free after all.

There are plenty of resources in the internet that would help you get the job done. But here is my little experiment.

Where to start?

I want a function that would take the number of colors to generate, as input and outputs the generated colors.

Something like this –

//generate colors
function gen_colors(no_of_colors_to_generate) {

  //return an array of colors
  return colors;

So I decided to start with one color and tweak and shuffle the RGB values to generate random colors.

function color_gen(len) {
  //array in which generated
  //colors are stored
  colors = [];

  function gen_colors(colrs, len) {
    //generate the colors

  //start with rgb(180, 54, 54)
  return gen_colors([180, 54, 54], len);
 The full function
function color_gen(len) {
  //array in which generated
  //colors are stored
  colors = [];

  function gen_colors(colrs, len) {
    //loop and create all combinations
    //of the given color
    for (var i = 0; i < 3; i++) {
      for (var j = 0; j < 3; j++) {
        for (var k = 0; k < 3; k++) {
          var color_arr = [colrs[i], colrs[j], colrs[k]];
          //exclude if combination already exists
          //or have the same values ex rgb(180, 180, 180)
          if ((colors.indexOf(rgbize_arr(color_arr)) == -1) && !(colrs[i] == colrs[j] && colrs[i] == colrs[k])) {
          //if required colors
          //grater than 25 repeat the 
          //colors generated
          if (colors.length >= 25) {
            colors = colors.concat(colors);
          //if required no. of colors
          //are generated return
          if (colors.length == len) {
            return colors;
          //if generated > required
          //return only required
          else if (colors.length > len) {
            //console.log(colors.slice(0, len));
            return colors.slice(0, len);
          //if combinations are over
          //generate a new first color
          else {
            if (i == 2 && i == j && i == k) {
              var max_colr = Math.max.apply(Math, colrs);
              var min_colr = Math.min.apply(Math, colrs);
              var colr1 = Math.floor((max_colr + min_colr) / 4);
              var colr2 = Math.floor((max_colr + min_colr) / 2);
              var colr3 = Math.floor((max_colr + min_colr) / 3);
              return gen_colors([colr1, colr2, colr3], len);
  //convert array into rgb string
  function rgbize_arr(colr_arr) {
    return 'rgb(' + colr_arr.join() + ')';
  return gen_colors([180, 54, 54], len);


var new_colors = color_gen(25);

Gotta better technique (highly likely), comment below  ???? .

See the color generator in action-

See the Pen Javascript random color generation by hrishikesh mk (@avastava) on CodePen.0


Creating a Javascript load more plugin part 2 – Searching2 min read

In the first part Creating a Javascript load more plugin part 1 , we have created a javascript plugin which loads data from an API page. Let’s build upon on it.

Today we are going to add search option to our plugin, children ? .

Objectives ?

  • Add search bar to the page.
  • On input on search bar, load in relevant content from the API.
  • The API should take in a search parameter and provide relevant results.

As of now we are sending two parameters to the API – start and count. We would add one more q for sending the search query.

For learning how add searching option at the server end, please refer this tutorial from Codecourse – Basic PHP & MySQL Searching.

It uses PHP and MYSQL but you get the idea ? .

Demo page – Javascript load more plugin – search added.

We have to add one more line to our previous HTML code to include the search bar.

<input type="search" autocomplete="off" class="finder" />

We can add this anywhere inside our main container. Only condition is that it should have a class of finder, so that our plugin can identify it.

For styling HTML forms and form elements view this tutorial – Styling HTML Forms .

Updating the Plugin

Now let’s upgrade our plugin. First we would find the search bar.

//Search bar
this.finder = this.elem.getElementsByClassName('finder').length ? this.elem.getElementsByClassName('finder')[0] : false;

If you are not able to follow, please go through part one of this series.

Now, inside our lmore.load method we would append the search term to the GET query string.

//create query string with
//start and count variables
var qs = this.source + '?lmore_start=' + this.start + '&lmore_count=' + this.count;

//Send search query if search bar is available
qs += this.finder ? '&q=' + this.finder.value.trim() : '';'GET', qs);

Let’s add and event listener to the search bar so that, data can be loaded while searching.

We could load data on any event, but I prefer the on-input event because it gives an instant search effect.

I don’t like search bars that have a button which has to be clicked to search. We are in 2016, common guys ( who make me click a button to search ? )  ?.

We could even pass the event, as input for the plugin.

if (this.finder) {
  this.finder.addEventListener('input', function() {

You could also use this plugin to give search suggestions like google. Maybe we could use the plugin two times, one for suggestions and one for showing search results.

Comment below if you want to see this plugin give you search suggestions.