Posted on

#279: Mini-Releases

Show Description

Dee, Stephen and Marie talk about CodePen’s evolving strategy of releasing mini features and updates rather than waiting for a big, mega update. They also talk about using feature flagging to test new features with specific users, and how to avoid building "the Homer car" with a minimum viable product mentality.

Time Jumps

  • 07:19 Update to collections
  • 14:04 Feature flagging
  • 20:21 Sponsor: WordPress
  • 22:30 Assets and feature flagging
  • 25:15 Minimum viable product

Sponsor: WordPress.com

Have an idea for a subscription business? Need to charge customers on a monthly or yearly basis for something, not just a one-off charge?

WordPress.com can do that for you. You connect your Stripe account (the best payment gateway out there!) and the rest is as easy as adding button blocks to your site. The UI your customers see is clean and clear, and the pricing is straightforward. The eCommerce plan pays no fees, the Business plan pays 2%, and the less expensive plans go up from there.

Show Links

CodePen Links

The post #279: Mini-Releases appeared first on CodePen Blog.

Posted on

#278: Community Creativity

Show Description

Chris and Marie talk about the creativity in creations they’ve seen on CodePen, including photo effects, water droplets, live streaming code, and making sheep!

Time Jumps

  • 00:32 Topic introduction
  • 02:46 Lynn Fisher’s photo effects
  • 10:07 Sponsor: WooCommerce
  • 12:11 Oscar Salazar’s "droplets"
  • 17:05 Flutter challenges
  • 20:00 Jhey’s Live streaming code
  • 22:32 Suzanne Aitchison’s "Make a sheep" tutorial
  • 24:40 Updates to Collections coming soon

Sponsor: WooCommerce 10:07

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 #278: Community Creativity appeared first on CodePen Blog.

Posted on

#277: Putting Out Fires

Show Description

Outages, bugs, and other production nightmares — every startup has them. Dee and Marie are on to talk about what the process is when something goes wrong at CodePen, and tips and tactics for how to deal with a production fire.

Time Jumps

  • 01:12:19 How do you know something is going wrong?
  • 05:59:10 What’s your process when something goes wrong?
  • 15:42:03 Working remote struggles
  • 24:07:10 Sponsor: Frontend Masters
  • 26:04:04 Tactics to deal with a development fire

Sponsor: Frontend Masters

Learn JavaScript, React, Vue and Angular from masters of frontend development. Advance your skills with in-depth, modern JavaScript and front-end engineering courses from Frontend Masters.

Show Links

CodePen Links

The post #277: Putting Out Fires appeared first on CodePen Blog.

Posted on

#276: Embed Updates

Show Description

Marie and Stephen talk about recent improvements made to CodePen embeds – including Prefill embeds and lazy loading embeds.

Time Jumps

  • 01:01 Assets updates
  • 05:20 What are embeds?
  • 07:46 Changes to embeds
  • 14:43 Sponsor: WooCommerce
  • 16:45 What about Prefill embeds?
  • 23:35 Lazy loading embeds

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 #276: Embed Updates appeared first on CodePen Blog.

Posted on

#275: Measuring Things

Show Description

Chris and Marie talk about how looking at the numbers behind changes can help guide and improve decisions we make at CodePen, including tools like Redash and Appcues, and how we use data to help sell PRO subscriptions.

Time Jumps

  • 01:33 Being a numbers person
  • 02:55 Using Redash
  • 06:07 Finding out if changes work
  • 11:09 Sponsor: Netlify
  • 13:18 Nudging users in the right direction
  • 26:09 Other types of analytics

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 #275: Measuring Things appeared first on CodePen Blog.

Posted on

#274: Golang

Show Description

Alex joins Marie to talk about how CodePen is using the programming language Go. What is Go? Why does Alex call Go a non-magical language? And what improvements have we made by using Go?

Time Jumps

  • 00:51 Go or GoLang?
  • 01:41 What is Go?
  • 05:20 What is a non-magical language?
  • 16:06 Sponsor: Jetpack
  • 17:51 CodePen Spark improvements

Sponsor: Jetpack

Jetpack adds an absolute ton of powerful functionality to your self-hosted WordPress site. If you have had the feeling that you’re paying for more than you need, you’re in luck, Jetpack is starting to have features you can buy individually. Jetpack Backup and Jetpack Search are new features you can buy individually if you like, and Jetpack Scan is the very latest, scanning your site constantly for any security issues and offering one-click fixes, just $7/month.

Show Links

CodePen Links

The post #274: Golang appeared first on CodePen Blog.

Posted on

#273: Assets Keep Getting Better

Show Description

Asset Hosting just keeps getting better! Marie and Stephen talk about even more new features added to PRO asset hosting including new CORS-proof asset URLs, image optimization, scaling or saving as a new image, and how CodePen decides to build features like this out.

Time Jumps

  • 01:49 What’s new in Asset Hosting?
  • 07:23 Optimizing images inside assets
  • 14:58 Sponsor: Netlify
  • 17:39 Saving or Scaling Images
  • 24:13 Building for ourselves as well as customers

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 #273: Assets Keep Getting Better appeared first on CodePen Blog.

Posted on

#272: Video

Show Description

Marie and Chris talk about video tutorials and demos for CodePen, and how CodePen is planning to improve videos across documentation and our YouTube channel.

Time Jumps

Sponsor: Jetpack

Jetpack adds an absolute ton of powerful functionality to your self-hosted WordPress site. If you have had the feeling that you’re paying for more than you need, you’re in luck, Jetpack is starting to have features you can buy individually. Jetpack Backup and Jetpack Search are new features you can buy individually if you like, and Jetpack Scan is the very latest, scanning your site constantly for any security issues and offering one-click fixes, just $7/month.

Show Links

CodePen Links

The post #272: Video appeared first on CodePen Blog.

Posted on

#271: Sending Email

Show Description

Dee and Marie talk about changes being made behind the tech we use to send out emails at CodePen. What’s the difference between transactional and non-transactional emails? When to bring an outside service vs building it yourself? And how are we sending emails so quickly now?

Time Jumps

  • 00:45 Transactional vs non-transactional email
  • 09:44 Bringing in outside services vs internal
  • 18:04 Sponsor: An Event Apart
  • 19:36 Very Important Emails get sent
  • 21:24 How can we send email so quickly now?
  • 29:12 Improved open rates

Sponsor: An Event Apart 18:04

To design a better web experience, attend a better-designed web conference. An Event Apart is three days of design, code, and content taught by absolute masters—the people who shape our medium. Join us and set yourself Apart.

Show Links

CodePen Links

The post #271: Sending Email appeared first on CodePen Blog.

Posted on

#270: Dynamically Generated CDN Content

Show Description

Team CodePen is dipping our toes into the pool of dynamically generating content using Cloudflare Workers. Alex and Marie are on to talk about what that means, and how we’re using it to improve CodePen.

Time Jumps

  • 01:01 Topic introduction
  • 19:56 Sponsor: Sanity.io
  • 21:26 What was challenging about learning Cloudflare Workers?
  • 25:23 Execution time vs request time

Sponsor Sanity.io 19:56

Sanity.io is the platform for structured content. It comes with an open source editor which you can customize with React. Sanity.io comes with the tooling that lets you build structured content in React, Vue, and other front end technologies like Svelte. It has powerful APIs so that you can use the same content across any device, channel, or product. You can even listen for changes in real time, and use the write APIs to patch and make new documents from code. You can get started for free on the standard plan, and add a credit card to pay as you go for usage

Show Links

CodePen Links

The post #270: Dynamically Generated CDN Content appeared first on CodePen Blog.

Posted on

#269: Docs and Blocks

Show Description

Chris and Marie talk about updating the documentation at CodePen to support WordPress’ block editor – also known as Project Gutenberg.

Time Jumps

  • 01:09 WordPress powers a lot at CodePen
  • 05:10 Keeping current with WordPress
  • 12:10 Sponsor: WordPress.com
  • 14:16 Refreshing the site with blocks
  • 22:25 Changing the podcast page
  • 25:02 Looking back on 5 years of maintaining documentation

Sponsor: WordPress.com

Have an idea for a subscription business? Need to charge customers on a monthly or yearly basis for something, not just a one-off charge?

WordPress.com can do that for you. You connect your Stripe account (the best payment gateway out there!) and the rest is as easy as adding button blocks to your site. The UI your customers see is clean and clear, and the pricing is straightforward. The eCommerce plan pays no fees, the Business plan pays 2%, and the less expensive plans go up from there.

Show Links

CodePen Links

The post #269: Docs and Blocks appeared first on CodePen Blog.

Posted on

#268: Appcues

Show Description

CodePen is using Appcues to help with onboarding and feature notifications in the app. Chris and Marie are on to talk about how it works.

Time Jumps

  • 01:47 Why do we need this app?
  • 05:10 Changing email service
  • 07:24 Sponsor: Netlify
  • 09:46 Build or buy?
  • 18:42 Tracking monthly active users
  • 23:39 The biggest reason to use Appcues
  • 31:53 A solution to common user problems

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 #268: Appcues appeared first on CodePen Blog.

Posted on

#267: PRO Assets Update

Show Description

We’re shipping some big changes to the PRO asset experience! Marie, Dee, and Stephen are on to talk about what’s coming soon to asset hosting, and the tech behind the new features.

Time Jumps

Sponsor: WordPress.com

Have an idea for a subscription business? Need to charge customers on a monthly or yearly basis for something, not just a one-off charge?

WordPress.com can do that for you. You connect your Stripe account (the best payment gateway out there!) and the rest is as easy as adding button blocks to your site. The UI your customers see is clean and clear, and the pricing is straightforward. The eCommerce plan pays no fees, the Business plan pays 2%, and the less expensive plans go up from there.

Show Links

CodePen Links

The post #267: PRO Assets Update appeared first on CodePen Blog.

Posted on

#266: Rubber Ducking

Show Description

It is rubber duck season! As we all spend a lot more time on our own, team CodePen and the CodePen community are squashing bugs with the "rubber ducking" technique for breaking down complex problems. Goofy name, but it really works!

Time Jumps

  • 01:33 What is rubber ducking?
  • 05:03 Reduced test case
  • 08:40 Getting debugging help on social media
  • 15:17 Sponsor: Porkbun
  • 16:00 CodePen Collab mode rubber ducking
  • 19:51 Console on CodePen

Sponsor: Porkbun

Did you know? You can get a free .design domain name for your website! .design lets everyone — especially your clients or future employers — know what you do before they even arrive to your website. Unlike .com or .net, it’s more relevant to what you do as a designer and it helps with your branding. It looks great on resumes, business cards, or as your professional email address (e.g. you@website.design). Right now you can get a free .design domain name. Your .design domain name comes with free email hosting, SSL certificates, & a free site builder.

Show Links

CodePen Links

The post #266: Rubber Ducking appeared first on CodePen Blog.

Posted on

#265: Flutter

Show Description

Andrew Brogdon from the Flutter team chats with Marie and Alex about the new Flutter editor on CodePen.

Time Jumps

  • 01:07 What is Flutter?
  • 05:03 How did CodePen integrate Flutter?
  • 08:20 Dartpad
  • 14:45 Sponsor: Jetpack
  • 17:09 How do you get started with Flutter?
  • 20:26 How did CodePen enable a new editor

Sponsor: Jetpack

Jetpack is full of features. If you have had the feeling that you’re paying for more than you need, you’re in luck, Jetpack is starting to have features you can buy individually. Jetpack Backup is one of them, the best way to backup a WordPress site there is. If that’s the only paid feature you need, you got it. Just $3 a month for daily backups or $20 a month for realtime backups.

Show Links

CodePen Links

The post #265: Flutter appeared first on CodePen Blog.

Posted on

#264: Community Roundup

Show Description

Chris & Marie talk about building community on CodePen and the various ways community is happening in and around CodePen.

Time Jumps

  • 00:37 Following feed on CodePen
  • 03:20 Community on CodePen
  • 07:40 Sponsor: Sanity
  • 08:35 Watching the community evolve
  • 14:52 A different kind of spring
  • 21:18 What are people building?
  • 24:32 Dart

Sponsor: Sanity.io

Sanity.io is the platform for structured content. It comes with an open source editor which you can customize with React. Sanity.io comes with the tooling that lets you build structured content in React, Vue, and other front end technologies like Svelte. It has powerful APIs so that you can use the same content across any device, channel, or product.

You can even listen for changes in real time, and use the write APIs to patch and make new documents from code. You can get started for free on the standard plan, and add a credit card to pay as you go for usage over the generous standard quotas.

Show Links

CodePen Links

The post #264: Community Roundup appeared first on CodePen Blog.

Posted on

#263: A New Editor Vue

Show Description

Chris, Stephen, and Marie talk about the new editor experience that's coming soon for Vue.js on CodePen.

Time Jumps

Sponsor: Jetpack

Jetpack is full of features. If you have had the feeling that you're paying for more than you need, you're in luck, Jetpack is starting to have features you can buy individually. Jetpack Backup is one of them, the best way to backup a WordPress site there is. If that's the only paid feature you need, you got it. Just $3 a month for daily backups or $20 a month for realtime backups.

Show Links

CodePen Links

The post #263: A New Editor Vue appeared first on CodePen Blog.

Posted on

#262: Dee

Show Description

Marie and Rach welcome Dee Vazquez back to the team! Dee talks about her journey from finance whiz to solo dev to Team CodePen's newest fullstack developer.

Time Jumps

  • 02:12 Dee's new role
  • 08:36 Where Dee went when she left 2 years ago
  • 18:30 Sponsor: Netlify
  • 20:43 Coping with bugs + fresh energy

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 #262: Dee appeared first on CodePen Blog.