Author Archive

Building an Entire Product in 6 Weeks (How We Built the Chartbeat Paid Content Tool)

July 9th, 2014 by Harry

A little while ago we released our Paid Content product after two consecutive six-week sprints. The first six weeks were spent creating the MVP, and the second six weeks were spent polishing it up. This is the breathless tale of those first six weeks.

Part 1: Research

This whole thing began because we saw that our clients were struggling. Paid content, sponsored content, native content – whatever you call it – remains a mysterious beast for many folks and there were few options for measuring paid content performance, let alone figuring out what you can do to make it better.

For the first two weeks of our sprint we researched and brainstormed. We huddled into offices and littered the white boards with ideas, questions, diagrams, and whatever else we could to make sense of things. We’d pore over data to see what insights we could glean and what information would be helpful to know for any native content campaign. It was a lot of debating and arguing, breaking for lunch, and then regrouping for more debating and arguing.

Amidst these debates we talked to existing clients. A lot. We wanted to know how they created paid content campaigns, and what pain points they have experienced. We’d invite them into the office and talk to them on the phone. We’d visit them in their office and pummel them with questions, searching to find what we could do to improve how they analyzed paid content performance.

Part 2: Design

design

As we were assessing the type of data our clients needed, we also began to design our version of better.

We’d create one mock-up, show it around, gather feedback, and iterate. We’d see what worked in a design and what didn’t. We’d toss out the bad, toss out some of the good, and try again. We moved swiftly, for time was against us.

Something that proved to be a great success were clickable mocks. Typically a mock is static. With a static mock you can cycle through a list of images to give a sense of what the product will contain, but a clickable mock allows you to simulate how the product will feel when it’s complete.

These clickable mocks proved insanely helpful when discussing the product to clients. It enabled us to show our ideas and direction rather than just tell.

Part 3: Development

With under three weeks left to go in the cycle we knew we had to hustle.

We wanted to see what the data for a real paid content campaign looked like so we worked towards getting things working on the screen as fast as possible. Despite all our planning and designing we had yet to see real data for a paid content campaign and we had concerns that we had planned and designed for data points that may not exist. It’s fine to plan to include data about the amount of Twitter activity that drives traffic to a piece of native content, however if that value is always 0, it’s not helpful.

To our relief our planning paid off. The data worked and made sense. From there on out it was a sprint to bring all the beautiful designs to life.

Part 4: Launch

launch

With the launch of our MVP looming we knew we’d have to start making some hard decisions. Everything we wanted to include for the first version would not fit, so out came the knife as we looked to see what we could cut away.

Delicately we began to inspect what was left. We began to weigh things, deciding what were show-stopping features or essential functionalities that had to make it for the launch, versus things that would be fine to include afterwards. We’d see which features would be more ‘expensive’ to complete. At this stage the only currency we traded in was time, with everything balanced between time to complete versus its impact on the product.

Conclusion

Some hard decisions were made but ultimately we managed to ship on time and practically feature complete.

We were able to bring to market a product that six weeks prior did not exist as anything but an idea. Everyone at Chartbeat came together to make this a reality, each pulling their own weight and helping one another. Through and through it was an incredible team effort.

Within Chartbeat we managed to create a MVP in record time. We were able to assess client needs and industry gaps to form our product and get it out the door and into client’s hands. We’re not done, but we’re off to a strong start.

The Modern Front-End Workflow—From Start to Finish

January 30th, 2014 by Harry

Front-end engineers have gone through a bit of a renaissance in recent years.

There’s been a wild and wonderful spurt in innovation that has completely changed what it means to be a front-end developer.

We now have a vast and wide array of tools available to us, allowing us to develop faster and smarter.

We now can push the limits of what a modern web browser can do, accomplishing things that two years ago seemed impossible.

Bottom line, right now is an amazing time to be a front-end developer.

Start

modern-frontend-start

Today there is almost zero friction to getting set up with a new project. Everything that you need to get started is only a few key strokes away thanks to some powerful new tools.

Git is the version control system of choice for most developers nowadays. It makes sharing code easy and frictionless. When you want to get going on a new code base you only have to run the simple git command of git clone and all the code and all of its history is downloaded directly to your computer.

NPM is the node package manager. It allows developers to package their nodejs code a self contained module and then share it with the community. There are npm packages that provide almost every type of functionality you can imagine, allowing you to leverage the work of the community. Each new project has their own unique set of dependencies they require for them to work. To get all these dependencies installed locally you only need to run npm install, which downloads and installs everything you need.

Bower is a package manager for third-party web libraries. Historically if your project requires jQuery be included you would have to navigate to the jQuery website, download the file, extract it, and move it into your project. Bower simplifies that process by giving you the command bower install which handles getting jQuery into your project.

Development

modern-frontend-develop

Actually coding and developing your project is where most time is spent. Nowadays this is one of the most enjoyable parts due to the many wonderful tools available. These tools make dev’ing so smooth that I’d dare say it makes it fun. Scratch that - it makes it oodles of fun.

GruntJS is the most popular task runner amongst front-end developers. There’s already a huge community of grunt plugin authors that to date have written over 2,000 Grunt plugins, all of which are immediately ready for your use. Grunt allows you to automate rote tasks without breaking a sweat. For example if you need to compress all your jpg, gif, and png files you can use the imagemin grunt task .

CSS Preprocessors like LESS, Sass, or Stylus have made it easy to architect maintainable, extendable, and modular CSS. Among the many features that CSS preprocessors provide the two of most value are without a doubt nested selectors and variables. Having the ability to define a color variable in one location and use it throughout allows for a flexibility in CSS that did not previously exist, yet one that was sorely needed.

LiveReload changes the way you develop, as it brings a fluidity to your development flow that you didn’t realize you needed. Whenever you change a file that you’re working on LiveReload will notice that it changed and refresh your browsers so that you can immediately see your changes in place. No longer do you have to save a file, switch to the browser, and then refresh the page. With live reload after you save a file the browser will refresh itself, saving you time and grief.

Review

IMG_1083

When you’re ready to push some of your code into the wild it’s always a good idea to review it with your team and run it through some code quality and style tools.

A GitHub Pull Request is one of the handiest ways that you can rally your team around vetting your changes. After opening a pull request you’re given a page that allows you to clearly state what you changed along with a view that shows the changes you made. Coupled with a robust comment system, a GitHub pull request makes it easy for your team to review and give feedback on changes.

JSHint is a tool that programmatically finds errors in your code. It’ll prompt you if you have a function with two arguments, and the second argument is never used, or if you’re missing a semicolon where one should be. All these things ensure your code is in good shape, allowing your teammates to focus on other things that aren’t as nit-picky as JSHint.

JSCS is another tool that is great to have in your repertoire. JSCS is a JavaScript code style checker, focusing on the style of your code and not the quality. You define what code styles you want and when you run your code through JSCS it’ll alert you if there are any areas of your code that are not inline with your project’s expectations.

Deploy

modern-frontend-deploy

Getting your code from your computer out into the world is the best part of development, as it’s when you get to share all your work with the world at large.

Continuous integration is a practice that enables and encourages getting your code to production frequently and without fear of breaking anything. A CI server will automatically perform tests across all products, not just the ones you touched. If any tests fail alerts are sent out and any changes to production are halted, preventing regressions from reaching production. When all tests pass your changes are merged into the production ready branch, assets compiled, and production is updated.

This makes the entire process of getting your changes live easy, effortless, and safe. You can view the progress of the CI server as it chugs along, letting you be kept in the loop of what’s going on without having to push the process along yourself.

Summary

The life of a front-end developer has never been easier. Browsers are getting better every day, and the tools we have at our disposal have never been better.

No longer are we wallowing in the shadow of legacy browsers, but we’re barreling ahead to stretch what’s possible in the browser.

The processes outlined above lets you worry less about minutiae and just focus on development and the product.

The life of a front-end developer is pretty damn good.

Data in Your Menu Bar—Meet the Chartbeat Notifier

December 4th, 2013 by Harry

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.

Links We Like: Frontend Development and Design

September 20th, 2013 by Harry

javascript

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 harrywolff.com.

Links We Like: Frontend Development and Design

August 2nd, 2013 by Harry

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 Medium.com - A wonderful in-depth article about the process taken to create Medium.com.
  • 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.
  • Daux.io - good code is worth almost nothing without good documentation. Daux.io 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!