If you’ve been following the recent Angular release canidates you can’t help but admire the changelog they are able to produce. Each version published has a nicely formated list of bugs, features, and breaking changes. How they were able to generate this type of changelog really interested me into digging deeper into their process and conventions. It turns out, implementing something like this into your workflow is actually quite simple.

Standarizing Commit Messages

The first step is to start utilizing a convention when commiting changes to your codebase. The easiest way is to use the conventions created by the AngularJS team.

A more readable form of this can be found from Angular Material team’s Code Convention Guidelines. At a minimum, each commit message contains a type, scope and subject. In the following format:

1
<type>(<scope>): <subject>

Add Tooling

Making sure we commit changes using this format can be teadius at first. To make life easier add Commitizen as a development dependency. This provides a command line utlity that will walk you through each portion of the commit message.

Install commitizen

1
yarn add commitizen -D

Add conventional-cz

1
yarn add cz-conventional-changelog -D

Update package.json
First add a new script named commit which executes git-cz (Commitizen)

1
2
3
4
scripts : {
"commit": "git-cz"
...
}

Then add an additional block called config

1
2
3
4
5
"config": {
"commitizen": {
"path": "cz-conventional-changelog"
}
}

Stage your changes by running git add . followed by npm run commit.

Success!

Preventing Poor Commit Messages

Having this tooling is great, but what about that one developer that just doesn’t seem to get it and is stuck in their ways? Thankfully, preventing commits that do not meet the convention is simple to do by installing a git hook. But to be honest, I’ve never configured a Git hook. Thankfully, Husky makes configuration painless.

First install Husky:

1
yarn add husky -D

Next install validate-commit-msg

1
yarn add validate-commit-msg -D

Update your package.json scripts:

1
2
3
scripts: {
"commitmsg": "validate-commit-msg"
}

Now any commit messages that do not follow the convention will error to the developer.

Generating a Changlog and Versioning

Now that our project is setup lets see the added benefits this provides. To kick off the next step we are going to install standard-version. This plugin not only will generate the proper version for our project, but it will also create a change log with proper commit hashes, and issue numbers.

Install standard-version

1
yarn add standard-version -D

Update your package.json scripts:

1
2
3
scripts: {
"release": "standard-version"
}

Run npm run release. This will examine your Git history and based off your commits generate the proper version and a CHANGELOG.md.


Demoing This Process to Your Team

To help demo how this would work in the real world, I’ve setup a repository with everything configured. First fork this repository.

With the newly forked project lets enable Issue tracking. This will give us a feel for how this would work when we collaborate on a real project.

  • Open the project’s settings in GitHub and enable Features > Issues
  • Create a new issue called feat: Implement Footer
  • Clone your forked repository
  • Verify you’re in the newly created directory and run npm install (or yarn)
  • Create a new branch by running git branch feat/footer
  • Open ./src/index.html and add a footer element
  • Save your changes
  • From the CLI run git add . followed by npm run commit

Follow the prompts adding, using the following information:

1
2
3
4
5
6
type:feature
scope: index
short description: added a footer
long description: <empty>
breaking changes: <empty>
issues closed: <enter your issue number ie. #1>

  • Push your changes to GitHub with git push
  • Next open a pull request and merge your changes in

Notice the CHANGELOG.md and package.json version are unchanged. The reason they haven’t been updated is because we need to first cut a release. Let’s do that now.

  • From your command line switch back to master by running git branch master
  • Pull in your latest changes by running git pull
  • Run npm run release

This runs standard-version which examines your commit history to properly update the CHANGELOG.md, version in package.json, and tags a branch in your repository.
Finally, run git push --follow-tags origin master to push your version changes and tag your repository with this version.

Beyond…

Checkout this great plugin for VSCode. It integrates with commitizen and provides a wizard like experience.

I haven’t actually tried this out yet, but to take things to the next level you could look into semantic-release. It promises fully automated packaging and releasing. Basically, what standard-version does, with the added benefit of integrations with GitHub and Travis CI.

Comment and share

I’ve been using Visual Studio Code now for over a year and absolutely love the productivity it’s given me. Previously, my go to editor was Visual Studio 2015, mostly due to working with ASP.NET Web Forms. Now that I’m focusing more on front end development and Angular, I don’t think I’d start a new project without VS Code by my side.

Continue reading

One of my favorite aspects of Visual Studio Code is the vibrant library of commumnity created extensions. While the IDE is great out of the box, these extensions give an added boost you just can’t live without.

When developing an application with a framework like Angular, there may be a handful of extensions your team finds useful to use. VS Code makes sharing these extentions is actually quite easy.

Open the command pallet (F1) and type Extensions: Configured Recommended Extensions (Workspace). This will create a file named extensions.json in your .vscode folder. Edit the file by supplying a list of extensions by ${publisher}.${name}. For example:

extensions.json
1
2
3
4
5
6
7
8
{
// See http://go.microsoft.com/fwlink/?LinkId=827846
// for the documentation about the extensions.json format
"recommendations": [
// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
msjsdiag.debugger-for-chrome // Debugging In Chrome
]
}

The publisher of the extension is listed beside the extension name when you open the extension in the Marketplace. Add a comment next to each extension to specify why the extension is useful. Save and commit to the repository.

Next time a team member opens the project in VS Code, they will be greeted with a message to install the workspace’s recommended extensions.

Comment and share

I was recently looking into how Angular differs from AngularJS in regards to internationalization (also known as i18n). I was delighted to see Angular makes use of the Internationalization API to perform date and currency conversions. This allows language specific formatting to be preformed directly by the browser.

To contrast, in AngularJS a developer would be required to load a culture specific helper script that would provide the proper formats per culture. With Angular and a modern browser, this is functionality is supported out-of-the-box.

The Internationalization API is supported in the following browsers, to get Angular pipes to work with older IE and Safari 9 a polyfill is required.

Can I Use internationalization? Checkout the support for the internationalization API across the major browsers from caniuse.com.

Comment and share

core-js is a modular library created by Denis Pushkarev that’s recently been opening some eyes in the web comm
Previously, it has gained serious reputation by use of Babel, which utilizes it for many of its polyfills.
Most recently, it was pulled into Angular as the de facto standard for shimming older IE 9-10 with ES2015 features.

What makes core-js unique is how beautifully architected it is. Each polyfill can be pulled in individually, making it a truly modular library. As with other libraries such as es6-shim a developer would need to require the entire library to make use of one ES2015 feature like promises. With core-js a developer can simply import a Promise polyfill with one import.

For example, using a bundler such as Webpack, you can compose your own polyfill.js with only the polyfills the application requires.

1
2
3
4
require('core-js/fn/map');
require('core-js/fn/set');
require('core-js/fn/weak-map');
require('core-js/fn/promise');

More impressively core-js’s browser support goes all the way back to IE6.

If you’re looking for a one-stop shop library to provide polyfills, core-js is it!

Comment and share

Early last week, Chrome posted the new features coming in Chrome 54. One of the features that stood out was Broadcast channel. This API facilitates communicate with other windows, tabs, and service workers running within the same origin. It sounds oddly familiar to window.postMessage API, which allows you to do the same window to window communication. The big difference here is, window.postMessage requires you to maintain a reference to the window you want to communicate with.

1
2
var popup = window.open('https://www.coolwebsite.com');
popup.postMessage('Hello From Dev Boostie!');

We all know maintaining references to windows is hard, right? If you’re not accustomed to it, the process goes something like this. Open a window, register it with an in memory collection. When the window closes, send an event to the parent and cleanup the reference. While it doesn’t sound too bad, managing these window references can become a serious pain and it’s tough to get right.

Thankfully BroadcastChannel API solves this. It provides the ability to send messages to all windows/tabs without knowledge of their existence. No more in memory window management!

The one downside to the BroadcastChannel API is it only works with same origin. If you want two windows to communicate with each other window.postMessage is the way to go.

For more on the BroadcastChannel API checkout this blog post from Google.

BroadcastChannel API Browser Support

Can I Use broadcastchannel? Data on support for the broadcastchannel feature across the major browsers from caniuse.com.

Comment and share

  • page 1 of 1

Chaz Gatian

I’m a skilled Web Developer that pursues the latest technology to deliver new and exciting experiences across multiple devices.


Web Developer at Hyland Software


Cleveland, Ohio