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

 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.

Here's an example right here:
<div id="root"</div
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");

… Read article
The post New CodePen Feature: Prefill Embeds appeared first on CSS-Tricks.

Link: https://blog.codepen.io/2019/01/17/introducing-prefill-embeds/

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
The post The Most Hearted of 2018 appeared first on CSS-Tricks.

Link: https://codepen.io/2018/popular/pens/

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:

Web Developer Economics: One-Off Software Costs
Web Developer Economics: Hardware Costs
Web Developer Economics: Monthly Service Costs
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 …
The post The Software We Pay For appeared first on CSS-Tricks.

Link: https://medium.com/@CodePen/software-we-pay-for-e1f02c4de805

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?
At Gusto, I’ve been working on a lot of tiny interaction details and prototypes lately …
The post Prototyping in the Browser appeared first on CSS-Tricks.

Link: https://css-tricks.com/prototyping-in-the-browser/

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 what PRO members have told us are their favorite, and some are lesser-known but very awesome.

1) No-hassle Debug View
Debug View is a way to look at your the Pen you’ve built with zero CodePen UI around it and …

4 Reasons to Go PRO on CodePen is a post from CSS-Tricks

Link: https://css-tricks.com/4-reasons-go-pro-codepen/