Archive for the ‘Development & Design’ Category

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.


Hello and welcome back to another fun roundup of new trends and technologies in the world of frontend development!

In this fast-paced field things are always in motion. I’m here to help you stay on top of what’s new and what you need to know.

To start things off let’s jump into a nice article that explores the what are the top languages used on GitHub in 2013 (so far). Compiled using Google BigQuery the results are in line with what you would expect of GitHub developers: JavaScript and Ruby take the top spots (first and second respective). What does surprise me is that Java is way up on the list at number 3. I suppose that should be expected given Android is built in Java.

Taking a detour into more tech-heavy articles, I came across this article which shared a tip on how to ignore library code while debugging in Chrome. Why is this cool? Well if you’ve ever been neck-deep in a call-stack trying to figure out a bug’s origin you can sometimes get lost in the libraries you’re using on the page (e.g. jQuery, Backbone, Angular). What this trick allows you to do is have these libraries excluded when debugging, allowing you to focus only on your code! Pretty handy!

Another handy trick is this break-on-access repository on GitHub. If you want to spy on when a property of an object is accessed or modified this library will allow you to enter the debugger at that point. Very handy for situations where you may not know when an object is being modified, but you know that it is being modified.

A fun Tumblr blog popped up over the past week, highlighting what applications could look like if they were designed for iOS 7. With iOS 7 released on September 18th you can bet you’ll see its design ethos echoed across the internet. This is a nice way to prepare yourself.

Along with finding inspiration for how to design for iOS 7, take a look at this very comprehensive post about how to create a web app that looks like an iOS 7 native app. Especially useful if you’re looking to create a Phonegap hybrid application. There are many tips, tricks, and nuanced details in this blog post that will prepare you for developing iOS 7-like web apps.

And there you have it! This week’s roundup of what’s new and what’s being talked about on the world wide web. As you can tell, Apple still has quite the influence – punditry aside. The release of iOS 7 is only the start of ripples that will grow.

As always, keep learning and looking for what’s new. I’ll be here doing the same.


Harry also maintains a personal blog at

Our guest blogger today is Michael Lovitt, VP of Engineering at Vox Media.

Last month, Vox engineers spent three days at Chartbeat’s NY office hacking on digital ad measurement. I want to share Vox’s take on the current state of online advertising and tell you how and why we’re working with Chartbeat to make things better.

The current state of online advertising

The state of digital advertising — and brand advertising, in particular — is suboptimal. In short, as an industry, we’re showing ads that readers don’t want to see and measuring using techniques that don’t tell us enough about whether ads are successful.

The good news, from our perspective at Vox Media, is that digital advertising has enormous room for improvement. We believe that by designing beautiful ads that delight instead of annoy, elegantly integrating these beautifully-designed ads alongside premium brands and content and for a premium audience, and employing measurement techniques that reveal a complete picture about who viewed an ad and to what degree readers engaged with and were influenced by it, that we can provide an advertising experience that does a better job of pleasing everyone involved: publishers, advertisers, and readers alike.

We’re making progress on all of the above, but solving these problems isn’t easy. It helps to have great partners.

Solving problems with Chartbeat

On measurement in particular, we were excited to work directly with Chartbeat because, like us, they’re convinced that the current state of digital ad measurement is not good enough and are actively working to make it better. Of course, Chartbeat is in the business of knowing how users engage with websites, and they’ve started to put that expertise to work tracking ads. (We had nodded our heads all the way through reading their recent blog post on the superiority of Engaged Time over impressions and clicks and awesome study showing a strong correlation between Engaged Time and brand recall.)

We’re also passionate (OK, addicted) users of Chartbeat’s products. Screenshots of important Vox milestones as visualized by Chartbeat litter our Campfire transcripts. These people do awesome work and it’s fun to hack with folks whose work you admire.

For all of these reasons, when Chartbeat invited us to attend one of their Hack Weeks, we immediately said yes.

Pre-hack planning

The Hack Week invitation was made at an opportune time, as Vox had just released an early alpha version of a new ad product metrics dashboard. The system was still in its early stages, but it was functioning in at least a basic way at every layer, and it served as a foundation for us to hack on.

We arrived at Chartbeat with a mock of a few changes to the dashboard — we knew we wanted to start reporting, for every ad, both the Average and Total Engaged Time. As Chartbeat has shown, Engaged Time correlates well with brand recall, so being able to provide this level of insight to our advertisers and to ourselves would be one important step forward in moving beyond standard clicks and impressions

So we came with one concrete thing that we wanted to accomplish (having validated the idea with Chartbeat beforehand to make sure what we had in mind wasn’t crazy); beyond that, we were ready to play it by ear.

Hack, hack, hack

Here’s a quick rundown of what happened during our three days at Chartbeat:

Trei, Niv, Pablo, Aaron, and I arrived late Wednesday morning and kicked off with a short presentation to the Chartbeat team about Vox, and then settled into Chartbeat’s Stark Tower conference room and got to work.

We sat down with some of the Chartbeat team — Harry, Matt, Wes, Shaun, and Alex — and reviewed the dashboard mock. It turned out that Chartbeat’s existing ad product would be sufficient to record all the data we needed, but that a new API would need to be built to return that data back to us. Vox engineers got to work adding Chartbeat tracking to Vox ads, and Chartbeat engineers started building out the new API.

By the end of the first day, we had a Chartbeat-instrumented Vox ad running in production and a new Chartbeat API running on a laptop and returning data from Chartbeat’s production data store. From there, we could run our metrics dashboard in our dev environment and start to see real data flow in. Hurray!

On the second day, we solidified what we had built the day before. We wrote the front-end code to beautifully display metrics on the dashboard and got the Chartbeat API running on a server on the web so that we could push our metrics dashboard changes live.

Since we were making good progress on our primary goal, we also took some time to hack on Chorus, Vox’s publishing platform. We used an existing production Chartbeat API to integrate real-time Chartbeat metrics into the Chorus layout editor — so that, for example, an editor on Polygon, when deciding what stories should be placed on the home page, can easily see the current visitor count on each currently-placed story.

The morning of the third and final day, we asked ourselves if we could get one more metric, Engaged Concurrents, integrated into the dashboard before the 1pm demo. It seemed feasible so we tried and got it done.

We showed off what we had all built to the Chartbeat team over pizza. After declaring total victory, the Vox crew said goodbye and stopped for celebratory drinks while we waited for our train back to DC.

Closing thoughts

We had a blast hacking with Chartbeat. It’s fun to make things with smart people, especially when they’re focused on the same problems as you are. Beyond ad measurement problem-solving, we enjoyed getting to know the team and talking shop: approaches to team organization, benefits and trade-offs of remote versus centralized workers, respective merits of modern JavaScript frameworks, and on and on.

Finally, we’ve been able to maintain post-hack momentum and have made great progress taking these projects to completion — an important final step in any hackathon, and especially a cross-company hackathon like this one. Chartbeat has already released the APIs they built during our visit into production and we’re working this week at Vox to update the API client code in our metrics dashboard.

Now that we have this ad engagement data, what’s next? To start, we’ll be using this data internally to better understand how well our ads are performing — by feeding it into our ad design process, measuring ad performance, and iterating. We’ll consider this data alongside other metrics that reveal how users are viewing and interacting with our ads. As we continue to take on the hard problem of optimally measuring digital ads, we look forward to having partners like Chartbeat at our side.


PS- Check out Chartbeat CTO Wes Chow’s guest post for the Vox Product blog.

As a frontend engineer at Chartbeat I am constantly on the lookout for the next new and exciting web trend. Things change so quickly on the web that if you don’t keep yourself constantly immersed in learning you can easily fall behind.

Personally I take great joy and pride in staying ahead of the ever-changing curve that is frontend design and development. One of the main ways that I keep myself educated is by always being on the lookout for new articles and resources as they surface.

I’ve thrown together a sampling of recent articles that I’ve been reading. Their topic matter ranges but inevitably the focus is on web development, teaching and guiding readers to be the best engineer they can be.

  • Making – A wonderful in-depth article about the process taken to create
  • Tiff – if you’re looking to brush up on your knowledge of fonts and typography this is an invaluable tool. It allows you to visually see the difference between fonts.
  • – good code is worth almost nothing without good documentation. is a new tool that automates the process of creating documentation for your software.
  • ECMAScript 6 and Proxy – a forward thinking yet timely article discussing the future benefits of the Proxy feature set to land in the next version of ECMAScript – aka JavaScript.
  • SlimerJS – the Gecko equivalent to the Webkit powered PhantomJS. Basically a headless browser that you can script. Great for testing.
  • Mind the Gap – An interesting analysis of the gap that arises between the conception and creation of a product.
  • The Making of Face to GIF – one of the coolest tech demos I’ve seen in a long time is the very awesome Face to gif tech demo. It lets you take a gif of your face directly from your web browser. This article discusses how that demo was created.

I hope you enjoyed this link roundup. Let me know what you think on Twitter!

Big Board Mini Hack

July 31st, 2013 by David

You’re probably familiar with Big Boards – you use ‘em, you love ‘em, and they’re a super easy way of keeping everyone in the newsroom in the know about what stories are trending online.

The original Big Boards (nerd joke) were made so they would be easy to enhance and modify. We tried to do the same with our Big Board, so we open-sourced the code for you to tinker with to your heart’s content. We also threw in a few added functionalities that might not be so obvious… here’s one of my favorites:

Author List

If you’re using Chartbeat Publishing you can append “&group=author” to the end of your big board URL to get a leaderboard style list of all of your writers sorted in real time by how many people are reading their articles.

It looks something like this, but with your actual writers instead of the names of some Chartteam members:
(hmm… I seem to be doing quite well today)

I know a lot of you are fans of the Big Board, so stay tuned for future Big Board hacks and projects.