PDX JS Admirers Lightning Talk, 2015.10.28

It is, apparently, possible to prepare a talk from scratch in nineteen minutes, if it's a five-minute lightning talk and there happens to be some time free in your meetup's lightning talk session. Here is a transcript-like document of one I just gave at pdxjs about a couple of semi-obscure but highly useful things in the Javascript universe:

Javascript Heredocs!

There is a nasty rumor going around that Javascript doesn't have heredocs. This is totally false, although I'll admit the syntax is a bit odd and there's a small bit of glue needed:

function hereDoc(f) {
  var s = f.toString();
  return s.slice(s.indexOf("/*")+2, s.lastIndexOf("*/"));

console.log(hereDoc(function () {/*
My name is:

And I say Javascript does so have
these "heredoc" things.

Output, when run:

My name is:

And I say Javascript does so have
these "heredoc" things.

Before you freak out and run away, ask yourself: when you're writing a prototype and sticking handlebars templates inline, wouldn't you rather type this than make a whole separate script tag with its own id and type="text/x-handlebars-template" cruft? You can even have lexically (well, function, this is Javascript) scoped templates.

Server-Sent Events and EventSource

EventSource (MDN, WHATWG) is a dead-simple method of getting push event notifications in the browser using a reasonably well-supported (Google for polyfills - many exist) browser-native API. Here's a hopefully self-explanatory code sample:

var es = new EventSource('/ev.es'); // your URL here
es.onmessage = function(e) {
es.onerror = function() {

What makes this worth paying attention to over something like WebSockets is how dead-simple the protocol is: it's just a formalization of long-polling (with attendant benefits in the browser like the browser being able to garbage-collect old events instead of having the ever-growing long-poll 'document' eat more and more RAM).

Even better, the transport format is even more stupidly simple (in fact, the following snippet is actually the content of a static file I served from lsh.io's static web server for my 'demo'):

id: 1
data: this is event A

id: 2
data: this is event II
data: and it has two lines

id: 3
data: this is event three

That is, the above snippet represents three events, with ids of 1, 2, and 3 respectively, and corresponding data fields. The whole format is just field:value, blank lines delimit events, and if multiple lines in an event have the same field, their values get concatenated together. Even better, if the connection drops, the browser will reopen it automatically and send a header telling you what the last id it saw was, allowing your server to quickly figure out where in the stream to pick up.

All put together, this means you can build a push-notification backend in maybe a dozen lines, can have it go right through your load balancer like it's any other GET request, and have an event stream format that's easy to consume from non-browser clients.

Coming soon: blog posts on my remote clipboard and chat systems written in < 500 lines of bash that use the format internally.