Skip to content

Instantly share code, notes, and snippets.

paulirish /
Last active October 3, 2023 10: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
dergachev /
Last active October 1, 2023 12:07
OS X Screencast to animated GIF

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Screencapture GIF


To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

ljharb /
Last active September 28, 2023 14:12
Array iteration methods summarized

Array Iteration

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.


JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it mu

maxboeck / donottrack.js
Last active September 27, 2023 06:59
Check "Do Not Track" Client Hint
View donottrack.js
const allowsTracking = () => {
const dnt =
window.doNotTrack ||
navigator.doNotTrack ||
if (dnt === 1 || dnt === '1' || dnt === 'yes') {
return false
if ('msTrackingProtectionEnabled' in window.external) {
return !window.external.msTrackingProtectionEnabled()
DaveMDS /
Last active September 22, 2023 17:02 — forked from ta264/
Install docker on arm64 synology
set -e
echo "Downloading docker $DOCKER_VERSION-$ARCH"
curl "$ARCH/docker-$DOCKER_VERSION.tgz" | tar -xz -C /usr/local/bin --strip-components=1
praveenpuglia /
Last active September 5, 2023 15:46
Everything you need to know about Shadow DOM

I am moving this gist to a github repo so more people can contribute to it. Also, it makes it easier for me to version control.

Please go to - for latest version of this document. Also, if you find the document useful, please shower your love, go ⭐️ it. :)

Shadow DOM

Heads Up! It's all about the V1 Spec.

In a nutshell, Shadow DOM enables local scoping for HTML & CSS.

asafge / ng-really.js
Created November 12, 2013 13:06
ng-really? An AngularJS directive that creates a confirmation dialog for an action.
View ng-really.js
* A generic confirmation for risky actions.
* Usage: Add attributes: ng-really-message="Are you sure"? ng-really-click="takeAction()" function
angular.module('app').directive('ngReallyClick', [function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
var message = attrs.ngReallyMessage;
vieron / Export each as SVG.js
Last active June 4, 2021 20:26
Export each as SVG. Modified some lines from the original by Aaron Beall ( to export each selected object as a separate SVG file.
View Export each as SVG.js
// Fireworks JavaScript Command
// Exports current document state as SVG graphics format
// Install by copying to Fireworks/Configuration/Commands/
// Run via the Commands menu in Fireworks
// Aaron Beall 2010-2011
// Version
var VERSION = "0.6.1";
// Params