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

from __future__ import with_statement
from fabric.api import *
from fabric.contrib.files import exists


env.use_ssh_config = True
env.hosts = ['locum']
REPO = 'git/sapegin.git'
DEST = 'projects/sapegin'

sapegin

function serve(lang, port) {
	if (!lang && o.LANGS.length) lang = o.LANGS[0];
	if (!port) port = 8000;
	var mimeTypes = {
		'default': 'text/plain',
		'.html': 'text/html',
		'.jpg': 'image/jpeg',
		'.png': 'image/png',
		'.js': 'text/javascript',
		'.css': 'text/css'

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

from __future__ import with_statement
from fabric.api import *
from fabric.contrib.files import exists

env.use_ssh_config = True
env.hosts = ['locum']
REPO = 'git@bitbucket.org:sapegin/grunt-talk.git'
DEST = 'projects/sapegin/htdocs/subprojects/pres/grunt'

sapegin

// Image preload

import { ensureArray } from './util';

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

sapegin

<?php

$stocks = array (

	'shutterstock' => array (
		'name'		=> 'Shutterstock',
		'host'		=> 'ftp.shutterstock.com',
		'login'		=> '',
		'password'	=> '',
		'dir'		=> '/',