ryanflorence

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

gragland

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

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

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

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

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

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

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

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

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