ExploreTechTO February 2017 meetup – Let’s Make A Deal

TribalScale hosted us for Let’s Make A Deal: Insiders’ perspectives on Salary Negotiations in Tech

Getting hired & negotiating a salary/benefits package

  • Ideally this isn’t an adversarial relationship. Work with recruiter to both be happy
  • Skills that matter?
  • If you can’t get experience mentoring or leading at work, find it somewhere else.
  • Interview stuff:
    • You can talk about what you want to learn, to work on.
    • Be human. Check if you are making assumptions about other humans during this process
    • HR might get soured of you talk about salary before anything (skills, personality, goals)
  • Compensation is more than salary. Everything is negotiable eg:
    • signing bonuses
    • relocation bonuses
    • education costs
    • extra time off
    • personal project time
  • In a competitive situation, can you justify being $5k more than another applicant?
  • Hiring manger might be negotiating on your behalf inside the company.
  • Salary bands are a thing at organized companies. Less organized companies might not have them
  • HR does not need to know your current salary. Refocus conversation on your target salary. Know what you want to make at the new position.
  • For salary references:
    • PayScale is ok
    • Glass Door is ok if there are enough data points
    • LinkedIn has salary tool
    • Practise talking about money with friends if it stresses you out
  • Working with placement agency or external recruiter? Let them sell you. They know sales well.

Can you tell a story about how everything you’ve ever done has lead to the interview at this company?

Asking for a raise

  • Be ready to sell yourself!
  • When to talk about raises?
    • As soon as your uncomfortable about salary. You might never be comfortable taking about money, so don’t wait.
    • You asked for a raise? Experienced manager might be relieved to know what you are thinking. Other managers might be scared too.
  • Companies on the ball will review salary bands and market salaries once or twice a year and see who’s salaries are an outlier.
    • Were you offered a raise? It is OK to say ‘let me think about this is for a few days’ or even come back after agreeing to a raise to re-negotiate
  • Whatever the raise talk was, send a follow up email so you have requests for raise in writing
  • Stock options in lieu of raise? Know what options are. Know about events that dilute options. A lack of transparency about the value of options is a bad sign
  • What happens if manager disagrees with your reasoning for a raise?
    • Opportunity for manager to make a plan to get you to that raise. It might be a sign the manager has filled to provide feedback earlier.

Closing notes

  • When negotiating salaries and benefits, think about what you really want and why
  • Communicate like a human
  • Carrie Gallant has a negotiations framework
  • Don’t wait for people to pick you out. Sell yourself, it will feel great when it works

ExploreTech Toronto Meetup – February 2017

Wednesday, Feb 15, 2017, 6:30 PM

Location details are available to members only.

136 Members Went

Let’s Make A Deal: Insiders’ perspectives on Salary Negotiations in TechJoin industry insiders for a panel discussion on negotiating your salary. Questions are welcome! We will cover three broad topics around salary discussions:1. Negotiations at the time of hiring 2. Raises and reviews 3. The manager’s perspectiveCome and get the inside scoop…

Check out this Meetup →

CreateInTO February Meetup

Accessibility with Alison Walden


  • blind and low vision internet users in US are almost as numerous as regular Canadian internet users
  • accessible sites give disabled users their privacy back. Accessible banking sites allow users to bank on their own. Accessible travel sites let users book flights on their own. Accessible commerce sites let users buy their own stuff.

Accessibility is part of UX design, not just development

  • information architects know the intent of the information and can structure headings
  • UX designers know what will be a link vs a button that performs an action on current content ahead of time
  • hidden wayfinding elements might be called out as issues in QA if they aren’t in the test plan. Instead, make them part of the tests
  • developers should implement accessibility features, but not design them

HTML structuring stuff

  • screen readers rely on HTML tags and structure to navigate pages
  • well structure heading tags (h1, h2, etc) are essential and should be chosen by information architects
  • developers sometimes use links and button interchangeably which is confusing for screen readers. One usually takes user to more content, the other modifies or submits existing content. Think about how to label links or buttons that offer filtering functionality
  • use hidden wayfinding elements (eg. [skip navigation links'(http://webaim.org/techniques/skipnav/) so user can jump to product grid of a store)
  • always use labels with form controls, even if the label is hidden eg. search fields in headers
  • tab ordering – think top to bottom and left to right

visual stuff

  • don’t disable the browser’s built in focus indicator! Designers can choose colours for it to look good with the page
  • focused elements could reveal more info as if they are being hovered over

law stuff

  • Many US websites that don’t follow guidelines have been sued by disabled users
  • Canada has fewer lawsuits and less enforcement.
  • In Ontario, WCAG A is the guideline for government and some business websites until 2021. Then it the guideline becomes WCAG AA.

Hugh Elliot talks about life of creative technologist

Hugh’s current gig has him building interactive installations with wondermakr

  • Work now includes driving places to fix installations that are ‘broken’
    • Nobody knows how it broke, or why it is broken it is broken. Be prepared with spare parts!
  • You get to buy stuff from awesome shops like robot shop, digikey, (sparkfun)[https://www.sparkfun.com/], and others I didn’t write down

  • Always buy spare parts

    • 3x the physical buttons you need because they will take a pounding from the public
    • extra monitors so you can swap screens quickly.

Gathering v40.0

Wednesday, Feb 22, 2017, 7:00 PM

159 Augusta Avenue Toronto, ON

47 Creators Went

Join us for our monthly gathering of creative developers, designers, hackers, makers and more.#accessibility #ux #design #hololens #mixedreality #making #installations7:00pm Doors open! Come grab some drinks and support Handlebar.7:30pm Alison Walden – Creating Accessible Experiences Starts with Experience Design”It’s a common misconception th…

Check out this Meetup →

Unity3D, VSCode, OS X and ‘The reference assemblies for framework “.NETFramework,Version=v3.5” were not found’ error

This happened to me in this environment:
* OS X 10.10.5
* Unity 5.6.0b7
* VSCode 1.9.1 with C# extension 1.7.0

I had this error inside of VSCode when I opened up a Unity project:

The reference assemblies for framework “.NETFramework,Version=v3.5” were not found. To resolve this, install the SDK or Targeting Pack for this framework version or retarget your application to a version of the framework for which you have the SDK or Targeting Pack installed. Note that assemblies will be resolved from the Global Assembly Cache (GAC) and will be used in place of reference assemblies. Therefore your assembly may not be correctly targeted for the framework you intend.

Also, VSCode’s code completion did not work. Even with the right version of OpenSSL:

$openssl version
OpenSSL 1.0.2k  26 Jan 2017

and dotnet:


Microsoft .NET Core Shared Framework Host

  Version  : 1.1.0
  Build    : 928f77c4bc3f49d892459992fb6e1d5542cb5e86

I found this fix here:

I had to install mono with brew

brew install mono

with that, I could run mono

$mono --version
Mono JIT compiler version 4.6.2 (Stable Sun Jan  8 00:00:20 GMT 2017)
Copyright (C) 2002-2014 Novell, Inc, Xamarin Inc and Contributors. www.mono-project.com
    TLS:           normal
    SIGSEGV:       altstack
    Notification:  kqueue
    Architecture:  amd64
    Disabled:      none
    Misc:          softdebug
    LLVM:          supported, not enabled.
    GC:            sgen

just to prove it is installed. VSCode’s OmniSharp acknowledged found mono and let me know in its own output window while starting up and loading the project in VSCode:

Discovered Mono file path: /usr/local/bin/mono
Resolved symbolic link for Mono file path: /usr/local/Cellar/mono/

Then my code completion worked. Yay!

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


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 →

Host your own Git LFS with node-lfs-s3

Want to use Git LFS without a Git-as-a-Service provider like GitHub or BitBucket?

Stuff you will need

  • AWS S3 to store files at a low cost
  • node-lfs-s3 to communicate between Git and S3. This can run on your own machine or in the cloud.
  • Git LFS installed in your development environment or a server you control and available in the system’s PATH. I’m using git-lfs/1.4.4 (GitHub; darwin amd64; go 1.7.3; git cbf91a9) with git version 2.5.4 (Apple Git-61) on OS X, and something else on Windows 10.
  • GitHub for Windows comes with its own Git LFS executable which may override the version you install on your own.

Things to configure

Your Git repository needs a file called .lfsconfig which points it at the Git LFS server. Here’s an example:

url = "http://host:port/github-account-name/repo.git"
batch = true
access = basic
sslverify = true

Commands you will run

Start up node-lfs-s3 with a command like this:

LFS_BASE_URL=http://host:port/ LFS_PORT=port LFS_STORE_TYPE=s3 LFS_AUTHENTICATOR_TYPE=none LFS_JWT_SECRET=a_secret AWS_ACCESS_KEY=aws_access_key AWS_SECRET_KEY=aws_secret_key LFS_STORE_S3_BUCKET=bucket_name LFS_S3_REGION=us-east-1 node git-lfs-server.js

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

// 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}`);

ffmpeg: concatenate image sequences and audio


assemble multiple image sequences and audio files into 1 video file


  • ffmpeg binary is sitting in my working folder and not in my PATH, so I reference it as ./ffmpeg instead of ffmpeg
  • ffmpeg version info is:
    ffmpeg version N-82143-gbf14393-tessus Copyright (c) 2000-2016 the FFmpeg developers
    built with Apple LLVM version 8.0.0 (clang-800.0.38)
    configuration: --cc=/usr/bin/clang --prefix=/opt/ffmpeg --extra-version=tessus --enable-avisynth --enable-fontconfig --enable-gpl --enable-libass --enable-libbluray --enable-libfreetype --enable-libgsm --enable-libmodplug --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopus --enable-libschroedinger --enable-libsnappy --enable-libsoxr --enable-libspeex --enable-libtheora --enable-libvidstab --enable-libvo-amrwbenc --enable-libvorbis --enable-libvpx --enable-libwavpack --enable-libx264 --enable-libx265 --enable-libxavs --enable-libxvid --enable-libzmq --enable-version3 --disable-ffplay --disable-indev=qtkit --disable-indev=x11grab_xcb
    libavutil      55. 35.100 / 55. 35.100
    libavcodec     57. 65.100 / 57. 65.100
    libavformat    57. 57.100 / 57. 57.100
    libavdevice    57.  2.100 / 57.  2.100
    libavfilter     6. 66.100 /  6. 66.100
    libswscale      4.  3.100 /  4.  3.100
    libswresample   2.  4.100 /  2.  4.100
    libpostproc    54.  2.100 / 54.  2.100
    Hyper fast Audio and Video encoder
    usage: ffmpeg [options] [[infile options] -i infile]... {[outfile options] outfile}...
  • all my images in image sequences are the same dimensions and format

  • all my audio files are the same format
  • this page offers a small mp4 file to work with: http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5
  • this is helpful https://trac.ffmpeg.org/wiki/Concatenate

Convert Video to Image Sequence:

I need images to work with, so make some!

  • images will go into the frames directory with names like frame_0001.png, frame_0002.png etc
./ffmpeg -i test7.mp4 frames/frame_%04d.png

Convert Image Sequence back to Video


  • -c:v libx264 sets the video codec
  • -crf 23 sets the quality
  • -pix_fmt yuv420p sets the pixel format to something QuickTime can read
  • -r 24 sets input and output framerates
    • input framerate is how fast the images and the sequence are meant to be played back
    • output framerate sets how much time between frames in the output video
    • fast input and slow output results in a slideshow or timelapse
    • slow input and fast output results in duplicate frames (I think)
  • -y to overwrite files without asking
./ffmpeg -r 30 -i frames/frame_%04d.png -c:v libx264 -pix_fmt yuv420p -crf 23 -r 30  -y video-from-frames.mp4

Convert Image Sequence to Video + add audio track


  • -i Bonobo - Kong.mp3 specifies another input stream
  • -c:a aac converts audio to AAC format
  • -shortest limits the length of the output video to the shortest audio or video stream (in this case, the video stream is shorter)
./ffmpeg -r 24 -i frames/frame_%04d.png -i "Bonobo - Kong.mp3" -c:v libx264 -c:a aac -pix_fmt yuv420p -crf 23 -r 24 -shortest -y video-from-frames.mp4

Concatenate multiple image sequences with 1 audio track

Put this into video-input-list.txt. The images in the image sequences must all be the same size and format

file './intro/frame_%04d.png'
file './frames/frame_%04d.png'
file './outro/frame_%04d.png'

then run the command:

  • -f concat tells ffmpeg to use the concat filter
  • -safe 0 has something to do with letting ffmpeg read relative paths in the text file
./ffmpeg -r 24 -f concat -safe 0 -i video-input-list.txt -i "Bonobo - Kong.mp3" -c:v libx264 -c:a aac -pix_fmt yuv420p -crf 23 -r 24 -shortest -y video-from-frames.mp4

Concatenate multiple images sequences and concatenate multiple audio tracks

Put this into audio-input-list.txt.

file 'big_trash_tv_hit.aif.mp3'
file 'recording.mp3'
file 'vocoded-note.aif.mp3'
file 'Bonobo - Kong.mp3'

then run the command:

  • remember to specify -f concat -safe 0 again before the second input source -i audio-input-list.txt
./ffmpeg -r 24 -f concat -safe 0 -i video-input-list.txt -f concat -safe 0 -i audio-input-list.txt -c:a aac -pix_fmt yuv420p -crf 23 -r 24 -shortest -y video-from-frames.mp4

This does what I am looking for!

CSS & Spritesheet generators

I like tools that let me drag and drop a bunch of images into my browser, and generate CSS & a single image for me to integrate into my project.

Stitches is my goto tool for generating spritesheets, and I’ll keep using it for complicated sheets made of many small images.

Today, I found SpritePad which lets me manually place the sprites within the spritesheet. Sometimes I think I can do a better job at making a compact spritesheet than Stitches does, so that’s a useful feature for me. If there are enough images in the spritesheet that manually placing them is too much work, than I can go back to Stitches.

Deploying apps from circleci to Firebase hosting

The command line page of the Firebase documentation doesn’t list all the commands available to you from the firebase-tools npm package. To see them all, install the tools with npm install -g firebase-tools and execute the command firebase in your terminal.

Usage: firebase [options] [command]


    data:get [options]               fetch and print JSON data at the specified path
    data:push [options]  [infile]    add a new JSON object to a list of data in your Firebase
    data:set [options]  [infile]     store JSON data at the specified path via STDIN, arg, or file
    data:remove [options]            remove data from your Firebase at the specified path
    data:update [options]  [infile]  update some of the keys for the defined path in your Firebase
    deploy [options]                       deploy hosting assets and rules for the current app
    deploy:hosting [options]               deploy hosting assets for the current app
    deploy:rules [options]                 deploy security rules for the current app
    disable:hosting [options]              stop serving web traffic to your Firebase Hosting site
    help [command]                         display help information
    init [options]                         set up a Firebase app in the current directory
    list                                   list the Firebases to which you have access
    login                                  log the CLI into Firebase
    login:ci                               generate an access token for use in non-interactive environments
    logout                                 log the CLI out of Firebase
    open [options] [panel]                 open Firebase Hosting URL in browser or jump to a dashboard panel
    prefs:token                            print the currently logged in user's access token
    serve [options]                        start a local server for your static assets


    -h, --help         output usage information
    -V, --version      output the version number
    -j, --json         output JSON instead of text, also triggers non-interactive mode
    --token     supply an auth token for this command
    --non-interactive  error out of the command instead of waiting for prompts
    --interactive      force interactive shell treatment even when not detected
    --debug            print verbose debug output and keep a debug log file

The interesting command here is:

    login:ci                               generate an access token for use in non-interactive environments

Run firebase login:ci and follow the instructions to receive an access token like awelkfjw8efwpafh8phaua9 that you can use within circleci to deploy your app.

Inside circleci

Save the access token in circleci’s project settings as an environment variable with a name like FIREBASE_DEPLOY_TOKEN. Then configure circle.yml to use the environment variable inside the deploy step like this:

    branch: master
      - firebase deploy --token "$FIREBASE_DEPLOY_TOKEN" --non-interactive

When a build on the master branch succeeds, circleci will use that command to log into Firebase hosting on your behalf (via the access token) and upload the files configured in your firebase.json file.