10/26/2016 - 11:52 AM

Building things with Tabletop.js and Handlebars.md

Building things with Tabletop.js and Handlebars.js


Maybe you've used pre-packaged vendor tools to create digital news presentations, but you aren't quite ready to tackle full-stack programming, database management and server setup.

Maybe you're hoping reporters will learn how keeping structured data about their beat can benefit the organization.

Or maybe you're looking for a tool that help organize/display information when that breaking news event happens.

Enter tabletop.js and handlebars.js, two little JavaScript libraries that play well with one another and play well with .

The workshop/panel/interactive/session proposes to:

  • Show examples of work using tabletop & handlebars by Mother Jones, the Texas Tribune and other news organizations
  • Explain how a Google Spreadsheet can power a Choose Your Own Adventure interactive, a chart or a timeline, an engagement project.
  • House structured data that can be put into play when the news warrants.


Some examples of work done with Tabletop.js, Handlebars.js or both.

Mother Jones: You Might Be the 47 Percent If: http://www.motherjones.com/politics/2012/09/charts-47-percent-romney-tax-data

MoJo's Eco-Doom Headline Generator: http://www.motherjones.com/environment/2012/12/mother-jones-fake-headline-generator

Mother Jones: Our list of mass shooting victims in 2012: http://www.motherjones.com/politics/2012/12/mass-shootings-victims-2012

Blog Post: Behind The Story: Mother Jones and the 47 percent: http://www.ire.org/blog/on-the-road/2012/09/21/behind-story-mother-jones-and-47-percent/

Blog Post: Some Thoughts After a Couple Months With Tabletop and Handlebars: http://blog.chrislkeller.com/some-thoughts-after-a-couple-months-with-tabl/

Mother Jones: Make a news quiz with Tabletop.js: http://motherjones.github.io/newsquiz/index-basic.html

SCPR: The search for Christopher Dorner http://projects.scpr.org/static/timelines/christopher-dorner-timeline/

Mother Jones: "Choose Your Own Adventure" style presentations: http://www.motherjones.com/politics/2012/05/citizens-united-amendment-flowchart

Texas Tribune: "Choose Your Own Adventure" style presentations: http://www.texastribune.org/library/data/interactive-should-texas-expand-medicaid/

Texas Tribune: Whom Do Lawmakers Support in House Speaker Faceoff? http://www.texastribune.org/library/data/house-speaker-rep-pledges/

Texas Tribune: Tracking Texas' Gun Legislation http://www.texastribune.org/library/data/track-83rd-gun-bills/

Texas Tribune: Sequester Cuts by State http://www.texastribune.org/library/data/texas-sequester-cuts/

SCPR: #DearMayor: What should LA's new mayor work on first? http://projects.scpr.org/static/interactives/la-mayors-race/dear-mayor/

Blog Post: Tabletop.js to searchable datatable: http://projects.chrislkeller.com/demos/tabletop_to_datatables

Blog Post: Why I love Tabletop.js but don't use it in production https://gist.github.com/jsvine/3295633

How does your submission contribute to the diversity of conference programming?

This panel/workshop/session will offer an intro to a middle ground for folks who have used pre-packaged vendor tools for creating web presentations, yet aren't ready to tackle full-stack programming, database management and server setup.

This group wants to make creative, dynamic -- and of course newsworthy -- interactive projects, and tabletop.js and handlebars.js can help them do that.

The right balance might be a 10,000 foot overview of a few basic programming concepts -- retrieving information with javascript and displaying it on a page -- that can be re-used and improved upon, and a deeper discussion of structuring the project from the outset.