Skip to content

Instantly share code, notes, and snippets.

@paulirish
paulirish / what-forces-layout.md
Last active May 9, 2024 07:00
What forces layout/reflow. The comprehensive list.

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
#!/bin/bash
URL="http://doxieflashair.local"
DIRS="/DCIM/100DOXIE"
list () {
curl -s "${URL}/command.cgi?op=100&DIR=${1}" \
| awk 'BEGIN { FS=","; OFS="/" } /.+,(.+,){3}/ { print $1,$2 }'
}

Make it real

Ideas are cheap. Make a prototype, sketch a CLI session, draw a wireframe. Discuss around concrete examples, not hand-waving abstractions. Don't say you did something, provide a URL that proves it.

Ship it

Nothing is real until it's being used by a real user. This doesn't mean you make a prototype in the morning and blog about it in the evening. It means you find one person you believe your product will help and try to get them to use it.

Do it with style

@ddesilva
ddesilva / youtube-helper.js
Created July 9, 2012 23:22
Require.js Module for the YouTube Iframe API
define(["require", "exports"], function (require, exports) {
exports.YouTubeHelper = function (settings) {
// MEMBERS & DEFAULTS #################################################################################################################################################
var documentRef;
var originURL = ""; // for cross site checks
var targetContainer;
var target;
var parentContainer; // used for adding popups back into the original spot
@natestarner
natestarner / Nodejs Instructions
Created March 8, 2012 05:50
Complete Nodejs Environment Setup
The objective of this post is to get you from absolutely nothing, to a fully functional nodejs environment.
Software used: Ubuntu 11.10, Nodejs v0.6.12, Nginx, MongoDB, Redis, and NPM modules.
1. Download and install the latest version of Ubuntu: http://www.ubuntu.com/download (don't select any extra items to install when prompted)
2. Once you are logged in and are at your Ubuntu command prompt, install the necessary software you will need:
a. sudo apt-get install openssh-server
b. sudo apt-get install libssl-dev
c. sudo apt-get install git
d. sudo apt-get install g++
e. sudo apt-get install make