Skip to content

Instantly share code, notes, and snippets.


Artem Sapegin sapegin

View GitHub Profile
View Box.native.ts
import styled from 'styled-components/native';
import { space, layout, position, flexbox, SpaceProps, LayoutProps, PositionProps, FlexboxProps } from 'styled-system';
import { composeNative } from './styledSystem';
export type BoxProps = SpaceProps & LayoutProps & PositionProps & FlexboxProps;
* A generic container with responsive props to control whitespace, layout, positioning and colors.
export const Box = styled.View<BoxProps>(composeNative(space, layout, position, flexbox));

aria-label doesn’t always replaces element’s own text

<span aria-label="pizza"></span>

I was sure that a screen reader would just read “pizza” but at least VoiceOver in Chrome reads “pizza, group, bullet”.

Where the “group” comes from? VoiceOver (I don’t know about other screen readers) considers a “group” any piece of text wrapped in an HTML tag, even a span that has no semantic meaning and should be ignored.

Reading of the element’s own text isn’t that clear. The example from MDN with a button works fine — a screen reader reads “close”:

sapegin / bad.js
Last active May 19, 2020
Common Testing Library antipatterns
View bad.js
import { render } from "@testing-library/react";
import { MyComponent } from './MyComponent';
describe("MyComponent", () => {
let wrapper;
beforeEach(async () => {
wrapper = render(<MyComponent butiful />);
sapegin / useScroll.ts
Created Mar 12, 2020
An accessible React Hook that scrolls to an element
View useScroll.ts
import { useCallback, useRef, RefObject } from 'react';
* Scroll to an element.
export default function useScroll<T extends HTMLElement>(
options: Omit<ScrollIntoViewOptions, 'behavior'> = {},
): [RefObject<T>, () => void] {
const ref = useRef<T>(null);
const callback = useCallback(() => {

Hot module replacement in React and webpack

The simplest way to enable HMR:

import React from 'react';
import ReactDOM from 'react-dom';

function render() {

English writing style guide


  • Use American English
  • Always use sentence casing, even in headings.
  • Singular they
  • Use contractions: it’s, we’ll.
  • Ellipses in quotations: […].
  • 2 times → two times.
  • Use Arabic numerals for centuries: 19th century.

React lifecycle cheatsheet

Method Side effects1 State updates2 Example uses
componentWillMount Constructor equivalent for createClass
render Create and return element(s)
componentDidMount DOM manipulations, network requests, etc.
componentWillReceiveProps Update state based on changed props
sapegin / preload.js
Created Feb 21, 2016
Tamia image preload es6
View preload.js
// Image preload
import { ensureArray } from './util';
export default function preload(images, callback) {
let done = () => {
if (counter === 0) {
callback(errors.length ? errors : null);
sapegin / index.js
Last active Jan 15, 2016
Detect minified files in Webpack
View index.js
module: {
loaders: [
test: /\.jsx?$/,
loaders: ['detect-min']