CreateInTO February 2015 – Gathering v20.0 – The Building Things Edition

Headless.io by Patrick Schroen

  • ever stream music from your home NAS to speakers in bar via a cellphone tethered laptop? Patrick Schroen does!

  • headless.io is a framework to use js to make devices chat with each other, a server and IDE to run and edit nodejs scripts from anywhere.

  • Chrome is the only browser that allows web socket connections over unsigned ssl connections.

  • Raise the Pride (an installation with an actual flag which raised and lowered via electric motor according to sentiment on Twitter) was Patrick’s first production use of the script. Big success. http://raisethepride.ca

Wattage with Peter

Sweet preview of stuff to come! The content we saw is now on the company website. The goal is to become the Github + Esty of hardware.

Gathering v20.0 – The Building Things Edition

Wednesday, Feb 25, 2015, 7:00 PM

Handlebar
159 Augusta Avenue Toronto, ON

87 Creators Went

Join us at Handlebar for our monthly gathering of creative developers, designers, hackers, makers and more. This month we look at projects that connect the web with the world and that aim to make hardware development even more accessible.Patrick SchroenHeadless Web Part 2: #RaiseThePride Under the Hood Patrick will take us through a framework h…

Check out this Meetup →

WB Lift Monitor with Kibana and ElasticSearch

View source code on GitHub

I decided to try loading data from https://secure.whistlerblackcomb.com/ls/lifts.aspx into ElasticSearch, and view it in Kibana 3 for fun. nodejs handles downloading the info and putting it into ElasticSearch, and runs Express to serve the static Kibana pages. You can launch your own instance on Heroku with this button:

Deploy

WB Lift Monitor Screenshot

Stuff I learned making this

Kibana isn’t great for this purpose

Overlapping lines on graphs hide data. Users can’t tell exactly which lifts are closed by looking at the graphs because the last queried lift covers up the other lines at the same Y value.

Kibana rounds numbers to whole numbers, so the speed graph/histogram loses precision. Combine that with the overlapping lines mentioned above, and the graph becomes less useful. I had to multiply speeds by 10 before loading them into ElasticSearch (speeds are in dm/s instead of m/s), otherwise all the lifts appear only have about 4 different speeds in the graph.

Still, looking at the colourful squiggly lines is fun during opening and closing time on weekends.

Line breaks are weird

The hardest part of this was making .profile.d/kibana-config.sh work. I kept running into issues with line breaks ending up in the login:password string that gets base 64 encoded and used in the Authorize HTTP header, which lead to lots of 401 Forbidden errors when Kibana tried to access ElasticSearch.

Some bash commands

curl -X DELETE 'https://name:[email protected]/index-name'
 
curl -X POST 'https://name:[email protected]/index-name'

These work great together to remove and recreate an index. Very handy when you to clear data out of 1 ElasticSearch index.

BONSAI_URL=https://name:password@server-name.bonsai.io npm start

When working on my dev machine, I used this to start node with the same BONSAI_URL environment variable set that Heroku has.

Heroku is fun

How cool is this button?

Deploy

Things to note when you deploy this:

  1. The default time range in the Kibana dashboard is 6 hours, so it takes ~15 minutes to save enough data for the graphs to populate.
  2. If this runs on a free dyno, the process that scrapes data and serves Kibana will sleep if it doesn’t receive any HTTP requests, and no data will be scraped. No data means blank spots in the graphs. You can refresh the page with the browser’s refresh button (not Kibana’s refresh button, which only makes a request to the ElasticSearch server), or set up another service to ping the app’s URL occasionally to stop the process from sleeping.

Other stuff to add?

Better colours for queries

This gradient scale might be fun. Valley lifts in green, mid-mountain in white, alpine in blue.

Maybe Whistler and Blackcomb lifts could have slightly different tints?

ngToronto Angular Meetup notes – January 2015

Promise-based architecture by Yuri

slides

  • think of promises as wrappers around uncertain results
  • promises separate defining a request and response handler (callback) at the same time.
  • writing functions that accept promises as arguments and return promises, you can make something that almost looks like synchronous code

Check the table in the presentation for useful definitions of promise behaviour (“when the callback…”)

Avoid $q.defer, Denodify instead

Trivial Promises

  • $q.when(x) returns an ok promise
  • $q.reject(e) returns a rejected promise

Stay consistent

  • functions should never ‘sometimes’ return a promise. Always return a promise, or never return a promise. See $q.when and $q.reject
  • return a promise if you aren’t sure whether code will eventually be async or not async

Avoid Optimistic Code

  • optimistic code is code where you assume that data will eventually be loaded
  • ask for a promise instead, even if you think the data loaded already

Neat things with promises


Hexo + AngularJS by Matias

Slides and Code

Hexo is:

Static sites are good because:

  • Host on AWS S3 (cheap and fast) and CloudFlare (even faster!)
  • You get a local copy of your site that’s always up to date by default. Your writing happens locally, and is saved in version control

Hexo is good because:

  • Hexo rebuilds pages and sites quickly, hexo server command watches for content changes and live-reloads them in your browser while you are writing posts
  • posts are written in markdown with a small YAML header
  • your content can live as files in a Git repo, and custom theme in another Git repo (possibly a private repo)
  • templates use common js templating formats – ejs, jade
  • uses excellent tools like Warehouse.js
  • supports custom pages too (not just posts)

How do I handle dynamic behaviour without a backend?

3rd party services and more JS!

Angular idea

How about capturing all internal link clicks using an Angular directive, and replacing the default behaviour with pushstate, an AJAX call to load the requested page, and an animation to load the content into the current page? That gives you even faster page loads and room to animate content coming and going. Yearofmoo.com is doing this now.

AngularJS Service Architecture

Wednesday, Jan 28, 2015, 7:00 PM

Mozilla Community Space
366 Adelaide St. W, Suite 500 Toronto, ON

180 Members Went

Join us for the first AngularJS Toronto meetup of 2015! Mozilla will host us and Cetaris & rangle.io will provide beer and pizza.First Talk: Promise Based Architecture – Yuri Takhteyev CTO of rangle.io  (@qaramazov)Yuri is a former faculty member at the University of Toronto, and a published author, whose interests span software architecture and …

Check out this Meetup →