Source

Jump to site navigation Search this site

Features:

Ultralight CMSes Head to Head

The ups and downs of four simple CMSes in real newsroom uses

By Katie Zhu

Posted on:

The Chicago Tribune’s Saving Grace feature, powered by Tarbell

With the growing number of nerds in the newsroom, it’s only fitting that new technology patterns for building news applications have emerged. The latest rage? Ultralight content management systems.

The problem with traditional CMSes is simple. They weren’t designed to support the flexibility needed by interactive news applications.

Part of the popularity of these tools is due to their back-to-basics approach to web development. The modern CMS is incredibly good at doing things like managing users and structuring large amounts of fairly homogenous content, but it can often get in the way of tasks that would otherwise be fairly easy, like writing a self-contained JavaScript data visualization app. Another part of their popularity is that new projects incur little or no additional maintenance costs to your team. Publish to static HTML, move on.
—David Eads, Chicago Tribune

Whether you’re Team Python or Team Ruby (yeah!), newsroom developers choose their tools to make development easier, tweaking workflows to make reporting processes play nice with data journalism.

Ultralight CMSes are, in many ways, the product of hacking or infecting the CMS. Here’s a breakdown of a few popular ones, complete with setup instructions, pro/cons, and case studies.

Tabletop.js

Mother Jones’s New Quiz is built on Tabletop.js

From the Tabletop GitHub repo:

Tabletop.js takes a Google Spreadsheet and makes it easily accessible through JavaScript. With zero dependencies! It easily integrates Google Spreadsheets with Backbone.js, Handlebars, and anything else that is hip and cool. It will also help you make new friends and play jazz piano.

Tabletop.js “gives spreadsheets legs.” It’s an awesome library that performs well as a simple, maintainable CMS and datastore. It uses Google Spreadsheets as the backend, giving newsroom developers a way to extract structured data and plug it into one’s platform of choice. You can create dynamic web content using Tabletop and zero servers.

Tasneem Raja says using Tabletop has helped increase the data literacy of Mother Jones’ reporting staff, and spreadsheets have opened up new reporting possibilities in the newsroom.

Try Tabletop

All you need is a Google account. Sign into Google Drive and create a new spreadsheet.

Click File > Publish to web > Start publishing. Make sure to check the box next to “Automatically republish when changes are made.” This will make your spreadsheet public and accessible for data extraction.

Start a new project directory organized like so:




├── index.html

└── js

    ├── app.js

    └── vendor

        └── tabletop.js (Get this file from the Tabletop repo and save it here)

Open your index.html file and let’s write some code:

<!DOCTYPE html>
<html>
<head>
    <title>Tabletop Example</title>
</head>
<body>
    <ul id="copy"></ul>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="js/vendor/tabletop.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

Now you need to tell Tabletop your spreadsheet’s document key. Grab it from your spreadsheet’s URL: https://docs.google.com/spreadsheet/ccc?key=HI_IM_YOUR_DOC_KEY#gid=0

Tabletop takes care of the pipeline from your app to Google, but there’s still some JavaScript glue required. Create a file called app.js and add the following code to it:

$(document).ready(function () {
    Tabletop.init({
      key: 'PUT_YOUR_DOC_KEY_HERE',
      callback: function(data, tabletop) { 
        var i;
        for (i = 0; i < data.length; i++) {
          $('#copy').append(
            $('<li>', {
              text: data[i].key + ', ' + data[i].value
            })
          );
        }
      },
      simpleSheet: true 
    });
  });

Then open index.html in your web browser.

Case study: Mother Jones

The MoJo interactive team hearts Tabletop, and have built out a few templates for choose your own adventure, news quiz, and a mobile-friendly inline slider.

We already do a lot of work turning spreadsheet data into HTML / CSS / JS structures. This particular instance at the time, we were quite deep in a lot of guns data.
—Jaeah Lee, Mother Jones

Pros

  • Data is easily shared with everyone in the newsroom
  • Highly scalable
  • Simple architecture
  • Real-time updates (more or less)
  • Low barrier to entry
  • Easy to teach
  • Collaborative editing

Cons

  • Your data is in the hands of Google (potential issues with privacy and performance)
  • Tedious and manual work required for setup

Tabletop in the wild

Jekyll

From the Jekyll docs:

A simple, blog aware, static site generator. It takes a template directory (representing the raw form of a website), runs it through Textile or Markdown and Liquid converters, and spits out a complete, static website suitable for serving with Apache or your favorite web server.

Jekyll takes plain text and allows you to create HTML pages and serve them from GitHub Pages, so you don’t need a traditional content management system like you would with WordPress. Though Jekyll doesn’t require you to use git, it was built to integrate seamlessly with it. For newsrooms already using GitHub to host their code, this is a pretty natural choice.

Basically it works like this: you give Jekyll a source directory of files, and it turns this into a site directory, full of HTML and other static files. But note: Jekyll is not a server. It is a converter. You run it whenever you want to update your site, but doesn’t need to be running for your website to be live.

Jekyll’s got some rules when it converts your source into a website.

So what does this mean for the newsroom?

Jekyll’s really a blog generator. And though you can use it to prototype and for more than a basic blog, it’s also built for people with some familiarity with programming already. HTML, Markdown and YAML are fairly easy to work with if you’ve been into development. But for those with little to no programming experience, it’s not the most intuitive and still requires a learning curve. Furthermore, Jekyll is a Ruby gem, which requires users to set up their machines for Ruby development, another hurdle for non-programmers in the newsroom. While it might be a solid choice for a nerd team’s blog, it’s got some substantial limitations if you’re talking about implementing it is a de facto CMS middleman between news applications developers and reporters/editors.

To add content to a Jekyll site, you’d still have to go into the Markdown files, make your changes, and then push the code. This doesn’t really allow for a clean integration or separation of someone who’s responsible for content (editors) and those who are responsible for pulling and displaying the content (developers).

Pros

  • GitHub pages, easy to publish
  • Git support/version control
  • Very fast–serving static files rules
  • No need for debugging (there’s no live web app that has the possibility of crashing)
  • Ruby! (Though some would argue this is a con.)

Cons

  • Requires some development experience
  • Need familiarity with HTML, Markdown, YAML
  • GitHub experience would also make using this a lot easier
  • Not very flexible beyond lightweight blogs, informational sites, or documentation sites. “It doesn’t strike me as a great fit for news apps,” says David Eads, news developer at the Chicago Tribune.

Jekyll in the wild

Tarbell

Finding Care, built with Tarbell

From the Tarbell intro:

A very simple content management system—the Tarbell template uses Python Flask and Google Spreadsheets to create simple, static sites that can be baked out to Amazon S3 or your local filesystem.

Tarbell is sort of like Tabletop on steroids. Created by the Chicago Tribune’s News Applications team, the Tarbell template sets you up with an Amazon S3 publishing workflow (as opposed to the GitHub publishing workflow provided by Jekyll).

“Tarbell answers a few more questions than Tabletop, like wiring up spreadsheets, handling private access, and providing publication tools. Tabletop doesn’t do any of that,” Eads explains.

According to Eads, the team built a rig for a few projects before he got tired of working with so many copies of the same codebase, so they generalized that code into Tarbell.

Tarbell attempts to take a step towards greater integration of reporters and developers by offering a familiar user interface to reporters and giving developers and web-savvy news staff a fun little framework for building sites and apps. —David Eads

It provides more flexibility both in terms of content management and page layouts than Jekyll, since it wasn’t developed to be a blog generator. The template provides a basic, lightweight framework for building modern web apps–by baking out static sites to Amazon S3. You can manage content with Google spreadsheets, which is a great medium for collaboration and editing since the barrier to entry is very low.

Tarbell’s setup and configuration is simple enough, following a series of prompts, it will help you set up a brand new Tarbell project.

It makes it really easy to hit the ground running, since a Tarbell install will give you an app that’s outfitted with jQuery, Bootstrap, and templates.

Case study: Waterloo-Cedar Falls Courier

We’re increasingly trying to get away from the CMS as much as we can so there’s more possibilities. Tabletop is good for simple, quick hits. Tarbell gives you a templated app that’s ready to go. You can have base JS and CSS files that work with every project you have, and also tailor something specific to a given project. —Chris Essig, Waterloo-Cedar Falls Courier

Case study: The Chicago Tribune

On TribApps’ workflow:

We use Tarbell quite a bit, and have used parts of Tarbell in other projects. We certainly don’t use it for all projects, but we’ve used it for almost all of our editorial projects in the past six months. For “product” style apps (like user-generated content) and heavy data-processing, we still happily use Django. We’ve used it in a lot of situations: Elections, long-reads, small-scale applications, series landing pages, infographics. —David Eads

Pros

  • Built by a newsroom tech team, so features and functionality were crafted with this knowledge
  • Google Spreadsheets for content management (and all its benefits, like collaborative editing and live updates)
  • Hosting is cheap, reliable, and low maintenance

Cons

  • Requires full Python development environment and command line skills
  • Requires AWS knowledge
  • Doesn’t play nice with large datasets
  • Open source base template needs some work, says Eads
  • Reliance on Google (politically when it comes to sensitive data and practically when their API goes down)

Tarbell in the wild

Sheetsee

From Sheetsee’s docs:

Sheetsee.js is a JavaScript library, or box of goodies, if you will, that makes it easy to use a Google Spreadsheet as the database feeding the tables, charts and maps on a website. Once set up, any changes to the spreadsheet will auto-saved by Google and be live on your site when a visitor refreshes the page.

Sheetsee.js combines various JavaScript libraries to make it easy to map and visualize data from a Google Spreadsheet. Using Google Spreadsheets as the backend is great for ease of use, sharing, and collaboration.

I can see it being used in newsrooms that are using Google Spreadsheets to collect or collaborate on data for stories. Sheetsee makes it easy to hook up to that spreadsheet, filter and visualize the data. —Jessica Lord

It uses Tabletop as one of the middleware JS libraries, but takes it one step further and helps you to do something with the data once it’s given back to you. “You’ve also got a lot of potential with it–there are so many ways you can cleverly use the data from the spreadsheet: like creating links with data from cells, images from URLs in cells and plugging cell contents into Google Map queries,” Lord says.

Pros

  • Google Spreadsheets—really easy to share, edit, and collaborate
  • Data viz support makes it really easy to create maps
  • Easy to set up if you’re familiar with HTML, CSS, and pasting JavaScript

Cons

  • Use cases for various types of visualizations are great, but if you want something more, this might not be the library for you
  • Dealing with large datasets can be slow

Sheetsee in the wild

People

Credits

Recently

Current page