Skip to content

Instantly share code, notes, and snippets.

@paulirish
paulirish / what-forces-layout.md
Last active July 19, 2025 12:35
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
@staltz
staltz / introrx.md
Last active July 19, 2025 08:08
The introduction to Reactive Programming you've been missing
@vasanthk
vasanthk / System Design.md
Last active July 18, 2025 05:13
System Design Cheatsheet

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

  1. Clarify and agree on the scope of the system
  • User cases (description of sequences of events that, taken together, lead to a system doing something useful)
    • Who is going to use it?
    • How are they going to use it?
@debloper
debloper / bandwidth.js
Last active July 15, 2025 12:50
Determine client's connection speed with JavaScript
// Let's initialize the primitives
var startTime, endTime, fileSize;
// Set up the AJAX to perform
var xhr = new XMLHttpRequest();
// Rig the call-back... THE important part
xhr.onreadystatechange = function () {
// we only need to know when the request has completed
@branneman
branneman / better-nodejs-require-paths.md
Last active June 24, 2025 22:40
Better local require() paths for Node.js

Better local require() paths for Node.js

Problem

When the directory structure of your Node.js application (not library!) has some depth, you end up with a lot of annoying relative paths in your require calls like:

const Article = require('../../../../app/models/article');

Those suck for maintenance and they're ugly.

Possible solutions

@paulirish
paulirish / rAF.js
Last active June 24, 2025 18:39
requestAnimationFrame polyfill
// 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'];
@sebmarkbage
sebmarkbage / Enhance.js
Last active June 19, 2025 19:41
Higher-order Components
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: 'Hello' });
}
render() {
@DanHerbert
DanHerbert / fix-homebrew-npm.md
Last active June 8, 2025 15:03
Instructions on how to fix npm if you've installed Node through Homebrew on Mac OS X or Linuxbrew

OBSOLETE

This entire guide is based on an old version of Homebrew/Node and no longer applies. It was only ever intended to fix a specific error message which has since been fixed. I've kept it here for historical purposes, but it should no longer be used. Homebrew maintainers have fixed things and the options mentioned don't exist and won't work.

I still believe it is better to manually install npm separately since having a generic package manager maintain another package manager is a bad idea, but the instructions below don't explain how to do that.

Fixing npm On Mac OS X for Homebrew Users

Installing node through Homebrew can cause problems with npm for globally installed packages. To fix it quickly, use the solution below. An explanation is also included at the end of this document.

<alignment jcr:primaryType="nt:unstructured"
name="./alignChildren"
fieldLabel="Alignment of components"
required="{Boolean}true"
selectionMode="single"
sling:resourceType="granite/ui/components/coral/foundation/form/buttongroup">
<items jcr:primaryType="nt:unstructured">
<default jcr:primaryType="nt:unstructured"
name="./default"
@paulirish
paulirish / bling.js
Last active May 26, 2025 20:31
bling dot js
/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };