Journey of Code Over the web: Plugin-Repository-Package-Usage

Recently I created a jQuery plugin jQWaffle, which you can find at Github.



Here is an journey and the nitty gritty details that happened over the entire phase of the code development from code creation to version control and releasing the different versions. Once the versions were ready then packaging them and hosting them and making them available to everyone over the web.

It all begins with creating a layout with different menus for different use cases. I idea was to have a plugin so jQuery was the default choice as there were going to be multiple DOM manipulations.

Once the code was ready opting for Github is the defacto choice for open source projects. You can create a project and host the code in a Github repository. You can work on multiple features at the same time on different branches and merge them once completed in the master branch. You can also follow the pattern of having seperate production and staging branches.


I used Git for version control. I commited my changes and pushed them to github. It is a command line tool to perform these operations. You can also use the GUI tool Github Desktop available on windows or the lesser known GitKraken avaiable across all operating systems.


Once the plugin code completion part is done, we must add versioning. Initially 1.0.0 at first major release.

Given a version number MAJOR.MINOR.PATCH, increment the:

  • MAJOR version when you make incompatible API changes
  • MINOR version when you add functionality in a backwards-compatible manner
  • PATCH version when you make backwards-compatible bug fixes.

Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.

You can read more about the semantic versioning tags at

To create a first release with the release no on Github visit the release section on your Github section. Click on Draft Release button to create first release.


The plugin i was using few feature from latest javascript specification included in ECMA6. You can have a good overview and comparison of new features at

All the browser vendors do not support the latest specification features.


Babel comes to the rescue. Add `.babelrc.json` file to root of the project. Install development dependencies npm install --save-dev babel-cli babel-preset-env

You can find a step by step guide at Babel Installation. I followed the Babel CLI Installation.

Once a release is done you can find a mention of Versioning Tags on github.

release tag

The first version of plugin i ready and it is time to make it available out in the world, adding it to a package manager.


I register the package on Bower. Bower keeps track of all these packages and making sure they are up to date. You can find a detailed list of steps to follow to create a package on Bower. It is pretty simple and straight forward.

Install Bower:- npm install -g bower

Add bower.json at root of the directory.

Register the package in bower
bower register jqwaffle

Expect a similar output:-
bower jqwaffle#* resolve*
bower jqwaffle#* download
bower jqwaffle#* extract archive.tar.gz
bower jqwaffle#* resolved
? Registering a package will make it installable via the registry (, continue? Yes
bower jqwaffle register

Package jqwaffle registered successfully!
All valid semver tags on will be available as versions.
To publish a new version, just release a valid semver tag.

Run bower info jqwaffle to list the available versions.

It install the Github repository as a bower package. Similarly you can unregister the bower package. Type the Github credentials to perform the operation. The package is over the web available for any one to use.


To use the bower package you can follow the below steps and we can get going.
bower install jqwaffle

There we go using the created plugin in another project.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s