nicolashery

Building a web app without a framework

Rough draft exploring the possibility of building a web app without a framework, picking and choosing from small & focused pieces, a la Unix.

Tools

• Package manager: npm (and Bower?)
• Build tool: Grunt, Browserify

Packages/Modules

nicolashery

// Resolving a deferred created by AngularJS' $q, in an async function outside of Angular (ex: setTimeout)
//
// See:
// https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply()
// http://stackoverflow.com/questions/16066170/angularjs-directives-change-scope-not-reflected-in-ui/16066306#16066306
// https://github.com/angular/angular.js/blob/master/src/ng/timeout.js

// Using AngularJS' $q (1.0.7)
function testDeferredAngularSync() {
  var deferred = $q.defer();

nicolashery

Elasticsearch: updating the mappings and settings of an existing index

Note: This was written using elasticsearch 0.9.

Elasticsearch will automatically create an index (with basic settings and mappings) for you if you post a first document:

$ curl -X POST 'http://localhost:9200/thegame/weapons/1' -d \
'{
  "_id": 1,

nicolashery

// Change variable names to another naming convention
//
// Thanks to Oliver Caldwell for the inspiration
// http://oli.me.uk/2013/09/25/grabbing-elements-from-the-dom/

// 'hello_world' -> 'helloWorld'
function snakeToCamelCase(name) {
  return name.toLowerCase().replace(/_(\w)/ig, function (match, hump) {
      return hump.toUpperCase();
  });

nicolashery

// Usage:
// cat customers_raw.json | node process_customers > customers.json

// https://github.com/dominictarr/JSONStream
var JSONStream = require('JSONStream');
// https://github.com/rvagg/through2
var through2 = require('through2');

process.stdin
.pipe(JSONStream.parse('*'))

nicolashery

/* Ink file picker encoded security policy and its signature with Node.js

https://www.inkfilepicker.com/
https://developers.inkfilepicker.com/docs/security/

Usage:

    ink.encodePolicy({
      handle: 'KW9EJhYtS6y48Whm2S6D',
      expiry: 1508141504

nicolashery

Click, hold, and drag chart background to pan left & right. When you see the "More" button, click to load next page of data.

Problem

I put this together while trying to find a simple solution to the following problem and contraint:

• Visualize a potentially large set of timeseries data (stored behind an API)
• Render fast, stay lean, and don't take up too much browser memory or computation

The paging means that we're always working with the same amount of data in memory (in this example, 1 day of data), and that we're allowed to explore as far back/forward in time as we like. I found this solution simple and easy to work with, but we could imagine something fancier like automatically fetching and rendering the next chunk of data when we reach the edge.

nicolashery

dist:
	browserify \
		--external lodash \
		--external moment \
		--require ./index.js:robot \
		> bundle.js
	cat umd-head.js bundle.js umd-tail.js > robot.js

nicolashery

DEPRECATED: See https://gist.github.com/nicolashery/9414d2357258718891e3

Pressing "space" a bunch of times, I expect main to receive only one "key" message on the spaceCh, but it receives 2?

nicolashery

// https://github.com/jlongster/js-csp
// Throttle ported from:
// https://gist.github.com/swannodette/5886048

var csp = require('js-csp');
var chan = csp.chan;
var go = csp.go;
var put = csp.put;
var take = csp.take;
var timeout = csp.timeout;