Larry Gordon psyrendust

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.

ZSH CheatSheet

This is a cheat sheet for how to perform various actions to ZSH, which can be tricky to find on the web as the syntax is not intuitive and it is generally not very well-documented.

Strings

Description	Syntax
Get the length of a string	`${#VARNAME}`
Get a single character	`${VARNAME[index]}`

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

	import * as React from 'react';
	import { Component, ComponentClass, createRef, forwardRef, Ref } from 'react';

	const myHoc = <ComposedComponentProps extends {}>(
	ComposedComponent: ComponentClass<ComposedComponentProps>,
	) => {
	type ComposedComponentInstance = InstanceType<typeof ComposedComponent>;

	type WrapperComponentProps = ComposedComponentProps & {
	wrapperComponentProp: number;

	/**
	* Mouse wheel polyfill inspired by cross-browser example on mdn wiki.
	*
	* It supports relatively modern browsers, which already support addEventListener and Array forEach methods.
	* Effectively it is targeting webkit based browsers. I didn't have opportunity to test it on old Firefox.
	* Method addEventListener is supported in IE9, which already supports wheel event. I guess one could combine
	* it with polyfill for addEventListener to have support in IE 6-8. In that case one would have to also wrap
	* all addEventListener methods provided by the polyfill (last block below).
	*
	* @see https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel?redirectlocale=en-US&redirectslug=DOM%2FMozilla_event_reference%2Fwheel#Listening_to_this_event_across_browser

	<polymer-element name="require-js" attributes="libnames event">
	<script>
	(function() {
	// Helper function to add a script.
	var addScript = function(src) {
	var script = document.createElement('script');
	script.src = src;
	var s = document.querySelector('script');
	s.parentNode.insertBefore(script, s);
	return script;

	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

	@mixin opacity($val) {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" $val * 100 ")"; /* IE 8 */
	filter: alpha(opacity= $val * 100); /* IE 5-7 */
	-khtml-opacity: $val; /* Safari 1.x (pre WebKit) */
	-moz-opacity: $val; /* Firefox < 0.9 */
	opacity: $val; /* FF 0.9+, Safari 2+, Chrome 1+, Opera 9+, IE 9+, iOS 3+, Android 2.2+) */
	zoom: 1; /* gives the object layout */
	}