Tom Cunningham thomasthesecond

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

Use ESM yourself. (preferred)
Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
Stay on the existing version of the package until you can move to ESM.

The issue:

..mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

(from a new defunct https://developers.google.com/mobile/articles/fast_buttons article)

touch-action CSS property can be used to disable this behaviour.

touch-action: manipulation The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.

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

TLDR: a React component should either manage its own state, or expose a callback so that its parent can. But never both.

Sometimes our first impulse is for a component to entirely manage its own state. Consider this simple theater seating picker that has a letter for a row, and a number for a seat. Clicking the buttons to increment each value is hardly the height of user-interface design, but never mind - that's how it works:

/* @flow */
var React = require('react');

var Letter: React.ReactClass = React.createClass({
  getInitialState: function(): any {

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

Prolog

Google Chrome Developers says:

The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23.

Some examples of file size differences: WOFF vs. WOFF2

TTF to WOFF2 converting

http://www.fontsquirrel.com/tools/webfont-generator

Templating in EE vs. Craft CMS.

Here are a few common tasks you might do in your templates, as they would be written in ExpressionEngine vs. Craft CMS.

	#!/bin/sh

	#
	# sandsync.sh
	#
	# This is a shell script for keeping sandbox and local EE
	# environments in sync. It takes a backup of a project's sandbox database,
	# clears the local database and imports the remote's backup into local,
	# and performs a one-way sync of the uploads directory from remote to local.
	# Drop it in the directory above your version-controlled projected directory.

	// ----
	// Sass (v3.3.0.rc.2)
	// Compass (v1.0.0.alpha.17)
	// ----

	//
	// map-fetch($map, $keys)
	//
	// An easy way to fetch a deep value in a multi-level map. Works much like
	// map-get() except that you pass multiple keys as the second parameter to

	Here is a list of scopes to use in Sublime Text 2 snippets -

	ActionScript: source.actionscript.2
	AppleScript: source.applescript
	ASP: source.asp
	Batch FIle: source.dosbatch
	C#: source.cs
	C++: source.c++
	Clojure: source.clojure
	CoffeeScript: source.coffee