Skip to content

Instantly share code, notes, and snippets.

View programurr's full-sized avatar

programurr programurr

54 followers · 47 following
View GitHub Profile
@paulirish
paulirish / what-forces-layout.md
Last active October 23, 2025 10: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
@chantastic
chantastic / on-jsx.markdown
Last active May 13, 2025 12:04
JSX, a year in

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

@matt-bailey
matt-bailey / async-and-conditional-css-loading.html
Last active August 19, 2025 16:14
A simple script (based on one by Google) for loading CSS files asynchronously and conditionally based on body tag classes
<html>
<head>
<!-- Inlined critical styles -->
<style>.blue{color:blue;}</style>
<!-- CSS loader -->
<script>
/* ==========================================================================
Load CSS asynchronously and conditionally after initial painting
@cowboy
cowboy / child-test.js
Created August 22, 2012 16:19
Node.js: I can't seem to capture a child process's stdout and stderr in Windows.
var parent = function() {
var spawn = require('child_process').spawn;
var child = spawn(process.execPath, [process.argv[1], 123]);
var stdout = '';
var stderr = '';
child.stdout.on('data', function(buf) {
console.log('[STR] stdout "%s"', String(buf));
stdout += buf;
});
child.stderr.on('data', function(buf) {
@EvanHahn
EvanHahn / gist:2587465
Last active October 9, 2023 01:26
Caesar shift in JavaScript
/*
JavaScript Caesar shift
by Evan Hahn (evanhahn.com)
"Encrypt" like this:
caesarShift('Attack at dawn!', 12); // Returns "Mffmow mf pmiz!"
And "decrypt" like this:
@louisremi
louisremi / animLoopX.js
Created July 29, 2011 17:34
Animation loop with requestAnimationFrame
// Cross browser, backward compatible solution
(function( window, Date ) {
// feature testing
var raf = window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
window.animLoop = function( render, element ) {
var running, lastFrame = +new Date;
@joelambert
joelambert / README
Created June 1, 2011 11:03
Drop in replacements for setTimeout()/setInterval() that makes use of requestAnimationFrame() where possible for better performance
Drop in replace functions for setTimeout() & setInterval() that
make use of requestAnimationFrame() for performance where available
http://www.joelambert.co.uk
Copyright 2011, Joe Lambert.
Free to use under the MIT license.
http://www.opensource.org/licenses/mit-license.php