Interactive Storytelling
-
Dailygraphics Next
-
Busted
-
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.
-
Great movies
Based on an earlier project (Great reads, itself inspired by the NPR Book Concierge), this interactive provides an index of five years of the best movies reviewed by the Seattle Times. It's filterable by genre, rating, and year, and animates smoothly thanks to FLIP-powered CSS animations.
-
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.
-
Flying high
Boeing celebrated its 100 year anniversary in 2016, and the paper re-ran a graphic in print that collected all of the aerospace giant's commercial planes. For online, that format wouldn't work, so I built this interactive, which extracted the planes from their SVG and moved them onto GPU-composited layers to soar across the background.
-
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.
-
Shielded by the law
As the controversy over police killings grew around the country, the Seattle Times investigative team dug into the data to uncover every person killed by police in Washington over the last decade. They discovered that it's almost impossible to prosecute a cop in this state, due to a legal loophole. I worked on the presentation and opening animation of this report.
-
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.
-
Mayday Map
Seattle's May Day "celebration" is always a unique news opportunity. To help readers follow the protests, I built a Node.js app that attached to the Twitter streaming API and tracked reporters via geotagging on a map, including photo and video. The result was a riveting live feed of movement between protestors and police.
-
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.
-
Sell Block
Another enterprise Seattle Times investigation, this piece focused on the broken promises of the Washington State prison labor industry. I worked on the visualizations for this piece, including the logo design. But it's most interesting to me because it serves as the debut for two new custom elements — <responsive-frame> for embedding elements, and <leaflet-map> for assembling the state map.
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
- 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....