Skip to content

Instantly share code, notes, and snippets.

@paulirish
paulirish / what-forces-layout.md
Last active April 26, 2024 05:24
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
@khalidx
khalidx / node-typescript-esm.md
Last active April 22, 2024 15:40
A Node + TypeScript + ts-node + ESM experience that works.

The experience of using Node.JS with TypeScript, ts-node, and ESM is horrible.

There are countless guides of how to integrate them, but none of them seem to work.

Here's what worked for me.

Just add the following files and run npm run dev. You'll be good to go!

package.json

@scottburton11
scottburton11 / gist:3222152
Created August 1, 2012 00:58
Audio Compression for Voiceover

About compression

Audio compression is used to reduce the dynamic range of a recording. Dynamic range is the difference between the loudest and softest parts of an audio signal. It was originally used to guard against defects when cutting wax and vinyl phonograph records, but generally became useful as a way of increasing the loudness of an audio recording without achieving distortion.

The goal of most compression applications is to increase the amplitude of the softest parts of a recording, without increasing the amplitude of the loudest parts.

Compressor anatomy

Compressors generally all have the same conceptual parts. However, not all compressors present variable controls for all parts to the user. If you don't see all of your compressor's controls here, there's a chance it either has a fixed value (and no control), or is named something else:

@isaacs
isaacs / comma-first-var.js
Created April 6, 2010 19:24
A better coding convention for lists and object literals in JavaScript
// See comments below.
// This code sample and justification brought to you by
// Isaac Z. Schlueter, aka isaacs
// standard style
var a = "ape",
b = "bat",
c = "cat",
d = "dog",
@piscisaureus
piscisaureus / pr.md
Created August 13, 2012 16:12
Checkout github pull requests locally

Locate the section for your github remote in the .git/config file. It looks like this:

[remote "origin"]
	fetch = +refs/heads/*:refs/remotes/origin/*
	url = git@github.com:joyent/node.git

Now add the line fetch = +refs/pull/*/head:refs/remotes/origin/pr/* to this section. Obviously, change the github url to match your project's URL. It ends up looking like this:

@bebraw
bebraw / gameengines.md
Created January 6, 2011 18:07
List of JS game engines. You can find a wikified version at https://github.com/bebraw/jswiki/wiki/Game-Engines. Feel free to modify that. I sync it here every once in a while.

IMPORTANT! Remember to check out the wiki page at https://github.com/bebraw/jswiki/wiki/Game-Engines for the most up to date version. There's also a "notes" column in the table but it simply does not fit there... Check out the raw version to see it.

This table contains primarily HTML5 based game engines and frameworks. You might also want to check out the [[Feature Matrix|Game-Engine-Feature-Matrix]], [[Game Resources]] and [[Scene Graphs]].

Name Size (KB) License Type Unit Tests Docs Repository Notes
Akihabara 453 GPL2, MIT Classic Repro no API github Intended for making classic arcade-style games in JS+HTML5
AllBinary Platform Platform Dependent AllBinary 2D/2.5D/3D n
@chriseppstein
chriseppstein / 0_selector_hacks.scss
Created September 14, 2011 04:27
This gist demonstrates some uses of the new sass feature: Passing content blocks to mixins.
@mixin ie6 { * html & { @content } }
#logo {
background-image: url("/images/logo.png");
@include ie6 { background-image: url("/images/logo.gif"); }
}
@nicdaCosta
nicdaCosta / Grep.js
Last active March 9, 2024 13:39
Basic function that searches / filters any object or function and returns matched properties.
/*
Grep.js
Author : Nic da Costa ( @nic_daCosta )
Created : 2012/11/14
Version : 0.2
(c) Nic da Costa
License : MIT, GPL licenses
Overview:
Basic function that searches / filters any object or function and returns matched properties.
@dmethvin
dmethvin / gist:1676346
Created January 25, 2012 13:51
Breakpoint on access to a property
function debugAccess(obj, prop, debugGet){
var origValue = obj[prop];
Object.defineProperty(obj, prop, {
get: function () {
if ( debugGet )
debugger;
return origValue;
},