Stephen Richardson sbrichardson

## what-forces-layout.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                sbrichardson
                / what-forces-layout.md
            
            
              Created
              December 9, 2019 01:42
                — forked from paulirish/what-forces-layout.md
            
              
                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.
Element

Box metrics


elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
elem.getClientRects(), elem.getBoundingClientRect()


## clone-all-twitter-github-repos.sh
curl -s https://api.github.com/orgs/twitter/repos?per_page=200 | ruby -rubygems -e 'require "json"; JSON.load(STDIN.read).each { |repo| %x[git clone #{repo["ssh_url"]} ]}'

## opencv_blackfly.cpp
#include "FlyCapture2.h"

#include <opencv2/core/core.hpp>
#include <opencv2/highgui/highgui.hpp>

#include <iostream>

using namespace FlyCapture2;

int main()

## opencv_blackfly.cpp
#include "FlyCapture2.h"

#include <opencv2/core/core.hpp>
#include <opencv2/highgui/highgui.hpp>

#include <iostream>

using namespace FlyCapture2;

int main()

## tracking_info_from_email.js
/**
 * NOTE Breakdown of tracking url in shipping email from Amazon
 * Delivery by Amazon, Tracking ID: TBA269148761000
 *
 *
 * NOTE Process overview to obtain the tracking info and obtain
 * updates for the delivery.
 *
 * Do Once
 * ====================================

## Player.jsx
// @flow

import * as React from "react";
import {
  View,
  StyleSheet,
  Image,
  Animated,
  TouchableOpacity,
  Text,

## polar.js

/*
Make sure you are wearing the hr monitor, as it typically
goes to sleep when inactive, not allowing you to connect to it.

Instructions
=============
1. Using Google Chrome, open the dev console and paste the below code.
2. A panel near the address bar will open, searching for nearby bluetooth (ble)
   heart rate devices. Don't click away from the panel or Chrome will cancel the search.

## sqlite-to-json.js
/* NOTE Originally  based on github.com/Philzen/WebSql-Loader */

const TABLE_SQL = "SELECT tbl_name from sqlite_master WHERE type = 'table'"
const MASTER_SQL = 'SELECT sql FROM sqlite_master'
const WEBKIT_INFO = '__WebKitDatabaseInfoTable__'

/* TODO Add other formats */
const FORMAT = {
  JSON: 'json',
  // CSV: 'csv',

## uploadLink.js
// METHOD #1 - More performant/preferred

/**
 * Apollo Terminating link
 * The split will skip Batching if an
 * operation's context contains hasUpload: true
 */
const httpLink = ApolloLink.split(
  operation => operation.getContext().hasUpload,
  createUploadLink(OPTS),

## deploy.sh

#!/bin/bash
#
# Checks Google Cloud container registry to see if build has finished deploying new image from
# source repository recent update. "GCP" stands for "Google Cloud Platform" when used below.
#
# By default, retries 9 times, waiting 45 seconds between attempts.
#
# Configure the variables at the top of the file for your environment
	#include "FlyCapture2.h"

	#include <opencv2/core/core.hpp>
	#include <opencv2/highgui/highgui.hpp>

	#include <iostream>

	using namespace FlyCapture2;

	int main()
	/**
	* NOTE Breakdown of tracking url in shipping email from Amazon
	* Delivery by Amazon, Tracking ID: TBA269148761000
	*
	*
	* NOTE Process overview to obtain the tracking info and obtain
	* updates for the delivery.
	*
	* Do Once
	* ====================================
	// @flow

	import * as React from "react";
	import {
	View,
	StyleSheet,
	Image,
	Animated,
	TouchableOpacity,
	Text,

	/*
	Make sure you are wearing the hr monitor, as it typically
	goes to sleep when inactive, not allowing you to connect to it.

	Instructions
	=============
	1. Using Google Chrome, open the dev console and paste the below code.
	2. A panel near the address bar will open, searching for nearby bluetooth (ble)
	heart rate devices. Don't click away from the panel or Chrome will cancel the search.
	/* NOTE Originally based on github.com/Philzen/WebSql-Loader */

	const TABLE_SQL = "SELECT tbl_name from sqlite_master WHERE type = 'table'"
	const MASTER_SQL = 'SELECT sql FROM sqlite_master'
	const WEBKIT_INFO = '__WebKitDatabaseInfoTable__'

	/* TODO Add other formats */
	const FORMAT = {
	JSON: 'json',
	// CSV: 'csv',
	// METHOD #1 - More performant/preferred

	/**
	* Apollo Terminating link
	* The split will skip Batching if an
	* operation's context contains hasUpload: true
	*/
	const httpLink = ApolloLink.split(
	operation => operation.getContext().hasUpload,
	createUploadLink(OPTS),

	#!/bin/bash
	#
	# Checks Google Cloud container registry to see if build has finished deploying new image from
	# source repository recent update. "GCP" stands for "Google Cloud Platform" when used below.
	#
	# By default, retries 9 times, waiting 45 seconds between attempts.
	#
	# Configure the variables at the top of the file for your environment