#242: Collections

Show Description

Stephen and Marie are on the show to talk about recent updates and improvements to the Collections feature on CodePen.

Time Jumps

  • 00:36 New feature release
  • 05:24 What's new in Collections?
  • 12:29 Sponsor: Jetpack
  • 14:53 What tech was used to build this?
  • 18:33 The first state machine on CodePen

Sponsor: 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 #242: Collections appeared first on CodePen Blog.

#241: CTO

Show Description

Chris talks with Alex about his role as CTO at CodePen and what he sees as his job, how to learn from mistakes, and ways to level up as a developer.

Time Jumps

  • 03:48 Why the need for a CTO?
  • 11:58 Sponsor: Stackbit
  • 12:37 Building developer happiness
  • 15:19 Why don't we just build a feature and slap it out there?
  • 18:43 Learning from mistakes and issues
  • 30:26 How to level up as a developer

Sponsor: Stackbit

Static sites and the JAMStack are growing fast. Front-end devs already get it. It's fast, secure and as a developer, you get full control over the markup and the design.

Stackbit lets you build and deploy a full JAMstack site, with an SSG and headless CMS in just a few clicks. You can already choose from about a dozen prebuilt themes for Hugo, Jekyll and Gatsby and connect to Forestry, NetlifyCMS, DatoCMS or Contentful. It all happens right in your own repo.

On top of that, Stackbit just released custom themes.

Use the link stackbit.com/codepen, feel the magic, and let us know what you think.

Show Links

CodePen Links

The post #241: CTO appeared first on CodePen Blog.

#240: Customer Research

Show Description

Chris and Marie talk about how CodePen's style and methods of customer research have changed over the years, and how it's been helping influence the decisions made about features at CodePen.

Time Jumps

  • 02:28 Validating hunches and throwing them away
  • 07:11 Early customer research
  • 18:32 Sponsor: Instant Domains
  • 19:10 Deciding on when to go ahead with an idea
  • 25:35 Be careful of the mud

Sponsor: InstantDomains 18:32

InstantDomains.com is the fastest domain search tool ever built - you can search domain availability for over 800 domain extensions in milliseconds. With an incredibly friendly user interface it's easy to find available domain names.
An inbuilt domain name generator suggests alternative domains to the one you've searched for and you can filter results by 55 different niches to find relevant alternative domains.
It works in 32 different languages and displays the most relevant domain extensions based on your location.

Show Links

CodePen Links

The post #240: Customer Research appeared first on CodePen Blog.

#239: Our Current Stack

Rachel and Chris go on a tour through tech town to talk about CodePen's current stack and how it has changed and morphed over the years.

Time Jumps

  • 01:04 Let's go into Tech Town and talk about our stack
  • 05:41 Redux regret town.
  • 11:42 Now we're in super hooks town
  • 12:54 Sponsor: Mux
  • 14:42 New stack town.
  • 18:48 Codesplitting town.
  • 25:44 Caching town.
  • 38:57 Alex is a Javascript magpie. In town.

Sponsor: Mux

Mux is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time.
Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million.

Show Links

CodePen Links

The post #239: Our Current Stack appeared first on CodePen Blog.

#236: Private by Default

Show Description

We've got a small feature update to talk about that's a big deal to some folks: private by default. For some people & teams, having everything private by default on CodePen is critical to their work. Chris & Marie talk about how we added this option and the steps we took to validate and notify users about the feature.

Time Jumps

  • 00:14 Topic introduction
  • 02:24 Adding a setting requires some thought
  • 05:41 Sponsor: Mux
  • 07:34 Privacy as a feature
  • 10:49 Validating an idea
  • 16:12 How do we notify people about new features?

Sponsor: Mux

Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time.
Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million.

Show Links

CodePen Links

The post #236: Private by Default appeared first on CodePen Blog.

#235: Blocking

Show Description

Chris and Klare talk about the planning and process of building a blocking feature for CodePen.

Time Jumps

  • 00:27 Topic introduction
  • 01:03 Why did we build blocking in?
  • 08:31 Complicated UI decisions and planning
  • 15:46 Sponsor: Flywheel
  • 17:19 Planning out blocking
  • 26:11 Adding report as an option

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

#234: React Grids

Show Description

Cassidy is on to talk about powering the grids on CodePen with React to make them faster and future feature friendly!

Time Jumps

  • 02:05 Updating the Instagram page
  • 07:51 Moving to a new stack as a team
  • 10:18 Speed improvements
  • 18:12 Sponsor: WooCommerce
  • 19:35 Future feature in the works

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

#233: Export 2

Show Description

Stephen, Chris, and Marie are here to talk about the new export with build process! We get into how it was built, its limitations, and some improvements we made to our admin systems along the way.

Time Jumps

  • 00:26 Topic and guest intros
  • 07:53 How did we develop this feature?
  • 09:45 Why not a webpack bundle?
  • 14:28 Sponsor: Woocommerce
  • 15:49 Use cases for updated export tool
  • 18:39 Soft launching with user research
  • 20:21 Improving the feature flag system
  • 25:52 Project planning and marketing

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 #233: Export 2 appeared first on CodePen Blog.

#232: Side Projects

Show Description

Cassidy and Marie are on this week to talk about side projects and how they can help you personally as well as professionally. Let us know what kind of side projects you're working on!

Time Jumps

  • 01:44 Spreadsheets!
  • 11:26 Sponsor: Jetpack
  • 14:02 Spreading yourself too thin
  • 21:38 Making a course on a side project

Sponsor: 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 #232: Side Projects appeared first on CodePen Blog.

#231: Social

Show Description

Marie and Cassidy chat about how CodePen is using social media to communicate with our community.

Time Jumps

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.

Show Links

CodePen Links

The post #231: Social appeared first on CodePen Blog.

#230: Apollo

Show Description

What is Apollo and how does CodePen use it? Cassidy just returned from Apollo Day and is here to help educate us all about Apollo and how/why CodePen chose to use it.

Time Jumps

  • 00:46 What is Apollo Day?
  • 05:04 How does CodePen use Apollo?
  • 15:03 Sponsor: WooCommerce
  • 16:26 How do you not repeat yourself?
  • 25:41 Why is it called Apollo?

Sponsor: WooCommerce 15:03

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

229: Vulnerability

Show Description

Cassidy and Marie are talking vulnerability: at work, in software, and IN work ON software. What does vulnerability in work look like? And how putting yourself out there can be a great way to help you grow.

Time Jumps

  • 01:24 What does vulnerability in work look like?
  • 09:32 Sponsor: Jetpack
  • 12:03 Do you need a perfect Github streak to work?
  • 15:07 People make themselves vulnerable on CodePen
  • 20:04 Putting yourself out there helps you grow
  • 22:24 Fighting spam to create a safe place to be vulnerable
  • 28:52 Asking for tech help when you need it.

Sponsor

9:32 Jetpack

Show Links

CodePen Links

#228: 2019 Trends

Show Description

We're half way through 2019! Marie and Cassidy are here to talk about what's trending on CodePen so far and take a glimpse at the future for the rest of the year.

Time Jumps

Sponsor

18:41 .TECH domains

If you belong to the tech industry, it’s ideal for you to choose a .TECH domain name! Be it your tech startup, community, project, event or your personal brand, a .TECH domain will make a strong “tech” positioning for your tech website.

Get 90% OFF on .TECH Domains for a limited time!

Go to go.tech/codepen

Show Links

CodePen Links

The post #228: 2019 Trends appeared first on CodePen Blog.

#227: Tidying Up

Show Description

It's time to clean all the things! Cassidy and Marie talk about how CodePen is cleaning up code, internal docs, and external docs. How does your team do spring cleaning?

Sponsor: Mux

Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time.

Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million.

Sign up for a free account and get $20 credit at Mux.com.

Show Links

CodePen Links

The post #227: Tidying Up appeared first on CodePen Blog.

#226: New Export

Show Description

Stephen talks with Marie about how we updated and improved our exporting function on CodePen and talks about a possible future Pro feature that could come from the changes we made.

Time Jumps

  • 01:35 What is exporting on CodePen?
  • 03:21 How did you improve the speed of export?
  • 09:27 Sponsor: Dot Tech
  • 10:17 Changing the structure of the export
  • 14:18 Export for talks and presentations
  • 17:51 What's next?
  • 20:42 Did you get to remove any jQuery?

Sponsor: .TECH

If you belong to the tech industry, it’s ideal for you to choose a .TECH domain name! Be it your tech startup, community, project, event or your personal brand, a .TECH domain will make a strong “tech” positioning for your tech website.

Get 90% OFF on .TECH Domains for a limited time!

Go to go.tech/codepen

Show Links

CodePen Links

The post #226: New Export appeared first on CodePen Blog.

#225: Learning New Things

Show Description

Cassidy and Marie talk about their journey to keep learning new things, while also not stressing about trying to keep up with all the things in web development.

Time Jumps

  • 00:41 Topic introduction
  • 03:23 CodePen challenges
  • 05:23 Fork it!
  • 08:55 Learning at conferences
  • 13:22 Sponsor: Netlify
  • 15:18 Learning by reading vs watching
  • 19:09 The buffet of learning available now
  • 24:35 Life long learning in tech

Sponsor: Netlify 13:22

Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need. Get started for free.

Show Links

CodePen Links

The post #225: Learning New Things appeared first on CodePen Blog.

#224: Community Roundup

Show Description

Cassidy and Marie share some of the fun things CodePen community members are doing around the web including newsletters, Pass the Pen, JSConfEU, and Zdog.

Time Jumps

  • 00:54 Zdog
  • 05:05 Christina Gorton UI Design Course
  • 11:01 Sponsor: Discover.bot
  • 12:00 Taking time to mess around with things
  • 18:21 Andy Bell's newsletter
  • 22:20 JS Conf

Sponsor 11:01: Discover.bot

Discover.bot – a digital space for bot developers and enthusiasts of all skill levels to learn from one another, share stories, and move the bot conversation forward. Want to learn more about building bots? Get started with their Guide to Bot Building Frameworks.

Show Links

CodePen Links

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

#223: Streaming

Show Description

Cassidy and Marie are here to chat about livestreaming for developers. We get into how we've used live streaming to learn and share in the past and how CodePen is planning to use live streaming in the future on our new Twitch channel.

Time Jumps

  • 00:42 Topic introduction
  • 06:53 Pair programming
  • 13:26 Audience participation
  • 15:07 Sponsor: Discover.bot
  • 16:11 Why a company should consider live stream

Sponsor 15:07: Discover.bot

Discover.bot – a digital space for bot developers and enthusiasts of all skill levels to learn from one another, share stories, and move the bot conversation forward. Want to learn more about building bots? Get started with their Guide to Bot Building Frameworks.

Show Links

CodePen Links

The post #223: Streaming appeared first on CodePen Blog.