Ember.js night with Full Stack Toronto

I think the location is a secret.

Jasna gave a live-coded demo of using Ember to make requests to a RESTful API to do CRUD operations and display the results. Ember is an opinionated, batteries-included framework. It has more opinions than Angular when comes to data modelling.

Vikram talked about his experience working with Ember.js at LinkedIn. I wrote down some words:

  • JSON API is a specification for JSON responses from servers. It exists to stop people from arguing about how to format arrays and objects and data in HTTP responses. Just stick to the specification and you’ll probably be OK.
  • Ember Engines are little composable chunks of applications that come together to form bigger applications. An Ember Engine has a lot in common in an Ember Application, but it can’t run on its own or control a router.
  • Glimmer 2 is a new faster renderer for Ember Applications
  • LinkedIn had to figure out server-side rendering for Ember for some pages that had to be visible to search engines & crawlers. Ember now supports SSR with FastBoot.

Ember.js – Feb FSTO Meetup

Wednesday, Feb 8, 2017, 6:00 PM

18 People Went

Check out this Meetup →

February 2016 Toronto Web Performance Group meetup

We met at Shopify‘s office.

David Bokan from the Google Chrome team in Waterloo talked about scrolling performance in Google Chrome

slides

David Barreto talked about optimizing Angular 2 apps for download size & performance

There nice charts in his slides showing the effects of AoT compilation, different chunk loading strategies, and more

The Shiny and New in Chrome/Blink Performance + Big Performance in Angular 2

Monday, Feb 6, 2017, 6:30 PM

Shopify Toronto
80 Spadina Ave. 4th Floor Toronto, ON

39 Members Went

Welcome to 2017.We hope all had a wonderful holiday break. I know that we did. And we’re more than delighted to get things started in 2017. As always, we’re doing our best to bring you all corners of the web performance ecosystems in the form of fascinating talks.One item being tabled was the idea of having more presentations from browser vendor…

Check out this Meetup →

Using Nodejs to record microphone input to mp3 files on Ubuntu

https://ubuntuforums.org/archive/index.php/t-224748.html was very helpful.

Install lame mp3 encoder if you don’t have it.

sudo apt-get install lame

You should already have arecord, which records audio sends it to stdout.

  1. Run the command alsamixer to see your audio inputs and tweak volumes
  2. Run the command arecord -f cd | lame – out.mp3 to record audio to an mp3 file called out.mp3 until you hit ctrl-c

Now do that with Nodejs!

OK! This will record audio until you exit the script with Ctrl+C.

const spawn = require('child_process').spawn;

// prepare 2 child processes
const recordProcess = spawn('arecord', ['-f', 'cd'])
const encodeProcess = spawn('lame', ['-', 'out.mp3'])

// pipe them
recordProcess.stdout.pipe(encodeProcess.stdin);

// get debug info if you want
/*
recordProcess.stdout.on('data', function (data) {
  console.log('Data: ' + data);
});
recordProcess.stderr.on('data', function (data) {
  console.log('Error: ' + data);
});
recordProcess.on('close', function (code) {
  console.log('arecord closed: ' + code);
});
*/

// this seems like a good idea, but might not be needed 
process.on('exit', (code) => {
  console.log(`About to exit with code: ${code}`);
  recordProcess.kill('SIGTERM');
  encodeProcess.kill('SIGTERM');
});

Reusing an ES6 iterator? Not quite

One you’ve called iterator.next() on an array iterator enough times to make it return the last item with the property done set to true, you can’t make it go back to the first item. But you can grab a new iterator for the same array. I was surprised to find out that:

node
> var users = ['steve', 'bob', 'jill'];
> users[Symbol.iterator]() === users[Symbol.iterator]()
false

The two iterators retrieved are actually 2 different iterators. No need to shallow copy the array to get another iterator. I have a scenario where I want to loop through an array of users of a blogging service and retrieve their RSS feeds every one in a while. This will work:

var users = ['steve', 'bob', 'jill'];
var userIterator = users[Symbol.iterator]();

function oneIteration() {

  var nextItem = userIterator.next();

  if (nextItem.done) {
    userIterator = users[Symbol.iterator]();
    nextItem = userIterator.next();
  }

  // get the rss feed, or just print out the user's name for this example
  console.log(nextItem.value);

  // retrieve the next feed after some amount of time
  setTimeout(oneIteration, 5000);

}

oneIteration();

The iterator can take the place of a userIndex variable that is incremented with each RSS fetch, and reset to 0 at the end of the array. Whether this is better or worse is up to you.

Toronto May 2015 JS Tech Talk Night

  • ever try fuzzing a compiler?
  • ever try generating random programs?
  • transpilers are fun
    • coffeescript lets write JS that you usually can’t write
    • babel lets you write JS the way we eventually all will
  • watch (or don’t watch) The Room

May Tech Talk and Rise of the Transpilers Panel

Thursday, May 21, 2015, 6:30 PM

Lighthouse Labs (HIGHLINE Office)
639 Queen St W Toronto, ON

74 Members Went

It looks like our last Tech Talk Night managed to warm up the city and you can all thank us for the awesome weather that we’ve been having! We have another hot event lined up for you this month with a JSConf speaker and a panel of JavaScript experts.We would like to thank Lighthouse Labs for sponsoring the event: Lighthouse Labs has reimagined th…

Check out this Meetup →

Toronto May 2015 JS Hack Night

People talked about and hacked Task Runners.

JS Hack Night

Tuesday, May 12, 2015, 6:30 PM

Bento Miso
862 Richmond Street West, Suite 100 Toronto, ON

80 Members Went

Hi everyone! For this JS Hack Night, we’ve partnered with Pearl Chen and Ahmad Nassri of YeomanTO to bring you a super exciting event dedicated to front end task runners and automated build processes! The joint event will be in the main area, but there will be a separate space for those regulars who just want to hack on things. Event description fo…

Check out this Meetup →

Toronto JS meetup – March 2015

Shopify hosted us

Why use nodejs to build distributed systems? by Gord Tanner

slides video

  • js was event based from the start – browser vendors didn’t want bad web developer code to stop their browsers from running
  • nodejs’ event-loop makes it easier to handle concurrency. Promises, callbacks, and queues force you to keep things simpler than mutexes, semaphores, locking, shared memory
  • Always test your distributed app is a distributed environment. How about multiple Vagrant VMS? This is very different from firing up a few nodejs processes in your local machine where processes share RAM and a hard drive

Intro to WebPack with Tasveer Singh

slides video

  • old build tools merged all JS into a single file and uglified it
    • too much js parsing up front for mobile browsers when page loads
    • if 1 character of js changes, the entire merged file must be downloaded by users again
  • requirejs – importing dependencies is easy to mess up with typos

  • so try WebPack! It is big and complicated, but you can use it if you just believe, and the output is great!
    • inlining images to reduce HTTP requests
    • support for compilation tools for coffee script, babel
    • great support for merging lots of js files into a few modules – developers can find the balance between reducing HTTP requests and downloading too much code at once
    • watch out for asynchronously loading CSS – as more CSS loads and renders, conflicting rules lead to styles changing in unexpected places

Angular 2 with Matias Niemelä

video


March Tech Talk Night – Distributed Computing, WebPack, and Angular 2.0

Thursday, Mar 12, 2015, 6:00 PM

Shopify Toronto
80 Spadina Ave. 4th Floor Toronto, ON

126 Members Went

Did you know that this February was the first February since 1967 where every day was below zero degrees? The reason is that we didn’t warm up the hearts of Toronto with a Tech Talk Night! Join us on March 12th at Shopify’s beautiful Toronto office for another spectacular event.We would like to thank Lighthouse Labs for sponsoring the event: Ligh…

Check out this Meetup →

Javascript in 2015 video

This demo introduces lots of ES6 features while actually building something. I like it!

Thoughts

ES6 Modules, jspm, and System.js will take deeper dives to understand, but I liked the fat arrow functions and string templating.

In ES6, fat arrow functions and string templating let us write this:

elem.innerHTML = urls.map(url => `<img src="${url}" alt="" />`).join("\n")

Babel says the ES5 version looks like this:

elem.innerHTML = urls.map(function (url) {
  return "<img src=\"" + url + "\" alt=\"\" />";
}).join("\n");

less code = syntax errors. I like this!

Fat arrow functions have some funny little bits.
* ( and ) around arguments are only needed if there is more than 1 argument
* { and } around the function are only needed around the function body if is more than a line long

But these rules feel funny to me. JS linters have long suggested always including the {, }, and ; even in places where aren’t needed to prevent stupid errors and keep things consistent.

export default posts => {
return posts
.filter(post => !post.data.over_18)
.slice(0, 5)
.map(post => post.data.url)
.filter(url => /gifv?$/.exec(url))
.map(url => url.replace(/v$/, ''))
}

return new Promise((resolve, reject) => {
    jsonp(this.url, {
        param: 'jsonp'
    }, (err, data) => {
        err ? reject(err) : resolve(data.data.children);
    })
})

Fat Arrow Functions are also automatically bound to the scope of the object they are enclosed in which makes life simpler when mixing up functional and object oriented programming. Fat Arrow Functions) on MDN has more details.

Fall Toronto 2014 Node.js Meetup

60+ of us met at One Eleven Richmond for 3 presentations and chatting


Using Docker for Metrics Dashboards during development

Mario from 360 incentives put up a blog post expanding on his presentation here

Story time

One time a cache busting mechanism failed, causing 100s of people to not be angle to finish an online course. Unit tests did not pick this up. How to check business value is being delivered? Use metrics!

Metrics are like a long running acceptance test

Use Metrics in Development

  • Not just production
  • Test that you are capturing the right data for logging
  • Having dashboards in dev speeds up feedback cycles

How to do

  • 360 uses statsd, graphite, grafana
  • Manage dashboards like code
    • Push updated dashboard layouts to version control and have them deploy automatically to wherever they are needed
  • Use Docker to distribute production-like environments to developer machines quickly with metrics software installed.
  • Mario wrote scripts to automate spinning up multiple docker images, destroying them, filling up containers with fake data

Docker makes it easy to run the same operational infrastructure (logging, aggregation, dashboards) in production and on every dev’s machine. Then everyone gets visual feedback in the form of graphs faster

Docker Features

  • Docker repos are very lightweight compared to virtual machines
    • 1 physical machine can run hundreds of docker images
  • Containers can be linked to each other over ports and IP addresses
  • Containers can mount parts of real file systems to themselves, like Vagrant
  • Is Docker missing features compared to Vagrant? Who cares! Docker is waaay faster to share and deploy environments with!

BTW, 360 Incentives is 11th fastest growing tech company in Canada. Neato!


Sails.js intro

Lee from OpenCare introduced sails.js

  • Sails adds a ORM, routing features, and more on top of express.js so you write less boilerplate
  • Sails’ ORM ‘waterline’ is DB agnostic, can link objects between different DB’s (Eg. relate a row in a PostgreSQL DB to a document in MongoDB)
  • Opencare uses Sails.js in production with an AngularJS frontend, they are happy with it

Shortcomings

  • Waterline does not support populating nested objects. Objects must be created and saved one layer at a time
  • Poor error handling
    • Sails returns 500 internal server error for too many types of errors, even for input validation
    • OpenCare built their own error handler to get around this

AudienceView transitions to Node.js

I had a hard time keeping up with this presentation. Geoff Wells and Corey discussed how they are transitioning their existing, successful product to Node.js.

  • AudienceView has 1.5 million line C++/ASP codebase that they started building 12 years ago, and is still in use today. Time to try Node.js!
  • How to change platforms without disrupting $2 billion in revenue from international customers (stadiums, concert halls, places that people buy tickets to get into)?

Why Node?

  • Existing ASP codebase is written in JS instead of VB
  • Can integrate with C++ backend via Node addons
  • Node.js has a community

Some things built during the transition

  • Node.js addons for communicating with existing C++ code (the backend stuff)
  • An ASP template parser that runs in Node.js so existing web page templates can reused
  • Replace ASP’s session handling with something custom-built
  • Replace ASP’s multithreading with queues

Success?

  • An earlier attempt at moving part of the platform to Java has been mostly replaced with Node.js in surprisingly little time. Success!
  • A significant part of ASP web application replaced with Node.js in 250 man days. Big success!

Helpful things

Some decisions made very early on in developing the backend of the product are proving very helpful during the transition

  • Very simple use of DB – no views, no stored procedures, no direct communication between ASP and DB is making transition easier
  • The C++ part of the backend is portable and can run on OS other than Windows
  • Choosing to use JS instead of VB way back means less boring work translating code today

Fall 2014 Node.js Meetup

Tuesday, Nov 18, 2014, 7:00 PM

One Eleven
111 Richmond St West, 5th Floor Toronto, ON

100 Members Went

Join us Tuesday Nov 18th for the Fall 2014 Node.js meetup. We’ve got three great speakers, and a new venue courtesy of Opencare and One Eleven.Here are the talks for this event:Docker, Dashboards & Node – Mario Pareja from 360incentives will talk about how 360 leveraged Docker to distribute their production application coupled with a customized m…

Check out this Meetup →

Javascript bind vs call

bind and call take same arguments, but do different things. call simply allows you to execute a function in a specific scope and returns the result of running that function. bind actually returns a new function locked to the scope passed in, and you may execute it as many times as you want.

Here’s an example. Try running it in your browser’s JS console to see the results for yourself.

// create an object with its own scope to work with
var Hat = function(size) {
  this.size = size;
  console.log('hat object created');
}
 
// and another object to compare it to
var Shirt = function(size) {
  this.size = size;
  console.log('shirt object created');
}
 
// this function returns the value of "size" in whatever scope it runs in
var getSize = function() {
  return this.size;
}
 
var size = "I don't know";
var hat = new Hat("M");
var shirt = new Shirt("XL");
 
 
// getSize() usually returns the global value for size
console.log('getSize in global scope:', getSize());
 
// here's an example of running it in scope of hat once
console.log('getSize in `hat` scope:', getSize.call(hat)); // writes out 'M'
 
// run it regularily, and it is back to the global scope
console.log('getSize in global scope again:', getSize()); // writes out 'I don't know'
 
// now make a new version of getSize() that only runs in the scope of hat
var getHatSize = getSize.bind(hat);
 
// writes out 'M' every time!
console.log('getHatSize:', getHatSize());
console.log('getHatSize again:', getHatSize());
 
// what if getHatSize is added to shirt's prototyp?
Shirt.prototype.getHatSize = getHatSize;
console.log('getHatSize added to shirt\'s prototype', shirt.getHatSize()); // writes out 'M', so the binding to the scope of hat has not been broken
 
// meanwhile, adding getSize
Shirt.prototype.getSize = getSize;
console.log("getSize added to shirt's prototype:", shirt.getSize()); // writes out 'XL', which means the function is executing in the scope of the shirt object