#315: Support Success

Featured Imgs 23

Over the last year, almost every metric that you want to go up has gone up at CodePen. More users creating and doing more things. You’d think that customer support would go up at the same level. And if it did, we would have thought that was very normal and dealt with it. But customer support doesn’t have to be this static thing that just is the way it is forever. If you find that people have the same questions over and over, you can fix your app or documentation such to answer that question better. If people report bugs, you can fix them. In fact, if you do a lot of those things, you can reduce customer support even as the number of customers you support grows. That’s exactly what we did at CodePen.

The result is that our customer support went from a job nearly impossible to get all done in a day, or the point where it is a part-time endeavor for whoever is on support that day. Even while our time-to-respond to tickets has also dramatically dropped. We’re just over one hour right now, and of course hope to drop below that line. The truth is though, most tickets are half that, it’s just some tickets that slip between the cracks and take days that hurt our average.

Timejumps

  • 00:23 Support levels in 2021
  • 02:52 What’s changed
  • 06:13 …while still getting new users!
  • 11:11 Sponsor: Netlify
  • 12:15 Average response time to tickets
  • 15:12 Measuring the right thing is difficult
  • 20:32 COVID isn’t the main thing
  • 28:26 Focused on support tickets

Sponsor: Headless Commerce Summit

Netlify is throwing a totally free online conference: Headless Commerce Summit.

E-commerce is growing at an unprecedented rate, making everything from your site performance to your ability to iterate faster a critical business advantage.

Take have a day and go! Even if you aren’t currently literally building a headless site, it would be good to have in your brain how other people are doing it and what they are getting out of it.

The post #315: Support Success appeared first on CodePen Blog.

#314: Team Updates

Featured Imgs 23

Marie and Chris discuss the big round of updates that went out around Team Management. There is a new “admin” role that it took us years of having a Teams product to understand that many teams could actually use. In the end, these updates to how Teams work make them way more useful. Teams can self-manage themselves in a way they never could before, and we’re hoping that makes people much happier with the product, less likely to leave because of something silly like access controls, and reduce support.

Timejumps

  • 00:46 Customer requests for Teams
  • 02:32 Team Management improvement
  • 08:56 New Admin role
  • 10:43 Sponsor: Jetpack
  • 13:05 Easier to transfer teams
  • 15:49 Context switching
  • 20:57 Shared ownership

Sponsor: Jetpack Backup + WooCommerce

Aside from Jetpack Backup just being really easy to use and the most trustworthy way to back up your entire WordPress site, it’s the only backup solution that works with eCommerce (WooCommerce) in the way you really need it to. Say you need to rollback to a version of your site from 4 days ago because something bad happened that hosed the site. Rolling back is a good idea, that’ll get you up and running right away, but when you revert a database back 4 days, that could wipe out all the eCommerce orders and product changes that have happened in that time: not good. Not with Jetpack Backup, it will restore to 4 days ago, but then replay all the orders and product changes, so your store is up to date with reality. Vital.

The post #314: Team Updates appeared first on CodePen Blog.

#313: Conflict

Featured Imgs 23

Being, ya know, human beings with thoughts and emotions trying to build something together, sometimes we clash. There are big clashes. Sometimes those end in drastic changes. We’ve done that. You might have noticed that we’re down to two co-founders actively at the company. There are tiny clashes too, like needing to tell someone when they’ve made a mistake. Medium clashes (this is not a real classification by the way, it’s just how it feels) are when multiple people feel pretty strongly about something and are not in alignment. It’s not much of a clash if one person is at a 3 and the other is at a 9 on the care-o-meter. When you’re both 10’s, it’s a clash of conflict. That happens to us sometimes (again, humans). The tricky part is that conflict resolution is never straightforward. If someone feels strongly that the direction should be A, another feels the direction should be B, sometimes the solution is C for compromise. But sometimes compromise weakens a vision, and resolution needs to be A or B so that the vision itself isn’t weakened.

Are we experts in this? Far from it. Have we thought about it a lot? Ages. Do we have a long way to go in getting better at this? Sure do. The fact that we all still have extremely different temperaments for conflict at all is part of what makes it hard.

Timestamps

  • 01:08 History of conflict at CodePen
  • 02:03 Founder conflict
  • 05:59 Meeting conflict
  • 11:51 Learning to deal with conflict
  • 18:20 Figuring out where the conflict actually is
  • 23:37 Sponsor: Netlify
  • 25:09 How we approached conflict now vs in the beginning
  • 34:47 Honesty in conflict

Sponsor: Netlify

It’s worth reading up on Netlify’s new concept of Distributed Persistent Rendering (DPR) and how that works with On-demand builders. It might just make your existing Jamstack builds way faster and better, or make possible the Jamstack for something you thought could never be.

The post #313: Conflict appeared first on CodePen Blog.

#312: What is CodePen?

Category Image 052

This isn’t actually a podcast actually talking about what CodePen is. Well, it kinda is. But actually it’s Stephen and Chris talking about and planning for what they would say if they only had five minutes (or so) to explain what CodePen is. So we need to hash out what the most important things are, what to lede with, and how to cover all the most vital things with clarity in such a short amount of time. We’ll have to get around to actually trying to shoot a video like this soon!

Timestamps

  • 00:49 How might we explain CodePen on YouTube
  • 06:48 Who’s the audience for our video?
  • 09:10 Sponsor: Jetpack Boost
  • 11:44 What do we need people to know what CodePen is?
  • 14:04 It’s an online editor for what?
  • 17:34 Social is a huge part of CodePen
  • 24:27 What’s our success metric?

Sponsor: Jetpack Boost

Jetpack Boost is a brand spankin’ new plugin from the Jetpack / Automattic gang. Jetpack has some very powerful performance features it offers, like giving you a global CDN for your images and core-WordPress-specific CSS and JavaScript. That particular feature is still a part of the Jetpack core plugin, but many performance-specific features are moving their way over to Jetpack Boost. Like Lazy Image loading (a huge performance win) is now in Jetpack Boost and you can turn it on with the flip of a switch. The most amazing, and brand new, feature of Jetpack Boost is that it does Critical CSS handling for you, which is also a big performance win and very difficult to do by hand.

The post #312: What is CodePen? appeared first on CodePen Blog.

#310: Front-End Monorepo

Featured Imgs 23

We talked about our transition to a monorepo back in episode 305. This move has all sorts of advantages for us, like the simplicity of having a single repo to pull and be up to date with and linting/formatting code in a consistent way across the entire code base of CodePen.

This time we’ll get into more of the repercussions of the monorepo from a front-end perspective. For example, since a bit part of the point of the monorepo is sharing code across areas of the site, it made sense to yoink out things that are intentionally sharable into top-level folders. For example, we pulled out our component library that way, then had to figure out how best to consume those components across different areas (e.g. how Next.js consumes those components is different than how our Rails app does. We also pulled out things like common utilities, icons, and shared styles, each of them having their own little journey on getting to work just how we wanted them to.

Timestamps

  • 00:30 More Monorepo
  • 01:46 Benefits of monorepo
  • 04:48 Choices we made about the CodePen code
  • 07:06 Problems with combining packages
  • 09:45 What about Next?
  • 15:48 Sponsor: Jetpack
  • 18:04 CP Library of components
  • 23:00 Sharing global styles
  • 27:52 Icon library

Sponsor: Jetpack

Jetpack is celebrating it’s 10th year! Jetpack does a lot, from major search improvements, full site backup, social media integration, speed boosts, and security measures. Take a look at some of those statistics on their landing page. They are really helping WordPress site owners make their sites better and the web writ large.

The post #310: Front-End Monorepo appeared first on CodePen Blog.

#290: Packages

Featured Imgs 23

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.

#272: Video

Category Image 052

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.

#271: Sending Email

Featured Imgs 23

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.

#266: Rubber Ducking

Featured Imgs 23

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.

#265: Flutter

Featured Imgs 23

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.

The CSS Podcast

Featured Imgs 23

From Adam and Una at Google, a podcast just about CSS. I believe I'm contractually obliged to link to that! Just one episode out so far, a shorty about the box model.

Last time I wrote up podcasts I like was 8 years ago most of them are dead now, except the biggies like This American Life and the like. ShopTalk Show and CodePen Radio are still going strong! These days I use Pocket Casts as a player and I like industry shows like:

Here's a screenshot of all the ones I subscribe to, but I find I only have time to listen to maybe 10% of that if I'm lucky.

I do a lot of listening to things friends say are good, whether I subscribe or not.

Direct Link to ArticlePermalink

The post The CSS Podcast appeared first on CSS-Tricks.

#257: Challenges 2020

Featured Imgs 23

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

254: Design Tools

Featured Imgs 23

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.

#251: Marketing

Featured Imgs 23

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.