Skip to content

Instantly share code, notes, and snippets.

View chris-pearce's full-sized avatar
🤷‍♂️
FED'ing

Chris Pearce chris-pearce

🤷‍♂️
FED'ing
View GitHub Profile

Keybase proof

I hereby claim:

  • I am chris-pearce on github.
  • I am crite (https://keybase.io/crite) on keybase.
  • I have a public key ASBXNv-Uo4_uL2yF05zBWYXXSjjS3vGyxnCXWNLaqB393Ao

To claim this, I am signing this object:

App Conventions

React and JavaScript

  • Components should be written as function components only. In case they need access to local state and/or side-effects (life cycle methods) Hooks should be used. That is, no ES6 classes anymore.
  • Follow the Container and Presentational design pattern.
  • Only use index.js files for exporting modules and don't use them within every folder instead reserve them for root folders such as src/components.
  • All component props should have type definitions using the prop-types library.
  • For components, use an arrow function.
  • Destructure props consistently, i.e., pick a way and stick to it.

Keybase proof

I hereby claim:

  • I am chris-pearce on github.
  • I am chrispearce (https://keybase.io/chrispearce) on keybase.
  • I have a public key ASCLqfPvM9YCusIVlrUHs9vOih8EjlthXVkmfvF08-rmjwo

To claim this, I am signing this object:

// https://flow.org/en/docs/react/types/#toc-react-elementprops
React.ElementProps<typeof PostUpgradePrompt>
@chris-pearce
chris-pearce / simple-focus-trap.js
Created April 8, 2018 23:20
Simple focus trap using `focusin` event
document.addEventListener('focusin', () => {
if (!modal.contains(document.activeElement) {
firstModalFocusable.focus();
}
});
<span aria-hidden="true">—</span>
<span class="h-hide-visually">None so far</span>
<button class="header-nav-button time-icons time-icons-menu" type="button"
aria-label="Navigation menu">
<span class="h-hide-visually">Navigation menu</span>
</button>
<button class="header-nav-button time-icons time-icons-menu" type="button"
aria-label="Navigation menu"></button>
<nav role="navigation" aria-label="Site">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>