</>Jonathan Harrell

Main Menu

Site Tools

Articles

Go to article

Article published date April 9, 2020

System-Based Theming with Styled Components

Learn how to support system-based theming in Styled Components, while allowing a user to select their preferred theme and persist that choice.

Go to article

Article published date November 5, 2018

Implicit State Sharing in React & Vue

Learn to use React’s Context API and provide/inject in Vue to share state between related components without resorting to a global data store.

Go to article

Article published date August 6, 2018

Component Reusability in React & Vue

Learn how to use render props in React and scoped slots in Vue to create components that are flexible and reusable.

Go to article

Article published date March 11, 2018

What’s the Deal with Margin Collapse?

Learn about margin collapse, a fundamental concept of CSS layout. See visual examples of when margin collapse happens, and when it doesn’t.

Go to article

Article published date January 7, 2018

Better Typography with Font Variants

Learn how to use font variants, including ligatures, caps, numerals and alternate glyphs, to create more precise, beautiful typography on the web.

Go to article

Article published date October 31, 2017

Advanced CSS-Only HTML Form Styling

Learn about selectors both new and old that you can use to style form inputs based on requirement, validity and more.

Go to article

Article published date October 24, 2017

Unlocking the Benefits of CSS Variables

Overview of the benefits of CSS variables and helpful tips and tricks for working with them.

Go to article

Article published date October 18, 2017

Controlling Element Visibility with the Intersection Observer API

Learn how to use the new IntersectionObserver API to control the visibility of elements relative to the viewport.

Go to article

Article published date October 12, 2017

Component Variants with Scoped CSS Variables

Scoped CSS variables provide an incredibly easy and clean way to create variants of common interface components like buttons.

Go to article

Article published date August 27, 2017

Semantic Image Overlays With Object-Fit

Learn how to use CSS grid and the object-fit property to create an image grid with overlays that is semantic and great for SEO.

Go to article

Article published date August 19, 2017

Live Theming with CSS Variables

CSS variables are opening up exciting new possibilities, like creating a very performant live theme editor that dynamically updates CSS values.

Go to article

Article published date August 10, 2017

Contextual Callouts with CSS Grid

Using the power of CSS grid, it is now easier than ever before to create callouts — small paragraphs that sit next to the primary text and offer additional information.