Posted on

#296: 2020 Year in Review

Show Description

Marie and Chris take a look back at the features, fixes, and infrastructure work Team CodePen worked on throughout 2020.

Time Jumps

Sponsor: WooCommerce

WooCommerce is a WordPress plugin that brings eCommerce to your WordPress sites. It’s unique in its customizability and flexibility. You can use it to sell physical products, digital downloads, memberships, services, and tickets, plus offer customers lots of different ways to pay, including things like Apple Pay and Bitcoin powered by Stripe.

Show Links

CodePen Links

The post #296: 2020 Year in Review appeared first on CodePen Blog.

Posted on

#295: Projects and Serverless Functions

Show Description

Dee, Marie, and Chris talk about behind the scenes updates to dramatically improve CodePen Projects.

Time Jumps

  • 03:52 Fixing tragic bugs
  • 07:33 How did we upgrade Projects
  • 16:57 Sponsor: WooCommerce
  • 19:36 Bye Gulp

Sponsor: WooCommerce

WooCommerce is a WordPress plugin that brings eCommerce to your WordPress sites. It’s unique in its customizability and flexibility. You can use it to sell physical products, digital downloads, memberships, services, and tickets, plus offer customers lots of different ways to pay, including things like Apple Pay and Bitcoin powered by Stripe.

Show Links

CodePen Links

The post #295: Projects and Serverless Functions appeared first on CodePen Blog.

Posted on

#294: Ten Bugs

At the end of the year we’re in a bug-bashing mood. Chris and Marie are on to talk bug fixing, and dig into the behind-the-scenes on the last 10 bugs we fixed.

Time Jumps

  • 00:26 Software versioning
  • 07:06 Issues vs Features
  • 12:14 Sponsor: Netlify
  • 14:49 Dealing with issues
  • 20:47 Various bugs we’ve fixed

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.

Show Links

CodePen Links

The post #294: Ten Bugs appeared first on CodePen Blog.

Posted on

#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:24 Marie
  • 08:40:06 Stephen
  • 16:24:00 Sponsor: Jetpack
  • 18:26:13 Klare
  • 24:48:00 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.

The post #293: Thanksgiving Special appeared first on CodePen Blog.

Posted on

#292: Bundles

Show Description

Chris, Stephen, and Marie are talking bundles: bundles of software, bundling things in software, and how that all relates to making CodePen better.

Time Jumps

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

CodePen Links

The post #292: Bundles appeared first on CodePen Blog.

Posted on

#291: Projects, Revisited

Show Description

Marie and Chris are on to talk about what’s changed, what’s been improved, and what was removed in our revamp of the Projects editor.

Time Jumps

Sponsor: Jetpack

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

CodePen Links

The post #291: Projects, Revisited appeared first on CodePen Blog.

Posted on

#290: Packages

Show Description

Chris, Stephen, and Marie talk about developing with packages and CodePen’s upcoming Skypack integration.

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.

Show Links

CodePen Links

The post #290: Packages appeared first on CodePen Blog.

Posted on

#289: Code Mysteries

Show Description

How do you learn to work with something that has, like, no docs at all? How do you code something that nobody’s ever written about? It’s tricky, but with some sleuthing it can be done! Marie and Stephen are on to talk strategies for solving coding mysteries.

Time Jumps

  • 00:43 Topic introduction
  • 02:37 The case of the missing documentation
  • 06:43 How to ask a good question about code
  • 14:50 Sponsor: WooCommerce
  • 16:47 Learning resources
  • 19:44 Monaco

Sponsor 14:50 WooCommerce

WooCommerce is a WordPress plugin that brings eCommerce to your WordPress sites. It’s unique in its customizability and flexibility. You can use it to sell physical products, digital downloads, memberships, services, and tickets, plus offer customers lots of different ways to pay, including things like Apple Pay and Bitcoin powered by Stripe.

Show Links

CodePen Links

The post #289: Code Mysteries appeared first on CodePen Blog.

Posted on

#288: Weekly Docs

Besides meetings, how does your company communicate what everyone is working on each week? Meetings? Reports? Klare, Chris, and Marie talk about CodePen’s use of weekly team docs to keep our fully remote team up to date.

Time Jumps

  • 00:48 All Hands meeting
  • 07:10 Keeping a weekly doc
  • 10:56 How we organize it in Notion
  • 13:50 Sponsor: Netlify
  • 17:06 "What held me back"
  • 21:04 What we do in our meetings now

Sponsor: Netlify

Serve dynamic, personalized content instantly with Netlify‘s Edge Handlers. Supercharge your web apps with custom JavaScript logic that runs on the network edge. Modify each request to localize content, serve relevant banner ads, authenticate visitors, and more… all directly from the worldwide location closest to each user.

Show Links

CodePen Links

The post #288: Weekly Docs appeared first on CodePen Blog.

Posted on

#287: Spark 200

Show Description

We’re celebrating 200 issues of our newsletter, The Spark! Chris and Marie are on to talk about how we put our email newsletter together each week, what kind of content goes in The Spark, and how the process of sending it has evolved over almost 4 years.

Time Jumps

  • 00:49 Putting the Spark together
  • 01:53 The content in the Spark
  • 04:51 How we send the Spark
  • 18:00 Internal tool documentation
  • 20:50 Sponsor: Woocommerce
  • 22:49 The "Send Station"
  • 27:11 Advertising in The Spark

Sponsor 20:50 WooCommerce

WooCommerce is a WordPress plugin that brings eCommerce to your WordPress sites. It’s unique in its customizability and flexibility. You can use it to sell physical products, digital downloads, memberships, services, and tickets, plus offer customers lots of different ways to pay, including things like Apple Pay and Bitcoin powered by Stripe.

Show Links

CodePen Links

The post #287: Spark 200 appeared first on CodePen Blog.

Posted on

#286: New Homepage

Show Description

Marie and Chris talk about the recent changes to your homepage on CodePen – the one you see when you’re logged in and looking for inspiration. What’s new with the Trending, Following, and Your Work tabs?

Time Jumps

  • 01:00 What should we talk about on the podcast?
  • 01:53 What’s new on the homepage?
  • 13:32 Sponsor: imgix
  • 14:51 Trending feature
  • 19:43 Your Work
  • 26:33 Ideas around Streams
  • 29:07 One more thing about feature flags

Sponsor imgix

imgix is the API for fast, responsive, beautifully optimized images.

Your images create complex challenges with web performance, user experience, conversion rates, SEO, and responsive design. Our APIs solve them.

Visit imgix.com/codepen and signup to receive a $300 account credit.

Show Links

CodePen Links

The post #286: New Homepage appeared first on CodePen Blog.

Posted on

#285: AVIF

Show Description

Marie and Stephen talk about adding AVIF support to CodePen Asset hosting – most importantly, how do you pronounce AVIF? What is AVIF? How does AVIF compare with WebP? And how was AVIF support added to CodePen?

Time Jumps

  • 01:08 How to pronounce it?
  • 01:59 What is it?
  • 06:05 WebP vs AVIF?
  • 10:01 Sponsor: Jetpack
  • 12:05 How did we add this to CodePen?
  • 19:06 The evolution of Asset Hosting

Sponsor: Jetpack

Jetpack has a variety of features that help make integration between your site and social media sites better. For example, widgets for showing the latest photos from Instagram, or for contacting you via WhatsApp. But it helps in the other direction as well, allowing you to automatically post to social networks when you publish new content. Plus, preview what it will look like before it goes.

Show Links

CodePen Links

The post #285: AVIF appeared first on CodePen Blog.

Posted on

#284: Settings Redesign (Part 2)

Show Description

Klare, Dee, and Marie chat about the process behind redesigning the settings pages inside CodePen – how decisions were made, adding helper text to various locations, and designing React components to reuse.

Time Jumps

  • 01:24 What was the process behind the design?
  • 09:55 Context switching
  • 17:13 Adding helper text
  • 19:24 Sponsor: imgix
  • 20:50 Designing React components

Sponsor: imgix 19:24

imgix is the API for fast, responsive, beautifully optimized images.

Your images create complex challenges with web performance, user experience, conversion rates, SEO, and responsive design. Our APIs solve them.

Visit imgix.com/codepen and signup to receive a $300 account credit.

Show Links

CodePen Links

The post #284: Settings Redesign (Part 2) appeared first on CodePen Blog.

Posted on

#283: Settings Redesign (Part 1)

Show Description

Marie and Dee talk about changes to the settings panel in your account on CodePen – design changes, how changes you make to your settings get saved, making use of feature flags to test, making sure billing is done right, and Stephen’s beautiful tables.

Time Jumps

Sponsor: Netlify 15:10

Netlify is the fastest way to build the fastest sites, Jamstack style. Netlify is a web host that hosts your static files, but for not-so-static sites. The static file hosting is just so that the site can be served over a global CDN as quickly and securely as is possible to do. Any kind of functionality is possible through things like built-in form processing, auth, and cloud functions, and the developer experience is second to none.

Show Links

CodePen Links

The post #283: Settings Redesign (Part 1) appeared first on CodePen Blog.

Posted on

#282: Sunsetting Posts

Show Description

Marie and Chris talk about deprecating the blog posting functionality on CodePen, why we decided to turn it off, what happens with posts when the feature sunsets, and suggestions for where to post going forward.

Time Jumps

  • 00:26 What is sunsetting?
  • 01:52 Deprecating the Posts feature
  • 08:40 Most posts were spam
  • 14:10 Sponsor: WooCommerce
  • 16:15 Posts aren’t going to disappear
  • 26:11 SEO Folklore

Sponsor: WooCommerce

WooCommerce is a WordPress plugin that brings eCommerce to your WordPress sites. It’s unique in its customizability and flexibility. You can use it to sell physical products, digital downloads, memberships, services, and tickets, plus offer customers lots of different ways to pay, including things like Apple Pay and Bitcoin powered by Stripe.

Show Links

CodePen Links

The post #282: Sunsetting Posts appeared first on CodePen Blog.

Posted on

Posts Sunset

We are removing the Posts editor from CodePen in December 2020.

If you’re looking for a great place to publish blog posts, there are lots of places you can blog for free, like the developer-focused DEV, WordPress.com, or hey, maybe it’s a good time to play around with a static site generator and self-publish.

Here’s what’s changed now:

  • Readers cannot create new comments on Posts
  • Readers cannot heart Posts
  • We are no longer picking Posts for the homepage picks
  • Posts are removed from Topics

Here’s what will happen in December:

  • The Post editor at codepen.io/write will be removed
  • Post editing will be disabled
  • The Posts section of member profiles will be removed
  • Search for Posts will be removed
  • Only users with published Posts will see UI for it in their own work

But all published Posts will remain published at their original URLs. Nothing is being deleted or taken offline.

  • Private Posts will remain private
  • Public Posts will remain public
  • Post authors can delete published Posts and unpublished drafts
  • Post authors can view and copy the raw Markdown of published Posts and unpublished drafts

Any questions at all, feel free to message us in support.

The post Posts Sunset appeared first on CodePen Blog.

Posted on

#281: Collection Reordering

Show Description

We’ve got a big update coming for Collections! Stephen and Marie are on to give you a sneak peek at reordering and more of what’s coming soon for the Collections feature on CodePen.

Time Jumps

  • 01:42 What is a Collection on CodePen?
  • 07:12 Updates to Collections
  • 09:51 Creating new positions for items in a Collection
  • 13:24 Sponsor: ScoutAPM
  • 15:08 How does the sorting and re-ordering work?
  • 24:32 Update to list views

Sponsor: Scout APM

Scout APM is performance monitoring that helps developers streamline troubleshooting and get back to coding faster. With tracing logic that ties bottlenecks to source code, Scout helps you quickly pinpoint and resolve N+1 queries, memory bloat, and other abnormalities in real time before your customers ever see them. Scout’s package is easy to install and safe to run alongside your existing APM library, which means you’re less than 4 minutes away from actionable performance insight. Start your free 14-day trial today at scoutapm.com/codepen, no credit card required, and Scout will donate $5 to the open source project of your choice when you deploy.

Show Links

CodePen Links

The post #281: Collection Reordering appeared first on CodePen Blog.

Posted on

#280: Planning Big Projects

Show Description

Marie, Klare, and Dee talk about how Klare leads CodePen through project planning.

Time Jumps

  • 01:34:23 How to visualize use cases for a new project
  • 09:39:05 How did Klare come to this project strategy?
  • 20:39:00 Sponsor: Netlify
  • 23:11:08 How do you elicit feedback?
  • 29:04:00 Dealing with expectations
  • 35:38:21 Keeping good notes from meetings

Sponsor: Netlify

Netlify is the fastest way to build the fastest sites, Jamstack style. Netlify is a web host that hosts your static files, but for not-so-static sites. The static file hosting is just so that the site can be served over a global CDN as quickly and securely as is possible to do. Any kind of functionality is possible through things like built-in form processing, auth, and cloud functions, and the developer experience is second to none.

Show Links

CodePen Links

The post #280: Planning Big Projects appeared first on CodePen Blog.