Introduction

About this book

When I started doing interactive journalism at Congressional Quarterly in 2009, it was an exciting time. Smartphones had started to become widespread, and while apps got much of the attention, it was a sea change for the web. In rapid succession, we learned about responsive design, got amazing new powers via HTML5, and tried to figure out how touchscreen interaction would work in a world previously filled with hover styles and tooltips.

To deal with this extra complexity, newsroom developers often relied on tools and frameworks to bridge the gap between where we wanted browsers to be, and where they actually were. Almost all of us used jQuery, and many added D3 (for visualizations) or Underscore and Backbone (for what would become "single-page applications"). We needed these libraries, because while some browsers had switched to a rapid release schedule, others had not, and the specter of IE7 loomed. Even in the "standards-compliant" browsers, features and performance could vary widely.

Almost ten years later, however, that landscape has changed. These days, the slowest release cycle comes from Safari, which puts out major versions roughly once a year (but still manages minor releases with significant new features in between OS updates). Elsewhere, Chrome and Firefox have continued to sprint ahead, adding new technology that's often inspired by the frameworks of the past. IE was replaced by Edge, which has also moved to an evergreen update cycle. While we were heads down on deadline, the web platform became enormously more capable, and consistent, than we might have thought.

As a result, that habitual framework usage has become a little wasteful, since what once required a hefty library is now built-in to the browser. On the Seattle Times' interactives team, I made it a point of pride to use frameworks sparingly. By leaning on the browser, our pages were lighter (and faster). More importantly, it was a good chance for junior team members to learn how the platform actually works, and develop skills that will transfer across languages and architectures. After all, JavaScript fashions may come and go, but the browser is here for the foreseeable future.

In this book, you'll learn how to build powerful data visualizations online, based on three principles:

• Write for the web platform, not frameworks or libraries, whenever possible
• Use data to structure shorter, more elegant code
• Have fun!

Above all, through these short lessons, you should have a chance to level up as an interactive developer, building the confidence to create your own stories and graphics from scratch. You'll also be in a better position to evaluate the third-party code you use, because you'll understand what's going on under the hood. Who knows? Maybe you'll even write your own framework. I can't wait to see it!

About me

My name is Thomas Wilburn, and I'm a news developer and data journalist on the NPR News Apps team, where I build graphics, special pages, and newsroom tools using JavaScript. Previously, I was the senior interactive developer for the Seattle Times, ran the multimedia team for Congressional Quarterly, and was a web programmer at ArenaNet working on UI and services for Guild Wars 2.

I've also been a guest lecturer at the University of Washington, and a speaker at tech and journalism conferences (including NICAR, SRCCON, CascadiaFest, and SeattleJS). If you took one of my classes, you may have read my textbook for learning JavaScript.

Finally, if you use a Chromebook, you may have used the text editor I wrote for Chrome OS, Caret.

About you

I'm writing this book with junior newsroom developers in mind: the kinds of young journalists I often meet as interns or as producers, who are looking to develop their skills outside of a traditional tech pipeline. After all, the problem with being a young newsroom dev is you're often figuring things out as you go along, without a more experienced developer to guide you.

That was certainly the case for me—I spent most of my time at CQ just trying not to do anything incredibly stupid, because even at a fairly tech-savvy newsroom, there wasn't really a more senior data journalist to teach me the ropes. It wasn't until I went to work for a game company, and found myself surrounded by people much smarter and more experienced, that my skills really progressed.

Developers now have a lot of resources that I didn't have, including supportive newsgroups and chatrooms that they can turn to. But that's still no substitute for a good mentor who knows the challenges you're trying to solve. This book can't mentor you either, unfortunately. But I hope it can fill some of the gaps for the "lonely coders" of the news world.

In the chapters ahead, I assume that you're familiar with the web, and have built at least a few pages. I won't be covering how to add a stylesheet to your HTML file, or what JavaScript is. You should know the fundamentals of the JavaScript language, such as loops and functions, and be able to use jQuery without looking at the docs for the easy stuff. And if a chapter seems confusing, feel free to skip it and come back later: although they're arranged in a rough reading order, most chapters are independent of each other.