Skip to content

Instantly share code, notes, and snippets.

View bridgestew's full-sized avatar

Bridget Stewart bridgestew

View GitHub Profile
@zachleat
zachleat / gist:8cd9f1844c7144099c54533fff1b0a76
Created April 18, 2020 04:17
Eleventy Vue Responsive Images Plugin Sample Input/Output
<responsive-image
path="./src/images/home-store.jpg"
alt="The front entrance to a store"
:widths="[350, null]" />
<!-- BECOMES -->
<picture>
<source srcset="/v3/img/respimg/ef7c5bc4-350.webp 350w, /v3/img/respimg/ef7c5bc4.webp 589w" type="image/webp">
<source srcset="/v3/img/respimg/ef7c5bc4-350.jpeg 350w, /v3/img/respimg/ef7c5bc4.jpeg 589w" type="image/jpeg">
@paulirish
paulirish / what-forces-layout.md
Last active June 22, 2024 12:14
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
@seanmtracey
seanmtracey / ES6 Version
Last active December 22, 2015 21:59
Random color generation for all DOM elements so you can see where that pesky whitespace is coming from.
m=Math.random,v=255;Array.from(document.querySelectorAll("*")).forEach(e=>{e.style.background=`rgb(${m()*v|0},${m()*v|0},${m()*v|0})`})
@mutewinter
mutewinter / Alfred 3 Workflows.md
Last active November 25, 2020 14:14
A list of Alfred 3 workflows I'm using.
@mbostock
mbostock / .block
Last active March 1, 2024 06:07
The Gist to Clone All Gists
license: gpl-3.0
@simX
simX / hidpi.txt
Created July 28, 2012 04:58
Enable HiDPI mode in Mountain Lion w/o Quartz Debug
sudo defaults write /Library/Preferences/com.apple.windowserver DisplayResolutionEnabled -bool YES;
sudo defaults delete /Library/Preferences/com.apple.windowserver DisplayResolutionDisabled;
// by the way, you need to logout and log back in for this to take effect. Or at least that's what
// Quartz Debug says. Who knows, maybe it's lying?
// P.S. Go to [Apple menu --> System Preferences --> Displays --> Display --> Scaled] after logging
// back in, and you'll see a bunch of "HiDPI" resolutions in the list to choose from.
@bridgestew
bridgestew / .gitignore
Created May 17, 2012 14:33
How the world should work
Brad
@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
@scottjehl
scottjehl / hideaddrbar.js
Created August 31, 2011 11:42
Normalized hide address bar for iOS & Android
/*
* Normalized hide address bar for iOS & Android
* (c) Scott Jehl, scottjehl.com
* MIT License
*/
(function( win ){
var doc = win.document;
// If there's a hash, or addEventListener is undefined, stop here
if( !location.hash && win.addEventListener ){