New Feature: A JavaScript Console!

CodePen, the frontend playground, now has a live console for debugging.

Ways You Need To Tell The Browser How To Optimize

“We’re entering an era where we have to tell the browser how to optimize for performance.”

What is the difference between CSS variables and preprocessor variables?

What they are and how they work.

My Increasing Wariness of Dogmatism

“Hardly a day goes by I don’t see a dogmatic statement about the web.”

The SVG 2 Conundrum

Why SVG 2 is at risk of never getting past Editor’s Draft status at the W3C.

CodePen Projects Is Here!

Think of it as an integrated development environment for building websites.

The Many Tools for Shape Morphing

Advantages and disadvantages of some of the options.

Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually

The power of Custom Properties.

What is the Future of Front End Web Development?

Where we are and where we are going.

Full Width Containers in Limited Width Parents

How the CSS trick works.

So you need a CSS utility library?

What they are and how to use them.

Fun with Mo.js

Playful demos of motion graphics for the web.

“Just a little reminder that it’s about 100 times more important what you build than how you build it.”

Careful Now

Let’s not screw up the web platform.

How to Build a Serverless Blog on CodePen

So much possibility with just your JavaScript chops.

The Power of Serverless for Frontend Developers

A new way to work with and pay for web servers.

CSS Basics: The Syntax That Matters & The Syntax That Doesn’t

What’s really important.

Browser Extensions I Actually Use

Chris Coyier’s favorite Chrome extensions.

Coolest Way to do Aspect Ratio Boxes

CSS demo in CodePen.

CSS Shape Editors

Firefox 62 supports the shape-outside property joining Chrome and Safari.

Updating a CSS Variable with JavaScript

A short tutorial.

“A framework doesn’t make your site fast. You do that.”

CodePen: Now with More Sidebar

Fresh user interface for the popular online code editor.

Introducing Prefill Embeds!

CodePen now lets you manage code from your own website.

Using CodePen to Show Prototypes to Clients

Rapid prototyping with CodePen.

Simple & Boring

What a lot of smart people have been telling us to be.

Web Development Merit Badges

A compilation that makes you smile.

How Do You Remove Unused CSS From a Site?

Partial solutions to a difficult problem.

Firefox 71: First Out of the Gate With Subgrid

Big deals in Firefox’s latest release.

Dark Mode Favicons

What you can already do in Chrome and Safari.

What it means to be a front-end developer in 2020 (and beyond)

​​Things change, but the guiding light not that much.

A Complete Guide to Links and Buttons

There is a lot to know: HTML, CSS, JavaScript, design, and accessibility.

‘lh’ and ‘rlh’ units

New units from the Level 4 spec for CSS values.

What is Developer Experience (DX)?

The different ways people think about and use the term.

An Upgrade to Emmet

New features in CodePen, the popular online code editor.

Thinking About Power Usage and Websites

Does good performance map to lower energy usage?

The Widening Responsibility for Front-End Developers

The checklist of things to do grows and grows.

Coding Fonts

A microsite that shows off fonts designed for writing code.

Design v18

The making of a fresh design for CSS Tricks.

Custom properties as state

A fun way to create a ‘living’ theme for your web site.

Fixing smooth scrolling with find-on-page

A hack to solve an issue with “scroll-behavior: smooth”.