Posted on

#261: Following and Activity

Show Description

Chris, Stephen, and Marie talk about how CodePen has updated the Following feed and the activity feed to make them more fun and useful.

Time Jumps

  • 01:47 New features for social
  • 02:43 What is Following?
  • 12:07 Sponsor: WooCommerce
  • 14:10 What the following feed looks like now
  • 20:18 Personalizing your experience
  • 26:07 New Activity feed arrives

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 #261: Following and Activity appeared first on CodePen Blog.

Posted on

260: Remote

Marie, Klare, and Chris talk about the things CodePen has learned about working from home and offer some advice to those who are unexpectedly making the transition to working from home.

Time Jumps

  • 00:45:11 Topic introduction
  • 07:57:15 Our advice at CodePen
  • 10:07:16 Silence is stressful
  • 14:32:02 Sponsor: WooCommerce
  • 17:19:00 Talking in DM's
  • 23:03:19 Commuting

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 260: Remote appeared first on CodePen Blog.

Posted on

#259: Teaching with CodePen

Show Description

Stephen and Chris talk about the various ways CodePen is used in education - both formal and "for fun". Documentation, streaming, code camps, and more!

Time Jumps

  • 01:48:18 Topic introduction
  • 03:30:12 Why does CodePen exist?
  • 06:34:05 Rebuilding The Markup
  • 10:10:00 Documentation and embeds
  • 14:51:18 Sponsor: Front End Masters
  • 16:29:17 Free Code Camp
  • 20:20:02 Streaming CodePen

Sponsor: Frontend Masters

Frontend Masters is the best place to learn about the modern world of web development. They have all the best teachers delivering courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

Show Links

CodePen Links

The post #259: Teaching with CodePen appeared first on CodePen Blog.

Posted on

#257: Challenges 2020

Show Description

We're two years into the #CodePenChallenge! Chris and Marie chat about why we do them, and the challenges of keeping a community challenge fresh and fun over time.

Time Jumps

  • 00:47 What are Challenges?
  • 10:53 Reasons to have challenges
  • 13:33 Sponsor: CodePen Pro!
  • 15:37 Business benefit of Challenges
  • 27:03 Community challenges?

Show Links

CodePen Links

Posted on

#256: Browsing

Show Description

Klare, Stephen, and Marie talk about recent changes to browsing CodePen and how it makes everything faster and less likely to start a fire on your laptop.

Time Jumps

Sponsor

12:52 Netlify

Show Links

CodePen Links

The post #256: Browsing appeared first on CodePen Blog.

Posted on

255: Assets Update

Show Description

Stephen and Marie talk about the recent update to the assets modal and highlight some of the benefits of the assets you have available to you on CodePen. Just don't say Redux!

Time Jumps

  • 01:21 What is the asset modal for?
  • 05:12 2 aspects to the assets modal
  • 08:17 Three.JS Support
  • 11:20 Sponsor: WordPress
  • 13:12 What did it take to rewrite the modal?
  • 19:24 Free assets

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 255: Assets Update appeared first on CodePen Blog.

Posted on

254: Design Tools

Show Description

Klare and Chris talk about the design tools used at CodePen, and why we landed on the apps that we did.

Time Jumps

  • 01:06 We use Figma!
  • 02:33 What about Invision?
  • 07:57 Our flow typically is...
  • 16:31 Sponsor: WordPress
  • 18:04 What is auto layout?
  • 27:41 What about time?

Sponsor: WordPress.com now has SFTP and Database Access

I’m the type of developer who likes to hack on my theme! Me too, dear reader, me too. In the past, that may have been a reason not to choose to put your site on WordPress.com. No more. If you’re on the Business or eCommerce plans, you have direct access to your site’s database (via phpMyAdmin) and files (via SFTP). You can also install plugins, giving you as much control over your WordPress site as you’d likely ever need.

Show Links

CodePen Links

The post 254: Design Tools appeared first on CodePen Blog.

Posted on

253: Copy

Show Description

Klare and Marie are talking copy — marketing copy, documentation copy, micro-copy, and all the other kinds of copy that you might have on an app like CodePen.

Time Jumps

  • 00:41 Redesign of the Pen settings panel
  • 07:08 Updating documentation
  • 13:01 Marketing copy
  • 21:07 Sponsor: CloudBees Rollout
  • 22:25 Who bears the burden of copy?

Sponsor: CloudBees Rollout

Cloudbees Rollout is a secure, scalable feature management platform that allows engineers and software teams to accelerate mobile, web, and back-end development by giving them maximum control over their features in production. Create rich deployment rules based on percentages, custom attributes, or user segments to gradually roll new features out to users. Use multi-variate flags for A/B testing and nix misbehaving features with a kill switch. CloudBees Rollout is the safest way to deliver new features.

Check out the 14 day free trial and experience how CloudBees Rollout can help you rock every release.

Show Links

CodePen Links

The post 253: Copy appeared first on CodePen Blog.

Posted on

#252: Browser Testing

Show Description

Stephen, Marie, and Chris talk about cross browser testing - both as a user as well as behind the scenes at CodePen.

Time Jumps

  • 00:25 Topic introduction
  • 02:32 How to test your Pen
  • 14:07 Sponsor: Jetpack
  • 16:40 Virtual boxing
  • 23:38 Code debugging on CodePen

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 #252: Browser Testing appeared first on CodePen Blog.

Posted on

#251: Marketing

Show Description

It's January, and that means Chris and Marie are thinking about marketing (again). In this episode we talk about the challenges of marketing and user education for a complex app like CodePen.

Time Jumps

  • 00:27 Intro to the topic
  • 03:41 What don't people know about CodePen?
  • 15:27 Sponsor: Jetpack
  • 17:43 Social media sharing
  • 20:39 Asset Manager
  • 28:30 Why this happens every January?

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

Posted on

#250: The Most Hearted of 2019

Show Description

Chris and Marie chat about the most hearted Pens on CodePen in 2019. We talk about what was hot in 2019, and our personal favorite Pens and trends.

Time Jumps

  • 02:04 Triple heart on CodePen
  • 03:30 Looking back at 2019 on CodePen
  • 08:13 Sponsor: Rollout
  • 09:34 Users with multiple entries
  • 15:02 Sponsor: Netlify
  • 17:10 Hilarity ensues
  • 26:29 UI improvements to popular Pens

Sponsors

Rollout

CloudBees Rollout is where developers come to ship changes at will. When you have a solution to manage feature flags at scale, you’re empowered to continuously and intelligently roll out changes as soon as they are code complete on any platform - even mobile. Decouple development from code releases for real-time change control. Roll back only the changes you want. Toggle features. Use multi-variate flags for A/B testing and nix misbehaving features with a kill switch.

Check out the 14 day free trial and experience how CloudBees Rollout can help you rock every release.

Netlify

Netlify, the powerful and awesome web host we all know and love, now is offering AWS Lambda functions built right in. You make a folder for all your functions, and they become relative paths you can hit to execute those functions. One reason you might wanna do that? Keeping your third-party API keys safe! Just another ingredient that make your fast static sites... not so static.

Show Links

CodePen Links

The post #250: The Most Hearted of 2019 appeared first on CodePen Blog.

Posted on

#249: 2019 in Review

Show Description

We're wrapping it up for 2019! In this special episode, Marie talks to everybody on Team CodePen about their favorite projects of the year.

See the Pen
CodePen's 2019 by CodePen (@codepen)
on CodePen.

Sponsor: WordPress.com

WordPress.com powers a third of the internet. Surprising? Perhaps not once you get to know how easy and friendly, yet powerful and flexible WordPress.com is. If you can build a site on WordPress.com, you should. You're doing yourself a big favor by not taking on the incredible technical debt of hosting a site yourself. Focus on your business instead.

Show Links

CodePen Links

The post #249: 2019 in Review appeared first on CodePen Blog.

Posted on

#248: Ideation

Marie and Klare talk about ideation and how CodePen has used it to work through ideas and projects as a remote team.

Time Jumps

  • 00:41 What is ideation?
  • 05:59 Sponsor: Netlify
  • 08:00 Next steps
  • 19:42 Sponsor: WordPress.com
  • 21:56 Recapping our session
  • 29:18 Recommendations for using ideation

Sponsors

Netlify

Netlify, the powerful and awesome web host we all know and love, now is offering AWS Lambda functions built right in. You make a folder for all your functions, and they become relative paths you can hit to execute those functions. One reason you might wanna do that? Keeping your third-party API keys safe! Just another ingredient that make your fast static sites... not so static.

WordPress.com

WordPress.com powers a third of the internet. Surprising? Perhaps not once you get to know how easy and friendly, yet powerful and flexible WordPress.com is. If you can build a site on WordPress.com, you should. You're doing yourself a big favor by not taking on the incredible technical debt of hosting a site yourself. Focus on your business instead.

Show Links

CodePen Links

The post #248: Ideation appeared first on CodePen Blog.

Posted on

#247: Ads

Show Description

Chris and Marie talk about the various ways sponsorship and advertising has changed over the years at CodePen.

Time Jumps

  • 00:51 Topic introduction
  • 08:08 Why now?
  • 12:47 Sponsor: Flywheel
  • 14:35 How advertising has changed at CodePen
  • 21:49 New ad spots
  • 30:44 Reasons to go PRO

Sponsor: Flywheel

Flywheel is the best WordPress hosting out there. Of course they have local WordPress development down with Local by Flywheel, which you can use no matter what, the hosting itself is equally good. Everything is just easier on Flywheel, and the support you get from the early days of helping get your site moved to the fiddly little stuff you'll run into down the road, they got your back.

Show Links

CodePen Links

The post #247: Ads appeared first on CodePen Blog.

Posted on

#246: Pop Out Previews

Show Description

Klare, Stephen, and Marie talk about the latest feature CodePen launched: grid modal view. How did we build this? Why did we build this? And, more importantly, what do we call it?

Time Jumps

  • 01:25 New feature launch
  • 05:25 Sponsor: Deque Axe
  • 07:46 Details view update
  • 13:50 Built using embed view
  • 16:50 Modals are back baby!
  • 18:32 Sponsor: Jetpack
  • 20:46 How was this built?

Sponsors

Deque Axe

Axe powered by Deque, is an automated accessibility testing tool that helps you quickly identify common accessibility bugs without leaving your browser. You can take your accessibility testing even further with axe Pro which includes 6 intelligent guided question/answer walkthroughs that help you identify bugs that can't be found from automated tests.

Jetpack

Jetpack brings a wealth of features to your self-hosted WordPress site as one of the best no-brainer plugins for WordPress there is. One feature I just recently used for the first time was the video hosting and video player. I had a video clip that I just wanted to drag and drop into a blog post like I would an image, but it was a little too big. Fortunately I just uploaded it through WordPress.com, it was magically available in the Media dialog on my self-hosted site, and it worked perfectly.

Show Links

CodePen Links

The post #246: Pop Out Previews appeared first on CodePen Blog.

Posted on

#245: Stuff

Show Description

Chris and Marie are on to talk about a lot of stuff — literal stuff, like swag and our branded merch, and tough stuff, like making the decision to wind down meetups.

Time Jumps

  • 00:47 Spinning down meetups
  • 14:56 Sponsor: WooCommerce
  • 16:26 Vibes of different cities
  • 26:04 Swag
  • 42:18 Sponsor: Netlify
  • 44:31 Keeping things in WordPress

Sponsors

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.

Netlify, the powerful and awesome web host we all know and love, now is offering AWS Lambda functions built right in. You make a folder for all your functions, and they become relative paths you can hit to execute those functions. One reason you might wanna do that? Keeping your third-party API keys safe! Just another ingredient that make your fast static sites... not so static.

Show Links

CodePen Links

The post #245: Stuff appeared first on CodePen Blog.

Posted on

#244: Kristopher Van Sant

Show Description

CodePen community member Kristopher Van Sant is on to talk about her #PassThePen group and Collab Mode Extravaganzas on Twitch.

Time Jumps

  • 00:30 Guest intro
  • 10:03 Sponsor: WooCommerce
  • 11:34 Planning a new collab event
  • 13:01 Pass the Pen
  • 16:05 Kristopher's professional work
  • 18:59 shape-outside
  • 27:17 The escape room Pen
  • 39:27 What's next?

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

The post #244: Kristopher Van Sant appeared first on CodePen Blog.

Posted on

#243: Breaking Stuff

Show Description

Chris and Marie are on to talk about when stuff breaks at CodePen. We chat about how things break, how we handle communication while things are broken, and what we learn about our product (and ourselves) when something isn't working like it should.

Time Jumps

  • 00:56 Breaking hearts and getting support tickets
  • 07:08 Sponsor: Netlify
  • 09:06 Unable to save error
  • 14:52 Export failures
  • 19:11 Picks queue breaks?!
  • 21:03 Sponsor: WordPress
  • 23:11 Grass is greener on the app dev side
  • 30:38 Learn from our mistakes
  • 35:09 Posts causing issues
  • 47:02 Admin issues are less important

Sponsor: Netlify

Netlify, the powerful and awesome web host we all know and love, now is offering AWS Lambda functions built right in. You make a folder for all your functions, and they become relative paths you can hit to execute those functions. One reason you might wanna do that? Keeping your third-party API keys safe! Just another ingredient that make your fast static sites... not so static.

Sponsor: WordPress.com

WordPress powers a third of the internet. Surprising? Perhaps not once you get to know how easy and friendly, yet powerful and flexible WordPress.com is. If you can build a site on WordPress.com, you should. You're doing yourself a big favor by not taking on the incredible technical debt of hosting a site yourself. Focus on your business instead.

Show Links

The post #243: Breaking Stuff appeared first on CodePen Blog.