Jay is a Software Engineer and Writer. He blogs occasionally at Tech Illumination.

Jay's articles

  1. An Intro to App.js – Mobile Webapps Made Easy

    JavaScript has become increasingly popular for mobile application development. It has enabled web application developers to develop mobile web applications without learning any native language skills.

    In this tutorial, we’ll discuss a lightweight JavaScript UI library called App.js. Using App.js one can create mobile web apps without compromising performance or looks.

    Getting Started

    During the course of this tutorial, we’ll be creating a simple user registration app using App.js. We’ll be using Firebase as a backend. To get started, download App.js and unzip it. Inside we have 4 files.

    • app.min.css : Default stylesheet containing all android/iOS styles
    • app.min.js : The library
    • index.html : Basic template file to get started
    • zepto.js : A mobile friendly jQuery like library

    Use of zepto.js is optional. In this tutorial, we’ll be using jQuery.

  2. Building Mobile Games with Stencyl

    Developing a cool game generally requires advanced programming skills. Stencyl provides a platform for creating games on iOS, Android, Flash, Windows, Mac or Linux without writing a line of code. It provides a simple drag and drop interface that will get you creating ideas faster. In this tutorial, we’ll take a sneak peak into what Stencyl is all about. During this tutorial, we’ll see how to add characters and scenes to a game and how to define their behaviours.

    Stencyl’s engine is developed using Haxe and based on OpenFL which explains its multi-platform support. Stencyl is free for flash publishing and requires a license to publish on other platforms. Although games can be created without coding, you can still write code if you want or need.

    Getting started

    We’ll be using Linux for this tutorial. You can download Stencyl from the official download page. Once the download is complete, navigate to the extracted folder and start stencyl:

    cd Stencyl
    ./Stencyl
    

    If all works well then you should see something like the below:

    Stencyl screenshot

    When we develop a game, it will have a scene where things happens and actors who act their characters behaviours. Let’s start by creating our first actor and defining it’s behaviour.

    You can download the final tutorial game from GitHub here.

    Creating actors

    To create a game either click in the middle of the screen or on the green Create a New Game button in the top right hand side of the screen. You will be asked what kind of game to create, select Blank game. Type a name for your game, for example HelloStencyl, leave the screen as default and click Create.

    You will now be prompted to create a scene for your game. Name it MyScene and select a background color. Now, you can see two tabs, a dashboard tab and a MyScene tab. Click on the dashboard tab. In the left hand side menu, under Resources you can see Actor Types. Click on the create button to create a new Actor Type. Name it Popeye. An actor type has an animation, click to create one. Name this animation Popeye_Right. Here is an image you can use to add the animation frame:

    Popeye

    Here is how your screen should now look.

    Stencyl stage

    Save your work and switch to the MyScene tab. Towards the right side of the screen, you should see the Palette tab. Click it and you should see the Tiles and Actor tab. Click the Actor tab, select the Popeye image and place it on MyScene by clicking on the screen. Save your work and click on the Test Game button in the right upper corner of the screen. If all goes well, you should be able to see the game scene as shown below:

    Popeye on the stage

    Adding Events

    Next, we’ll add some behaviours to our actor. With the actor selected, press the right arrow key, it should move forward and on pressing left it should move backward. Click on the actors’ object tab and select the Events tab. On the left hand side, there is a button to add an event. Clicking on Add Event will display a menu. From the menu select Input and from Input select Keyboard. Here is how the code block should look:

    Code block

    Click on Control, which will show Choose Control, clicking on that will ask you to select a control. Select right from the list of controls. Next, from the right side palette select the motion tab, select a second code block and drag it into the existing code block. Here is how it should look now:

    06

    Next we need to set the speed of motion to zero when the right key is released. So add a new keyboard event and set the code block as shown below:

    07

    Now, test the game by clicking on the test game link. On pressing and releasing the right arrow key the actor should move forward. Next we need to set the left arrow key press to make the actor move backward. So, add another keyboard event as shown below:

    08

  3. AniJS: A Declarative Handling Library for CSS Animations

    Animation has always been a hot favorite among students learning to program. During a recent weekend web development workshop that I attended, there was a discussion about animations using CSS. That was when I stumbled onto AniJS, a Declarative handling library for CSS animations. In this tutorial, we’ll see what AniJS is all about and […]

  4. Creating Simple Line and Bar Charts Using D3.js

    In a previous article, we learned how to implement bubble charts using D3.js, a JavaScript library for creating data-driven documents. D3.js helps to visualize data using HTML, SVG, and CSS. In this article, we’ll see how to implement line and bar charts using D3.js. Before moving on, you should download D3.js and be familiar with the material in my previous article.

    Creating Line Charts

    First, we’ll need some data to plot. We’re going to use the following data.

    [js]
    var lineData = [{
    x: 1,
    y: 5
    }, {
    x: 20,
    y: 20
    }, {
    x: 40,
    y: 10
    }, {
    x: 60,
    y: 40
    }, {
    x: 80,
    y: 5
    }, {
    x: 100,
    y: 60
    }];
    [/js]

    We’re also going to need a <svg> element to plot our graph on.

    [html]

    [/html]

    Next, we need to create our x and y axes, and for that we’ll need to declare a domain and range. The domain defines the minimum and maximum values displayed on the graph, while the range is the amount of the SVG we’ll be covering. Both of the axes need to scale as per the data in lineData, meaning that we must set the domain and range accordingly. The code for drawing the axes is shown below.

    [js]
    var vis = d3.select(‘#visualisation’),
    WIDTH = 1000,
    HEIGHT = 500,
    MARGINS = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 50
    },
    xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function(d) {
    return d.x;
    }), d3.max(lineData, function(d) {
    return d.x;
    })]),
    yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function(d) {
    return d.y;
    }), d3.max(lineData, function(d) {
    return d.y;
    })]),
    xAxis = d3.svg.axis()
    .scale(xRange)
    .tickSize(5)
    .tickSubdivide(true),
    yAxis = d3.svg.axis()
    .scale(yRange)
    .tickSize(5)
    .orient(‘left’)
    .tickSubdivide(true);

    vis.append(‘svg:g’)
    .attr(‘class’, ‘x axis’)
    .attr(‘transform’, ‘translate(0,’ + (HEIGHT – MARGINS.bottom) + ‘)’)
    .call(xAxis);

    vis.append(‘svg:g’)
    .attr(‘class’, ‘y axis’)
    .attr(‘transform’, ‘translate(‘ + (MARGINS.left) + ‘,0)’)
    .call(yAxis);
    [/js]

    In this code, we have defined the WIDTH, HEIGHT, and MARGINS for our graph. The xRange and yRange variables represent the domains for the respective axes. We set the range for our axes as per the left and right margins.

    Next, since the domain is the data we will show on the graph, we need to get the min and max values from lineData. This is done using the d3.max() and d3.min() methods.

    Next, we created our axes as per the xRange and yRange variables. For both axes, we have defined the scale as xRange and yRange for the X and Y axes, respectively. And then we simply appended both the axis to the SVG and applied the transform. Now, if we have a look at the Y axis it needs to be oriented to the left. Hence, we applied a left orientation to the yAxis. We have transformed both the axes, keeping the defined margins in view so that the axes don’t touch the SVG margins.

    Here is a demo of the above code showing both axes.

  5. Building a Simple App Using Ionic, an Advanced Mobile App Framework

    Introduction Since the inception of Hybrid Mobile technologies, the number of web developers turning to mobile development has increased tremendously. Hybrid mobile technologies empower a web developer to develop mobile applications which run on multiple mobile platforms. All without learning native platform languages and utilizing existing skills. Hybrid Mobile technologies have evolved a lot and […]

  6. Managing Dates and Times Using Moment.js

    Working with dates and times has always been a bit cumbersome. I’ve always thought that a JavaScript library for manipulating dates would be quite helpful. It was only recently that I was introduced to Moment.js, the awesome JavaScript library for validating, parsing, and manipulating dates and times.

    Getting Started with Moment.js

    Moment.js is freely available for download from the project’s home page. Moment.js can be run from the browser as well as from within a Node.js application. In order to use it with Node, install the module using the following command.

    [code]
    npm install moment
    [/code]

    Then, simply require() and use it in your application as shown below.

    [js]
    var moment = require(‘moment’);

    moment().format();
    [/js]

    In order to run Moment from the browser, download the script and include it using a script tag, as shown in the following example. Moment.js creates a global moment object which can be used to access all the date and time parsing and manipulation functionality.

    [html]








    [/html]

    Date Formatting

    In the past, I recall converting date strings into Date objects, grabbing individual pieces of data, and then performing string concatentations. Moment.js has simplified the process of date conversion to any particular format. Date format conversion with Moment is simple, as shown in the following example.

    [js]
    moment().format(‘YYYY MM DD’);
    [/js]

    moment() gives the current date and time, while format() converts the current date and time to the specified format. This example formats a date as a four digit year, followed by a space, followed by a two digit month, another space, and a two digit date. You can see this code in action by checking out this demo.

    Date Validation

    Another annoying task that Moment.js has simplified is date validation. In order to perform validation, simply pass a date string to the moment object and call the isValid() method. This method returns true if the date is valid, and false otherwise. An example of this is shown below, along with this accompanying demo.

    [js]
    var dateEntered = $(‘#txtEnteredDate’).val();

    if (!moment(dateEntered,’MM-DD-YYYY’).isValid()) {
    console.log(‘Invalid Date’);
    } else {
    console.log(‘Valid Date’);
    }
    [/js]

    There are a number of other helpful flags in the object returned by moment():

    • overflow – This is set when an overflow occurs. An example would be the 13th month or 32nd day.
    • invalidMonth – Set when the month is invalid, like Jannnuaarry.
    • empty – Set when the entered date contains nothing parsable.
    • nullInput – Set when the entered date is null.

    Manipulating Dates

    There are a number of options for manipulating the moment object. For example, you can add or subtract days, months, years, etc. This is achieved via the add() and subtract() methods. The following example shows how seven days, months, or weeks are added to the current date.

    [js]
    moment().add(‘days’, 7); // adds 7 days to current date
    moment().add(‘months’, 7); // adds 7 months to current date
    moment().add(‘years’, 7); // adds 7 years to current date
    [/js]

    Similarly, the subtract() method is shown below.

    [js]
    moment().subtract(‘days’, 7); // subtracts 7 days to current date
    moment().subtract(‘months’, 7); // subtracts 7 months to current date
    moment().subtract(‘years’, 7); // subtracts 7 years to current date
    [/js]

    Time From Now

    Another common task is determining how much time exists between two dates. For calculating time from the current date, Moment.js uses a method named fromNow(). Here is a sample which checks how much time exists from the current time:

    [js]
    moment().fromNow();
    [/js]

    This code sample displays “a few seconds ago.” If we supply a date to the moment object it would display the time range from now as per the difference. For example, the following code displays “7 days ago.”

  7. Creating Slick HTML Presentations Using reveal.js

    Doing presentations wasn’t something new. But this time it had to be special, we had competition. Presentations are a way to create an overall impression. And, to create an impression we needed something different and impressive. Unlike the traditional ways of doing presentations, (PowerPoint, etc.), we decided to do it different this time. That was when we bumped into reveal.js.

    reveal.js is a framework for creating beautiful presentations using HTML. It has a number of slick features like Markdown content, nested slides, PDF export, and JavaScript APIs for controlling the slide navigation. Presentations using reveal.js are written using HTML. There is also an interface for those who aren’t very tech savvy.

    Setting Up reveal.js

    Before using reveal.js, you should have both Node.js and Grunt installed on your machine. The next steps are to clone the reveal.js repository from GitHub, install all of the dependencies, and start the reveal server. The following list of commands are used to accomplish these steps.

    [code]
    git clone https://github.com/hakimel/reveal.js.git
    cd reveal.js
    npm install
    grunt serve
    [/code]

    Next, navigate your browser to http://localhost:8000/ to view the presentation.

    Creating a Presentation

    The following code listing is a bare bones reveal.js HTML page containing no presentation slides. Before the end of the body tag, we have a script which is the key to all presentation configurations. There are a number of options that we can configure. For example, we can optionally show presentation progress, enable transitions, and set a theme for our presentation. We’ll dig deeper into that once we start adding slides to our presentation.

    [html]
    < !DOCTYPE html>














    [/html]

  8. An Introduction to the MEAN Stack

    The term MEAN stack refers to a collection of JavaScript based technologies used to develop web applications. MEAN is an acronym for MongoDB, ExpressJS, AngularJS and Node.js. From client to server to database, MEAN is full stack JavaScript. This article explores the basics of the MEAN stack and shows how to create a simple bucket list application.

    Introduction

    Node.js is a server side JavaScript execution environment. It’s a platform built on Google Chrome’s V8 JavaScript runtime. It helps in building highly scalable and concurrent applications rapidly.

    Express is lightweight framework used to build web applications in Node. It provides a number of robust features for building single and multi page web application. Express is inspired by the popular Ruby framework, Sinatra.

    MongoDB is a schemaless NoSQL database system. MongoDB saves data in binary JSON format which makes it easier to pass data between client and server.

    AngularJS is a JavaScript framework developed by Google. It provides some awesome features like the two-way data binding. It’s a complete solution for rapid and awesome front end development.

    In this article, we’ll be creating a simple CRUD application using the MEAN stack. So, let’s dive in.

    Prerequisites

    Before getting started, we need to install the various MEAN software packages. Begin by installing Node.js from the download page. Next, install download and install MongoDB. Here is a guide I followed to get MongoDB up and running on my Ubuntu system. To make things easier, we’ll be starting from a MEAN boilerplate project. Simply clone the boilerplate repo and install the dependencies using npm as shown in the following listing.

    [code]
    git clone http://github.com/linnovate/mean.git
    cd mean
    npm install
    [/code]

    This installs the required packages. Next, we need to set the default port on which MongoDB runs to 27017 as specified in the README file of the boilerplate. Open up the file /etc/mongodb.conf and uncomment the line port = 27017. Now, restart the mongod server as shown below.

    [code]
    mongod --config /etc/mongodb.conf
    [/code]

    Next, from the project directory simply type grunt. If all goes well, you will see a message like this:

    [code]
    Express app started on port 3000
    [/code]

    Now that the server is running, navigate to http://localhost:3000/ in a browser to see the boilerplate app running.

    Boilerplate Overview

    We now have a fully functional boilerplate application. It has authentication implemented, including using social media login. We won’t be going much into that, but will be creating our own little app. If you have a look at the application structure, the public folder contains our AngularJS front end and the server folder contains our NodeJS backend.

    Creating a Listing View

    First, let’s start by creating our front end using AngularJS. Navigate to the public folder. Create a new folder called bucketList, where we’ll keep our front end files. Inside the bucketList directory, create subdirectories named controllers, routes, services, and views. Inside the bucketList folder also create a file named bucketList.js containing the following code.

    [js]
    ‘use strict’;

    angular.module(‘mean.bucketList’, []);
    [/js]

    Next, open mean/public/init.js and add the module mean.bucketList. The modified portion should look like this:

    [js]
    angular.module(‘mean’, ['ngCookies', 'ngResource', 'ui.bootstrap', 'ui.router', 'mean.system', 'mean.articles', 'mean.auth', 'mean.bucketList']);
    [/js]

    Now, navigate to public/bucketList/routes and add the bucketList.js route file to handle routing in our app. The code to accomplish this is shown below.

    [js]
    ‘use strict’;

    //Setting up route
    angular.module(‘mean.bucketList’).config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
    // states for my app
    $stateProvider
    .state('all bucket list', {
    url: '/bucketList',
    templateUrl: 'public/bucketList/views/list.html'
    });
    }
    ]);
    [/js]

    Inside public/bucketList/views/ create a file named list.html. This is our view, which will display our bucket list. The contents of this file are shown below.

    [html]

    Welcome to the bucket list collection

    [/html]

    Also create a file named bucketList.js inside public/bucketList/controllers containing the following code.

    [js]
    ‘use strict’;

    angular.module(‘mean.bucketList’).controller(‘BucketListController’, ['$scope', '$stateParams', '$location', 'Global',
    function($scope, $stateParams, $location, Global) {
    $scope.global = Global;
    }
    ]);
    [/js]

    Next, start the app using grunt. Make sure that MongoDB is running too if it’s not already. Navigate your browser to http://localhost:3000/#!/bucketList, and you should see the list view that we created. If you are wondering about the #! in the url, it’s just done to separate the AngularJS and NodeJS routing.

  9. Simple Bubble Charts Using D3.js

    At my workplace, I was assigned the task to visualize some data. That was when I bumped into D3.js, a JavaScript library for manipulating documents based on data in an interactive way. It makes use of HTML5, JavaScript, SVG and CSS3. In this tutorial, we’ll use D3 to visualize our data in the form of abubble chart.

  10. HTML Forms in AngularJS

    This tutorial will show you how to collect and validate HTML form data using the two-way data binding of AnguarlJS. In this tutorial, we’ll learn how to implement a simple user registration form using Angular. Along the way, we’ll look at basic HTML and show what needs to be changed in order to incorporate Angular.