College Football App

Source Code

next.js logo

A Super Unofficial Next.js Conf Primer

Download Presentation

Read on Prototypr

Lit up keyboard coming out of a swirl of stars

1 aIrP-eVFOO2x1jHn-nhLUQ

How to Align Your Team on the Need for Accessibility

Use Grid Wiz

View source code

Lines describing a column-based grid system with an editor to the right.

Screen Shot 2020-02-09 at 3.48.11 PM

Screen Shot 2020-02-09 at 3.47.49 PM

Flawlessly Upgrade Your App Over Time with Grid Wiz

Product Hunt Submission

Interactive Prototype

Rapid responsive design prototype with textbox being dragged across a grid

Screen Shot 2020-06-22 at 10.57.26 AM

Rapid Responsive Design

Read on FreeCodeCamp

1 f4sCIr32i4md6i1G16xneQ

The Bad Toons You Will Meet in Web Development

Watch on YouTube

Screen Shot 2020-02-05 at 11.32.38 PM

forward--1600

Death to the Boring Design System

spotify-sxsw--600

Your Spotify at SXSW

Introduction on FreeCodeCamp

The Chrome extension made for CSS Gridish included the same shortcuts as Sketch. A user could quickly compare their work between design and development.

Browser expanding size while an overlayed grid and columns size with it

When creating the API for CSS Gridish, I specifically chose terms familiar to visual designers. This helped designers and developers learn each others' different models for grid.

CSS Gridish Spec Diagram

The most valuable aspect of CSS Gridish was the pixel-perfect fallback from CSS Grid to CSS Flexbox on older browsers. I later isolated that feature and made a better performing solution called Grid Wiz.

Comparison of the same software layout in Chrome and Internet Explorer

CSS Gridish thumbnail

CSS Gridish

Webinar screenshot of James and Sam talking about graceful loads with an app shell.

Screen Shot 2020-02-05 at 10.53.42 PM

invision

Winning Your Users' Trust with Performance UX

IBM Plex Releases

Many characters from different languages using the IBM Plex typeface.

68747470733a2f2f692e696d6775722e636f6d2f794239787a36302e6a7067

IBM Plex