Skip to content

Instantly share code, notes, and snippets.

View garystorey's full-sized avatar
:octocat:

Gary Storey garystorey

:octocat:
View GitHub Profile
@datchley
datchley / app.js
Last active September 20, 2022 01:22
"Getting Functional with Javascript" Blog post source files
/**
* Primary application logic for our Functional Programming blog example
* See related blog series at: http://www.datchley.name/tag/functional-programming/
* Version: 2.0
*/
// A simple, resuable comparison for '>='
function greaterThanOrEqual(a, b) {
return a >= b
}
@paulirish
paulirish / what-forces-layout.md
Last active May 8, 2026 17:53
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
@mjackson
mjackson / composing-route-in-react-router-v6.md
Last active October 30, 2025 21:05
Notes on route composition in React Router v6, along with a suggested improvement you can make today to start upgrading

Composing <Route> in React Router v6

Composition of <Route> elements in React Router is changing in v6 from how it worked in v4/5 and in Reach Router. React Router v6 is the successor of both React Router v5 and Reach Router.

This document explains our rationale for making the change as well as a pattern you will want to avoid in v6 and a note on how you can start preparing your v5 app for v6 today.

Background

In React Router v5, we had an example of how you could create a element](https://github.com/remix-run/react-router/blob/320be7afe44249d5c025659bc00c3276a19f0af9/packages/react-router-dom/examples/Auth.js#L50-L52) to restrict access to certain routes on the page. This element was a simple [wrapper around an actual element that made a simple decision: is the user authenticated or not? If so, ren