[ 85 posts ]

Posts, aka Blog Posts

Articles I really wanted to share or felt compelled to write because I didn't find what I was looking for. They've survived refactors and redesigns since 2012.

Chris Coyier — Chris Coyier · @chriscoyier

[ Blog Roll ]

Thoughtful illustrated scene of a workshop room with a speaker at the front and attendees sitting at tables reflecting and writing in notebooks. Instead of slides full of code, the screen shows a simple prompt: “I use AI as a ___ to help me ___ but I will always ___.” Around the room, abstract thought bubbles form from the participants containing small icons like gears, neural networks, books, and lightbulbs. Soft lighting, cozy community vibe, modern editorial illustration style with gentle textures and warm colors.

DataTune 2026

Another awesome experience

a playful illustration of rows and rows of photos of various food items, with the illustion of motion --ar 3:2

Trying OpenClaw

Initial setup and some simple automations

a playful illustrated scene of cartoon zombies learning to code in a browser window, Code School adventure-game style, bright colors, hand-drawn textures, goofy expressions, surrounded by floating AI brains glowing with neon light, whimsical chaos and friendly energy --ar 3:2

The Best Thing Since Browser-Based Code Challenges

From interactive learning to adaptive learning

A surreal mailman made of paper and Wi-Fi signals, juggling glowing envelopes in a nebula-filled digital sky --ar 3:2

Tag, You're Subscribed

So many newsletters that I love

an illustration of a robot playing with a toy human --v 5 --s 777 --ar 3:2

Render ATL 2025

Another awesome experience

a fun illustration of a trendy UI with rounded-sm shapes, large typography, CSS grid pattern --ar 3:2

Trendy UI with Clip-Path and Grid

A line of CSS to make images scroll

a playful illustration of rows and rows of photos of various food items, with the illustion of motion --ar 3:2

CSS Scrolling Images

A line of CSS to make images scroll

an animatronic cursor, smiling and happy, while the background is a dark, dystopian view of wires and computers --ar 3:2

Cursor Makes Web Dev Fun

Cursor helps you focus on building instead of boilerplate

A vibrant digital painting of a heart-shaped character chiseling a web app design from a monolithic stone slab, each chisel stroke revealing colorful UI elements like buttons and icons. A backdrop of a digital-meets-ancient workshop merges high-tech holograms with dusty tools. Warm light and stone textures dominate. Created Using: Hyperrealistic textures, layered digital painting techniques, warm color palette, high-energy composition, intricate character details, whimsical fantasy style, bold contrasts, ultra-HD rendering --ar 3:2 --v 6.0

Building a Lovable Tool with AI

Using Lovable AI to create a list app

playful illustration of a green sock being illuminated --ar 3:2

Playing With Relume Layouts

Building a layout with Greensock

napoleon dynamite and tina the llama standing in a field, a rocket is flying in the sky above them --ar 3:2

Adding TinaCMS To My Astro Site

Quick and easy setup with some learning

a drafting schematic of a series of columns of different sizes --ar 3:2

Footer Link Columns With Subgrid

New tech applied to an old problem

a wizard using a magic wand to create a website on a pedestal, cinematic, with shapes and colors flying around in the air --ar 3:2

Webflow for Web Devs

A meetup talk for Tampa Web Devs

a wizard using a magic wand to create a website on a pedestal, cinematic, with shapes and colors flying around in the air --ar 3:2

A Short Review of My First Webflow Project

A mix "no code" and "yes code"

As the sun sets outside, John sits in his dimly lit room, eyes glued to his computer screen. He's recording his latest tutorial, his voice laced with excitement as he explains the intricacies of coding. His computer desk is cluttered with books, papers, and empty coffee cups. John's hands dance over his keyboard, his eyes flicking back and forth between his notes and the screen. The camera lens captures the glow of the computer screen on his face, as well as the occasional flicker of frustration. --ar 3:2 --seed 3249781 --v 5.1

Strapi Series, Part 11: Header and Footer Links

Refactoring components to use the links data

an illustration of a robot playing with a toy human --v 5 --s 777 --ar 3:2

Render ATL 2023

Recap of an awesome experience

As the sun sets outside, John sits in his dimly lit room, eyes glued to his computer screen. He's recording his latest tutorial, his voice laced with excitement as he explains the intricacies of coding. His computer desk is cluttered with books, papers, and empty coffee cups. John's hands dance over his keyboard, his eyes flicking back and forth between his notes and the screen. The camera lens captures the glow of the computer screen on his face, as well as the occasional flicker of frustration. --ar 3:2 --seed 3249781 --v 5.1

Strapi Series, Part 10: Links Data and Requests

The first collection and another single type

An illustration of a boxer being punched in the face by another boxer, with the boxing ring-3 in the background, in the style of an oil painting, viewed from an overhead perspective --v 5 --ar 3:2

Strapi Series, Part 9: Thinking In Data

Learning valuable lessons from initial creation attempts

abstract shapes and colors, with letters, postpunk 80s retro --v 5 --ar 3:2

Strapi Series, Part 8: Font Sizes and Colors

Identifying patterns and planning for implementation

an epic battle between a white wolf and a black wolf, with glorious lighting in the style of Ignasi Monreal artwork --v 5 --ar 3:2

Strapi Series, Part 7: Light and Dark Mode

Setting up dark mode with a curveball

An illustration of a mysterious book of spells with a glowing, arcane symbol on the cover, surrounded by flickering candles and an ominous mist, in the style of dark fantasy art, photorealistic, viewed from a top-down perspective --v 5 --ar 3:2

Strapi Series, Part 6: Coming Soon QA

Adding TypeScript and Storybook to verify and see data

An illustration of an outline of a web project, with a person sketching the wireframe on a whiteboard, in the style of a technical drawing, viewed from a top-down perspective, with a computer and a notebook in the background. --v 5 --ar 3:2

Strapi Series, Part 4: A Fake Company

Creating some details to make the project fun

An illustration of a monstrous creature with multiple tentacles reaching out to grab dozens of email icons, which are scattered throughout a chaotic, cluttered background. The creature's many eyes are fixed hungrily on the colorful icons, and its sharp teeth are bared in a menacing grin. The style is highly detailed and somewhat dark, with rich shadows and bright highlights creating a sense of depth and dimensionality. The perspective is slightly overhead, with the viewer looking down on the scene from a vantage point just above the creature's many limbs --v 5 --ar 3:2

Strapi Series, Part 5: A Coming Soon Component

Hooking Strapi up to a component for collecting emails

An illustration of an outline of a web project, with a person sketching the wireframe on a whiteboard, in the style of a technical drawing, viewed from a top-down perspective, with a computer and a notebook in the background. --v 5 --ar 3:2

Strapi Series, Part 1: Project Outline

An overview of what I hope to create

An illustration of an outline of a web project, with a person sketching the wireframe on a whiteboard, in the style of a technical drawing, viewed from a top-down perspective, with a computer and a notebook in the background. --v 5 --ar 3:2

Strapi Series, Part 2: Architectural Decisions

Basic decisions around the tech stack

An illustration of an outline of a web project, with a person sketching the wireframe on a whiteboard, in the style of a technical drawing, viewed from a top-down perspective, with a computer and a notebook in the background. --v 5 --ar 3:2

Strapi Series, Part 3: Repo Setup

Cloning, yarning, and command lining

an illustration of a robot playing with a toy human --v 5 --s 777 --ar 3:2

I Didn't Write This Blog Post

The computers have taken over this website

You Can't Make Others Love CSS

You Can't Make Others Love CSS

Sharing my take on the utility CSS wars

Fixing x-robots nofollow with Vercel

Fixing x-robots nofollow with Vercel

Fixing a an issue when proxying to Vercel

2d icons, 3d icons, grunge, ui, graphic design, high contrast, artstation --ar 3:2

Custom collection list markup in Eleventy

Trying something with using custom markup for each item in a collection list

Eleventy and Netlify for NPM newbs like me

Eleventy and Netlify for NPM newbs like me

Sharing some basics of configuration that were new to me

A person fatigued while being attacked by code robots in a cinematic style with glorious lighting --ar 3:2 --v 5

Fighting Tooling Fatigue

Failing deploys, build configurations, and plugins oh my

choosing between two tools that can both do a job, cinematic, photorealistic --ar 3:2 --v 5

Simple side nav: Flexbox vs. Grid

A popular question with a pretty clear answer in this case

creating a map on the internet --ar 3:2 --v 5

Mapping On The Web Is Hard, Sorta

Sharing what I learned trying to build an interactive map

Mapping the Long Island Murder Victims

Mapping the Long Island Murder Victims

A map of a series of unsolved murders in Long Island from the 1990s until the 2010s

A photograph of a vinyl record of "beerbongs and bentleys" being played on a turntable, with a blurred background of an artistic loft, during evening with warm, dim lighting and shot with a macro lens using the Sony FE 90mm f/2.8 Macro G OSS --v 5 --ar 3:2

Visualizing a Disruptive Album: beerbongs & bentleys

Applying some of what I learned in Fullstack D3 to a passion project

Prop Data Preferences

Prop Data Preferences

What's the "best practice" for passing down data

Visiting Gilgo Beach

Visiting Gilgo Beach

Watching Ocean Parkway to see where the Gilgo Four were discovered

Getting Closer To Critical CSS By Default

Getting Closer To Critical CSS By Default

How adopting CSS-In-JS tooling is improving performance

Injecting a banner populated with cookie data

Injecting a banner populated with cookie data

Sharing how I made a banner for a promo

Embracing Emotion, with Gatsby

Embracing Emotion, with Gatsby

Crushing on Gatsby and trying to organize my Emotions

a digital artwork that celebrates the adventure and excitement of data science using a graphic tablet and a vibrant, colorful palette that reflects the dynamic and ever-changing nature of the field. Use a composition that incorporates elements of technology and futuristic design, and incorporate references to data visualization and analysis to highlight the importance of data-driven decision making. Use lighting to create a sense of depth and perspective that emphasizes the vast potential of data science --v 5 --ar 3:2

A New Adventure

On joining DataCamp to build a front-end team

An illustration of a mobile fitness app, displaying a user completing a workout routine, with a gym in the background, in the style of a minimalist design, viewed from a top-down perspective --v 5 --ar 3:2

Building a Small PWA with Preact and Firebase

Sharing how I built a little exercise tracker

A photograph of a person turning a page in a book while sitting on a park bench, with a beautiful autumn foliage in the background, during late afternoon with soft, warm lighting and shot with a portrait lens using the Sony FE 85mm f/1.4 GM --v 5 --ar 3:2

Turning the Page

Leaving Code School and Pluralsight

An illustration of a student struggling to learn, with books and notes scattered around, in the style of a sketch, viewed from a close-up perspective --v 5 --ar 3:2

Stumbling Through Learning About Event Listeners

In which I think I figure something out but I'm wrong

An illustration of two trains heading towards a crash, with a city skyline in the background, in the style of a comic book, viewed from a dynamic perspective --v 5 --ar 3:2

I'm Learning How to Solve Problems with JavaScript

Showing the solution to a brain teaser with JS

An illustration of a programmer coding a HTML email, with code snippets and email template visible in the background, in the style of a flat design, viewed from a bird's eye perspective --v 5 --ar 3:2

Reducing HTML Email Code

Sharing how I took a a crack at refactoring an email

An illustration of a person lost in thought, with thought bubbles and symbols representing ideas surrounding them, in the style of Basquiat, viewed from a close-up perspective --v 5 --ar 3:2

Rethinking My eMMail Workflow

Changing from all local dev to using Builder

An illustration of a student completing a nanodegree program, with a laptop and coding books on a desk, in the style of a vector graphic design, viewed from a top-down perspective --v 5 --ar 3:2

Pursuing a Nanodegree (1 of ?)

Diving into learning JavaScript on Udacity

a person holiding a magical ruby, fantasy, cinematic lighting, --s 777 --v 5 --ar 3:2

TIL Executing Local Ruby

Sharing how I learned how to use Ruby to solve a problem

A professional conference in a spacious hall with high ceilings and large windows letting in ample natural light. The hall is filled with rows of chairs, facing a stage with a podium and a screen. The stage is adorned with elegant decorations and banners with the logos of various companies and organizations sponsoring the event. On the stage, a speaker is delivering an engaging talk, holding a microphone and using a laser pointer to highlight key points on the projected slides. The audience members, dressed in casual attire, are taking notes on their tablets and laptops, engaged and attentive. The atmosphere is serious yet vibrant, with a sense of shared enthusiasm and intellectual curiosity permeating the space. The composition emphasizes the grandeur of the hall, with the rows of chairs converging towards the stage, creating a sense of focus and direction. The color palette is subdued, with shades of blue, gray, and black predominating, lending an air of professionalism and sophistication. The image is shot with a Canon EOS R6 camera, using a Canon EF 24-70mm f/2.8L II USM lens at 50mm, ISO 400, f/4.0, 1/125s, --v 5 --ar 3:2

The Email Design Conference 2015

A recap from attending this awesome event

A mesmerizing digital art piece depicting a lush, verdant garden coming back to life after a long, cold winter. The once barren landscape is now a riot of colors, with fresh leaves and blossoming flowers reaching up towards the sky. The scene is set at sunrise, with the first rays of sunlight peeking through the trees, casting a warm glow over the garden. The viewer is positioned at a bird's eye view, allowing for a panoramic view of the garden's transformation. The air is filled with the sound of chirping birds, buzzing bees, and rustling leaves, adding to the sense of renewal and rebirth. The image captures the beauty of the natural world awakening from its slumber, a powerful metaphor for the cyclical nature of life and the unstoppable force of renewal --v 5 --ar 3:2

Front-End Conf Lives!

The conference goes on, thanks to friends

A vibrant digital art piece depicting a community coming together to give back, with volunteers of all ages and backgrounds working together to support those in need. The scene is set in a bustling city, with people handing out food and supplies to those who are less fortunate. The composition is rich in detail, showcasing the diversity and unity of the volunteers, as well as the recipients of their kindness. The color palette is warm and inviting, and the lighting is soft and diffused, evoking a sense of hope and compassion. The viewer is immersed in the scene, with eye-level perspective drawing them into the heart of the action. This artwork serves as a powerful reminder of the importance of giving back and the positive impact it can have on our communities --v 5 --ar 3:2

Give Back

Supporting an awesome project in our community

An illustration of a person integrating electronic parts into their body, with circuit boards and wires visible beneath their skin, in the style of a cyberpunk graphic novel, viewed from a side perspective --v 5 --ar 3:2

Experiment - Personal JSON-based API

Trying out a way to access a personal bio as an API

Thank You

Thank You

People are amazing, thank you so much

An illustration of a person driving through the night on a deserted highway with Portland in the background, with a graffiti-style font overlay reading 'No Sleep Till Brooklyn', in the style of a digital art, viewed from a front perspective --v 5 --ar 3:2

No Sleep til Portland

Building up to running our first event in Portland

An illustration of a dramatic stage performance with a curtain closing, with a lone spotlight shining on the performers and a 'The End' sign displayed in the background, in the style of a dark and moody charcoal drawing, viewed from a side perspective --v 5 --ar 3:2

Front-End Conf Finales

Our last two times of running the conf

An illustration of a person standing at a whiteboard, drawing a complex algorithm with multiple interconnected parts, with other people looking on in amazement, in the style of a detailed technical diagram, viewed from a bird's-eye perspective --v 5 --ar 3:2

Why Grok is Special

A review of the awesomeness that is Grok

An illustration of a person riding a rocket with a promotional banner trailing behind, soaring through the clouds and leaving a trail of fire, in the style of a thrilling action movie poster, viewed from a dramatic angle perspective --v 5 --ar 3:2

Fun With Responsive Email Banners

Responsive design and HTML Tables, FTW

A photograph of a steampunk zombie in a post-apocalyptic city, with ruined buildings and smoke in the background, during the night with a mix of blue and orange lighting and shot with a close-up lens using the Nikon AF-S Nikkor 105mm f/2.8G IF-ED VR II --v 5 --ar 3:2

A Shift in Focus

Changing from a split role to a product one

I Forgot About Dre

I Forgot About Dre

Review of the awesome work behind the Beats app

An illustration of a person standing in front of a giant API puzzle, with each piece coming to life and fitting together seamlessly, in the style of an action-packed adventure movie poster, viewed from a dynamic perspective --v 5 --ar 3:2

An API Event?

Testing the waters for an event I'd like to run

An illustration of an airplane soaring through the clouds with a beautiful sunset in the background, in the style of a classic airline advertisement, viewed from a top-down perspective --v 5 --ar 3:2

Front-End Conf Update

Updates about this and future events

An illustration of a designer creating an animation with Photoshop's timeline, featuring a cartoon character running and jumping over obstacles, in the style of a playful video game cutscene, viewed from a side-scrolling perspective --v 5 --ar 3:2

Photoshop's Timeline Rocks

Sharing my experience in making a GIF with the timeline

An illustration of a busy calendar with upcoming events marked in bright colors, surrounded by festive decorations and party favors, in the style of a lively event invitation, viewed from a top-down perspective --v 5 --ar 3:2

Upcoming Events in '13

A listing of confs to attend in 2013

Photo booth shot of people from the conference

Front-End Conf 2013

A recap of from running the 2013 event

An illustration of a group of friends starting trouble by sneaking into an abandoned building, equipped with flashlights and climbing gear, in the style of a suspenseful adventure story, viewed from a low-angle perspective --v 5 --ar 3:2

The Trouble with "The Trouble with Code School"

A reply to a post about online learning

An illustration of a mad scientist experimenting with a mixture of fire and various chemicals, in the style of a sci-fi movie poster, viewed from a side-facing perspective --v 5 --ar 3:2

Mixture and Firebase and Public APIs

Playing with a cool tool

An illustration of a dense forest being condensed into a small glass jar, with miniature trees and wildlife inside, viewed from a side perspective, in the style of a whimsical painting --v 5 --ar 3:2

Playing With Data URIs

Sharing some benefits of using data URIs for images

Placeholder image

Going Live With Number Five

Launching the site for the 5th Front-End Conf

Placeholder image

Ricardo Rally Time

A friend is trying to build an iPad app

Placeholder image

Sass Color Variable Pop Quiz

Sharing results from asking when people set variables

Placeholder image

Future of Front-End Conf

Some changes for future versions of the events

Placeholder image

I'm Down With SVG

Sharing the benefits of SVG over PNG

Placeholder image

Circles Conf 2012

A recap from attending Circles Conf

Placeholder image

re:build Conference 2012

A recap from attending re:build Conf

Placeholder image

See Nick Preprocess

The launch of Assembling Sass at Code School

Placeholder image

Playing With CSS Hat

Mondays are so different at Envy

Placeholder image

Mondays Rock

Mondays are so different at Envy

Placeholder image

Production vs. Shipping

The differences it makes when you think about shipping

Placeholder image

Growing with Envy

Joining Envy Labs and Code School!

Placeholder image

A Sass Noob using Math for Flexible Widths

Sharing as I learn about mixins

Placeholder image

Sass and Compass Pairing with Michael Parenteau

Big thank you to Michael for showing me the ropes

Placeholder image

Rebuilding

Why contemplating our mortality can be a powerful catalyst for change

Placeholder image

Fluid

Waxing poetic on thinking about responsive design by watching nature