Skip to content

Instantly share code, notes, and snippets.

@paulirish
paulirish / what-forces-layout.md
Last active April 30, 2024 17:56
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
@voxxit
voxxit / Dockerfile
Last active April 6, 2022 01:52
nginx v1.9.3 Dockerfile with HTTP/2 support baked in!
FROM alpine:latest
MAINTAINER Joshua Delsman <j@srv.im>
EXPOSE 443
ENV NGINX_VERSION 1.9.3
RUN apk add --update openssl-dev pcre-dev zlib-dev build-base \
&& rm -rf /var/cache/apk/* \
@benknight
benknight / gist:0a13088c4f152639ed97
Last active August 29, 2015 14:21
100vh workaround
var mediaQueryList = window.matchMedia('(orientation: portrait)');
function setMaxHeight (mediaQueryList) {
var vh = window.innerHeight;
var vw = window.innerWidth;
var header = document.querySelector('.site-header');
if (mediaQueryList.matches) {
header.style.height = Math.max(vh, vw);
} else {
@ericelliott
ericelliott / defaults-overrides.md
Last active May 7, 2023 13:52
ES6 defaults / overrides pattern

ES6 Defaults / Overrides Pattern

Combine default parameters and destructuring for a compact version of the defaults / overrides pattern.

function foo ({
    bar = 'no',
    baz = 'works!'
  } = {}) {
@cgmartin
cgmartin / gulpfile.js
Created February 8, 2015 21:03
Node ES6 istanbul, isparta, mocha-co gulpfile example
'use strict';
var gulp = require('gulp');
var del = require('del');
var mocha = require('gulp-mocha-co');
var istanbul = require('gulp-istanbul');
var isparta = require('isparta');
var coverageEnforcer = require('gulp-istanbul-enforcer');
var paths = {
server: {
@buth
buth / Dockerfile
Last active May 2, 2024 05:37
Docker Install ImageMagick
RUN \
curl -sfLO http://www.imagemagick.org/download/ImageMagick-6.9.0-4.tar.gz && \
echo 'cf51a1c6ebf627c627a8e6ac20aecce5f1425907c2cdb98c5a60f329c5c6caf2 ImageMagick-6.9.0-4.tar.gz' | sha256sum -c - && \
tar -xzf ImageMagick-6.9.0-4.tar.gz && \
cd ImageMagick-6.9.0-4 && \
./configure --prefix /usr/local && \
make install && \
cd .. && \
rm -rf ImageMagick*
@alexgorbatchev
alexgorbatchev / generate_cert.sh
Created September 9, 2014 13:26
Generate self signed https certificates for node.js express/hapi/etc
#!/bin/bash
openssl genrsa -out key.pem
openssl req -new -key key.pem -out csr.pem
openssl x509 -req -days 9999 -in csr.pem -signkey key.pem -out cert.pem
rm csr.pem
@staltz
staltz / introrx.md
Last active May 3, 2024 13:00
The introduction to Reactive Programming you've been missing
@rodleviton
rodleviton / imagemagick-install-steps
Created May 26, 2014 07:37
Installing Image Magick on Ubuntu 14.04
sudo -i
cd
apt-get install build-essential checkinstall && apt-get build-dep imagemagick -y
wget http://www.imagemagick.org/download/ImageMagick-6.8.7-7.tar.gz
tar xzvf ImageMagick-6.8.9-1.tar.gz
cd ImageMagick-6.8.9-1/
./configure --prefix=/opt/imagemagick-6.8 && make
checkinstall
@soheilhy
soheilhy / nginxproxy.md
Last active March 22, 2024 08:54
How to proxy web apps using nginx?

Virtual Hosts on nginx (CSC309)

When hosting our web applications, we often have one public IP address (i.e., an IP address visible to the outside world) using which we want to host multiple web apps. For example, one may wants to host three different web apps respectively for example1.com, example2.com, and example1.com/images on the same machine using a single IP address.

How can we do that? Well, the good news is Internet browsers