Skip to content

Instantly share code, notes, and snippets.

Avatar
🌄
Disconnected

Artem Sapegin sapegin

🌄
Disconnected
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));
View til.md

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
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
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(() => {
View HRM.md

Hot module replacement in React and webpack

The simplest way to enable HMR:

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

function render() {
View styleguide.md

English writing style guide

Style

  • 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.
View react-lifecycle-cheatsheet.md

React lifecycle cheatsheet

Method Side effects1 State updates2 Example uses
Mounting
componentWillMount Constructor equivalent for createClass
render Create and return element(s)
componentDidMount DOM manipulations, network requests, etc.
Updating
componentWillReceiveProps Update state based on changed props
View maillists.md
@sapegin
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 = () => {
counter--;
if (counter === 0) {
callback(errors.length ? errors : null);
}
@sapegin
sapegin / index.js
Last active Jan 15, 2016
Detect minified files in Webpack
View index.js
/*
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: ['detect-min']
},
]
}
*/