CSS is fun and cool and I like it.
Link

New CodePen Feature: Prefill Embeds

I've very excited to have this feature released for CodePen. It's very progressive enhancement friendly in the sense that 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. It also lets you pass in stuff like external resources, making it a great choice for, say, documentation sites or the like.… Read article

user avatar
Shared by
Chris Coyier
Link

The Most Hearted of 2018

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 the number of users who hearted the item, each of those could be worth 1, 2, or 3 hearts total. This list is a great place to find awesome people to follow on CodePen as well, and we're working on … Read article

user avatar
Shared by
Chris Coyier
Link

Awesome Demos from 2018

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

user avatar
Shared by
Chris Coyier
Link

The Software We Pay For

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
  4. Web Developer Economics: The Wrapup

I'm sure some of that software and hardware has changed since then, but the spirit is the same. It costs money to have the things you need to do this job.

I just wrote a … Read article

user avatar
Shared by
Chris Coyier
Article

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 of your application. Is data being loaded? Is something now unclickable? How long do they have to wait until they can perform an action?… Read article

Link

CodePen’s Most Hearted of 2017

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

user avatar
Shared by
Chris Coyier
Article

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!… Read article

Link

The Most Hearted of 2016

The 100 most hearted Pens, Posts, and Collections on CodePen from the past year have been calculated and posted! … Read article

user avatar
Shared by
Chris Coyier
Sponsored Article

Learning to Use Google Analytics More Effectively at CodePen

Here's how most people use Google Analytics: you copy and paste the default tracking snippet into your templates. Look at the pageview data that comes in. That's all good, but that isn't the most useful analytics for many sites. Google Analytics can track just about anything. It's very flexible and very powerful. Philip Walton and I co-wrote this article to show you how to do some custom GA stuff to help you collect data you maybe didn't know you could Read article

Article

Seriously, Just Make a Pen

The original title of this post was "Seriously, Just Make a JSFiddle". It was written before I beame the co-founder of CodePen. It's no secret or surprise that CodePen was inspired by apps like JSFiddle and JSBin. It's my job to point you to CodePen and my opinion that it's a good choice for you.

Has anyone ever asked you for help troubleshooting some combination of HTML, CSS, and JavaScript, and they copy and paste the entirety of all the … Read article

Article

Reduced Test Cases

If you are having trouble with something while building a webpage, the most helpful thing you can possibly do is start building a reduced test case. "Trouble" could be anything: the CSS isn't doing what you think it should, the JavaScript isn't behaving right, there are cross-browser issues, etc. In the process of creating a reduced test case, you will either:

  • Find out it was a mistake you made, help you isolate it, and fix it (or have a great
Read article
icon-link icon-logo-star icon-search icon-star