Skip to content

Instantly share code, notes, and snippets.

Avatar

Alan B Smith alanbsmith

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

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
alanbsmith / module-development-workflow.md
Last active Feb 2, 2021
A suggested module development workflow
View module-development-workflow.md

Module Development Workflow

Overview

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.

Linking

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
alanbsmith / papercall-cfp-outline.md
Last active Nov 13, 2020
PaperCall.io CFP Outline
View papercall-cfp-outline.md

CFP Outline

an outline for talks to be submitted to PaperCall.io

OVERVIEW

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 PaperCall.io, and the italicized notes are from their site as well.

GENERAL TIPS

@alanbsmith
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
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
collapseOnEsc();
return (
<SidenavContainer variant={isNavOpen ? 'expanded' : 'collapsed'}>
@alanbsmith
alanbsmith / NavLink.tsx
Created Sep 4, 2020
image07 for component hierarchy post
View NavLink.tsx
@alanbsmith
alanbsmith / Box.tsx
Created Sep 4, 2020
image06 for component hierarchy post
View Box.tsx
<Box>
<Box paddingTop="l">Item 1</Box>
<Box paddingY="s">Item 2</Box>
<Box paddingBottom="l">Item 3</Box>
</Box>
@alanbsmith
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>
</Flex>