ready

Author: Jessica Lord

buildpage.js

@@ -15,7 +15,7 @@ cpr('./demos', './site/demos', function(err, files) {
   })
 })
 
-fs.readFile('new-readme.md', function(err, file) {
+fs.readFile('readme.md', function(err, file) {
   if (err) return console.log(err)
   var name = "index"
   var content = file.toString()
@@ -50,16 +50,16 @@ function applyTemplate(html, name) {
   var rawTemplate =  fs.readFileSync(file).toString()
   var template = hbs.compile(rawTemplate)
   var page = template(content)
-  writeFile(page, name) 
+  writeFile(page, name)
 }
 
 function writeFile(page, name) {
   if (name === "index") {
-    return fs.writeFileSync('./site/' + name + '.html' , page)  
+    return fs.writeFileSync('./site/' + name + '.html' , page)
   }
   mkdirp('./site/docs', function (err) {
     if (err) return console.error(err)
-    fs.writeFileSync('./site/docs/' + name + '.html' , page)  
+    fs.writeFileSync('./site/docs/' + name + '.html' , page)
   })
 }
 
@@ -71,4 +71,3 @@ function changeExtensions(html, name) {
   var newHtml = html.replace(/\.md/g, '.html')
   return newHtml
 }
-

demos/demo-chart.html

@@ -11,7 +11,6 @@
   </head>
 
   <style>
-    body {font-family: Helvetica;}
     p {font-family: Baskerville, Libre Baskerville, Georgia, serif;}
     #pennies.axis {shape-rendering: crispEdges;}
     #pennies.x.axis .minor, #pennies.y.axis .minor {stroke-opacity: .5;}
@@ -20,7 +19,7 @@
     #pennies .x.axis line {stroke: #acacac; stroke-opacity: .75;}
     .bigg {-webkit-transition: all .2s ease-in-out; -webkit-transform: scale(2);}
     path.chartLine {stroke: #14ECC8; stroke-width: 3; fill: none;}
-    div.tooltip {position: absolute; text-align: left; padding: 4px 8px; width: auto; font-size: 10px; height: auto; background: #fff; border: 0px; pointer-events: none;}
+    #pennies div.tooltip {position: absolute; text-align: left; padding: 4px 8px; width: auto; font-size: 10px; height: auto; background: #fff; border: 0px; pointer-events: none; font-family: Helvetica, Arial, sans-serif;}
     circle {fill: #fff; cursor: pointer;}
     path.domain {fill: #CCF4FF;}
   </style>

docs/basics.md

@@ -1,27 +1,39 @@
 # Spreadsheets as Databases
 
-Spreadsheets are a great _lightweight_ database. Google Spreadsheets in particular are easy to work with and share, making this unlike most traditional database set ups. That being said, traditional databases are great for bigger, more secure jobs. If you're storing lots and lots and lots of information, or storing sensitive or complex information -- the spreadsheet is not for you. But if you're working on small to medium sized personal or community projects, try a spreadsheet! 
+Spreadsheets are a great _lightweight_ databases. Google Spreadsheets in particular are easy to work with and share, making this unlike most traditional database setups. That being said, traditional databases are great for bigger, more secure jobs. If you're storing lots and lots and lots of information, or storing sensitive or complex information -- the spreadsheet is not for you. But if you're working on small to medium sized personal or community projects, try a spreadsheet!
 
 ## The Short & Sweet
 
-1. Link to Sheetsee.js, [tabletop.js](https://github.com/jsoma/tabletop/) and [jquery](http://www.jquery.org) in your HTML head.
+1. Link to Sheetsee.js, [tabletop.js](https://github.com/jsoma/tabletop/) and [jQuery](http://www.jquery.org) in your HTML head.
 2. Create a place holder `<div>` in your HTML for any chart, map or table you want to have.
 3. Create templates for tables in `<script>` tags.
-4. Copy the script tag that waits for the document to load and then initializes tabletop and runs your functions when it's returned with the spreadsheet data.
-6. Use the Sheetsee.js functions that you need for the maps, charts and tables you desire. Style it up with some CSS.
+4. Inside of a `<script>` tag initialize Tabletop.js. It waits for the document to load and then initializes tabletop and calls back a function when it has returned with the spreadsheet data.
+```JAVASCRIPT
+document.addEventListener('DOMContentLoaded', function() {
+    var gData
+    var URL = "YOURSPREADSHEETSKEYHERE"
+    Tabletop.init( { key: URL, callback: callback, simpleSheet: true } )
+})
+```
+6. Define the function that Tabletop.js calls when it returns with the data. This function will contain all the Sheetsee.js functions that you use for the maps, charts and tables you desire. Style it up with some CSS.
+```JAVASCRIPT
+function callback(data) {
+    // All the sheetsee things you want to do!
+}
+```
 5. Set it and forget. Now all you need to do is edit the spreadsheet and visitors will get the latest information every time they load the page.
 
 ## Bare Minimum Setup
 
-Ignoring some HTML things to conserve space, you get the point. This gives you a page with a map of your spreadsheets points.
+Ignoring some HTML things to conserve space, you get the point. This is a basic setup.
 
 ```HTML
 <html>
   <head>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js"></script>
-    <script type="text/javascript" src='dist/sheetsee.full.js'></script>
-    <link rel="stylesheet" type="text/css" href="css/sss.css"> 
+    <script type="text/javascript" src='js/sheetsee.js'></script>
+    <link rel="stylesheet" type="text/css" href="css/sss.css">
   </head>
   <body>
   <div id="placeholder"></div>
@@ -31,14 +43,13 @@ Ignoring some HTML things to conserve space, you get the point. This gives you a
   </script>
 
   <script type="text/javascript">
-    //  document.addEventListener('DOMContentLoaded', function() {
-    //  	var gData
-    //  	var URL = "YOURSPREADSHEETSKEYHERE"
-    //		Tabletop.init( { key: URL, callback: myData, simpleSheet: true } ) 
-    //	}) 
-    // function myData(data) {
-       // All the sheetsee things you want to do!
-    // }
+    document.addEventListener('DOMContentLoaded', function() {
+        var URL = "YOURSPREADSHEETSKEYHERE"
+        Tabletop.init( { key: URL, callback: myData, simpleSheet: true } )
+    })
+    function myData(data) {
+        All the sheetsee things you want to do!
+    }
   </script>
   </body>
 </html>
@@ -60,15 +71,13 @@ There shouldn't be any breaks or horizontal organization in the spreadsheet. But
 
 ![sheetsee](https://raw.github.com/jllord/sheetsee-cache/master/img/hexcolors.png)
 
-You must add a column to your spreadsheet with the heading _hexcolor_ (case insensitive). The maps, charts and such use colors and this is the easiest way to standardize that. The color scheme is up to you, all you need to do is fill the column with hexidecimal color values. This [color picker](http://color.hailpixel.com/) by [Devin Hunt](https://twitter.com/hailpixel) is really nice. #Funtip: Coloring the background of the cell it's hexcolor brings delight! 
+You must add a column to your spreadsheet with the heading _hexcolor_ (case insensitive). The maps, charts and such use colors and this is the easiest way to standardize that. The color scheme is up to you, all you need to do is fill the column with hexidecimal color values. This [color picker](http://color.hailpixel.com/) by [Devin Hunt](https://twitter.com/hailpixel) is really nice. #Funtip: Coloring the background of the cell it's hexcolor brings delight!
 
 ### Geocoding
 
 If you intend to map your data and only have addresses you'll need to geocode the addresses into lat/long coordinates. Mapbox built a [plugin](http://mapbox.com/tilemill/docs/guides/google-docs/#geocoding)
  that does this for you in Google Docs. You can also use websites like [latlong.net](http://www.latlong.net/) to get the coordinates and paste them into rows with column headers _lat_ and _long_.
 
-> image of lat and long column headers
-
 ### Publishing Your Spreadsheet
 
 ![sheetsee](https://raw.github.com/jllord/sheetsee-cache/master/img/publish.png)
@@ -77,7 +86,7 @@ You need to do this in order to generate a unique key for your spreadsheet, whic
 
 ![sheetsee](https://raw.github.com/jllord/sheetsee-cache/master/img/key.png)
 
-You should have an address in a box at the bottom, your key is the portion between the = and the &. You'll retrieve this later when you hook up your site to the spreadsheet.
+You should have an address in a box at the bottom, your key is the portion between the = and the &. You'll retrieve this later when you hook up your site to the spreadsheet. _Actually, you technically can use the whole URL, but it's so long..._
 
 ### CSS
 

docs/tips.md

@@ -4,15 +4,15 @@ A few things to think about beyond charts, maps and tables.
 
 ## ICanHaz.js
 
-You can use templates for more than just tables. Use them to create lists `ol`, `ul`; array of images... You'll need a placeholder `<div>` in your HTML, a `<script>` for your template and a script to call ICanHaz from your Tabletop.js callback.
+You can use templates for more than just tables. Use them to create lists `ol`, `ul`; array of images... You'll need a placeholder `<div>` in your HTML, a `<script>` for your template and a script to call ICanHaz from your Tabletop.js callback. For a live example, see the bottom photo grid of the [sheetsee-table demo](../demos/demo-table.html).
 
 _HTML_
 
 ```HTML
 <div id="divID"></div>
 ```
 
-_Tempalte_
+_Template_
 
 ```JavaScript
 <script id="divID" type="text/html">
@@ -22,7 +22,7 @@ _Tempalte_
 </script>
 ```
 
-_Tempalte_
+_Script_
 
 ```JavaScript
 <script type="text/html">
@@ -32,7 +32,7 @@ _Tempalte_
 </script>
 ```
 
-_non-table template_
+_non-table example output_
 
 ![lib](http://jlord.s3.amazonaws.com/wp-content/uploads/lending-ss.png)
 
@@ -64,6 +64,33 @@ With a some CSS and such, the resulting website has a table with the hack spots
 
 When the page builds, it creates the correct link for each row. When someone clicks on the buttons it takes them directly to the Google Map search result for that address. BAM!
 
-# IFTTT
+## IFTTT
 
-[Ifttt.com](http://www.ifttt.com) offers lots of options sending data from your actions (Twitter, Instagram, GitHub, Pocket...) to Google Spreadsheets.
+[Ifttt.com](http://www.ifttt.com) offers lots of options sending data from your actions (Twitter, Instagram, GitHub, Pocket...) to Google Spreadsheets.
+
+## Row Numbers
+
+When Tabletop.js returns your spreadsheet data, it adds a key/value of `rownumber`. This is great to use when you need to uniquely match or find a row in your data.
+
+## Images
+
+Your spreadsheet can contain URLs to images which you can use to display the images on the page you build. Your template would look something like this:
+
+```HTML
+<img src='{{imgurl}}'/>
+```
+
+## Data as Classes
+
+You can use your data as classes to style with CSS. For instance, if you had data about recipes and a column called 'Taste' that contained either 'savory' or 'sweet'. In a table of the recipes you could do something like:
+
+```HTML
+<tr><td class="{{taste}}"></tr>
+```
+
+Then in your CSS:
+
+```CSS
+td .savory {}
+td .sweet {}
+```