How to write a simple, generic Result type to hold a value or Error.
Exploring responsive grid systems for complex but structured layouts.
Using the flag or media pattern for locking up graphics and text for comments, alerts, and more.
A hidden element within a link can stretch the link’s focus outline to the edge of the viewport — and beyond.
Simple, modular, and layout containers.
Flowing horizontal content with row listings and composing row-based layouts.
How to integrate build-time or server-side syntax highlighting for markdown code fences with two libraries: markdown-it and Highlights (Atom’s syntax highlighting engine).
Apply arbitrary space between elements.
Links are for navigation; buttons are for interaction. Looking at the usability and semantics of two core HTML elements.
Server-side rendering is an excellent feature of React. It’s frequently used for pre-rendering single page applications, improving the experience of an initial page load. Server-side rendering is also useful for non-SPA websites.
A few simple CSS mistakes and how to fix them.
React and other JSX view libraries allow us to render SVGs and manipulate them based on application state.
From simple text lists to listing structured entities with spaced listings and bordered listings.
Tiles provide a grid of equal-width content slots, extending the listing pattern to allow us to list items across and down a page in chunks.
Structured UI content and user-entered text.
May 24, 2016 — I’ll be joining a discussion and friendly debate about software development, hosted by General Assembly at The Nerdery’s Chicago office.
An online syntax theme generator for the Atom text editor.
January 5, 2017 — I’ll be giving a talk about Front-End development practices for Nerd Interface.
A practical and reusable technique for improving the accessibility and styling of block-level links and buttons.
Design interfaces between HTML and CSS for a front-end system that is light to work with and prepared for future changes.
Used thoughtfully, animation can inform a user of change or hint at how to interact with an interface. Here is a set of guidelines for using animation cleanly and clearly, while reducing disruption to users.
Building a dashboard for Extra Life Nerds and the community.
Using rem units involves some mental math to calculate their rendered pixel sizes. Let’s explore four techniques to use rem units in CSS with more friendly (read: pixel-like) values.
In 2016, Linux is more than capable of providing a polished desktop experience.
Bringing consideration for accessibility upstream into the design process helps share the load and reduce conflict. Identity design, UX, and visual design can all contribute to ensure accessible projects meet their goals.
Reevaluating ctidd.com’s hosting, making sure it supports HTTP/2 (and a developer-friendly publishing experience).
Unexpectedly learning from a small side project.
June 13, 2015 — I led a discussion about responsive and adaptive CSS grid systems for All Things Web Tech.
What does it mean for an HTML element to have no semantic value?
Demonstrating a quick CSS fix for blurry background SVGs in Internet Explorer 11.
When a company takes performance with complete seriousness, it becomes part of a brand identity. A strong brand can be built from the foundation of prominent typography, minimalist aesthetics, and lightweight imagery — if any.
After using the @ suffix for some time, I began to realize a common pattern with which many front-end developers seem to struggle: removing a style at a breakpoint. It’s not a pattern that appears frequently enough for most CSS standards to give it special consideration, particularly in a mobile-first development workflow.
Reversing the traditional approach to typographic scales.