Articles + updates

How to write a simple, generic Result type to hold a value or Error.

2018
TypeScript

Exploring responsive grid systems for complex but structured layouts.

2018
CSS UI patterns
HTML + CSS

Using the flag or media pattern for locking up graphics and text for comments, alerts, and more.

2018
CSS UI patterns
HTML + CSS

Beyond allowing the await keyword to be used within them, JavaScript’s async functions have their own useful aspects. As an alternative to Promise.resolve() and Promise.reject(), consider using async functions to cleanly wrap return values in Promises for convenient mocks in your test suite and to ensure consistent return types.

2018
JavaScript
TypeScript

A hidden element within a link can stretch the link’s focus outline to the edge of the viewport — and beyond.

2017
Firefox
HTML + CSS

Simple, modular, and layout containers.

2017
CSS UI patterns
HTML + CSS

Flowing horizontal content with row listings and composing row-based layouts.

2017
CSS UI patterns
HTML + CSS

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).

2017
Node.js
JavaScript
Performance

A Firefox issue where right click on a button results in a click event listener firing because of event delegation performed automatically by a JavaScript SPA framework.

2017
Firefox
JavaScript

Apply arbitrary space between elements.

2017
CSS UI patterns
HTML + CSS

Links are for navigation; buttons are for interaction. Looking at the usability and semantics of two core HTML elements.

2017
HTML + CSS
Best practices

React is a go-to for single page applications. Is it also the right choice for isolated JavaScript components within traditional websites?

2017
React
JavaScript

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.

2017
React
Node.js
JavaScript

A few simple CSS mistakes and how to fix them.

2017
HTML + CSS

React and other JSX view libraries allow us to render SVGs and manipulate them based on application state.

2017
SVG
React

From simple text lists to listing structured entities with spaced listings and bordered listings.

2017
CSS UI patterns
HTML + CSS

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.

2017
CSS UI patterns
HTML + CSS

Structured UI content and user-entered text.

2017
CSS UI patterns
HTML + CSS

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.

2016
Event
JavaScript

An online syntax theme generator for the Atom text editor.

2016
Projects
Developer tools

January 5, 2017 — I’ll be giving a talk about Front-End development practices for Nerd Interface.

2016
Event
HTML + CSS
Design
Best practices

A practical and reusable technique for improving the accessibility and styling of block-level links and buttons.

2016
HTML + CSS
Usability

Design interfaces between HTML and CSS for a front-end system that is light to work with and prepared for future changes.

2016
HTML + CSS
Best practices

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.

2016
HTML + CSS
Design
Usability

Building a dashboard for Extra Life Nerds and the community.

2016
Projects

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.

2016
HTML + CSS

In 2016, Linux is more than capable of providing a polished desktop experience.

2016
Linux
Developer tools

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.

2016
Accessibility
Usability
Design

JavaScript Promises are easy to overcomplicate. Keep them simple and avoid writing unnecessary code.

2016
JavaScript

Reevaluating ctidd.com’s hosting, making sure it supports HTTP/2 (and a developer-friendly publishing experience).

2016
Developer tools
Performance
HTML + CSS

Unexpectedly learning from a small side project.

2016
Developer tools
JavaScript

Consider using a couple lightweight tools to simplify the process of sharing and enforcing essential JavaScript standards across a project.

2016
Developer tools
JavaScript
TypeScript
Best practices

June 13, 2015 — I led a discussion about responsive and adaptive CSS grid systems for All Things Web Tech.

2015
HTML + CSS
Design

What does it mean for an HTML element to have no semantic value?

2015
HTML + CSS

Demonstrating a quick CSS fix for blurry background SVGs in Internet Explorer 11.

2015
Internet Explorer
SVG
HTML + CSS

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.

2015
Performance
Design

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.

2015
HTML + CSS

Reversing the traditional approach to typographic scales.

2015
HTML + CSS
Design