Skip to content

Instantly share code, notes, and snippets.

View patrickodacre's full-sized avatar

Patrick O'Dacre patrickodacre

View GitHub Profile
@paulirish
paulirish / what-forces-layout.md
Last active May 6, 2024 07:54
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
@cletusw
cletusw / .eslintrc
Last active February 29, 2024 20:24
ESLint Reset - A starter .eslintrc file that resets all rules to off and includes a description of what each rule does. From here, enable the rules that you care about by changing the 0 to a 1 or 2. 1 means warning (will not affect exit code) and 2 means error (will affect exit code).
{
// http://eslint.org/docs/rules/
"ecmaFeatures": {
"binaryLiterals": false, // enable binary literals
"blockBindings": false, // enable let and const (aka block bindings)
"defaultParams": false, // enable default function parameters
"forOf": false, // enable for-of loops
"generators": false, // enable generators
"objectLiteralComputedProperties": false, // enable computed object literal property names
@benpriebe
benpriebe / object-creation.md
Last active July 13, 2023 21:29
Douglas Crockford - Create Object Recipe (2014)

Douglas Crockford showed a slide showing how he creates JavaScript objects in 2014.

He no longer uses Object.create(), avoids 'this' and doesn't even care about memory reduction by using prototypes.

https://www.youtube.com/watch?v=bo36MrBfTk4 (skip ahead to 35 mins for relevant section)

Here is the pattern described on the slide:

function constructor(spec) {
@necolas
necolas / README.md
Last active March 28, 2024 20:34
Experimenting with component-based HTML/CSS naming and patterns

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name