Skip to content

Instantly share code, notes, and snippets.

@paulirish
paulirish / what-forces-layout.md
Last active March 28, 2024 11:45
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
@willurd
willurd / web-servers.md
Last active March 26, 2024 18:11
Big list of http static server one-liners

Each of these commands will run an ad hoc http static server in your current (or specified) directory, available at http://localhost:8000. Use this power wisely.

Discussion on reddit.

Python 2.x

$ python -m SimpleHTTPServer 8000
@Restuta
Restuta / framework-sizes.md
Last active March 7, 2024 00:01
Sizes of JS frameworks, just minified + minified and gzipped, (React, Angular 2, Vue, Ember)

Below is the list of modern JS frameworks and almost frameworks – React, Vue, Angular, Ember and others.

All files were downloaded from https://cdnjs.com and named accordingly. Output from ls command is stripped out (irrelevant stuff)

As-is (minified)

$ ls -lhS
566K Jan 4 22:03 angular2.min.js
@kdzwinel
kdzwinel / main.js
Last active March 1, 2024 01:52
List all undefined CSS classes
/*
This script attempts to identify all CSS classes mentioned in HTML but not defined in the stylesheets.
In order to use it, just run it in the DevTools console (or add it to DevTools Snippets and run it from there).
Note that this script requires browser to support `fetch` and some ES6 features (fat arrow, Promises, Array.from, Set). You can transpile it to ES5 here: https://babeljs.io/repl/ .
Known limitations:
- it won't be able to take into account some external stylesheets (if CORS isn't set up)
- it will produce false negatives for classes that are mentioned in the comments.
@moehlone
moehlone / make_writable.js
Created March 17, 2016 08:27
Make JavaScript readonly propertys writable (example for overwriting navigator.userAgent; useful for unit tests -> browser detection)
/**
* Creates a read/writable property which returns a function set for write/set (assignment)
* and read/get access on a variable
*
* @param {Any} value initial value of the property
*/
function createProperty(value) {
var _value = value;
/**
@kfatehi
kfatehi / _list-github-pull-requests.md
Last active February 12, 2024 19:09
list pull requests across entire organization
@ustun
ustun / eslint-auto.el
Created January 12, 2016 23:59
run eslint --fix on emacs file save
;;; runs eslint --fix on the current file after save
;;; alpha quality -- use at your own risk
(defun eslint-fix-file ()
(interactive)
(message "eslint --fixing the file" (buffer-file-name))
(shell-command (concat "eslint --fix " (buffer-file-name))))
(defun eslint-fix-file-and-revert ()
(interactive)
@cirocosta
cirocosta / stress-test.sh
Created July 9, 2015 18:58
naive http server stress tester using cURL
#!/bin/bash
#### Default Configuration
CONCURRENCY=4
REQUESTS=100
ADDRESS="http://localhost:8080/"
show_help() {
cat << EOF
@richard-flosi
richard-flosi / assertions-compareScreenshot.js
Created August 27, 2014 14:25
Nightwatch with Visual Regression testing
// assertions/compareScreenshot.js
var resemble = require('resemble'),
fs = require('fs');
exports.assertion = function(filename, expected) {
var screenshotPath = 'test/screenshots/',
baselinePath = screenshotPath + 'baseline/' + filename,
resultPath = screenshotPath + 'results/' + filename,
diffPath = screenshotPath + 'diffs/' + filename;
@alexbevi
alexbevi / pre-commit.sh
Created August 23, 2012 12:05
Git pre-commit hook that checks ruby source files for Pry breakpoints
# Git pre-commit hook to check all staged Ruby (*.rb/haml/coffee) files
# for Pry binding references
#
# Installation
#
# ln -s /path/to/pre-commit.sh /path/to/project/.git/hooks/pre-commit
#
# Based on
#
# http://codeinthehole.com/writing/tips-for-using-a-git-pre-commit-hook/