75 Days to Learn and Build With the INN Nerds

Phoenix, AZ
The view from my home office when I sign-in for scrum.

My first week with INN has me reflecting on how job circumstances influence our approach to work and how we think about it.

Working remotely

My colleagues Kaeti Hinck and Meredith Melragon have some great thoughts about making remote work work and starting a job with the INN Nerds team.

Remote work has a unique set of challenges compared to office environments, but it's made easier by terrific documentation, and a friendly and welcoming team. I'm using a co-working space in my neighborhood, but I get plenty of face time with my colleagues. I've even got my own emoticon!

Working with an end date

Every job I've ever worked has come with a finite end date either at the end of a summer or the end of a semester. It changes how you approach a job.

Whenever I start a job, I count the days I have to work. This isn't an act of counting down to escape, but instead adding up opportunities. With an end date, job security is irrelevant. I'm focused on making meaningful contributions and leaving things better than I found them.

I have 75 work days with the INN Nerds this summer (70 after today). Knowing that number helps me immensely. It dictates the kind of projects I’ll pitch to my team and budget time for meetings and bugs.

Working on iterative products instead of one-off products

Prior to joining INN, all of my design and development has been for one-off products used by a single organization. It’s much simpler. One brand. One group of users. Some corners can be cut and user experience decisions are simpler.

But iterative products are much more exciting and a better investment of development energies. Each enhancement made to an iterative project like Largo helps dozens of newsrooms, and has to be documented . Building tools intended for a wide range of skill levels and organizations forces design problems to be solved more completely. The risks and challenges are greater, but so are the rewards.

Fun stuff

I pushed an initial version of NewsPub Cookbook earlier this week, a roundup of data visualization and publishing-centric development tools. It's not quite complete -- pull requests welcome!

I’ve always liked good organization-branded desktop backgrounds (the name of the team is the INN Nerds). On my personal account I use photos, but particularly doing remote work I appreciate the reminder of “where” I am (at work, even if it is on my couch) and who I’m doing it for.

David's INN desktop background (h/t Kaeti Hinck). Download

Welcome David Ryan, Our Second Summer News Apps Apprentice

cqatMnsBThis week we're excited to welcome our second summer news apps apprentice, David Ryan, to the INN Nerds team.

David is a journalist and developer studying at The Cronkite School at Arizona State University. He's an avid news consumer passionate about design and technologies that enable creators and consumers.

Most recently David was the Engagement Editor and Front-End Developer for the 2014 News21 investigation into gun rights and regulations. As part of the team in the Public Insight Network bureau, David tested new methods of engagement around news topics, added major publishing partners for News21 and grew News21’s social media following.

Prior to News21, David was a summer intern with the Arizona Center for Investigative Reporting  assisting on a public safety investigation. He also built digital products and advised student startups in the Gannett New Media Innovation and Entrepreneurship Lab and lead a redesign and migration of Forrester Research's intranet.

Find David on Twitter at @dryanmedia or email him at david@inn.org.

We're excited to have David with us for the summer and we hope you'll join us in welcoming him!

My Apprenticeship With INN Nerds – Part 2

It’s been a little over four months since I joined the Nerds team at INN as their second software apprentice. With just about four months to go, now is a good opportunity to reflect and set goals before the end catches up.


News Quiz/Interactables. For one of my first projects, I wrote a WordPress plugin wrapper around Mother Jones’ news quiz library. During the process we talked about what a framework for registering and maintaining more interactive features in the future would look like. This Winter I hope to build out those ideas.

Unit Tests. Early on, I researched options for building unit testing into our theme development process and wrote about it here. Since then Ryan Nagle has built this into our deploy tools and written up some testing examples. Much of Largo still needs tests written, which I want to make a point to help with.

Analytic Bridge. Born out of a weekend project, I wrote a WordPress plugin that pulls and relates metrics from Google Analytic to post objects in the WordPress database. As a proof of concept, I adapted this into a Popular Post widget (a highly demanded feature by members), but the functionality could be used in a variety of applications.

I expect to work out the bugs and extend the features of this plugin in the next couple of weeks, as well as tweak the algorithm to make the popular posts widget ready for prime time.

Fixes/enhancements to Largo. Recently I’ve been picking up some tickets related to getting our Largo Project ready for version 0.4. Learning a lot about the codebase in the process, this Spring I’ll no doubt have the opportunity to contribute more.

Documentation. Documentation for Largo currently exists in three or four different places. Since the addition of our Support Specialist Meredith Melragon to the team we’ve doubled down on our efforts to keep and update complete documentation for both administrators and users.

Recently I’ve been working with Meredith to add python driven sphinx to our deploy tools. The benefits of documentation being versioned along with our code, yet accessible as compiled html means all our contributors have access to writing docs and end users have a single web source to find help. One of the biggest unresolved issues is how to incorporate our existing php block comments into these docs, a problem I hope to research and solve.

This kind of stuff sound like fun? Looking for something to do this summer? Find out how you could be INN's next software apprentice here.

Party Time In A Widget

The Maine Center for Public Interest Reporting launched its Political Party Time series this week. It's powered in part by the Sunlight Foundation's Political Party Time database, which I'll call the PPT.

PPT is a giant database of political fundraisers, filled with information from invitations sent to Sunlight by readers like you. There are a lot of ways to sort the information,

Screenshot - 09132014 - 09_25_06 PMThe Pine Tree Watchdog Political Party Time series queries the PPT API (what's an API?) to get a list of events in Maine. Sunlight's API  has a number of ways to limit the events returned (by date, host, beneficiary, etc.), but the sidebar widget we wrote for the series' pages simply lists events that benefit Maine politicians.

The widget lists the benefiting politician or politicians, the date, the place, and a name for the event, for the most-recent 50 events. If a politician has been talked about on the Pine Tree site, readers can click to see stories about that politician. If there's a story about that event, it will be listed in the results. They can also click on the event name to go to the PPT site to see more about the event, including the invitation.

The code for the widget is currently contained in the WordPress child theme for the Pine Tree Watchdog site (they use INN's Largo platform and that provides the parent theme), the relevant parts to this post are the widget itself and the custom page template for the PPT series page.

Here's how it works, and what I learned while building it.

How do you query an API?

The simple way to query an API is to find the right URL and hit it with a browser. It'll return some JSON code that looks like this:

Screenshot - 09132014 - 12_49_46 AM

But our readers prefer pretty tables. We do, too, which is why we parse that JSON to get information about the event. Slap some JavaScript into the browser window, load the page and go.

Except it's not that simple. We can't hit the API from the browser because, in addition to requiring an API key to limit access, the Sunlight Foundation APIs deny CORS requests.

CORS is a response to a response to a security threat. In order to prevent Cross-Site Request Forgery attacks, where a malicious website uses your credentials to gain access to another site, browser makers implemented the same-origin policy. Now, code on malicious sites can't access information on good webpages, but neither can good web pages access information on other good web pages.

In situations where both sites want to share information, browser and server developers agreed on the CORS mechanism. When code on a site like Pine Tree Watchdog requests information from the Sunlight Foundation PPT, the browser adds an HTTP header saying that the request originated on the Pine Tree Watchdog site. The Sunlight Foundation API response could include a corresponding HTTP header telling the browser that the Pine Tree Watchdog site is allowed to access the data.

But the response doesn't. Sunlight doesn't have unlimited bandwidth and server space to handle a good, thorough slashdotting. Denying CORS requests cuts down on the amount of information they have to serve.

Since the reader's browser can't retrieve this information, the PTW site does it for them. If the PPT API hasn't been queried in the last 30 minutes, the server will download the API response and save it to disk. Then the site parses that into an HTML table, and saves the table to disk. The HTML table gets placed inside the widget, and the widget is displayed to readers with some CSS that makes the table look like a list.

cache-the-thingsAll this caching happens in order to keep things snappy for readers. By caching the PPT API response, the server doesn't have to hit the API every time it wants to rebuild the list of events. And by caching the event listing HTML, it can insert that in the page instead of laboriously building the listing every single time.


The links to the politicians' names is a pretty cool feature. It checks to see if a tag exists in the WordPress database that matches the politician's name. If it does, then their name in the listing is made a link to all stories tagged with the politician.

In a development build, I had it automatically create new tags if the tag didn't exist. This was a little too much information for the readers, so it was removed before the widget launched. The pre-creation of new tags made things easier for the writers, but it gave readers a link to nowhere.

What I learned:

  • CORS feels generally useless
  • file i/o in PHP (for caching)
  • td { display:block; }
  • some ways of handling JSON in PHP
  • WordPress widget construction
  • think about the readers, not just the newsroom users

This was the last project I worked on during my summer internship with INN. Now I'm in Idaho on a 3-month emedia internship for the Progressive Publishing family of magazines.

Announcing Our New Intern: Welcome Will Haynes!

This week we're excited to welcome Will Haynes to the team as our new News Apps and Technology Intern.

will-haynesWill is a student studying computer science and economics at the University of Wisconsin-Madison.

He developed a passion for media, and the technology that drives it, after getting involved with UW’s independent student newspaper,The Badger Herald. There he served as web director before transitioning into the role of digital managing editor. This year, he will still serve as chairman of the Herald’s board of directors.

In addition to the paper, Will also spent a semester as a fellow for UW’s Center for Journalism Ethics. There he worked with the Center’s staff to design and develop a new WordPress presence for the organization. For INN, he will be working on Project Largo improvements and documentation, as well as helping member organizations with other projects.

He'll be with us through the academic year and you can reach him on Twitter @willhaynes.

Welcome to the team, Will!

An Internship In Review

Today wraps up my summer internship with INN. I started May 7, according to the folder of daily journals I started for this internship. That day, I wrote my job description:

  • Improve documentation of Largo for end users and developers
  • Contribute to Project Largo
  • Contribute to member projects
  • Other duties as assigned

It's actually a pretty good summary of what I've done.

I worked on improving the documentation for the Largo Project WordPress theme, before I started working on the Largo Project.

I learned that GitHub project wikis are secretly git repos that you can push to, and that it's possible to keep a GitHub repo for collaboratively working on the wiki.

I started a browser-based version of INN News Apps Developer Ryan Nagle's responsive table creation Python script, and brought it to a stable working version. Play with it on GitHub Pages.

I wrote a custom WordPress page template for an INN member. It uses custom post metadata to choose a category of posts and a title for that category, and renders those with some other posts in a page designed to be embedded in an iframe. It uses NPR's pym.js to make sure the iframe is the right size. I learned about pym.js from the responsive table project.

For a different INN member, I built a widget that queries the Sunlight Foundation Political Party Time API for fundraising events in their state. It shows a list of events and politicians benefiting from them, and stories written by the member about those events. The query response is cached to prevent hammering the API, and the widget itself is cached, to cut the number of times the expensive rendering operation has to run.

In between, I contributed CSS fixes to Largo and to INN member websites, tested the INN deploy-tools repository, and learned a lot of things about PHP and JavaScript.

If a paid internship learning web development tools and techniques while helping non-profit news organizations perform investigative journalism is your sort of thing, you should apply for INN's fall and spring internships. It doesn't really matter where you live or work from, as long as you have an internet connection and are willing to learn.

Next week, I'm moving to Idaho, to write for the Progressive Dairyman website for the semester. Follow my adventures on Twitter @benlkeith, or my occasionally-updated blog benlk.com.