This post started as a conversation with an INN member about how to turn a database into something searchable for readers. We talked about Datasette Publish, and custom solutions, but the conversation turned into a discussion of how they could build their own simple things, and from there how they could find people and resources to learn more.
And then we thought that other people would have similar questions, so here's what we've come up with on how to get started building news apps and building your own apps team.
C'mon let's go and play
Every snowman starts with a snowball. Do something small to learn the tools, and work your way up from there.
Start by reading the 2013 Source article on building apps on a shoestring. Pay attention not to the specific tools, but to the philosophies in them: static sites that don't depend on servers, replicatable pipelines for turning your data into HTML, and building configurability into your code so you can use the same tool for a different data set next time.
Realize that other teams are lot farther along than you are, and that's okay. They started small, too.
An interactives team isn't a movie. It's a movie studio, and the thing about movies is that anyone with a camera can make them. If all you have is a camera and a script, that's enough to make a simple film. If all you have is a website and some data, that's enough to make a simple chart.
Your first project doesn't have to be Snowfall. It's okay to just have static charts. Start small and work your way up.
How would you do this?
If you have feedback or advice or links on this blog post, let us know, and we'll do a roundup or recap of responses next week. Send an email at email@example.com or tweet us @innnerds.
Are you still there?
Maybe we should get a bunch of people who started interactives teams together for a panel about how they built the interactive teams and the tools. If you've started such a team, and are interested in participating, send me an email firstname.lastname@example.org and we'll put together a pitch for SRCCON or NICAR 2019.
As part of INN's support for the 2017 News Match campaign, we've released two WordPress plugins to help sites convert readers. News Match Donation Shortcode provides a donation form for your site to ease donations through the News Revenue Hub as part of the News Match campaign.
On your WordPress site, click on "Plugins" in the Dashboard menu. If you see an "Add New" button at the top of the page, click that.
If you don't see the "Add New" button or the "Plugins" menu, your user might not have permission to manage plugins on the site; you should contact your technical support and ask them to install News Match Donation Shortcode for you. Your site might require downloading the plugin ZIPs and uploading them via FTP instead of using WordPress' built-in plugin installation tools.
Configuring the plugin
The plugin's settings are at Settings > News Match Shortcode in the WordPress admin.
When you first enable the plugin, you'll want to configure it with your organization's name, your News Revenue Hub ID, the default donation amount, and the live and staging URLs of your News Revenue Hub form.
The settings is where you configure the donation levels to match your organization's membership levels. While the plugin comes with 4 default donation levels, you can easily define your own labels and donation levels. The defaults are: $0-$5 Friend, $5-$50 Ally, $50-$500 Champion, and $500+ Ambassador. If you want fewer donation levels, set the third level's upper donation amount to a very high amount, such as your org's dream budget, and make sure that the fourth level is more than that.
If you use Salesforce to track campaigns, you can set a default Salesforce campaign ID for the plugin in the plugin's settings. This can be overridden on a per-form basis by setting the sf_campaign_id attribute of the shortcode, like so: [newsmatch_donation_form sf_campaign_id="foo" amount="25"]
The shortcode in use
The default form of the shortcode uses buttons to select the donation level:
By adding type="select" to the shortcode, it appears like this:
A full list of shortcode arguments and examples can be found in the plugin's WordPress.org entry, but they're basically one-off overrides for your Salesforce campaign ID, your default donation amount, and the type of form.
The above screenshots use the plugin's default styles with non-default configuration. You can style the donation form using your site's theme's CSS, Jetpack’s Custom CSS Editor, or any other tool that allows you to define custom styles on your site. Guidance for these custom styles can be found in the FAQ section of the plugin's WordPress.org entry.
If you have questions about this plugin and integrating it with your WordPress site, contact email@example.com.
As part of INN's support for the 2017 News Match campaign, we've released two WordPress plugins to help sites convert readers. News Match Popup Basics provides a little guidance and some useful tools for using popups in your campaigns.
Creates a new popup with our recommended default settings, using the free Popup Maker plugin
Provides a way to disable popups on your donation pages
Provides a way to disable popups when readers click a link in your Mailchimp-powered newsletter
Let's walk you through installing the plugin and getting it set up.
Installing the plugin
News Match Popup Basics requires the Popup Maker plugin, so first we need to install that.
On your WordPress site, click on "Plugins" in the Dashboard menu. If you see an "Add New" button at the top of the page, click that.
If you don't see the "Add New" button or the "Plugins" menu, your user might not have permission to manage plugins on the site; you should contact your technical support and ask them to install News Match Popup Basics for you. Your site might require downloading the plugin ZIPs and uploading them via FTP instead of using WordPress' built-in plugin installation tools.
After clicking "Add New" you should be on the "Add Plugins" page. In the "Search plugins..." box, enter "popup maker" — you should see an entry named "Popup Maker™ – Best Rated" appear, by "WP Popup Maker." Click "Install Now" to install the plugin, and then click "Activate". You'll be sent to a page asking you to allow sending certain information to a third party. You can press the "Skip" button without any negative effects. Whether you choose to skip or accept, you'll be taken to the list of Popup Maker popups: none yet exist, and that's okay.
Go back to the "Plugins" page, and inn the "Search plugins..." box, enter "news match popup basics innlabs" and choose the presented popup named "News Match Popup Basics" by "innlabs" — that's our plugin. Install and activate it.
In the Dashboard menu, choose the "Popup Maker" item. This will take you back to the "Popups" page you saw earlier, but there should now be a draft popup named "News Match Default Popup." Click on it.
You'll see an editor page that looks rather like the default WordPress post editor, but with a number of exciting new boxes. You can read more about those boxes at the Popup Maker plugin documentation, which is thorough and well-illustrated.
Our default settings for the popup are these:
is not published by default, but requires you to publish it before it becomes active on your site
is the size “Large” from Popup Maker’s settings
appears at the center of the bottom of the reader’s screen
appears by sliding up from the bottom of the screen, over 350 milliseconds
has a “Close” button
does not prevent readers from interacting with the page by means of an overlay
does not have a title
automatically opens after 25 seconds on the page, because immediate popup appearances can be jarring
once dismissed by a reader, does not appear again for a year or until the reader clears their browser’s cookies, whichever comes first
appears on the front page of your site
uses Popup Maker’s default theme
You'll need to configure which pages the popup appears on, using the built-in conditionals feature. For disabling the popup on certain pages or in certain cases, read on in this blog post, or check out Popup Maker's paid extensions.
In addition to using Popup Maker themes, you can style popups using your site's WordPress theme's CSS, Jetpack’s Custom CSS Editor, or any other tool that allows you to define custom styles on your site.
What goes in a popup?
We recommend donation forms or newsletter signup forms. For a simple donation form that integrates with the News Match campaign, check out News Match Donation Shortcode.
Finding the News Match Popup Basics settings
From the WordPress Dashboard menu, under Popup Maker, choose "News Match Popup Basics." This is where you configure whether the plugin disables certain popups.
Disabling popups on certain pages
Donation pages should help people give you money, and should have as few obstacles to that goal as possible. Likewise, newsletter signup pages. Strip out ads, remove unnecessary headers, maybe even clean up your footer on these pages. Donation and signup pages should do one thing and do that well.
Popup Maker's free version includes a simple yet powerful Boolean conditionals system that determines on what pages popups appear, but that system only works on a per-popup basis. Preventing popups from appearing on a particular page requires checking every single popup on your site, and modifying their conditions. We've endeavored to make the process simpler.
In the News Match Popup Basics settings, check the box to enable donation page popup prevention, and add some URLs to the box. Each URL must be on its own line. You should remove the protocol from the start of the URL, so that https://example.org/ is entered as example.org/.
When a visitor goes to a page the URL of which matches one of the entered URLs, News Match Popup Basics will prevent Popup Maker from displaying any popups on that page. You can include URL fragments as well, so if you want to prevent popups on pages that have a common URL name, like every page that has donate in its URL.
Be careful with how general your URL fragments are. By "match" we mean that if the entire text on the line in the box can be found in the URL, it will match:
example.org/meow/ will only match example.org/meow/ and example.org/meow/woof/
/meow/ will only match example.org/meow/, example.org/meow/woof/ and example.org/2014/03/25/meow/
meow will match example.org/meow/, example.org/meow/woof/, example.org/2014/03/25/meow/, example.org/2017/10/25/adopt-chairman-meow-adorable/ and example.org/category/homeownership/
We named this feature "donation page popup prevention," but in reality it can be used to exclude popups on all sorts of pages.
In the WordPress Dashboard, under the “Popup Maker” menu item, on the “News Match Popup Basics” page, there is a checkbox that enables MailChimp suppression. There is also a text box to set the utm_source parameter. MailChimp automatically appends this URL parameter to outbound links in your emails if you have click tracking set up.
From one of the emails you have sent, find a link that contains a utm_source= parameter and copy the following argument text, up until any & character, into the text box. For example, a Nerd Alert newsletter sent by INN Labs contained a link that looked like this: https://example.org/?utm_source=Nerd+Alert&utm_campaign=4d4ecd9f68-EMAIL_CAMPAIGN_2017_10_06&utm_medium=email&utm_term=0_1476113985-4d4ecd9f68-421742753. From that URL, you would copy Nerd+Alert into the text box.
If you have multiple MailChimp signup forms on your site, suppression based on the HTML ID of the form will not work for you. You should add a class to all MailChimp forms in popups, and use that as the selector. For more details about this process, see the FAQ entry "Why does MailChimp popup suppression use #mc_embed_signup" at the plugin's WordPress.org entry.
News Match is back, and our team is working to help participating organizations take advantage of this unique and impactful opportunity. Read more about how we can help, and check back here every week for updates. We’ll be posting plugin release announcements, how-tos for configuring donation forms, best practices for user experience design, and advice on maximizing Google Analytics for donation campaigns. You won’t want to miss it.
When FEMA removed drinking water and power statistics from its page covering Puerto Rico's recovery, The Washington Post started graphing those stats. And FEMA started posting those stats again.
The Financial Times has created an eye-opening game based on real reporting, including interviews with dozens of Uber drivers, that shines a light on the realities of working in the gig economy. You're an Uber driver. Can you make your mortgage payment?
Do you develop or maintain database-reliant interactive websites? How will they be preserved for the future? Katherine Boss at New York University Libraries, and Meredith Broussard at the New York University Arthur L. Carter Journalism Institute are conducting a survey of news apps, to help figure out what the best ways to archive such projects are.
Kay: Designing, developing, and testing for multiple screen sizes has its challenges - including not being able to work with multiple devices at the same time. That’s why I was excited to read about XRespond, a tool made to simplify that process and give you an all-in-one overview.
RC led INN's Contributor Day presence, which focused on building the next edition of Largo.
Ben's lightning talk was about all of INN's plugins, starting with the popular ones and wrapping up with the ones we've built for other people.
Kay and Ben were WordCamp for Publishers organizers as well as INN representatives. Kay was part of the Denver team that handled events and logistics, and Ben was part of the publicity team that handled the website, social media updates, and photography.
You're invited to join us remotely for Contributor Day! The event kicks off tomorrow at 10:30 a.m. MT, and RC will be leading collaboration on Largo. Take a look at the issues on GitHub and jump in wherever you can!
RC: If you haven’t checked out the WP GraphQL project yet, here’s a great presentation on how and why you’d want to get started using it.
Ben: Jenn Schiffer's essay about not policing code ecosystems makes a good point: it's not a good thing for coders or for code ecosystems if people get chased out for not meeting some arbitrary bar of worthiness.
Julia: The Schools of Journalism dives into the varying communities in the journalism industry, the “interesting” times we live in, and ways to approach the future.
No Office Hours next week — we're all attending WordCamp for Journalists in Denver. If you're in town, come say hi 👋 – and be sure to join us for Contributor Day on Saturday, 8/19, to work on the next Largo release!
Pym Shortcode version 1.3.1 brings you the latest version of Pym.js, as well as the following improvements:
Adds an id="" attribute to allow setting of custom IDs on embeds, for Github issue #21. The id="" attribute is useful if you want to load a new embedded page inside the iframe and maintain Pym functionality.
Adds a class="" attribute to allow setting custom of classes on embeds, for Github issues #22 and #23. The class="" attribute allows you to, among other things, add layout classes to embeds so they take a different shape on your page.
Adds a default class name pym to all embed-containing <div> elements output by this plugin, and a filter pym_shortcode_default_class to allow changing the default class or removing it.