paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

clementgenzmer

/*
 * This is an example provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
 * Facebook reserves all rights not expressly granted.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
 * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN

MSEdge

interface AesGcmEncryptResult {
    readonly attribute ArrayBuffer ciphertext;
    readonly attribute ArrayBuffer tag;

};

interface BookmarkCollection {
    readonly attribute long length;

    any item(unsigned long index);

OverZealous

/**
 * This file/module contains all configuration for the build process.
 */

/**
 * Load requires and directory resources
 */
var join = require('path').join,
	bowerrc = JSON.parse(require('fs').readFileSync('./.bowerrc', {encoding: 'utf8'})),
	bowerJSON = bowerrc.json.replace(/^\.?\/?/, './'),

grigs

I need to write this up in more detail soon, but in chatting with Patrick, it is clear that 140 chars isn't cutting it.

The way I've been thinking about the web on TVs and consoles is something like this:

• What are the design patterns and interaction models that would make for a successful experience?
• Can we build those experiences now? If not, what would need to change to make it possible?

In my mind, this starts with the basics of designing an interface that works well on a TV and can be interacted with using a remote control. Once we have the basics out of the way, we can proceed to multiscreen interactions.

A basic television layout

jaredwy

This assumes osx. and that you have read https://developers.google.com/chrome-developer-tools/docs/contributing 

1. Easiest way to run a basic server is just to use python, you should already have that installed.
2. The docs say "Set up a local web server that would serve files from WebKit/Source/WebCore/inspector on some port (8090)" this is out of date. 
the correct path is /path/to/checkedout/blink/Source/devtools run python -m SimpleHTTPServer in this directory. Starts on 8000 by default change with python -m SimpleHTTPServer 8090 
3. Running chrome from the command line, you want to run something like

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --user-data-dir=/Users/wyles/blink/chromeServerProfile --remote-debugging-port=9222 --remote-debugging-frontend="http://localhost:8000/front_end/inspector.html"

Note - i found that paths are not expanded so use a full path not ~/ for your home directoy.

mrmartineau

/** //@ sourceMappingURL=app.min.js.map
*/
console.log('foo');console.log('bar');

wycats

Goals

The goals of this project are to define a layered architecture for the client-side web platform[1] that W3C working groups can use to define new platform features and refine existing platform features.

Specifically, this architecture defines a clear relationship between markup and imperative code.

bgrins

Javascript log Function

Every time I start a new project, I want to pull in a log function that allows the same functionality as the console.log, including the full functionality of the Console API.

There are a lot of ways to do this, but many are lacking. A common problem with wrapper functions is that the line number that shows up next to the log is the line number of the log function itself, not where log was invoked. There are also times where the arguments get logged in a way that isn't quite the same as the native function.

This is an attempt to once and for all document the function that I pull in to new projects. There are two different options:

• The full version: Inspired by the plugin in HTML5 Boilerplate. Use this if you are writing an application and want to create a window.log function. Additionally,

SlexAxton

gifify() {
  if [[ -n "$1" ]]; then
    if [[ $2 == '--good' ]]; then
      ffmpeg -i $1 -r 10 -vcodec png out-static-%05d.png
      time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png  GIF:- | gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile - > $1.gif
      rm out-static*.png
    else
      ffmpeg -i $1 -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > $1.gif
    fi
  else