There are some great features on CodePen that are not widely known. This post explains some of them and these are for every user (no PRO subscription needed)!

Customize your Profile

My customized profile (follow me, maybe?)

Everyone can customize their CodePen profile, but I rarely see codepeners actually doing it. Most recently I came across these ones:

@lorenzodossi - this one makes you really wanna click that GET IN TOUCH! button
@FelixLuciano - this one has an amazing animated cover art
@Craaftx - this one has a unique header, but unchanged pen explorer

So I figured it's time for me to customize my profile. It only took two steps to do that: first I created a pen with some CSS, then I specified which pen to use for my profile. This latter setting is found at Settings | Customize | Customize Profile.

It's a bit confusing, but this field is not only for PRO users

My Customized Profile Pen contains a few rules that affect the cover, the Follow button and the profile links.

Cover image

With the snippet below, you can override the default CodePen cover image. What I did was creating a new image with https://trianglify.io/. I went with a grayscale triangle pattern, kind of similar to the default cover. Harnessing the power of SVG I added some slow pulsing color animations that resemble the accent colors of Pens, Projects, Posts and Collections of CodePen.

  .profile-header {
  background-image: url("<your-image-url>");
}

Follow button

Next, I wanted to highlight the Follow button to have it stand out more and make it a Call To Action. I am quite satisfied with the default layout of the profile page so I didn't make the button larger. Instead I added a fancy animated gradient background with the help of the ::before and ::after pseudo elements. Here's a dead simple snippet for making the button caption red:

  .follow-user-button {
  color: red;
}

Profile links

Then, I upgraded my profile links. You can add up to three links to your profile, I use two of them to link to my Twitter and LinkedIn. It's much more common to use icons for social links rather than the hostnames (twitter.com, linkedin.com) of the sites. I used a little known feature of the content property, called Element replacement: I specified an image for the content of the anchor element which replaced the text content.

  .profile-links > a[href*="twitter.com"] {
  content: url("<inlined twitter svg icon>");
  margin: margin: -13px 0; /* vertically center the icon */
}

More advanced Profile links 🤓

Lastly, I figured it would be a waste not using the third slot for profile links. I wanted something where I can promote my latest work, whether if it's a Pen, Project, Post, or Collection. Well, this is more meaningful for the latter three, because the profile page defaults to the pens showcase. Anyways, I kind of redid the icons of the four entities, then used clever selectors to add the corresponding icon:

  .profile-links > a[href*="codepen.io/finnhvman/pen"] {
   content: url("<inline svg for Pen icon>");
}

.profile-links > a[href*="codepen.io/finnhvman/project"] {
   content: url("<inline svg for Project icon>");
}

.profile-links > a[href*="codepen.io/finnhvman/post"] {
   content: url("<inline svg for Post icon>");
}

.profile-links > a[href*="codepen.io/collection"] {
   content: url("<inline svg for Collection icon>");
}

Furthermore, I (ab)used the :visited pseudo-class to add a little notification badge. Be aware, that a very limited number of properties can be modified with this selector because of privacy reasons. background-color is one of them, so I created a black background-image with a little transparent hole in it using the radial-gradient() function. This background-image overlays the background-color, so I made the background-color red in normal state and black in visited state.

  .profile-links > a[href*="codepen.io"] {
  background: radial-gradient(circle at 37px 3px, transparent 3px, black 3px);
  background-color: red;
}

.profile-links > a[href*="codepen.io"]:hover {
  background-color: red;
}

.profile-links > a[href*="codepen.io"]:visited {
  background-color: black;
}

The percieved result is a little red dot appearing when the user haven't visited the link, thus making it an actual working notification badge. On the developer side, changing the link automatically updates the corresponding icon and badge, no CSS update needed.

Clicking on the link removes the notification badge. Check it out!

Pens as Dependencies

If you have a lot of pens you might end up copying code from one to another. Avoiding duplications is a fundamental practice in programming, and CodePen provides a way to do it. You can use the CSS or JavaScript of another pen just like if it was a .css or .js file. The place to set this is under Pen Settings | CSS | Add External Stylesheets/Pens and Pen Settings | JavaScript | Add External Scripts/Pens respectively. Furthermore, you can include the HTML of another pen. See picture and snippet below:

CSS and JavaScript tabs of Pen Settings — Adding CSS and/or JavaScript of other Pens is done under Pen Settings

[[[https://codepen.io/finnhvman/pen/MQyJxV]]]

Including HTML of other Pens is done by triple brackets

I mainly use such dependencies for sharing CSS among pens. I made some utility pens where a lot CSS felt like they didn't belong there. These were the stylings of the low level components like buttons, text fields, etc. Trying to be a good programmer I started extracting them and eventually ended up creating a collection: Pure CSS Material Components. The pen below relies on CSS of other pens:

Of course be careful about your dependencies, there is no versioning. Whenever you update a dependency pen, the changes on the dependents will be reflected immediately.

Customize your Posts

If you happen to write posts on CodePen, you might have wanted to add some stylings on top of the default. There is a Custom CSS field in the post editor. It's not apparent at first, but whatever CSS is put there is applied to the whole page. Taking advantage of this, I added a little thingy just below the publish date of my posts:

Read Time Indicator

I'm kind of used to seeing how much time it takes to read an article thanks to Medium. Such read time indicator comes very handy letting you know the length of the read beforehand. To measure the reading time of my post(s), I used this online tool, then I added the CSS below:

  .meta-line::after {
  content: "5 min read";
  display: block;
  margin-top: 10px;
  color: #ccc;
}

The .meta-line class is used on the container of the publish date. I had to use the pseudo element ::after to add content below that. This means that the reading time has to be manually updated and maintained in the CSS of the post, but worth the price!

HTML in Posts

Initially, the post editor made me assume that I can only use Markdown for marking the text. I was writing this exact post, when I found out that I can use HTML as well (so meta!). This made the markup so much better: I used semantic elements and added arbitrary classes for CSS, unlike in my previous writing where I used ugly hacks. See how mixing works in the source of this line:

  See how <strong>mixing</strong> **works** in the source of this line:

Customize all Posts

One last tip for those who write more: you can extract redundant CSS of your posts to a pen, then apply it to all of them. You can specify the pen defining the style under Settings | Customize | Customize Blog:

Customize Blog Setting — The helper text is pretty straightforward

Fun CodePen Tricks