CodePen Radio

By CodePen BlogTechnology

CodePen Radio episodes

February 10, 2021 #302: Five Year Employee Milestones
While CodePen itself is about 8.5 years old as I write, Rach was part of the first round of hires we ever did, and has crossed the ever-so-rare and round-of-applause worthy 5-year milestone. She blogged it as well. So has Marie! Both of them join me (Chris) in a chat about that half-decade of life and work here at CodePen.
Time Jumps
Sponsor: Netlify
Netlify is great for a million reasons, chief among them how easy it makes to deploy your code. Not just static files, either. Netlify helps you deploy serverless functions as well. And now, those functions can run much longer: 15 minutes. That's enough time to do long-running tasks like web scraping, media generation and optimization, and things like data syncing.
0 min
February 03, 2021 #301: What are Projects?
Chris & Stephen take a look at CodePen Projects (docs), which, for the time, is an entirely different thing than Pens. Rather than just the 3 editors: HTML, CSS, and JavaScript—you have a file system to work with, with arbitrary files and folders like you're used to with a desktop code editor like VS Code or Atom. You've still got the ability to run processors, but you can do more, like literally deploy a production version of the site.
Sponsor: Jetpack
Jetpack is a WordPress plugin for your self-hosted WordPress site that brings you all sorts of useful thing. For one thing, more security. It blocks malicious activity, scans your site for problems, and backs up everything. That backup thing is very great. I just needed it yesterday! But my favorite feature is the Site Search. It replaces the default WordPress site search (which isn't very useful) with an entirely new search experience. Not just the UI of search, but it improves the search results dramatically. I use Jetpack on all my WordPress sites.
0 min
January 27, 2021 #300: Exploring Custom Profiles
You've got two options for customzing your profile on CodePen, and endless possibility:
Open to everyone: Apply Custom CSS (which can be a link to a Pen on CodePen)PRO only: Apply a Pen-as-Header-Background
In this video, Chris & Stephen look at a bunch of awesome profiles on CodePen, and find that many users (especially the coolest profiles) do both. Here's the shuffle machine we used in the video to randomize cool profiles:
22 min
January 20, 2021 #299: Meet CPHub
CPHub is just the name of an internal project ("CodePen Hub") that we've released in the last couple of weeks. You (as a user) won't notice a thing (except, perhaps, that some of our processors have been upgraded, like RubySass to DartSass). But for us, we notice, because not only does it do everything we hoped it would, it's had side effects that have all been positive.
This show is Alex and Chris chatting about all the technical in-and-outs of the project. Short story: we have a new internally-facing relative URL, which is responsible for the vast majority of anything that would otherwise go out to a third-party URL. So for example, all our code processing services in the past would have been routed to an AWS Gateway and then to an AWS Lambda orchestrator and then to an individual AWS Lambda and back. Now they go to CPHub, to the individual Lambda, and back. But it's not just AWS stuff, it's really any third party HTTP request.
Among other things, CPHub is:
Faster — a handful of Go-powered web servers that are literally faster, never break a sweat, and require less hopsLess expensive — we have to manage those servers, but they are simple and cheapAre not subject to CORS concerns — because the HTTP requests are to our own domain
The thing I'm most excited about though is the consolidation. Every service we have is consolidated into the CPHub area of our repo and we've improved the deployment story for all of it.
Episode Timestamps
01:14 Serverless functions on CodePen06:43 Advantages of CP Hub11:22 Sponsor: FeaturePeek14:17 Benefits of CP Hub continued19:16 Boom Boom25:02 Writing a node function32:15 A good idea all around34:36 Squashing bugs
Sponsor: FeaturePeek
Turn front-end deployment previews into your hub for continuous product review. FeaturePeek is the easiest way for web development teams to collaborate on frontend work.
Take and annotate screenshotsRecord session videoTag coworkers and leave comments
FeaturePeek works with all frameworks and hosting providers and integrates with Linear, Clubhouse, Trello, and more.
Get started today at featurepeek.com and use code FP2021 for 30% off upgrades to FeaturePeek for business teams.
41 min
January 13, 2021 #298: The Top Hearted Pens of 2020 by the Numbers
Chris and Marie talk through some of the data about the most hearted Pens of 2020. Marie loves pouring over data, and often uses Airtable to do that and help visualize it. This allowed us to figure out some of the top "categories" of the Pens that made the list, longtimers vs. brand new community members, and other data bits we'll cover in the show.
For example, here are the top creation months (remember, not overall, just of the Top 100 Most Hearted):
And here's us doing some broad categorization:
Time Jumps
01:38 Hearted Pens07:13 The top 100 list15:26 Sponsor: FeaturePeek18:25 Mashing the space bar21:56 Creation dates28:04:18 Dribbble inspired
Sponsor: FeaturePeek (15:26)
Turn front-end deployment previews into your hub for continuous product review. FeaturePeek is the easiest way for web development teams to collaborate on frontend work.
Take and annotate screenshotsRecord session videoTag coworkers and leave comments
FeaturePeek works with all frameworks and hosting providers and integrates with Linear, Clubhouse, Trello, and more.
Get started today at featurepeek.com and use code FP2021 for 30% off upgrades to FeaturePeek for business teams.
Show Links
Podcast 297: Looking at the Top Hearted Pens of 2020Blog post: The Most Hearted of 2020Podcast: The Most Hearted of 2019Blog post: The Most Hearted of 2019Grinch style hearting on CodePenGreensock Scrolltrigger
36 min
January 07, 2021 #297: Looking at the Top Hearted Pens of 2020
Chris Coyier and Stephen Shaw have a look at the Top Hearted Pens of 2020, which is always an amazing collection of work.
AUDIO WARNING: So sorry about my (Chris') audio. It was bad. We're working on it.
Sponsor: WordPress.com
New year; new you. Spin up that site you've been meaning to build on WordPress.com. Did you know the business plan (and higher) has SFTP and Database access on WordPress.com? So it's just like any other WordPress hosting, except it's on the great WordPress.com cloud so you're fast, secure, and have very little to worry about.
31 min
December 16, 2020 #296: 2020 Year in Review
0 min
December 09, 2020 #295: Projects and Serverless Functions
0 min
December 02, 2020 #294: Ten Bugs
39 min
November 25, 2020 #293: Thanksgiving Special
Show Description
Marie, Chris, Stephen, and Klare talk about the apps and services that they're thankful for this year.
Time Jumps
01:47 Marie08:40 Stephen16:24 Sponsor: Jetpack18:26 Klare24:48 Chris
Sponsor: Jetpack Backups
Jetpack has a ton of amazing features for your self-hosted WordPress site. But perhaps none more important than being the best backup and restore system available for WordPress. Jetpack Backup is available à la carte, so if that's all you need from Jetpack, you got it.
Show Links
FrontRuncatNotionFigma VariantsZoom.usSlackVS CodeGit TowerCloudflareKlare on CodePen / Klare on TwitterStephen on CodePen / Stephen on TwitterChris on CodePen / Chris on TwitterMarie on CodePen
CodePen Links
CodePen SupportCodePen SparkCodePen ProCodePen on TwitterCodePen on FacebookCodePen on InstagramSponsor an episode of CodePen RadioBuy a CodePen T-Shirt
0 min