Interactive Storytelling
-
NPR's 2020 Election Coverage
2020's elections were not like any before. NPR covered primaries for the first time, which meant building a completely new rig for the data pipeline and displays (I wrote about its development on the team blog). I also led the rebuild of our general elections tech using the primary pipeline as a starting point and adding Preact for a single-page app on the front-end. Our results were among the fastest in the country, and we also took care to address concerns around voting by mail, misinformation about results, and the role of the electoral college. Developer Ruth Talbot wrote more about that in a retrospective blog post.
-
NPR Book Concierge
Started in 2013, the NPR Book Concierge has become a well-loved tradition. For 2019, I rewrote the architecture of the app in order to support the full archives — more than 2,000 books — in a single, flexible page. Read more about how I did it on the NPR News Apps blog.
-
White Lies
A premiere history and true-crime podcast from NPR, I worked with a multidisciplinary team to create the newsroom's first scrolling experience. With this interactive page, we hoped to intrigue listeners, but also create a resource that they could return to throughout the season. More details on how we wrangled audio and video for the story on the team blog.
-
After the Water
The floods that overtook downtown Ellicott City, Maryland, are a vivid demonstration of not only climate change's physical effects, but also the political and emotional struggles. Drawing on images and reporting from Ryan Kellman and Becky Hersher, I helped organize and build this scrolling experience, including a compelling presentation of security cam footage from the flood. More details from the development are available here.
-
Plastics: What's Recycled and What Becomes Trash
Working with the NPR Science Desk, we built this guide to the confusing world of plastics recycling. Each category includes typical items from the store and instructions on what to do for maximum impact, followed by a tour of a recycling facility to bring the full journey to our readers.
-
Dailygraphics Next
The Dailygraphics rig at NPR is a long-standing tool for creating dataviz from Google Sheets and D3. Originally based on Python, this project was a from-scratch rewrite in Node that preserved the workflow of the tool, but modernized its UI, JavaScript build process, and cross-platform support. It's used by stations and newsrooms across the country.
-
The Profanity Peak wolves
Not only did they have one of the great trivia team names of all time, the Profanity Peak wolves were part of a Washington success story: wolves have mounted a successful comeback since being hunted almost to extension in the 1900's. But the story doesn't end so well for this pack—in this story, reported by Lynda V. Mapes, I downloaded DEM files, reverse-engineered reports from the Washington Department of Fish and Wildlife, and built a hand-rolled WebGL renderer to bring readers into the wolves' territory. A fuller write-up of my process is available on the Seattle Times developer blog.
-
Sound Transit 3 Guide
In anticipation of the vote for Seattle's ST3 transit initiative, we published this in-depth guide to what the package included, and how funds would be allocated. This project served as an opportunity to polish many of our in-house libraries for working with SVG, including the ability to easily move the "camera" by manipulating the SVG viewbox. Based on this experience, our graphics team was able to greatly improve the process of bringing print graphics to life on the web.
-
Elwha: Roaring back to life
Since the largest dam removal project in the world, the Elwha has experienced a resurgence, with plants and animals returning to the river. I worked with Lynda Mapes and our graphics department to tell the story online in a way that was evocative and beautiful. More details are available at our dev blog.
-
Touring Chambers Bay
The site of the US Open in 2015, Chambers Bay is not a typical American golf course. To demonstrate its steep verticality and unconventional hazards, I loaded the course architect's CAD file into Three.js and created this interactive tour, including hole-by-hole descriptions and video.
-
The Mobile Home Trap
For this investigative series, the Seattle Times examined the shady business practices of the Warren Buffett-owned Clayton Homes. This particular piece detailed how proposed legislation would largely exempt Clayton's loans from regulations. For my interactive, I tried to highlight the effects of that change on the market, and show how the law would barely affect other mobile home vendors.
Software Development
-
ArenaNet
You could argue that it's as much as web company as a game company — certainly the thousands of lines of JavaScript in its services cloud can speak to that. At ArenaNet, I wrote front- and back-end code for our NodeJS-like platform, including the marketing, account infrastructure, and developer APIs. I also worked on improvements to the in-game UI for Guild Wars 2, the company's award-winning MMO, which is partially embedded in a web view and uses cutting-edge, single-page application technology.
-
Caret
In 2013, I bought a Chromebook and was shocked to discover that there wasn't a good offline text editor available for Chrome OS, so I built one myself. Caret is a professional-grade tabbed text editor built around the Ace editing component. It features fully-configurable menus and keybindings, open file memory, a command/go-to palette, and more. It's the best offline editor available on Chrome OS, and it's battle-tested--every version since 0.0.16 has been written in Caret, and it's been used by members of the Chromium team to work on the browser itself.
-
Weir
In the wake of the Google Reader shutdown announcement, I decided to try writing my own self-hosted RSS reader before I would move to another third-party service. Weir was completed right before the deadline, and I've been using it since. It's written in Node and PostgreSQL for the server-side components and Angular on the front-end, and it boasts a fully-responsive design for viewing on phones or desktop machines alike.
-
Seattle Central College
At CQ, I had often trained journalists as part of my multimedia team, but when my wife and I moved to Seattle I decided to take the next step, and began teaching classes in JavaScript and web development at Seattle Central College. As always, teaching others is a great way to really learn a topic yourself, and I've learned quite a bit. I'm also working with the full-time faculty to shape and improve the curriculum for front-end development.
-
NPR for Android
In my spare time, starting in 2009, I started contributing to NPR's open-source Android client, primarily by splitting the playback function apart from the UI code. This helped lay the groundwork for the 2.0 version of the application, and it makes the application much more Android-friendly for users. Working with NPR and Google on this application was a fantastic learning experience for source control, code review, and mobile application design.
Speaking
-
SRCCON 2018: Visualization as a Civil Right
Riffing off Marcy Sutton's Accessibility is a Civil Right, this session set out to gather new strategies and best practices for creating accessible news visualizations. Attendees were taught how to use a mobile screen reader and given a chance to discover common mistakes by test driving their own projects.
[Slides] [Notes] [Transcript]SeattleJS 2017: Hacks and Hackers
How do news teams create interesting, interactive storytelling on a deadline, without technical support or funding? The answers are in this talk, which breaks down the Seattle Times news app template, dissects our Google Apps Script strategy, and makes a passionate case for the web as the only future of digital journalism.
[Video] [Slides]SeattleJS: SVG without losing a finger
A tour of scalable vector graphics in the browser, with a stress on using modern tooling (like React or Vue) to generate SVG quickly and easily without resorting to D3. Includes demos of some of my favorite SVG features, such as "camera" control with the view box.
[Slides]SeattleJS: A Packaged Apps Carol
After Chrome's deprecation of packaged apps on non-ChromeOS platforms (and the increasing use of Android as a runtime there), I gave this talk based on my experience with Caret, including a deep history of the "web as desktop runtime" and some visions of its future.
[Slides]Cascadia 2016: Custom Elements in Production
In this talk at the final Cascadiafest, I gave an overview of our successful use of custom elements and web components at the Seattle Times, and provided some rules of thumb for others who might be considering this exciting and intuitive new technique. As a bonus, the slides themselves are built as a set of custom elements!
[Video] [Slides]SRCCON 2016: Designing News Apps for Humanity
Increasingly relevant as we build news sites that are more customized, more dependent on third-party code, and more automated, this SRCCON session examined the dangers of algorithmic design as it applied to journalism. Inspired by Eric Meyer and Sarah Wachter-Boettcher's Design for Real Life, participants talked about how we've tried to safeguard readers, and how we've failed.
[Slides] [Notes]Writing
- The Elegant Selection A complete guidebook to producing news interactives and data visualizations using the tools available in modern browsers instead of libraries and frameworks....
- An accessibility starter kit is already at your fingertips Tips and tricks for using a mobile screen reader as a busy journalist who cares about accessibility....
- Visualization as a civil right How to create accessible news apps and interactives, from the Seattle Times dev blog....
- Tag Soup An article detailing our use of custom elements at the Seattle Times for the Knight-Mozilla OpenNews blog....
- The AudioFile, Part One Originally published at Ars Technica, September 18, 2007...
- The AudioFile, Part Two Originally published at Ars Technica, October 3, 2007...
- The AudioFile, Part Three Originally published at Ars Technica, November 11, 2007...
- JavaScript for the Web Savvy A textbook all about JavaScript, written for my classes at SCCC....