Skip to main content

Posts

Showing posts from October, 2015

Web Performance Short Course

I went to a tutorial on web performance at HTML5DevConf. These are my notes:

Daniel Austin was the instructor.

He worked down the hallway from Vint Cerf when he was creating the world wide web, and he was the manager of the team at Yahoo that created frontend performance as a discipline. He was the manager of the guy who created YSlow. A lot of the books on web performance are from people he used to manage. He was the "chief architect of performance" at Yahoo.

He's writing a book called "Web Performance: The Definitive Guide".

He started by asking us how many hops it took to get to Google (per traceroute).

He had us install the HTTP/2 and SPDY indicator Chrome extension.

He's given this class at this conference 5 years in a row. It's changed dramatically over the years.

This is only a class on the basics.

The most important key to understanding performance problems is to understand how the web works and work within those constraints.

Understand what…

HTML5DevConf

I went to HTML5DevConf. Here are my notes:
ES6 for Everyone JavaScript started in 1995.

ECMAScript version 3 came out in 1999. It was in IE6. It's what most people are used to.

for (var state in states) {
if (states.hasOwnProperty(state)) {
...
}
}

There were 10 years of sadness after that during which not much happened.

ECMAScript 5 came out in 2009. It was a minor improvement.

Object.keys()
Object.create()
Array.forEach()

Then, HTML5 started happening.

Object.keys(states).forEach(function(state) {
...
});

Babel is a tool that compiles ES6 code to ES5 code.

Only 10 people in the room were using it in production.

Here is some ES6 code:

let states = {...};
Object.keys(states)
.forEach(state => console.log(state));

ES6 is mostly syntactic sugar.

To use it, you must have Chrome, Edge, or Babel.

Default parameters:

... = function(height = 50) {
....
}

Previously, you had to do:

... = function(height) {
height = height || 50;
...
}

Template literals (back ticks):

var name = `${first} ${last}`;

var x = `
I…