CHS-TONIGHT, PART 2: LEVELDB AND HTML GENERATION -or- HOW TO BORE PEOPLE WHO DON'T PROGRAM (AND SOME WHO DO) TO DEATH

Ok! Welcome back to this multipart walkthrough of how chs-tonight works. If you missed part one, read it here. Otherwise, read on:

So, last time we had some nifty objects full of event data for each venue. But now what do we do?

LevelDB is a...well, I'll let the docs speak for themselves:

LevelDB is a simple key/value data store built by Google, inspired by BigTable. It's used in Google Chrome and many other products. LevelDB supports arbitrary byte arrays as both keys and values, singular get, put and delete operations, batched put and delete, bi-directional iterators and simple compression using the very fast Snappy algorithm.

Great, very accessible. Basically, LevelDB is a very lightweight, simple key-value based database that, in my experience, is pretty hassle-free and extremely easy to set up and get going. After doing

$ npm install levelup leveldown

you require levelup, which will automatically create a db directory in whichever directory you specify (in __dirname by default). You pass this db path into levelup and can get going from there. So, for example:

var levelup = require('levelup')
var db = levelup('./db')

db.put("fartCount", 12, function(err) {
    console.log("12 is a lot of times to fart")
})

And then to retrieve the data:

var levelup = require('levelup')
var db = levelup('./db')

db.get("fartCount", function(err, value) {
    // value === 12
})

Simple. For chs-tonight, the key structure is set up like this:

show.date+'!'+show.venue+'!'+show.title

which would translate to something like this:

2015-08-19!Tin Roof!Bingo!

That way, we can search for date ranges like this:

var date = moment()
var today = date.toISOString().slice(0,10)
var nextWeek = date.add(7, 'days').toISOString().slice(0,10)

db.createReadStream({gte: today, lt: nextWeek})

You can see exactly how I used LevelDB in chs-tonight on github

The HTML generation is incredibly simple, and I'll speed through it because this post is long enough already and I have some company coming over, so I need to rest my beer-opening hand before he gets here.

We start out with an array of shows, which we sort twice-- first to group shows by venue, then to group shows that happen on a specific date (tonight, duh). The tonight array is an argument in a function that contains the boilerplate HTML stuff, doctype, title, linking to the css file and the font (I chose the Google font Quicksand, which I'm a pretty big fan of. I originally wanted something monospaced, but we'll get into this more in PART 3: ACHEIVE HIP MINIMALIST STYLES BY NOT HAVING FUN). Then it iterates through the shows in the tonight array. Check it out:

html += "<li><div class='venueName'><h2><a href='"+show.venueUrl+"' target='_blank'>"+show.venue+"</a></h2></div>"
if(show.url) {html+="<h3><a target='_blank' href='"+show.url+"'>"+show.title+"</a></h3>"}
else {html+= "<h3>"+show.title+"</h3>"}
if(show.time) {html += "<span>Time: "+show.time+"</span><br />"}
if(show.price) {html += "<span>Price: "+show.price+"</span><br />"}
if(show.details) {html += "<span>Details: "+show.details+"</span><br />"}
html += "</div></li>"

All those ifs are basically failsafes because not every venues lists all the info I want the page to display. So instead of getting a thousand undefined errors because The Sparrow doesn't list prices for their shows.

Then it does the same thing to all the other arrays, but with an extra header tag with the venue name.

Alright, my buddy's here so I'm gonna wrap this up. Tweet at me with questions, concerns, etc. and tune in next time for CHS-TONIGHT, PART 3: ACHEIVE HIP MINIMALIST STYLES BY NOT HAVING FUN!

08-18-2015