Antonio Romero jaromero

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

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

stopBefore.js

2min screencast

Examples

stopBefore(document, 'getElementById')
stopBefore('document.getElementById') // the same as the previous
stopBefore(Element.prototype, 'removeChild')

Yeoman + Compass Sprites

Setup

generator-webapp has support for compass out of the box. However, in order to use one of my favorite features of it — sprites and the image_url helper — you have to make some adjustments to the Gruntfile.

Let's assume you use a SASS stylesheet like this one:

@import "design/*.png"

I'm having trouble understanding the benefit of require.js. Can you help me out? I imagine other developers have a similar interest.

From Require.js - Why AMD:

The AMD format comes from wanting a module format that was better than today's "write a bunch of script tags with implicit dependencies that you have to manually order"

I don't quite understand why this methodology is so bad. The difficult part is that you have to manually order dependencies. But the benefit is that you don't have an additional layer of abstraction.

	# Encode inputfile.tar.gz as a series of video frames
	# Frames are written to frames/frameNNNN.png
	from PIL import Image

	with open('inputfile.tar.gz', 'rb') as f:
	data = f.read()

	WIDTH = 120
	HEIGHT = 90
	CHUNK_SIZE = int((WIDTH * HEIGHT) / 8)

	{
	// http://eslint.org/docs/rules/

	"env": {
	"browser": true, // browser global variables.
	"node": false, // Node.js global variables and Node.js-specific rules.
	"worker": false, // web workers global variables.
	"amd": false, // defines require() and define() as global variables as per the amd spec.
	"mocha": false, // adds all of the Mocha testing global variables.
	"jasmine": false, // adds all of the Jasmine testing global variables for version 1.3 and 2.0.

	-sass: {
	- files: ['<%= config.app %>/styles/{,/}.{scss,sass}'],
	- tasks: ['sass:server', 'autoprefixer']
	-}
	+compass: {
	+ files: ['<%= config.app %>/styles/{,/}.{scss,sass}'],
	+ tasks: ['compass:server', 'autoprefixer']
	+}

	...

	#!/usr/bin/env python3

	# Adapted from http://www.creativetux.com/2012/11/streaming-to-twitchtv-with-linux.html
	#
	# Make sure to put your twitch.tv key in a file called "key" in the current directory.
	#
	# Before running, make sure PulseAudio is set up with the correct loopback modules
	# and a null sink named "mix". You can use something ilke the following commands:
	#
	# pactl load-module module-null-sink sink_name=mix

	#!/bin/bash
	#
	# Update to latest chromium nightly on linux
	# Script requires root to properly set up the sandbox
	# https://code.google.com/p/chromium/wiki/LinuxSUIDSandboxDevelopment
	#
	# I use it with a line like the following in my .bashrc:
	# alias canary='CHROME_DEVEL_SANDBOX="/home/tif/bin/chrome-linux/chrome_sandbox" /home/tif/bin/chrome-linux/chrome-wrapper'
	#
	# ----------------------------------------------------------------------