Skip to content

Instantly share code, notes, and snippets.

View SwankyLegg's full-sized avatar

Andrew Swank SwankyLegg

  • Mountain View, CA
View GitHub Profile
@paulirish
paulirish / what-forces-layout.md
Last active May 23, 2024 14:12
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
@JamieMason
JamieMason / deep-reduce.js
Last active June 14, 2021 05:20
Perform a deeply recursive reduce on a JSON-encodable JavaScript Object hierarchy.
/**
* Perform a deeply recursive reduce on a set of JSON, or a JSON-encodable Object hierarchy.
*
* @param {Array|Object} collection
* @param {Function} fn
* @param {*} memo
* @return {*}
*/
function deepReduce(collection, fn, memo) {
@DanHerbert
DanHerbert / fix-homebrew-npm.md
Last active February 12, 2024 17:18
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.

@andershaig
andershaig / custom.css
Created March 27, 2013 18:07
Items Wobble on Load
@-webkit-keyframes wobble {
0% { -webkit-transform: translateX(0%); }
15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
30% { -webkit-transform: translateX(20%) rotate(3deg); }
45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
60% { -webkit-transform: translateX(10%) rotate(2deg); }
75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
100% { -webkit-transform: translateX(0%); }
}
@andershaig
andershaig / custom.css
Created March 27, 2013 18:06
Bigger Items on Hover
.entry-body {
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
@reyjrar
reyjrar / New-iTerm-Window.scpt
Created February 8, 2012 13:14
AppleScript to Open a New iTerm Window and bring it to the front
(*
* New-iTerm-Window.scpt
*
* Intended for use with QuickSilver
* I mapped option-y to running this script to create
* a new iTerm window on the current workspace
*
* Based on much Googling - very little "original" code here
* Comments/Suggestions to brad.lhotsky@gmail.com
*)
@kaievns
kaievns / gist:996893
Created May 28, 2011 14:20
Cubic Bezier function emulator
/**
* Cubic Bezier CSS3 transitions emulator
*
* See this post for more details
* http://st-on-it.blogspot.com/2011/05/calculating-cubic-bezier-function.html
*
* Copyright (C) 2011 Nikolay Nemshilov
*/
function Bezier(p1,p2,p3,p4) {
// defining the bezier functions in the polynomial form