CodePen Radio

I got to chat with CJ Gammon this week! CJ is a creative technologist , a term he's tried to hang onto as he does more development work, so he can continue to communicate that he's a designer as well. CJ has been at Adobe for nearly 10 years and has played with a huge variety of interesting creative technologies. Time Jumps

This week I get to talk to Ryan Mulligan ! Ryan put together a Collection of some of his personal picks for favorite Pens and we get a chance to talk through a lot of them. There are some classic moments here I really feel, like when something you consider pretty basic gets way more popular than you ever thought it would. Ryan has a knack for feeling out really cool new technologies and then quick...

I got to talk with Amit Sheen this week about his journey into creative coding. Even his early work is incredibly interesting and recent work is downright stunning. Now he's entering a phase of sharing what he knows with workshops like Pushing CSS to the Limit . Here's a list of Pens we talk about in the podcast (mostly): Bubbling - https://codepen.io/amit_sheen/pen/BxQqxz Turning pages - https://...

I grabbed Adam intending to chat about all sorts of CSS stuff and his work at Google and on VisBug. But then we chatted pretty much the entire time about color and what's coming there to the web platform. Time Jumps Sponsor: WordPress.com WordPress.com is the fastest way to spin up a WordPress site. You'll be able to build any sort of site around it to power your business or hobby. How do you make...

We've got Steve Gardner on this week! We get into all sorts of nitty gritty detail on the ol' Christmas Cannon , a Pen of pure joy. Steve has some absolute classics that show off the web at it's very best, like the Airplanes Pen. Can't beat Steve's cleverness and execution. Time Jumps Sponsor: Netlify Quirrel Joins Netlify and now we have Scheduled Functions (in Beta)! Wanna run your cloud functio...

Louis Hoebregts (aka Mamboleoo ) has been creating wonderfully creative Pens on CodePen for many years. His early work, as we learn on this episode, was inspired by the CSS trickery of Lea Verou! He rotates his tools between HTML and CSS, SVG, and canvas, but tends to have an aspect of motion and the unexpected. Some of the most popular Pens have an aspect of education to them as well. Here's a li...

Aysenur Turk had a number of appearances on this year's Top Hearted of 2021 , including #1 ! In this podcast, I get to catch up with her, find out where she gets ideas and inspiration, how much time it takes to build something like her amazing layouts, and what her favorites are. Time Jumps Sponsor: Retool Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool . Visual...

As you read this, CodePen is 100% on PostgreSQL for our main relational database. It was a transition that took a couple weeks of pretty intense effort, and lots of planning and prep before that. I've got Alex on the show to talk about it, as he was the main instigator and led the effort, but everyone contributed in some way. Wondering why? Well... We were on a pretty old version of MySQL (5.6), a...

It's back! We counted up all the hearts given to every Pen created in 2021 and created a list of the top 100 . Marie and Chris chat about this year's list. Who's on it, what's on it, and digging into the numbers where we can. Remember that people can heart pens up to 3 times each, so if it looks like a Pen lower down the list has more hearts than one higher up the list, it's because of the density...

Olivia Ng has done loads of wonderful work here on CodePen and off (check out her super cool travel bucket list site ) She got started just out of pure desire to build things. "I just really like the internet" she told me. Hear hear! Her eye for design takes all her work to the next level. She had a particular focus on grid for a while there, and used those interesting designs to teach it . Also f...

Jhey Tompkins is one of the most prolific CodePen creators out there! Find him as @jh3y on CodePen and @jh3yy on Twitter. His creations tend to have a twist of whimsey while being beautifully designed as well as pushing the platform in unique ways. You'll always be surprised at a Jhey Pen! I talk with him about the creative process, problem-solving, and sharing what you learn. Time Jumps Sponsor:...

Rachel and Chris dig into the many, many ways in which we use Notion at CodePen. Heads up, Notion has sponsored a couple of episodes of CodePen Radio lately, but not this. It's just a tool we heavily use and this podcast is all about that sort of thing. Heck, this podcast itself was planned in a calendar database on Notion, which deals with dates, publication status, sponsors, and all sorts of stu...

You might recognize Ben Evans from his absolutely incredible CSS "paintings", like the portrait of his daughter or the still life . Paintings aren't the quite word as Ben designs them all to be entirely scalable. And sometimes they have interactivity, like the slight parallax in the Vaccum from Space . Like so many other great artists, Ben's skills aren't isolated to CSS trickery, his portfolio re...

This week I talk with Gabrielle Wee , who's done loads of creative coding work here on CodePen but like so many other creative people we talk to, her creativity explodes into so many other areas like illustration, photography, drawing, and even gardening. Plus a desire to share those techniques . Her path has led her to be working at Apple, a dream job. Gabrielle on Dribbble and Twitter . Some adv...

Today I get the pleasure of talking with Aaron Iker . Aaron builds incredibly delightful bits and bobs of UI that give you the feeling of hey, I bet I could actually use this! And that's exactly what Aaron wants you to do. He takes care to make sure the code is easy for you to use if you wish. This idea of taking somewhat practical-looking UI elements, like buttons, loaders, toggles, etc, and then...

We've been naming all our services cp____ lately. Get it? cp is short for CodePen. Clever, I know. We have many such services. The latest to join them is cpshots. We've been doing our own screenshotting for a long time now, but like all software we're always working on it for various everchanging reasons. Robert and I discuss this last round of changes to this service. Part of the purpose of this...

Chris and Shaw talk about how CodePen uses Cloudflare Works with the KV storage to power several things on CodePen. We do some cool stuff with them, like serve landing pages with the content provided by WordPress yet served on an entirely different Ruby on Rails powered site. We also serve up assets through them which provides lots of nice features both for us and for users indirectly and directly...

Marie and Chris talk about CodePen Challenges , which have been going strong for many years now. The gist is that you pop in and make something along a theme. The "challenge" is doing the work (they aren't meant to be tricky otherwise). We've seen people seriously level up their skills by participating, but of course, there is no obligation, and no prizes other than the satisfaction of a job well...

Chris gets to chat with George Francis , an incredible digital artist in the generative art space as well as educator and all-around developer. George has been all over the place lately, producing really outstanding work (CSS-Tricks uses a Houdini paint worklet from George in the header and footer). Not only does George make art that has that little special something that turns heads, he helps you...

Rachel and Chris chat all things Apollo GraphQL. Apollo is in this weird category of software where like by far most websites do not need it or anything like it. But for CodePen, we consider it nearly essential. The typical sales pitch for GraphQL applies to us for sure (e.g. only ask for the data you need! ) but you can add to that the fact that it is empowering for front-end developers, which we...

Lynn Fisher is my guest this week! You might know her as @lynnandtonic on CodePen and most other platforms. We get to talk about her A Single Div project and all the CSS magic that goes into those, other creative projects and why those are so satisfying, a recent transition over to Netlify, and the fact that we've worked together on an illustration project without ever having met. Time Jumps Spons...

ES Modules are a native feature of JavaScript! The import and export keywords are actually a mighty powerful thing for a language to have. You can use them right on CodePen of course. For example, with our URL extensions , you can export stuff from one Pen and import it in another without having to use the External Resources feature in Settings or anything, which might make your code more clear. T...

Cassie Evans is our special guest this week! Cassie is a front-end developer with a special talent and passion for animation and SVG, as evidenced in part by her amazing work on CodePen . She's recently became part of the team over at Greensock , a very popular JavaScript-powered animation framework. We got to talk specifically about the Greensock 3.8 release and an SVG workshop she's got ready to...

There are lots of types of dragging that can happen on websites. While they are all click (or tap), hold down, move, and let go, they are all quite a bit different. For instance: Drag files/folders onto the browser window and drop them. The likely use case there is uploading. Drag an element on the screen to another (valid) area of the screen. The likely use case is dragging cards from one column...

Chris & Shaw talk about a big ol' conversion to getting CodePen's color system to use --custom-properties all the way through, rather than Sass variables. Why? All sorts of reasons, kinda boiling down to the fact that they are just better. Here's a tiny one: you can use the Web Inspector and see what some other element is colored easily. Here's a huge one: ability to do theming way easier. But...