Christopher Van Wiemeersch cvan

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

Launch quicktime player
do Screen recording

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

Goal

We would like to observe changes to the DOM and, for each changed element el, call one or more functions f1, f2, ..., fn, passing el as an argument to each. For each function, if it returns true, add a CSS class C to el, and otherwise remove class C from el.

Solution

Register a mutation observer on the root element of the DOM. The mutation observer is responsible for tracking the "generation" of all elements in the DOM and for marshalling MutationRecords to a Web Worker. Specifically:

For each mutation:

increment the generation of the mutated element and its ancestors

Include this snippet to promisify any node function that uses the standard form:

var Promise = require( 'es6-promise' ).Promise,
    promisify;

promisify = (function ( slice ) {
	return function ( fn, context ) {
		return function () {
 var args = slice.call( arguments );

This describes the workflow to use Heroku as a staging environment. It assumes you already have an existing heroku app in production.

# rename your git remote heroku to something else like production
git remote rename heroku production

# so now you will push as: git push production master

# create the staging app
heroku apps:create staging-appname

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bookmarklet</title>
	<script>
	window.onload = function(e) {
	var bookmark = document.getElementById("bookmark");
	var code = document.getElementById("code");

	echo "Creating an SSH key for you..."
	ssh-keygen -t rsa

	echo "Please add this public key to Github \n"
	echo "https://github.com/account/ssh \n"
	read -p "Press [Enter] key after this..."

	echo "Installing xcode-stuff"
	xcode-select --install

	`
	<h2>Messages (${ messages.length }):</h2>
	<ul>
	${ messages.map(((msg, i) => `
	<li class="${ i % 2 ? 'odd' : 'even' }">
	${ msg.subject }
	${ msg.read ?
	`this message is read`
	:
	`this message is unread`

	function Debounce(fn, ms) {
	this.timeout = null;
	this.fn = fn;
	this.ms = ms;
	}
	Debounce.prototype.start = function () {
	this.timeout = setTimeout(this.fn, this.ms);
	};
	Debounce.prototype.reset = function () {
	this.abort();

	<script type="text/javascript">
	(function () {
	"use strict";
	// once cached, the css file is stored on the client forever unless
	// the URL below is changed. Any change will invalidate the cache
	var css_href = './index_files/web-fonts.css';
	// a simple event handler wrapper
	function on(el, ev, callback) {
	if (el.addEventListener) {
	el.addEventListener(ev, callback, false);