joshblack

Animation Performance Notes

The Rules (learn them so you can break them!)

1. No frame should exceed 16ms

• Caveat: really only the duration between when an animation starts and ends do we need 60fps
• Do expensive operations before and after an animation
• 

2. Never trigger a forced sync layout (layout thrashing)

• 

joshblack

function Closure() {
    var number = 0;

    // Manipulate the private member directly
    function makeLower() {
        number--;
        console.log(number);
    }

    // Manipulate the private member directly

joshblack

function User(username) {
  const secretPasswordKey = Symbol('password');
  
  this.username = username;
  
  this.setPassword = function setPassword(password) {
    this[secretPasswordKey] = password;
  };
  
  this.authenticate = function authenticate(attempt) {

joshblack

function Constructor() {
 const privateMember = Symbol('privateMember'),
       publicMember = 'publicMember';
  
  this[privateMember] = 'foo';
  this[publicMember] = 'bar';
}

let c = new Constructor();

joshblack

/**
 * Write a function for doing an in-place shuffle of an array.
 *
 * The shuffle must be "uniform," meaning each item in the 
 * original array must have the same probability of ending up 
 * in each spot in the final array.
 *
 * Must be done in O(n) time and O(1) space
 */

joshblack

var gulp = require('gulp');
var util = require('gulp-util');
var watchify = require('watchify');
var reactify = require('reactify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');

var browserSync = require('browser-sync');
var reload = browserSync.reload;

joshblack

CSS Performance Tooling

https://www.youtube.com/watch?v=FEs2jgZBaQA&list=UUzoVCacndDCfGDf41P-z0iA

Page Speed Insights

Ideally, you'd want a page speed score of:

• 85 for Mobile
• 90 for Desktop

joshblack

#define N             // number of buffers
int in = 0, out = 0;  // Reader and writer pointers to buffer spaces

// Semaphores
resources = 0;        // number of resources that we are producing
buffer = N;           // buffer space
mutex = 1;            // Mutual exclusion to make sure we aren't reading and writing at the same time
criticalA = 1;        // critical A and B are used to enforce the requirement that we produce A, then B, then A, etc...
criticalB = 1;

joshblack

[1, 2, 3, 4, 5].duplicate();

// My initial attempt
Array.prototype.duplicate = function() {
  var arr = this.slice(0);

  arr.forEach(function(e) {
    arr.push(e);
  });

joshblack

function foo() {
  console.log(x); // undefined
  var x = 1;
  console.log(x); // 1
};

// What actually happens under the hood

function foo() {
  var x;