sapegin

// How do you avoid name clashes between functions, variables, components, and types?

// OK
const crocodiles = getCrocodiles({ color: 'green' })

// ??? 
const isCrocodile = isCrocodile(crocodiles[0])

// OK
const user: User = { name: 'Chuck Norris' }

sapegin

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));

sapegin

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

import { render } from "@testing-library/react";
import { MyComponent } from './MyComponent';

describe("MyComponent", () => {
  let wrapper;

  beforeEach(async () => {
    wrapper = render(<MyComponent butiful />);
  });

sapegin

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(() => {

sapegin

Hot module replacement in React and webpack

The simplest way to enable HMR:

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

function render() {

sapegin

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.

sapegin

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

sapegin

Development mail lists

Subscribed

• JavaScript Weekly: http://javascriptweekly.com/
• HTML5 Weekly: http://html5weekly.com/
• CSS Weekly: http://css-weekly.com/
• Web Design Weekly: http://web-design-weekly.com/
• Web Tools Weekly: http://webtoolsweekly.com/
• React.js Newsletter: http://reactjsnewsletter.com/

sapegin

// Image preload

import { ensureArray } from './util';

export default function preload(images, callback) {
	let done = () => {
		counter--;
		if (counter === 0) {
			callback(errors.length ? errors : null);
		}