Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
codepen

16 Articles
{
,

}
Direct link to the article One Way to Convert Code Indentation
clean code codepen

One Way to Convert Code Indentation

A question:

If you copy a code sample that uses two-space indentation and you want to convert it to four-space indentation, what’s the *fastest* and easiest option?

Matt Stauffer, Twitter

I wrote about doing this in Sublime Text a …

Avatar of Chris Coyier
Chris Coyier on Aug 25, 2021
Direct link to the article Recreating the CodePen Gutenberg Embed Block for Sanity.io
CMS codepen

Recreating the CodePen Gutenberg Embed Block for Sanity.io

Learn how to create a custom CodePen block with a preview for Sanity Studio, inspired by Chris Coyier’s implementation for Wordpress’ Gutenberg editor.
Avatar of Knut Melvær
Knut Melvær on Feb 24, 2020 (Updated on Mar 24, 2020)
Direct link to the article Getting To Know The MutationObserver API
codepen JavaScript

Getting To Know The MutationObserver API

Direct Link

MutationObserver watches the DOM, specifically the places you tell it to, like:

document.querySelector('#watch-this');

…and it can tell you (trigger a callback) when stuff happens — like when a child is added, removed, changed, or a number of other things.

I …

Avatar of Chris Coyier
Shared by Chris Coyier on May 8, 2019
Direct link to the article New CodePen Feature: Prefill Embeds
codepen progressive enhancement

New CodePen Feature: Prefill Embeds

Direct Link

I’m very excited this feature is ready for y’all. You can take any <pre></pre> block of HTML, CSS, and JavaScript (or any combination of them) and enhance it into an embed, meaning you can see the rendered output. Very progressive …

Avatar of Chris Coyier
Shared by Chris Coyier on Jan 21, 2019 (Updated on Jan 22, 2019)
Direct link to the article The Most Hearted of 2018
codepen

The Most Hearted of 2018

Direct Link

We’ve released the Most Hearted Pens, Posts, and Collections on CodePen for 2018! Just absolutely incredible work on here — it’s well worth exploring.

Remember CodePen has a three-tiered hearting system, so while the number next to the heart reflects …

Avatar of Chris Coyier
Shared by Chris Coyier on Jan 4, 2019
Direct link to the article Awesome Demos from 2018
art codepen

Awesome Demos from 2018

Direct Link

This is an outstanding list of creative and artistic browser demos from this past year from Mary Lou at Codrops.…

Avatar of Chris Coyier
Shared by Chris Coyier on Jan 1, 2019
Direct link to the article The Software We Pay For
codepen software

The Software We Pay For

Direct Link

We did a Web Developer Economics series a few years ago, where we looked at the various costs of being a web developer:

  1. Web Developer Economics: One-Off Software Costs
  2. Web Developer Economics: Hardware Costs
  3. Web Developer Economics: Monthly Service Costs
…
Avatar of Chris Coyier
Shared by Chris Coyier on Dec 5, 2018
Direct link to the article Prototyping in the Browser
codepen components refactor

Prototyping in the Browser

Prototyping animations and interactions is vital for a number of reasons: they can make your interface feel deceptively fast, they can help focus the user on a specific task, and they can provide a better sense of the current state …

Avatar of Robin Rendle
Robin Rendle on Jul 5, 2018
Direct link to the article CodePen’s Most Hearted of 2017
codepen

CodePen’s Most Hearted of 2017

Direct Link

The most fun year-end list there is, if you ask me.…

Avatar of Chris Coyier
Shared by Chris Coyier on Jan 3, 2018
codepen

4 Reasons to Go PRO on CodePen

I could probably list about 100 reasons, since as a founder, user, and (ahem) PRO member of CodePen myself, I’m motivated to do so. But let me just list a few here. Some of these are my favorites, some are …

Avatar of Chris Coyier
Chris Coyier on Nov 16, 2017
Direct link to the article The Can-Do’s of CodePen Projects
codepen

The Can-Do’s of CodePen Projects

We just recently launched Projects, the latest big feature over on CodePen. It’s quite a bit different than the Pen Editor, so let’s take a look at all the things it can do!…

Avatar of Chris Coyier
Chris Coyier on Apr 19, 2017
  • 1
  • 2
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top