July 2017 React Native Meetup

WealthSimple hosted us. I didn’t write down much.

  • Peter Kruzlics @ WealthSimple showed React Native is working well in their mobile apps for some screens. They are porting over more screens from native code and working on localization.

  • Mo Binni @ Rangle.io recommends react-native-navigation for mobile nav in apps. This space is still a mess of competing libraries like it was in early 2016 when I first investigated it

  • Adam Winick @ Rangle.io says to check out react-primitives for cross-platform dev. Most of the presentation was about moving React components in and out Sketch with react-sketchapp.

https://www.meetup.com/React-Native-Toronto/events/240033441/

June 2017 – Toronto AWS User Meetup

Serverless Backends w/AWS Lambda & API Gateway

Frank and Jay from Anomaly Innovations talked about their experiences with serverless APIs running on AWS Lambda. Check their site Serverless Stack for detailed tutorial on setting up AWS Lambda functions.

  • check out the serverless framework to make using AWS Lambda easier
  • look out for ServerlessCD project from the presenters
  • keeping infrastructure deployments with Cloud Formation separate from code deployments with AWS Lamda, or your deployments will get slooow and you will not be able to run/fix things as quickly.

I wanted to compare this to Firebase Cloud Functions

  • function signatures are very similar
  • Firebase has a nice CLI tool for deploying code to Google’s servers. AWS users will use 3rd party open source tools for this
  • AWS offers a wider variety of environments for running code (Node, Java, javascript, .NET) than Firebase (javascript only)
  • like Firebase Cloud Functions, using AWS Lambda will force you into using a more microservicey architecture

AWS Layered Approach to Security

Nick Boccone from Engage talked about general application security stuff and made me feel OK to be be paranoid about everything.

4 tenets of security

  1. trust nothing and no one
  2. nothing is secure until you turn it off
  3. security is a tradeoff with usability
  4. embrace your paranoia

6 layers of security

  1. descope, limit, block
    • store less data so there is less to steal
    • do less work on a server or service so there is less surface area to attack
    • block access by default and use whitelists
  2. Know your touch points, the boundaries of your application/product
    • where does your application interact with other applications from other organizations?
    • where does your application interact with infrastructure from other applications?
    • where does you application interact with people vulnerable to social engineering
  3. didn’t write it down
    • something else about touchpoints?
  4. make access difficult
    • trade-off between usability and security e.g. 2 factor auth
  5. didn’t write it down
    • wish I wrote it down
  6. Keep up-to-date
    • keep software patched
    • policies need to be reviewed and updated when there is new information
    • training (you team and customers need to know about)
    • security landscape (OWASP, National vulnerability db, AWS security cheat sheet?)

Words I had to look up

Federated

Maybe it was this? Federated Architecture. A group of distinct services or databases working together

DMZ

demilitarized zone – exposing part of a network to the public (e.g. DNS, FTP, email sending/receiving), and hiding the rest behind a firewall (e.g. file storage, computing)

Also from chatting with people

https://www.meetup.com/Toronto-AWS-Users-United/events/238953929/

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

slides

  • 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

Handlebar
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:

$dotnet

Microsoft .NET Core Shared Framework Host

  Version  : 1.1.0
  Build    : 928f77c4bc3f49d892459992fb6e1d5542cb5e86

I found this fix here:
https://github.com/OmniSharp/omnisharp-vscode/issues/1004

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 4.6.2.16/ac9e222 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/4.6.2.16/bin/mono-sgen

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

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 →

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:

[lfs]
url = "http://host:port/github-account-name/repo.git"
batch = true
access = basic
[http]
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
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');
});

ffmpeg: concatenate image sequences and audio

Goal

assemble multiple image sequences and audio files into 1 video file

Assumptions/Quirks

  • 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

https://ffmpeg.org/pipermail/ffmpeg-devel/2005-August/000523.html

  • -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

http://trac.ffmpeg.org/wiki/Create%20a%20video%20slideshow%20from%20images

  • -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!