ryan neptune ryanve

Improved .visually-hidden

Theorically bulletproof CSS class for visually hide anything and keep it accessible to ATs.

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

The problem:

When writing a React component, you want to target all environments. It is easy to generate a build that will work on the server and browser with Webpack, and as a bonus you can use loaders (like babel-loader for ES6 code).

When you generate this bundle, you should rely on "react" as an external so it isn't included in the bundle. In all environments this is desired behavior so you don't duplicate "react" and break it. This is necessary both because it would make a much larger bundle than necessary, but also because React behaves badly when multiple copies are loaded.

If you do this, you'll end up with a UMD shim like:

(function webpackUniversalModuleDefinition(root, factory) {

	$space-inset-default = 16px 16px 16px 16px;
	$space-inset-xs = 4px 4px 4px 4px;
	$space-inset-s = 8px 8px 8px 8px;
	$space-inset-m = 16px 16px 16px 16px;
	$space-inset-l = 32px 32px 32px 32px;
	$space-inset-xl = 64px 64px 64px 64px;
	$space-stack-default = 0 0 16px 0;
	$space-stack-xs = 0 0 4px 0;
	$space-stack-s = 0 0 8px 0;
	$space-stack-m = 0 0 16px 0;

	/**
	* eslint.recommended (annotated)
	* ================
	* Annotated defaults based on eslint.recommended
	*
	* @author: wassname
	* @license: MIT
	* @website https://gist.github.com/wassname/4693303388396c5f074b10865a969b43
	* @date 2017-11-13T23:08
	* @eslint-version: 4.11.0

	/*!
	* Copyright 2015 Google Inc. All rights reserved.
	*
	* Licensed under the Apache License, Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.
	* You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software

	// Helpers.
	import { convertToText } from './';

	/*
	You would call this when receiving a plain text
	value back from an API, and before inserting the
	text into the `contenteditable` area on a page.
	*/
	const convertToMarkup = (str = '') => {
	return convertToText(str).replace(/\n/g, '<br>');

	# Version key/value should be on his own line
	PACKAGE_VERSION=$(cat package.json \
	\| grep version \
	\| head -1 \
	\| awk -F: '{ print $2 }' \
	\| sed 's/[",]//g')

	echo $PACKAGE_VERSION

	{% comment %}
	*
	* This loop loops through a collection called `collection_name`
	* and sorts it by the front matter variable `date` and than filters
	* the collection with `reverse` in reverse order
	*
	* To make it work you first have to assign the data to a new string
	* called `sorted`.
	*
	{% endcomment %}

	var spawnSync = require('spawn-sync');
	var NODE_ENV = process.env.NODE_ENV;
	var production = (NODE_ENV === 'production');

	/**
	* `npm dedupe` in cwd
	* @return {undefined}
	*/
	var dedupe = function() {
	var result;