Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Render 2017

Jessica
March 30, 2017

Render 2017

Slides from my talk at Render Conf in Oxford, UK in March 2017. I talk about Sheetsee.js, spreadsheets, and Glitch!

Jessica

March 30, 2017
Tweet

More Decks by Jessica

Other Decks in Technology

Transcript

  1. Spreadsheets, using tools so that making for the web is

    
 more approachable, easier, maybe fun? Let’s talk about
  2. Yes to DIY, No to Bottlenecks Making better use of

    existing tools so that cities can get things done and maintain sites themselves, avoiding IT Department bottlenecks.
  3. Magic WordPress Theme Open source, could be used by other

    cities and talked to a Google Spreadsheet. Staff in the budget department just needed to update the spreadsheet.
  4. :( sad face The project’s fate: the county rebuilt the

    site in .net, closed the source code and access to the raw data.
  5. :) happy face There was still a good ending: got

    a Mozilla OpenNews Code Sprint Grant to pull out the JavaScript from the project and make a standalone library. That became sheetsee.js!
  6. Spectrum of websites single static page,
 no data massive web

    app,
 lots of secure data SO MUCH SPACE
  7. Despite the tricks, there are hurdles — Hosting $ —

    Hosting service — Database — Settings — Collaborators — Non developers
  8. Spectrum of Websites single static page,
 no data massive web

    app,
 lots of secure data SPREADSHEETS
  9. Spreadsheets! Spreadsheets are free, no install, easy to use, easy

    to share. Yes, some limits: cells/column limits, Google bandwidth.
  10. Spreadsheet data Nice JSON you get from using Tabletop.js. Fruit

    Color Apple Red [ { “Fruit”: “Apple”, “Color”: “Red” } ]
  11. Public Spreadsheet You do need to publish your spreadsheet so

    that it can be reached, but you don’t have to make it editable. Each spreadsheet has a unique KEY, Tabletop uses this to fetch the contents.
  12. Sheetsee Modules sheetsee sheetsee-core sheetsee-tables sheetsee-maps sheetsee.js command line tool

    to build sheetsee.js in every build, basic data functions build sortable, searchable table make a map with popups full library and documentation site
  13. Sheetsee CLI npm install -g sheetsee cd my-cool-site sheetsee -t

    --save Bundles sheetsee-core, sheetsee-tables and mustache.js (and sheetsee- maps and leaflet.js if including maps).
  14. Use Tabletop.js Use Tabletop to send your spreadsheet data to

    a function: document.addEventListener('DOMContentLoaded', function() { var KEY = 'YOURSPREADSHEETSKEYHERE' Tabletop.init({key: KEY, callback: doStuff, simpleSheet: true}) }) function doStuff (data) { // Use Sheetsee! }
  15. Create a placeholder With both maps and tables you’ll create

    a placeholder div in your HTML. <div id=“mymap”></div> <div id=“mytable”></div>
  16. Sheetsee Maps One of *two* methods. Use this if you

    want geoJSON (and certain data from your spreadsheet in it), you don’t have to. var optionsJSON = ['name', 'breed', 'cuddlability'] var geoJSON = Sheetsee.createGeoJSON(data, optionsJSON)
  17. Sheetsee Maps var mapOptions = { data: data, mapDiv: 'map',

    geoJSONincludes: ['Name', 'Animal', 'Rating'], template: '<p>{{Name}}—{{Animal}}—{{Rating}}</p>', cluster: true, hexcolor: '#e91e63' } Sheetsee.loadMap(mapOptions)
  18. Sheetsee Tables var tableOptions = { data: data, pagination: 10,

    tableDiv: "#fullTable", filterDiv: "#fullTableFilter", templateID: "fullTable_template" } Sheetsee.makeTable(tableOptions)
  19. Sheetsee Tables You’ll need to make a template for how

    you want it to display. <script id="fullTable_template" type="text/html"> <table> <tr><th class="tHeader">City</th><th class="tHeader">Place Name</th></tr> {{#rows}} <tr><td>{{City}}</td><td>{{PlaceName}}</td></tr> {{/rows}} </table> </script>
  20. Sheetsee Tables Also! Add column sorting to your table with

    .theader classes in your table header cells.
  21. Sheetsee Core Sheetsee.getKeywordCount(data, keyword) Sheetsee.getKeyword(data, keyword) Sheetsee.getColumnTotal(data, column) Sheetsee.getColumnAverage(data, column)

    Sheetsee.getMin(data, column) Sheetsee.getMax(data, column) Sheetsee.getMatches(data, filter, column) Sheetsee.getOccurance(data, column)
  22. Beyond Basics You can use your spreadsheet data in other

    ways besides just spitting it out into a table.
  23. GitHub Pages — Free hosting of static or Jekyll sites.

    — Can now be hosted from any branch! — Supports HTTPS! — A forked site needs *one* commit before it’s hosted—make that
 changing a spreadsheet key, editor in browser (no dev env!).
  24. Glitch — Free hosting and servers for Node.js apps —

    In browser editor, collaborative editing! — Glitch Remix is like a GitHub Fork (it can also connect to GH) — FUN!
  25. spreadsheet.glitch.me API for getting your spreadsheet as JSON (uses Tabletop.js).

    spreadsheet.glitch.me/?key=YOURSPREADSHEETKEY You can also paste key into the site’s form.