3D Color Picker

iOS Notifications

CSS Mechanical Keyboard

Infinite Scroll Animation

Interactive SVG Graph

Turn it up to 11

Parallax 404 Page

Generative SVG Mountains

The DeLorean (CSS Art)

Realistic Red Switch

3D Orange Toggle

3D Like Button

3D Carousel

Paper Cut Text Effect

Isometric Layers

Atom Loader

React Text Highlighter

Large Table Virtualization

3D Tic-Tac-Toe

Escalade Loader

React Confetti

Postfix Calculator

Justified Scroll Animation

Multiplication Table Game

Kinetic Magnetic Dot

Color Picker

Neumorphic Shapes

Underline Pen Strokes

Retro Text Effect

Chrome Text

Outlined Text

Framed Digits

Truchet Miles

London Bus

Isometric Text

Analog Clock

Firefly Loader

Rotating Cube

In this tutorial I explain in detail how I made my popular 'Realistic Red Switch' pen using various CSS techniques, including gradients, 3D transformations, animations, and transitions.

How I Made This Realistic Red Switch (Pure CSS)

gra.dient.art is an advanced online CSS gradient editor. In this article i'm exploring its various tools and features.

Gradient.art - Designing and Inspecting Complex CSS Gradients

I created a small React component that adds a randomly generated pen stroke underline to a given word. The strokes are rendered using an SVG <path/> element.

How I Created These Generative Underline Pen Strokes

webrix.js is a set of React components and hooks, each dedicated to solving a single UI challenge. In the article I explore the different components and hooks in this library.

Webrix.js - Building Blocks for Interactive React Apps

In this article, I will be discussing one of the most fundamental rules in component architecture. This fundamental rule is often violated, leading to issues that are very hard (if not impossible) to solve.

Don’t Mix Controlled and Uncontrolled Values In React

Responsibilities and it's derivative — abstractions — are one of the more ambiguous aspects of software quality, at least to me.

Balancing Responsibilities in Software Components

Embrace rewriting software components regularly to avoid having to rewrite the entire software eventually.

Why Rewriting Is Essential for Keeping Software Alive

A sass function for generating 3D text with a clever use of CSS text-shadow

3D text

A React component for rendering content only on the client side

<ClientOnly/>

<CodePen/>

A React component for showing a fallback component when an image cannot be found

<ImageWithFallback/>

A sass mixin for breakpoint based media-queries

Media Query Mixin

A React hook for working with animation frames

useAnimationFrame()

A React hook for performantly attaching event listeners to the document

useDocumentEvent()

Sharing state between React components without context or fancy libraries

useGlobalState()

A React hook for detecting element visibility within a container

useIntersectionObserver()

A React hook for creating perishable elements for animation purposes.

usePerishable()

A React hook for persisting non-stateful values

Snippets

<ClientOnly/>

<CodePen/>

<ImageWithFallback/>

Experiments