Skip to content

Instantly share code, notes, and snippets.

Avatar

Paul Irish paulirish

View GitHub Profile
@paulirish
paulirish / what-forces-layout.md
Last active Jan 25, 2021
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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
@paulirish
paulirish / rAF.js
Last active Jan 23, 2021
requestAnimationFrame polyfill
View rAF.js
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
@paulirish
paulirish / how-to-view-source-of-chrome-extension.md
Last active Jan 22, 2021
How to view-source of a Chrome extension
View how-to-view-source-of-chrome-extension.md

Option 1: Command-line download extension as zip and extract

extension_id=jifpbeccnghkjeaalbbjmodiffmgedin   # change this ID
curl -L -o "$extension_id.zip" "https://clients2.google.com/service/update2/crx?response=redirect&os=mac&arch=x86-64&nacl_arch=x86-64&prod=chromecrx&prodchannel=stable&prodversion=44.0.2403.130&x=id%3D$extension_id%26uc" 
unzip -d "$extension_id-source" "$extension_id.zip"

Thx to crxviewer for the magic download URL.

View bling.js
/* bling.js */
window.$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function (name, fn) {
this.addEventListener(name, fn);
}
NodeList.prototype.__proto__ = Array.prototype;
@paulirish
paulirish / gist:5558557
Last active Jan 12, 2021
a brief history of detecting local storage
View gist:5558557

A timeline of the last four years of detecting good old window.localStorage.


Jan Lenhart, bless his heart contributed the first patch for support:

October 2009: 5059daa

@paulirish
paulirish / thing.js
Created May 7, 2018
log the clipboard contents
View thing.js
document.body.innerHTML = 'Paste or drop items onto this page. View results in console.';
function getPayload(item) {
const kind = item.kind;
switch (kind) {
case 'string': return new Promise(res => item.getAsString(res));
case 'file': return Promise.resolve(item.getAsFile());
default: throw new Error('unknown item kind! ' + kind);
}
@paulirish
paulirish / args.gn
Last active Jan 5, 2021
How to build Chromium to hack on DevTools
View args.gn
# Build arguments for the gn build
# You can set these with `gn args out/Default`
# ( and they're stored in src/out/Default/args.gn )
# See "gn args out/Default --list" for available build arguments
# component build, because people love it
is_component_build = true
# release build, because its faster
is_debug = false
@paulirish
paulirish / log-the-datatransfer-data.js
Created Feb 15, 2018
log paste and copy event payloads
View log-the-datatransfer-data.js
document.body.innerHTML = 'Paste or drop items onto this page. View results in console.';
function getPayload(item) {
const kind = item.kind;
switch (kind) {
case 'string': return new Promise(res => item.getAsString(res));
case 'file': return Promise.resolve(item.getAsFile());
default: throw new Error('unknown item kind! ' + kind);
}
@paulirish
paulirish / data-markdown.user.js
Last active Dec 27, 2020
*[data-markdown] - use markdown, sometimes, in your HTML
View data-markdown.user.js
// ==UserScript==
// @name Use Markdown, sometimes, in your HTML.
// @author Paul Irish <http://paulirish.com/>
// @link http://git.io/data-markdown
// @match *
// ==/UserScript==
// If you're not using this as a userscript just delete from this line up. It's cool, homey.
View open-chrome-tabs-in-safari.scpt
tell application "Google Chrome"
set tab_list to every tab in the front window
repeat with the_tab in tab_list
set the_url to the URL of the_tab
tell application "Safari" to open location the_url
end repeat
end tell