Skip to content

Instantly share code, notes, and snippets.

View hartzis's full-sized avatar

(Brian) Emil Hartz hartzis

View GitHub Profile

Reach UI Philosophy

Reach UI is an accessible foundation for React applications and design systems.

The three equally important goals are to be:

  • Accessible
  • Composable
  • Stylable
import { useState, useEffect, useRef } from 'react';
// Usage
function App() {
// Create a ref that we add to the element for which we want to detect outside clicks
const ref = useRef();
// State for our modal
const [isModalOpen, setModalOpen] = useState(false);
// Call hook passing in the ref and a function to call on outside click
useOnClickOutside(ref, () => setModalOpen(false));
@quisido
quisido / some-component.js
Created September 10, 2018 16:45
Cache your React event listeners to improve performance.
class SomeComponent extends React.PureComponent {
// Each instance of SomeComponent has a cache of click handlers
// that are unique to it.
clickHandlers = {};
// Generate and/or return a click handler,
// given a unique identifier.
getClickHandler(key) {
@bvaughn
bvaughn / index.md
Last active April 3, 2024 07:41
Interaction tracing with React

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.

@ianmcnally
ianmcnally / mock-css-modules-for-jest.js
Last active June 5, 2018 14:56
Mocks a directory of css files with a css-modules like object
const { parse } = require('css')
const { readdirSync, readFileSync } = require('fs')
const { basename, extname, resolve } = require('path')
const camel = require('lodash.camelcase')
const baseNameForCSSFile = filename => basename(filename, '.css')
const isAClassSelector = selector => /^\./.test(selector)
const removeLeadingDotAndTrailingSelectors = selector =>
@newyankeecodeshop
newyankeecodeshop / ServingES6.md
Last active June 19, 2021 07:36
Serving ES6 to modern browsers

Background

Recently I noticed that Safari 10 for Mac/iOS had achieved 100% support for ES6. With that in mind, I began to look at the browser landscape and see how thorough the support in the other browsers. Also, how does that compare to Babel and its core-js runtime. According to an ES6 compatability table, Chrome, Firefox, and IE Edge have all surpassed what the Babel transpiler can generate in conjunction with runtime polyfills. The Babel/core-js combination achieves 71% support for ES6, which is quite a bit lower than the latest browsers provide.

It made me ask the question, "Do we need to run the babel es2015 preset anymore?", at least if our target audience is using Chrome, Firefox, or Safari.

It's clear that, for now, we can't create a site or application that only serves ES6. That will exclude users of Internet Explorer and various older browsers running on older iOS and Android devices. For example, Safari on iOS 9 has pretty mediocre ES6 support.

@hartzis
hartzis / Image.jsx
Last active October 4, 2018 06:57
React Universal/Isomorphic Image onError Component
class Image extends Component {
componentDidMount() {
// if image hasn't completed loading, then let react handle error
if (!this._image.complete) return;
// if image has finished loading and has 'errored'(errored when naturalWidth === 0)
// then run the onError callback
if (this._image.naturalWidth === 0) {
this.props.onError();
}
}
@andrewtamura
andrewtamura / raven.js
Last active May 10, 2017 18:26
raven wrapper with monkey patch for local logging
var Raven = require('raven');
// Configure the Raven client from the Sentry DSN. For local development, keep this environment variable unset to prevent
// Raven from sending events to sentry
var ravenClient = new Raven.Client(configOptions);
var originalCaptureException = ravenClient.captureException;
// Monkey patch the captureException function for easier development flow.
ravenClient.captureException = function() {
@erikcox
erikcox / SimCityLoadingMessages.txt
Created November 11, 2015 21:23
A list of loading messages from the game SimCity, which I repurposed for Slack loading messages.
Adding Hidden Agendas
Adjusting Bell Curves
Aesthesizing Industrial Areas
Aligning Covariance Matrices
Applying Feng Shui Shaders
Applying Theatre Soda Layer
Asserting Packed Exemplars
Attempting to Lock Back-Buffer
Binding Sapling Root System
Breeding Fauna
@paulirish
paulirish / what-forces-layout.md
Last active June 18, 2024 12:00
What forces layout/reflow. The comprehensive list.

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