April 11

Automatically Write a Changelog to a Github Repo

A software project may undergo a lot of changes during its life cycle. Each change might be a bug fix, a new feature or deprecation of existing features. All these changes made to a project must be logged somewhere for future reference. A project changelog is documentation that maintains a record of all such changes made to a software project.

Using changelog or version control is generally a good practice as it helps you to keep track of changes made in each version release. The basic idea is to have a repository where the project code resides and every change made to this code is logged using some version-control or change log software. As shown in the picture below, client commits the code to a central repository which can be shared publicly.

versioncontrol_example

Let’s understand this by an example:

Suppose you are making a simple calculator project. For the first version release you decide to just include basic math operations.So, on your first release, your changelog would probably look like :

Version 1.0.0 – April 2,2017

Features

  • Addition, subtraction, multiplication and division of numbers.
  • Look back to history of calculations.

Now you decide to work on the project and you added some more features to the calculator project. Meanwhile, users also reported some bugs to the project. So you fix those bugs too in the next release. You now plan to provide small version update. So, the changelog would look like:

Version 1.1.0 – April 9,2017

Features

  • Allows calculations with floating point numbers.
  • Support for logarithmic,square root and trigonometric calculations.

Bug Fixes

  • Fixed where the application would crash if more that 10 digits are used for calculation.

This process would go on and changelogs will be maintained for all the changes made to the project since the beginning of the project.

A simple changelog tool may contain various information such as :

  • Version Number
  • Date of change
  • Bug Fixes
  • Features
  • Major changes
  • Minor changes
  • Deprecations
  • Comments

Various changelog and version control sofware are available each having features that enhances the process of software development right from designing, development and maintenance. Here are some version control softwares are Concurrent Versions System(CVS), Subversion, Standard Version, Vesta, Git etc.

Standard version is a tool that facilitates easy updates to a remote repository. Standard version is used to commit your package to npm registry using terminal commands.Various benefits of using standard version are :

  1. Simple commands to commit your work to the npm registry.
  2. Easy to bump version based on the config file(package.json/bower.json file).
  3. Manages changelog for all the changes made to the package in each version.(in the CHANGELOG.md file)
  4. Helps tagging a package release.

Installing Standard Version

There are two ways to install standard version:
Method 1: Installing standard version as npm run script will install the standard-version in the package you are currently working and all the operations would require package.json file to be present in the package folder itself.)

  1. Browse to your development directory in the terminal.
  2. Execute the following command in your terminal to add to devDependencies

npm i --save-dev standard-version

  1. Create or update the package.json file in your package direcory and add the following npm run script to package.json


{
 "scripts": {
   "release": "standard-version"
 }
}

Here is a demo package.json file for your reference.
standard version install

  1. Now run the script by executing following command

npm run release

  1. Test the installation by executing the following command in the terminal.

standard-version
 
Method 2: Installing standard version as a global bin will install standard-version globally and will be applicable to all the packages and you need not add devDependencies to each package you are working on.This would require your package.json file to be present in the default user directory instead of a specific package.)

  1. Type the following command in your terminal to install standard-version as a global bin

npm i -g standard-version

  1. Test the installation by executing the following command in the terminal.

standard-version

Using Standard Version

Standard version provides terminal commands for seamless communication with the package registry. Let us look at some of the basic operations that are frequently used when you develop and commit a package to the npm registry.

Standard Version Help

The help command is a life saver when you want to know about a command.Following is the command for the standard version help. It provides you with all the operations that standard version can do for you. Following is the help command for standard version.

  • For npm run script

npm run release -- --help

  • For global bin

standard-version --help

Here is a sample output for the the command.

help command

First release

This command is used when you plan to release your package for the first time to the package registry.It will tag the release of your package without bumping the version in the package.json file.

  • For npm run script

npm run release -- --first-release

  • For global bin

standard-version --first-release

Cut a release

You can cut a new release with the following command.

  • For npm run script

npm run release

  • For global bin

standard-version

Release as command

The release-as command is used to commit all your work to the package registry.The release command may have string arguments like major, minor or patch which are used to bump versions of the package based on your requirement. If you don’t provide any argument to the command, the version will be bumped automatically.

  • For npm run script

npm run release -- --release-as [major|minor|patch|'']

  • For global bin

standard-version --release-as [major|minor|patch|'']

Let us understand the arguments to the command with our ongoing example of calculator project.You released version 1.0.0.You planned second release with a small bug fix and added two new features.So you need not bump the version to 2.0.0 since it is a small release.Standard Version allows you to release as a minor update to the existing package and you can do it with following command.

  • For npm run script

npm run release -- --release-as minor -m "Provided bug fixes and added trigonometric and logarithmic calculations"

  • For global bin

standard-version --release-as minor -m "Provided bug fixes and added trigonometric and logarithmic calculations"

Due to a minor release, you get a version 1.1.0 instead of the default 1.0.1

A Patch release (e.g. 1.0.1) is used when your update doesn’t break any thing and provides minor bug fixes and no new features.A minor release (e.g. 1.1.0) is used when you provide new features to your package.And if your changes might break things, you relase a major version(e.g. 2.0.0) of the package.

Here are some important notes:

  • Always use the help command to know usage for a specific command
  • package.json file is the heart of the package for release as well as installation of packages.It has important information of the package such as package name, author, version number, devDependencies etc.
  • All the changes made to the package will be availabe in the CHANGELOG.md file.
  • Standard version automatically commits the CHANGELOG.md and package.json file to the package registry while publishing the package.

Other open source software to consider for changelog automation:

  1. Keep a Changelog http://keepachangelog.com/en/0.3.0/
    Downside is it’s dependent on Ruby being installed.
  2. Github Changelog Generator https://github.com/skywinder/Github-Changelog-Generator
    Similar to Keep a Changelog using Ruby
  3. Auto Changelog Hook https://github.com/MartinSeeler/auto-changelog-hook
    This is actually a bash script which uses git hooks.
Category: Code | LEAVE A COMMENT
March 6

Upcoming Changes in jQuery 3

jQuery has been going strong and steady but is no longer as popular as it used to be. It’s still good for beginners to use but there are many alternatives nowadays. One major change in jQuery v2 was the removal of IE8 support and now we’re about to have version 3.0 Before 3.0, version 2.2 was released February 22, 2016 which had a big bug fix of the position() method which was causing a problem in Internet Explorer

At the time of this writing March, 2016, jQuery 3.0 is in Beta. Access the code now https://code.jquery.com/jquery-3.0.0-beta1.js or install via npm: npm install jquery@3.0.0-beta1

The performance has been improved of the show() and hide() methods by 100%, see benchmarks here http://jsperf.com/old-vs-new-show-hide/3

There was an issue with the data() method handling attributes with non-alpha characters. Something like this would fail
<div data-foo-42=”bar”></div>

The jquery.deferred object has been updated to be compatible with ES2015 Promises thus changing the then() method. An error callback turns in a rejection now.  Also callbacks are invoked asynchronously instead of on binding. The catch() is now an alias of then(null, func).

Precision has been added to width(), height(), css(‘width’), css(‘height’) so values can have decimal places since IE and Firefox tend to use them more.

These methods have been completely removed: load(), unload(), error()

jQuery animations have improved performance using requestAnimationFrame from the browser which are supported except in IE9 and Android 4.3.

jQuery custom selectors like :visible and :hidden are now up to 17 times faster! See the performance profiling https://github.com/jquery/jquery/issues/2042

Doesn’t seem like a lot but better web performance is always a good thing so even though the version is changing from 2.2 -> 3.0 the 3 indicates that as a new version, older usage of jQuery will break since some methods were removed. If thats the case for you, don’t forgot about adding jquery migrate to your code https://github.com/jquery/jquery-migrate/

 

Category: Code | Comments Off on Upcoming Changes in jQuery 3
November 16

New Directives in AngularJS 1.3

In October 2013, AngularJS officially released version 1.3 and on top of that are discussions about significant changes in version 2,  which is a long way from production-ready so don’t even look into it.  I’m sure it will change several times considering that the feedback has been negative.  However 1.3 has a lot of positives which includes performance improvements, removed support for IE8, and new directives.  Here’s a basic summary:

  • One-time bindings
  • npm installer
  • ngModelOptions – tuning of model updates
  • ngMessages – form validity
  • ngARIA – Accessible Rich Internet Applications
  • No IE8 Support

Continue reading

Category: Code | LEAVE A COMMENT
October 15

Express.js vs Sails.js Comparison

This is an overview comparing Node.JS frameworks including Express, Sails, HAPI and Lazo.js. Express is clearly the most popular currently version 4 at the time of this writing.   The next framework gaining popularity is Sails currently at version 0.10 with 124 code contributors since its inception in 2012.  Sails is not an independent framework on its own, because it uses Express for handling HTTP requests.  HAPI has 95 code contributors since 2011 but is mainly for building APIs on your server.   I am also mentioning Lazo.js because it was developed for SEO compliant websites and single-page applications are natively not SEO-friendly.

Express takes the most common tasks for a web server and makes them easier to use with less lines of code wrapping native Node.js functions.  Since there are cases where Express doesn’t abstract a needed function or doesn’t conform to some preferred convention, other frameworks take place.  Those other frameworks are not completely independent therefore you still have to use Express.  Since Express is already widely written about let’s focus on the other frameworks.  The possible main detractions of Express are the lack of  database abstraction and real-time socket communication.

SAILS

This is where Sails comes in.  Sails follows the “Convention over Configuration” philosophy adding value to Express in several ways.  First it wraps socket.io for managing websockets whereas in Express you have different instances of HTTP and websocket servers.  Sails also includes a command line generator to quick start your projects using a scaffolding.  The folders generated will be:

Another great benefit of Sails is concatenating and minifying CSS and JS files using Grunt.  This will improve performance for the client-side because any additional files via GET calls increase page load times.  Routes in Sails use RESTful route conventions and are also similar to AngulaJS routes.  Here’s an examples:

The typical url route may be /:controllers/:action/:id with automatic redirection if a parameter is omitted.

The views are for html templates using embedded js (ejs) and have four types:

  1. partial – html snippets
  2. layout – html that goes outside the body such as headers and footers
  3. server-side
  4. client-side

Models are defined by attributes and associations.  They follow object-role modeling Waterline.  The data adapters are pre-configured for memory, disk, and mysql. Here’s an example of a model:

Controllers can be generated by command line with or without these included actions:
create, destroy, like, tag. Here’s a code examples:

So now that you have something to compare to besides Express, let’s go over HAPI version 7, started in late 2013.

HAPI

HAPI is a little more of the “Configuration over Convention” philosophy because it is designed for APIs but also includes features not available in Sails. These included features are:

  • input validation
  • caching
  • pre-fetching
  • auto documentation

The downside is the lack of community support, even though there are several modules available for download. Interestingly enough, HAPI cannot listen to localhost address. Here’s a code example:

LAZO

Finally another addition which is powered by HAPI is LAZO.js  This framework uses require.js, backbone, jquery and handlebars.  The reason LAZO is SEO compliant is because the routes are mapped to a URI for crawlers to index your site.

The anatomy is smaller so you only have:

Category: Code | Comments Off on Express.js vs Sails.js Comparison
October 9

Developing Responsive Web Applications with AJAX and jQuery Review

book cover

Book available for puchase at PacktPub.com

You can develop web applications in so many ways and this book teaches you how with the most popular front-end library, jQuery and AJAX. Initially I was excited to find out if it’s possible to build a responsive web application only with jQuery and Ajax, but you still need a back-end. In this case, the author uses Tomcat to run a java server as the back-end. You might be surprised that all the source code files are in the txt extension along with one war file. Then I realized uncompressing the war file will output all the proper files to open the website without some java-based IDE. A non-java developer might not be able to figure that out right away, so the book is definitely targeted for java developers who want to learn the front-end.

Even though it’s possible to open the source code locally into a browser, it won’t be fully functional without running Tomcat. As a front-end developer I have read through all the examples and they are coded well, including comments, to demonstrate getting data from 3rd party APIs such as Twitter, Facebook, Google, YouTube, and Paypal. After having read through the book, it appears that more of the examples demonstrate usage of APIs rather than responsiveness. The early chapters do include details on responsive-making elements such as media queries, layouts, and the opera testing emulator, yet the author just uses Twitter Bootstrap for his app. I liked that the book includes good resources such as Draw.io and a few important CSS properties not seen in other books such as the text-overflow: ellipsis. Continue reading

Category: Code, Design, Review | Comments Off on Developing Responsive Web Applications with AJAX and jQuery Review
July 14

Building an Application with CoffeeScript Review

coffeescript course image

The intro of the video course states “familiarize yourself with CoffeeScript” and I did (course link http://bit.ly/1ix4XXb)  The other list items of learning in the description are also fairly accurate.  The “cake” built tool was demonstrated, using jQuery with coffeescript was demonstrated, built a simple framework was also demonstrated.  The inaccurate part of the description is the “Who is this video course for” which states “if you’re a beginner Javascript developer… this course is for you” …NOT!  Realistically it should be written as “if you’re a beginner coffeescript developer this course is for you”.  The usage of MVC concepts was great but it’s helpful if you’re already familiar with MVC.

After going through the course, I realized it is a good overview of coffeescript and how useful it could be, even though it’s not what I would call a “walkthrough” course.  It’s more of a class lecture where the professor describes the things you can do with coffeescript with a few examples then you get homework and have to figure it out on your own.

I was really excited at the beginning (section 1) watching the author use http://js2coffee.org to see the instant conversion of javascript.  It’s really fantastic how coffeescript applies good coding methods to develop your code.  This is also the part the author referred to the coffeescript’s documentation which is fine, but an actual demo would have been better.  I found the command line “cake” easy to understand but the author just types “cake -c filename” to show you the compiling but not telling you the “-c” option which I had look for in the documentation myself.

The template files are included so that’s helpful, but the coding speed in the video is too fast so don’t try to code along.  You will just have to open the corresponding chapter files when changing chapters.  The added benefit is some resources introduced in the video like the website where you can find any javascript library and a javascript library for generating PDF files.

To summarize this would have been an excellent course if it were double in length, walking you through the coding process, but instead it seems like a professor doing a typical lecture and expecting you to figure out the homework on your own. Get the course here!

Category: Code, Review | LEAVE A COMMENT
July 3

1 Hour Crash Course in AngularJS

Have you thought about learning AngularJS, but find all the examples just too basic?

I did too!  I spent an entire week (full-time) during my vacation to break open AngularJS and see what’s possible.   What I came up with as a demo is a quiz where you can type in questions and answers, then play the questions one at a time to test yourself.  Here’s the curated content to spend 7 days learning AngularJS.

Continue reading

Category: Code, Design | LEAVE A COMMENT
May 8

Top 5 Sublime Text Shortcuts

Top 5 Shortcuts That Will Boost Your Coding Productivity

Are you new to the sublime text editor?  It’s really more powerful than it looks.   While it’s easy navigation with mouse and keyboard all the powerful tools are quickly accessible with a few shortcuts.  VIM users will likely stick to VIM after the steep learning curve of the abundance of keyboard navigation and non-existent mouse usage.  That’s great for speed and editing in SSH but take a look at the top 5 shortcuts that you can learn in Sublime Text 2.  You will go from novice to intermediate a lot faster in Sublime than VIM.

This top 5 list is coming from a non-VIM user, although I’ve tried VIM and appreciate what it has to offer.  In my brief opinion, VIM is for the hardcore coder while Sublime is for everyone who likes to code.  The following shortcuts are for Mac but you can substitute the CMD key for CTRL on Windows.  Also the ‘=’ sign does not include part of the shortcut.

NUMBER 5

SNIPPETS

This is not a shortcut itself, but allows you to include pre-defined text and function names for different languages.  You will find some pre-installed in Sublime Text 2, but you’ll have to download packages to your specific programming language.  It’s a bit annoying because you’ll need GIT and run terminal but it’s well worth it.

This is an example to do with GIT.  Clone the snippet repo into your User directory under Sublime Text.

Such as http://emmet.io/ for HTML and CSS and for https://github.com/kswedberg/jquery-tmbundle/tree/master/Snippets jquery/

NUMBER 4

This is great when you want to add quotes or parentheses around the selected text.  It’s a lot faster than typing quotes then pushing the arrow keys to close the quotes.

NUMBER 3

Symbols is defined by Sublime but in reality it means you can directly find functions in scripting languages or style directives in CSS.  The search works in conjunction with the @ symbol if you want to find something in a non-currently opened file.

NUMBER 2

Shift + Cmd + F = Search in all files

This is another great search feature which includes “search & replace” although it works in the current file as well as out of scope and searches all the files and directories in the root folder you have opened in Sublime Text 2.

NUMBER 1

You have your typical Ctrl+F for finding text, but Cmd+P will allow navigation to another file, package, directory, and menu options of the program itself.

Always remember “fuzzy” searching.

Category: Code | LEAVE A COMMENT
March 26

Make a Game with ImpactJS Tutorial

While doing research in game development using HTML5, ImpactJS is a framework that is mentioned as being the best to date for making HTML5 games.  The great thing is that you can port over HTML5 to mobile platforms using AppMobi, PhoneGap, or Ejecta.  You will also learn Node.js and Socket.io in the tutorials.

Here is an extended tutorial for beginners:

The entire playlist http://www.youtube.com/playlist?list=PLAD5A0C028DA09694

September 23

Scale HTML5 Video to Fit Screen

Fullscreen HTML5 Video


With the recent updates of browsers supporting web more W3C standards, it is easier to embed HTML5 videos than before, although you still have to provide your video in multiple codecs such as webm, ogg, and mp4.
The thing is you still have to use javascript to control the video’s functionality. So here’s the simplest way to make your HTML5 video fit the screen of your browser. For this demo I will be using the popular and free video.js open source player.  There are several ways to do this, but after testing across different browsers I found this way the most efficient. (Demo inside)
Continue reading