Seattle Times remote breaking news headquarters in Katrina’s living room. (Photo by Dean)

Thursday night the I-5 bridge over the Skagit River collapsed and fell into the water. Yes, this is a big deal because I-5 is the main corridor through the state. Two cars fell in but everyone survived. This news broke while Dean and I were enjoying a lovely dinner at Ben and Katrina‘s house after work, so naturally we turned her dining room into a breaking news headquarters: I maintained the social feeds while Katrina worked with homepage producers to build out the package and Dean started working immediately on the map (I jumped in after our social media producer go to the office).

We worked all night on the map, spending most of our time attempting to get PDF data into a spreadsheet before we got a better data set from our data editor. We started with a Google Fusion table and quickly moved over to Mapbox (thankfully, we knew what we were doing after building our state parks map).

We used basically the same technology I described in my state parks post. We launched the map on Friday morning then  updated a second-iteration version Saturday that has filters to see: bridges built more than 50 years ago, bridges with low sufficiency ratings, facture-critical bridges and high-trafficked fracture-critical bridges.

This one of our first heavily deadline-driven news apps projects and probably the best job we’ve done of really telling a story through our apps. We’re getting good at dumping a bunch of stuff into a well-packaged space (maps, political guides), and are trying to get better at truly finding the stories within those data dumps. Hats off to Cheryl and Dean!

This week the news apps team launched a fun little user-generated content project: a map with reader reviews of the best, worst, most kid-friendly state parks, and the best places to camp. We put out a reader callout using a Google form to celebrate the 100th Anniversary of Washington state parks and received more than 300 responses. We didn’t previously have a plan for what we’d do with those responses, but thanks to all the answers being in Google Spreadsheets and tabletop.js, we were easily (ok, not that easy, but still) able to plot the points on a map.

How it works: You click a point. Point pulls up reviews, photos and number of “best camping” votes for that park. You can filter by category. Relatively simple, but it helped us start to define what our standards are for mapping, and create a few reusable templates so we can do projects like this more quickly in the future.

Here are some of the awesome resources we used to pull this off:

• Google forms to solicit answers
• Google spreadsheets to store the responses (had to significantly restructure the responses and do a lot of manual splits because our form was poorly structured in the beginning. Thanks to our awesome intern Daimon for fact-checking the shit out of every lat/long point )
• Tabletop.js + Flatware
• Handlebars.js
• Mapbox
• Google spreadsheet script from Mapbox to handle geocoding
• Cloudmade
• A flickr scraper thing that I stole from John Keefe

Special thanks to: 

• Developer Dean Kramer for ninja skillz
• Digital news production intern Daimon Eklund for fact checking, geocoding, QA testing, and generally good feedback and ideas and catching all our flubs.
• Data editor Cheryl Phillips for helping me merge, split, tear apart and reassemble the original mess of spreadsheets from our Google forms.
• Art director Whitney Stensrud for her eagle eye for UX and colors and fonts.
• News artist Kelly Shea for all the lovely graphics and cute icons.
• Travel editor Brian Cantwell for editing all the content.
• Features producer Holly Henke for managing all the promotion across the website, teases in print, and social media promotion. And for putting together the original forms and doing a reader callout, even though we weren’t quite sure yet that we’d do anything with it.
• Engagement guy Bob Payne for feedback and keeping the ball rolling.

Yes, we are highly collaborative here at The Seattle Times, even on small projects. Now, time for some summer outdoors adventures!

David Cole via Bokardo via Ben Turner

Roman Krznaric via Maria Popova

1. Show don’t tell
2. Start with the low-hanging fruit
3. Find your allies early
4. Fight against the assembly-line style of project management
5. Done is better than perfect
6. Rock the boat without tipping it over
7. Ask forgiveness, not permission — but carefully!
8. Choose your battles
9. Seek first to understand, then be understood
10. Develop a common language
11. Resist the urge to be the cool kids in the corner
12. Remember that experiments are serious business
13. Measure your success
14. Keep your users at the heart of everything you do
15. Remember that you’re not alone

You can read the full post at 10,000 Words →

My graduating class was in the weird spot. People slightly older than us didn’t have access to devices and  social sites, but people younger than us have more sensibility about it because  their moms, dads and teachers are all on Facebook.  We were the first group of 13-year-olds to be exposed to it so vulnerably. My group was the in-betweeners of social media practices. (By “my group” I specifically mean the people who graduated about the same year as I did… not people who are generally in my age range.)

Every teenager has stupid moments. Teenagers act weird and say dramatic things about life and “love.” Every teenager in the history of ever has done it. We just happened to be the ones who documented it and made it searchable. And the worst part? We did it under usernames and email addresses like “2cute4u@hotmail.com.” Accounts that have long expired, meaning signing into these old sites to delete our childhood crap is hard, if not impossible.

Why I’m writing about this? An old friend’s employer found one of my old blogs. One that I have zero recollection of ever creating. My first and last name are nowhere on it, so doing a Google search of myself never returned it (I would have delete it long ago if I had). As a teenager I was making new profiles on every site imaginable. And yeah, I posted some photos that teenagers would take. No alcohol or drugs or nudity. Nothing incriminating, just embarrassing clothing and faces and poses and captions.  Is it fair for employers to go around collecting this stuff? It feels like them snooping around our parents’ houses, reading our old journals and looking through shoeboxes under our childhood beds for photos.

Yeah, maybe we should have thought ahead. Maybe we should have predicted that social media would blow up and everything would be indexed and searchable and come back to bite us in the ass. What I wise 13-year-old I would have been if I had that foresight.

I know the idea of doing “Top 10″ posts feels a little cliche and cheap, with front pages of Cosmo magazine first coming to mind. But let’s face it — people read lists. It gives them something easy to consume at a glance. It gives them a point of reference for navigating a story: I know when I’m half way done, or I know I can easily skip through a section if I’m not interested.

So this is why we’ve launched the first phase of a bigger project around lists at The Seattle Times. Our lists can be seen as highly curated collections from our experts, on topics ranging from how to winterize your home, to best outdoors adventures, to eating healthy, to takeaways after a Seahawks game. We write a ton of lists for the paper and in our blogs, but they’re not easy to read.

The example below is from a list about things to do over the weekend. Our arts staff writes these kinds of posts twice a week, and they could be a real destination, but they’re an eyesore to look at:

At a glance, you can’t see the 10 items or where/when they take place. It’s a wall of text.

Enter: Listifyer. Or at least that’s what we’re calling it internally. The idea is that we create an easy way for bloggers and reporters — who are already producing these lists — to beautifully format their content and link it up with our entertainment database. The end goal is that we collects a list of lists, with the ability to filter down and for readers to engage and submit their own items.

The first part that we’ve launched this week is a custom post type in WordPress that lets readers input a list summary, individual list items — each containing a headline, description, details, optional photos and related links. Upon hitting publish, those fields are all structured into a format that you can read easily. Here’s the first list we published using the post type: 5 ways to spend your precious weekend. Much better, right?

The eventual aggregated page might look something like this, though the image below is just a mockup from the original brainstorm:

We’ve rolled the feature out to all bloggers, with our features folks as the core user group. We’ll tweak functionality based on their needs after a few weeks of using it, then move on to next phases of integration with our events database, collection of all lists in a central place and reader engagement.

If you have any ideas for this, I’d love to hear.

I’m happy to announce the launch of the latest project from the Seattle Times news applications team: a guide to all Washington state lawmakers, including sponsored bill information, campaign contributions, bios, contact information and committees.

The guide is an evolution of our first-ever news app, The Seattle Times election guide that we launched in August. It uses information collected through reporting, from the Washington state legislature and Follow the Money.

Of course, it’s responsively designed, so it works fluidly across all devices. The front page lists key lawmakers and education leaders as a jumping in point for readers. Optionally they can enter a home address to see a list of lawmakers who represent them.

This is just the first iteration (second, if you count the original election guide) which we’ll continue to build out over the coming months to include a more comprehensive way of exploring bills, contributions, financial documents and more.

This app is running on the Django framework and hosted on Heroku. Congressional and legislative districts are calculated using a Washington-specific version of Django Boundary Service. Our boundary service is hosted on an Amazon EC2 instance, with static files served using Amazon S3. We’re using a custom Django template tag to pull in RSS feeds from WordPress, Tilemill for our map design, OpenStreetMap for the base and Leaflet for the browser interaction.

Huge shout out to data editor Cheryl Phillips and developer Dean Kramer for bustin’ their asses with me!

Washington state lawmakers have a big problem: The next two-year state budget faces a shortfall of up to $1.3 billion. And on top of that, the state Supreme Court has said Washington isn’t meeting its obligation to fully fund basic education. Meeting that mandate could cost an additional $500 million to $1.7 billion over the next two years, depending on whom you ask.

To help readers understand this problem and explore real options on the table for finding funding, The Seattle Times news applications team launched an interactive this week that lets our readers try their hand at balancing the state budget and increasing education funding at the same time.

The content

• Overview: Users land on a page that shows them an empty budget container representing the total amount of money that state legislators need to find and all the options for meeting those goals. 
• The benchmarks: The container shows various benchmarks users need to hit: Reducing the deficit to find the $1.3b, finding the $1B that Republicans think is necessary to adequately fund education, or finding the $1.7B that Democrats think is necessary to adequately fund education.
• The budget options: The options on the left represent possible cuts and tax increases are compiled from former Gov. Chris Gregoire’s 2013-15 budget proposal released in December, from a list of possible cuts offered by a state commission examining how to improve education, and from House Republicans and individual lawmakers. It’s not a comprehensive list of every potential cut mentioned, but it gives an idea of the choices lawmakers may have to make.

The nitty gritty

• Django-powered: This is especially awesome because we plan to update this interactive regularly based on new proposals, projections and forecasts that arise. Django lets editors and the copy desk easily jump into the admin and publish updates as needed without having to go through me as a data inputter.
• Bake that shit: We use Django Bakery to bake a flat file to S3, which we then suck into our CMS. We pull the contents of the interactive into the CMS so our web producers can easily update the headline/chatter, or uprank/downrank the interactive and move it onto different section indexes on the main site. Every time the copy desk or an editor hits “save” in the Django admin, a new flat file is sent to S3 (and thus our CMS) with the changes. It also bakes a second version that we’ve distributed to our other newspapers in Walla Walla and Yakima.
  
• Responsively sexy: The other cool thing about integrating this with our main CMS is that we got an excuse to institutionalize responsive design by putting an official responsive template into our main system. Sneaky, eh? Hopefully this means we can start using it more often for non-news apps projects as well. Responsiveness powered by your standard media queries and grid system. And it looks hot on mobile.
• Modernizr: Not really worth noting, but we use Modernizr to detect whether the browser supports drag n’ drop, then display different instructions based on that. In cool browsers you can drag options from the left into the container on the right. On suckier browsers you can just click. Though in retrospect (after using this interactive for a few weeks), the drag n’ drop isn’t as cool as we originally thought it’d be. I end up just using the standard click no matter the browser.
• Icon fonts: We used Iconmoo to generate fonts for all the icons.

Credits

• Dean Kramer: Lead developer, co-instigator.
  
• Andrew Garber and Brian Rosenthal: Reporters in Olympia who did the hard part.
• Richard Wagoner: Politics editor who did a bulk of the editing.
• Greg Rasa and Laura Gordon: Contributing editors.
• Cheryl Phillips and David Lucio: Data editor and engineer involved in early brainstorms.
• Whitney Stensrud: Graphics editor who helped conceptualize the interactive and gave us constant usability feedback.

So where’s the code? It’ll be public on Github this week. I’ll update with a link.

If some of California’s 72 community college districts could consolidate their bureaucracies, millions of dollars could be saved and redirected to pay for additional class sections and student services.

My latest infographic for California Watch shows how the California community college system spends millions on duplicative administration costs. Reporting by Erica Perez and Agustin Armendariz.