CodePen Radio

This week I got to speak with Chris Nager! I've known Chris quite a while. I remember being inspired by his hand-drawn SVG plus symbol and subsequent guide to commands, which inspired my own shortly after I was properly obsessed with SVG. We talk about all sorts of things like accessibility, how far CSS has come, and some of the amazing stuff that has shipped recently in Safari Technical Preview. Check out Chris' Twitter, personal site, and classic great project Give 'n' Go, a CodePen/Dribbble crossover website.

If you Command (Mac) or Control (PC) click the Fork button, it will open the newly forked Pen in a new tab in your browser. That's new behavior. Before, it would open the fork in the same tab, no matter how you click. That was unfortunate, as Cassie called out:

Why didn't it work like this before? Well, that's what Shaw and I get into in this podcast. It's a smidge complicated. The root of it is that that Fork button isn't a hyperlink. It's a button handled by JavaScript because of the nature of how it works (a fork might have data that only the client knows about: unsaved code changes). But Shaw found a way to make it work anyway, by essentially passing the metaKey information through all the forking process until that moment we had an opportunity to open that new tab.

Notion is an incredible organizational tool. Individuals can get a ton out of it, but I find the most benefit in making it a home base for teams. It can replace so many separate tools (documents, meeting notes, todos, kanbans, calendars, etc) that it really becomes the hub of doing work, and everything stays far more organized than disparate tools ever could.

I got to talk to Sarah Fossheim this week! One of the impressive things that Sarah does is near photograph-quality recreations of iconic old technology in HTML & CSS. I enjoyed the fact that neither of us quite totally knows what some of these machines even did, but appreciate their incredible aesthetics. Perhaps my favorite part of the conversation was emphasizing that this work, while almost being a relaxing hobby in the vein of knitting, still levels up one's CSS ability. Sarah got me thinking that it's not just CSS, but perhaps equally or more importantly HTML ability, the ability to break down sections into components and think about how smaller parts become a whole, just like any other website work.

Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.

Thousands of teams at companies like Amazon, DoorDash, Peloton, and Brex collaborate around custom-built Retool apps to solve internal workflows. To learn more, visit retool.com.

I had tons of fun talking to Tiffany Choong this week! I loved learning her process on creating countless code art Pokémon characters. Just look at it and wing it! Wild. While I'm not nearly as creative as Tiffany, I feel some kinship looking through her Pens. Like how there are all these amazingly creative ones that clearly took tons of effort, that don't have nearly the hearts they deserve (c'mon dino loader!), and then relatively simple practical Pens (like a menu) that go nuts with popularity and it's hard to know why.

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.

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 quickly using them to build great demos that play up what those technologies were born to do.

Automattic are the makers of WordPress.com, the fastest and easiest place to spin up a WordPress site, without sacrificing the power of self-hosted options. If you sell stuff on WordPress.com, the built-in help to do that is powered by WooCommerce, the premier eCommerce solution for WordPress. It's the same WooCommerce whether you are on WordPress.com or not. If you are self-hosted, you can almost certainly take advantage of Jetpack, Automattic's WordPress plugin that adds enormous functionality to WordPress, like a vastly improved site search, real-time backups, security features, and tons more.

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://codepen.io/amit_sheen/pen/WNweryv
• Bouncing off the walls - https://codepen.io/amit_sheen/pen/abBgWvJ
• House of CSS cards - https://codepen.io/amit_sheen/pen/QWGjRKR
• FlipBoxes - https://codepen.io/amit_sheen/pen/YzQoMxR
• RadioPoles - https://codepen.io/amit_sheen/pen/RwZwGVQ
• 3D Wobbly Disco - https://codepen.io/amit_sheen/pen/LYLQQpW4D
• 4D SimplexNoise - https://codepen.io/amit_sheen/pen/XWgVKxO
• Typing effect - https://codepen.io/amit_sheen/pen/YzZYoMV
• Text morphing - https://codepen.io/amit_sheen/pen/xxqYzvm
• csStickman - https://codepen.io/amit_sheen/pen/abLPdoQ
• The Lonely Claw - https://codepen.io/amit_sheen/pen/yLzWVYo
• Newton's CSS cradle - https://codepen.io/amit_sheen/pen/XWMXwvJ
• Table tenniCSS - https://codepen.io/amit_sheen/pen/PobQjMX

Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.

Thousands of teams at companies like Amazon, DoorDash, Peloton, and Brex collaborate around custom-built Retool apps to solve internal workflows. To learn more, visit retool.com.

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.

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 the most of it? Subscribe to their brand spankin' new YouTube channel to learn more about using your site and what fellow customers are doing with theirs.

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.

Quirrel Joins Netlify and now we have Scheduled Functions (in Beta)! Wanna run your cloud functions on a time-based schedule? Now you can without even leaving your repo.

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 list of Louis' Pens he chose to talk about, covering some of his history here, each of which is symbolic of a personal era and often unlocking new professional doors:

• https://codepen.io/Mamboleoo/pen/ynzCu (March 2014)
• https://codepen.io/Mamboleoo/pen/dzyBu (Aug 2014)
• https://codepen.io/Mamboleoo/pen/ByxPvG (Feb 2015)
• https://codepen.io/Mamboleoo/pen/pvQQde (March 2015)
• https://codepen.io/Mamboleoo/pen/dowRJo (Aug 2015)
• https://codepen.io/Mamboleoo/pen/xGeELo (Aug 2015)
• https://codepen.io/Mamboleoo/pen/PZWPZx (Jan 2016)
• https://codepen.io/Mamboleoo/pen/oxaXdj (April 2016)
• https://codepen.io/Mamboleoo/pen/Bppdda (Jan 2017)
• https://codepen.io/Mamboleoo/pen/GRJKoBw (Feb 2020)
• https://codepen.io/Mamboleoo/pen/WNxOvjo (Oct 2020)

WooCommerce can do it all as far as adding eCommerce functionality to a WordPress site. One off product sales, for sure, including shipping and inventory management and all that. But it can also sell digital products. It can also sell memberships and subscriptions. Put on your what if hat. What if your business sold memberships? What could you offer? It's always worth thinking about.