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 https://semver.org/
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.
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.
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 https://github.com/niteshp27/jQWaffle.git
Expect a similar output:-
bower jqwaffle#* resolve https://github.com/niteshp27/jQWaffle.git#*
bower jqwaffle#* download https://github.com/niteshp27/jQWaffle/archive/1.0.6.tar.gz
bower jqwaffle#* extract archive.tar.gz
bower jqwaffle#* resolved https://github.com/niteshp27/jQWaffle.git#1.0.6
? Registering a package will make it installable via the registry (https://registry.bower.io), continue? Yes
bower jqwaffle register https://github.com/niteshp27/jQWaffle.git
Package jqwaffle registered successfully!
All valid semver tags on https://github.com/niteshp27/jQWaffle.git 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.