alanbsmith

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

Learn HTML & CSS with Canvas

Block 2 Outline

Table Of Contents

• Learn HTML & CSS with Canvas
  • Table Of Contents
  • Block 1 | HTML & CSS Basics
    • Initial Setup

alanbsmith

Learn HTML & CSS with Canvas

Block 1 Outline

Table Of Contents

• Learn HTML & CSS with Canvas
  • Table Of Contents
  • Block 2 | Sass Basics & Using Canvas CSS
    • Exercise 1 | Using Sass Variables

alanbsmith

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

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

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

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

const NavLink = ({ href, variant, ...props }) => {
  const isActiveLink = window.location.href === href;
  return (
    <Link href={href} variant={isActiveLink ? "active" : variant} {...props} />
  );
};

alanbsmith

<Box>
  <Box paddingTop="l">Item 1</Box>
  <Box paddingY="s">Item 2</Box>
  <Box paddingBottom="l">Item 3</Box>
</Box>

alanbsmith

<Flex direction="column">
  <Flex padding="s">Item 1</Flex>
  <Flex padding="m">Item 2</Flex>
  <Flex padding="s">Item 3</Flex>
</Flex>