Cody Olsen stipsan

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

Default

Powerlevel10k

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

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

This API was removed in React 17

Interaction tracing with React

React recently introduced an experimental profiler API. After discussing this API with several teams at Facebook, one common piece of feedback was that the performance information would be more useful if it could be associated with the events that caused the application to render (e.g. button click, XHR response). Tracing these events (or "interactions") would enable more powerful tooling to be built around the timing information, capable of answering questions like "What caused this really slow commit?" or "How long does it typically take for this interaction to update the DOM?".

With version 16.4.3, React added experimental support for this tracing by way of a new NPM package, scheduler. However the public API for this package is not yet finalized and will likely change with upcoming minor releases, so it should be used with caution.

Handy Custom Elements' Patterns

^{Photo by Ricardo Gomez Angel on Unsplash}

This gist is a collection of common patterns I've personally used here and there with Custom Elements.

These patterns are all basic suggestions that could be improved, enriched, readapted, accordingly with your needs.

Everything I Know About UI Routing

Definitions

Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
1. pathname - The "file/directory" portion of the URL, like invoices/123
2. search - The stuff after ? in a URL like /assignments?showGrades=1.
3. query - A parsed version of search, usually an object but not a standard browser feature.
4. hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
5. state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.

	When pod install or pod update gets hanged at "Analyzing dependencies", please consider to reinstall cocoapods.

	#Uninstallation. Reference: http://superuser.com/questions/686317/how-to-fully-uninstall-the-cocoapods-from-the-mac-machine
	$gem list --local \| grep cocoapods

	#The list will show like this
	cocoapods (0.27.1, 0.20.2)
	cocoapods-core (0.27.1, 0.20.2)
	cocoapods-downloader (0.2.0, 0.1.2)

	let AnimationWrapper = React.createClass({
	render() {
	console.log(this.props.childClassName + ' render');

	return this.props.children;
	},

	componentWillAppear (callback) {
	console.log(this.props.childClassName + ' willappear');
	callback();

	// Plan on making a react/web component that reuses the layout logic from the worklet to lay out and
	// reoder a css columns top down layout to a ltr flow

	// From https://github.com/GoogleChromeLabs/houdini-samples

	registerLayout(
	'masonry',
	class {
	static get inputProperties() {
	return ['--padding', '--columns'];