Author Archive

Last Thursday Chartbeat hosted the Frontend Innovators Meetup group at our office. The focus was Angular.js, and my co-workers and I had the good fortune of being presenters. Our goal was to share some of the experiences and insights we’ve gained over the past year working with Angular.js.

From Closure To Angular

Slides are available online.

I presented first, focusing on how and why Chartbeat began using Angular.js for all of our front-end applications in the first place. I discuss our decision to migrate from Google Closure Library to Angular.js after weighing all the options we had available. I then shared how we actually develop with Angular.js, focusing on how we layout our directories, files, and applications, and discussing our multiple applications at Chartbeat and our need for a system that allows for growth, flexibility, and sharing between all applications.

Reusable Components

Slides are available online.

Danny presented next, discussing the merits and pitfalls of developing reusable components. He first discussed the advantages of working with components, which give us the ability to quickly throw together entire new applications by using existing components, allowing us to rapidly develop new applications by leveraging existing components. Danny then dove into the trade-offs that accompany the creation and maintenance of components: if it is more “expensive” to create a component than it is to simply duplicate code then perhaps it isn’t worth the time and effort to create it as a component. It was a nuanced talk with some great points. Worth watching in full, I think.

Graphing Chartbeat with Angular + SVG + D3

Slides are available online.

Nick then presented about SVG, D3, and Chartbeat’s use of D3 within Angular. He began by giving a solid background on SVG and the pitfalls you can encounter when trying to use Angular’s templating functionality with SVG elements (spoiler alert: there are a few!). Nick then discussed our internal library called C3 that he developed. He showed the design decisions that shaped C3 and the places where he’s found some shortcomings that he hopes to fix in the future.

Frontend Testing and Build Process

Slides are available online.

Jem rounded out the night with a thorough talk on Chartbeat’s test practices and build process. He talked about our testing stack, consisting of Jasmine, Karma, Protractor, Jenkins, and Selenium, and the best ways to put  these systems to work. Jem also shared some good practices to keep in mind when using these tools. He then turned his focus to how we compile our applications for a production environment, discussing our move from Grunt to Gulp and why we’re finding it a better fit — it’s cleaner and clearer to work with, as it’s mostly vanilla JavaScript, which makes reasoning with it easier.


We had a great time presenting and hope everyone learned something from our talks.

Angular.js is still pretty new and we’re all still learning the best way to do things. Over the past year we’ve learned a lot about the right way to do things and the wrong way to do things. If you have too, please chime in. Sharing what we’ve learned is the best way for our whole front-end community to continue building better and better things.

chartbeat notifier


Hack Weeks at Chartbeat are always a time of joy. A time of joy for trying and learning new things. It’s a great opportunity for everyone at the company to stretch their minds and tackle new challenges they wouldn’t otherwise experience. We get to pair up with people we don’t usually get a chance to work with, and we get to play around, creating things that sometimes become indispensable for our clients.

Two Hack Weeks ago I worked on a project called Chartbeat Notifier.  It was started by our former CTO Allan, and he had already completed a large chunk of it.  However it wasn’t completely finished, nor was it in a state that we could share.  So I finished the Notifier, polishing the parts of the project that needed a little more TLC.

This most recent Hack Week, I pruned off the remaining rough edges and it is with great joy and pride that we are releasing the Chartbeat Notifier project as an open source project!

Chartbeat Notifier is a native Mac application that lives in your menu bar.  For your domain it can show one of two metrics in an always visible location:

 1. the number of concurrent visitors on your domain

2. the average Engaged Time of all the users on the domain

Either number will be always visible in your menu bar, and is continuously updated as the day goes on.

chartbeat notifier


Chartbeat Notifier also serves as a handy way to quickly jump into your dashboard.  Simply click on the Chartbeat menu bar icon and the ‘Open Dashboard’ link and you’ll be taken directly to your dashboard.  Quick and easy, just the way we like to keep things.

There’s only one thing that I love more than Hack Week, and that’s when we are able to share our hacks back to the community.  Click on over to the Chartbeat Notifier project page and click the download link to get started!

PS- To see more of our great hacks in action, visit Chartbeat Labs.