Skip to content

Instantly share code, notes, and snippets.


Alan B Smith alanbsmith

View GitHub Profile
alanbsmith / Design Systems
Last active Feb 18, 2021
Design Systems Resources | A Primer
View Design Systems

Design Systems Resources | A Primer

Design Systems

  • [Design Systems][1] by Alla Kholmatova - pretty much the canonical design systems book
  • [Expressive Design Systems][2] by Yesenia Perez-Cruz - a great follow-up to Kholmatova's book
  • [Atomic Design][3] by Brad Frost - written before we were using the term 'design system' for web interfaces, but many of the popular ideas extend from these ideas

Systems Thinking

alanbsmith /
Last active Feb 2, 2021
A suggested module development workflow

Module Development Workflow


This is a suggested workflow for building npm modules locally. The particular context will be focused on building a React component lib, but the workflow can be applied for any npm module.


yarn link is a really great tool for local development. It builds a global npm module that is symlinked to your local repo. So when you make a change to the repo, the global module is automatically updated.

alanbsmith /
Last active Nov 13, 2020 CFP Outline

CFP Outline

an outline for talks to be submitted to


This document is a collection of resources and helpful information for writing a good CFP. Many of the notes and tips are direct quotes from the resources listed below. They are mostly notes I took as I read. The outline itself is formatted for, and the italicized notes are from their site as well.


alanbsmith / sign.js
Last active Oct 20, 2020
A JS function for adding a signature to an HTML canvas element
View sign.js
function sign(name, fontSize = 96) {
// assumes the id of the canvas element is 'canvas'
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d');
ctx.font = `italic ${fontSize}px Snell Roundhand`;
const signatureWidth = ctx.measureText(name).width;
const x = canvas.width/2 - signatureWidth/2;
const y = canvas.height/2 + fontSize/2;
ctx.fillStyle = ctx.strokeStyle;
ctx.fillText(name, x, y);
alanbsmith / CollapsibleSideNav.jsx
Created Sep 4, 2020
image08 for component hierarchy post
View CollapsibleSideNav.jsx
import { collapseOnEsc } from '../utils/hooks';
import { useSideNav } from './hooks';
const CollapsibleSideNav = () => {
const { isNavOpen, toggleNav, a11yTargetProps, a11yHeadingProps} = useSideNav();
// collapse the nav when the ESC key is pressed
return (
<SidenavContainer variant={isNavOpen ? 'expanded' : 'collapsed'}>
alanbsmith / NavLink.tsx
Created Sep 4, 2020
image07 for component hierarchy post
View NavLink.tsx
alanbsmith / Box.tsx
Created Sep 4, 2020
image06 for component hierarchy post
View Box.tsx
<Box paddingTop="l">Item 1</Box>
<Box paddingY="s">Item 2</Box>
<Box paddingBottom="l">Item 3</Box>
alanbsmith / Flex.tsx
Created Sep 4, 2020
image05 for component hierarchy post
View Flex.tsx
<Flex direction="column">
<Flex padding="s">Item 1</Flex>
<Flex padding="m">Item 2</Flex>
<Flex padding="s">Item 3</Flex>