Skip to content

Instantly share code, notes, and snippets.


Marcy Sutton marcysutton

View GitHub Profile
paulirish /
Last active Feb 26, 2021
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
View gist:64ef5320e87c4b09772a
Thank you for extending an invitation to speak at HighLoad++. I
sincerely appreciate your consideration.
I am an outspoken advocate for LGBTQ equality; this position is deeply
woven into my work. Clojure From The Ground Up is adamantly
LGBT-inclusive. Jepsen is named after a gay pop anthem and includes
dozens of references to same-sex relationships and trans identities. My
talk slides are populated with bearded nuns, genderqueer punks, and
trans hackers. My twitter feed is about as gay as it is possible to get.
bkardell / click-focus.js
Last active Aug 29, 2015
An experiment in effectively managing focus rings
View click-focus.js
document.addEventListener("DOMContentLoaded", function () {
document.body.addEventListener("mousedown", function (evt) {
if (! || === 'textbox' ||"disable-point-focus")) {"point-focused", true);
document.body.addEventListener("blur", function (evt) {
}, true);
kentcdodds / az-action.js
Created Nov 25, 2014
accessible ng-click
View az-action.js
angular.module('atac.common').directive('azAction', function azActionDirective() {
'use strict';
return {
restrict: 'A',
link: function(scope, el, attrs) {
el.attr('tabindex', 0);
el.on('click', action);
el.on('keyup', function(event) {
if (event.which === 32 || event.which === 13) {
ThomasBurleson / docSearcher.js
Last active Aug 29, 2015
Enhanced version of `docSearcher` webWorker discussed in Pete Darwin's blog [AngularJS Docs Performance](
View docSearcher.js
angular.module('search', [])
.service('docsSearch', ['$q','$rootScope','$timeout','NG_PAGES',BackgroundSearchService]);
* Document search service that uses Web Workers to index
* and search in the background.
function BackgroundSearchService($q, $rootScope, $timeout, NG_PAGES) {
console.log('Using WebWorker Search Index');
chrisbateman / Active Element
Last active Jan 10, 2019
Bookmarklet for logging the current document.activeElement
View Active Element

Bookmarklet: Active Element Logger

This will log the current document.activeElement to the console. Useful when debugging keyboard focus issues. Click once to turn it on, click again to turn it off.

Unfortunately, markdown gists aren't allowed to include JS in links, or this would work:

Active Element Logger

So you'll have to add this to your bookmarks the hard way:

jimbojsb / gist:1630790
Created Jan 18, 2012
Code highlighting for Keynote presentations
View gist:1630790

Step 0:

Get Homebrew installed on your mac if you don't already have it

Step 1:

Install highlight. "brew install highlight". (This brings down Lua and Boost as well)

Step 2: