CodePen Radio

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!

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.

Marie & Chris talk about the brand new event tracking feature in Appcues. We're still pretty stoked we can even afford Appcues, since it's super pricey software for our company. The fact that they just released event tracking dashboards makes it feel much more affordable though, because this unlocks super valuable information for us instantly. It's like we get what would get by also buying super expensive analytics software, only it's rolled into what we already pay for.

High five to Netlify for the sponsorship. This is a tiny part of Netlify, but just think about how cool Netlify Drop is. For all sorts of people, but particularly for beginners and teachers, this little feature makes the web feel real. Imagine you take a quick class learning HTML and CSS, and make a "fake" site on your local computer. That might feel kinda neat, but then you drop it on Netlify Drop, and it becomes an honest-to-god real website on the internet that anyone in the world can see. That's big.

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.

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.

Dee, Chris, and Alex talk all about the technology of Elasticsearch. That's a link to the company itself right there, which is relevant as we use them directly to host our production Elasticsearch. We use it for (wait for it): search. But interestingly enough, that's not all. Elasticsearch is just a data store that can be useful for all sorts of other things. But before we get to that, we explain the technology and some of the problems we've had along the way that we're still on a journey to entirely smooth out.

In this episode, Klare and Chris talk about speaking to users directly about CodePen to get their feedback and as much other intel as we can in the spirit of making CodePen better and validating some ideas for future features.

We had a question come in over on ShopTalk Show from a user who wanted to know what the advantage of Netlify was over putting static files in an Amazon S3 bucket with CloudFront in front of it. That was an interesting framing of the question because at first glance, because maybe in looking at the final site, it's not that different. But how do you deploy it? How do you do cache-breaking? How does version control fit into the story? What handles your forms? How much does it cost? The Netlify answer to all those is very satisfying, and the roll-your-own answer to all those is: 😬.

A Go-person? A Golanger? A person who's good at Go, anyway. That's who we'd like to hire at CodePen, at the senior level.

In this podcast, we chat about how we're thinking about this new role, why Go has been so important to us so far, and what we hope to do with it. We thought it might be helpful for you, potential hires out there, to hear about how we're thinking about all this and get to know exactly the people you'd be working with.

Simplify your infrastructure and cut your cloud bills in half with Linode’s Linux virtual machines. Develop, deploy, and scale your modern applications faster and easier.

Whether you’re developing a personal project or managing larger workloads, you deserve simple, affordable, and accessible cloud computing solutions.

Get started on Linode today with a $100 in free credit for listeners of CodePen Radio. You can find all the details at linode.com/codepen.

Linode has data centers around the world with the same simple and consistent pricing regardless of location. Choose the data center nearest to you.

You also receive 24/7/365 human support with no tiers or hand-offs regardless of your plan size. You can choose shared and dedicated compute instances or you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. If it runs on Linux, it runs on Linode.

Visit linode.com/codepen and click on the “Create Free Account” button to get started.

(This is a video podcast. Feel free to watch on our YouTube channel instead of downloading if you experience any issues.)

The Editor View, perhaps the most important view on CodePen, is just one of many! In this video, Chris Coyier and Stephen Shaw look at all the different views, from the basic Full Page View to the very useful for testing Debug View, to the real-time magic of Collab Mode.

WordPress is already a great CMS, and when you add WooCommerce to do eCommerce, it just gets better as weaves its way into WordPress perfectly.

Alex and Chris talk about the glory that is having all of CodePen's code base in a single repository. This was a slow journey of a couple of years. The biggest step was what jokingly named "CodePen in Stereo" which involved consolidating everything Node-based on CodePen (mostly a bunch of lambdas) into a single repo, but still having a second repo for our Rails stuff. The final leap was consolidating those.

This opened up some cool doors for us, like having a sub-project that is our design system that any other sub-project can use. This meant getting into stuff like Lerna and Yarn Workspaces. We were also particularly excited about making sure that every single bit of code we run is right in our main repo meaning it won't be forgotten or neglected and can share resources and dependencies from elsewhere in the code base.

Just as meaningful, it consolidates the human action around the code. A monorepo means all the branches and pull requests are in one place. All the issues are in one place. When you git pull you get everything you need. When you spin up our scriped dev environment, it can be sure it has everything it needs.

Chris wrote a bit more about it here, including touching on why others might not like the idea of a monorepo, which we get deeper into in the podcast.

Simplify your infrastructure and cut your cloud bills in half with Linode’s Linux virtual machines. Develop, deploy, and scale your modern applications faster and easier.

Whether you’re developing a personal project or managing larger workloads, you deserve simple, affordable, and accessible cloud computing solutions.

Get started on Linode today with a $100 in free credit for listeners of CodePen Radio. You can find all the details at linode.com/codepen.

Linode has data centers around the world with the same simple and consistent pricing regardless of location. Choose the data center nearest to you.

You also receive 24/7/365 human support with no tiers or hand-offs regardless of your plan size. You can choose shared and dedicated compute instances or you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. If it runs on Linux, it runs on Linode.

Visit linode.com/codepen and click on the “Create Free Account” button to get started.

As Alex puts it, and as evidenced by the Falkor header on our Notion planning board, security at CodePen is a NeverEnding Story. Not in an ugkadh this project will never end sense, but in that there is always some patch to stay on top of, some newly-evolving best practice to follow, or some new exploit in the wild to read about and make sure we've covered whatever scenario happened to them. We just so happened to get through a bunch of security upgrades at CodePen recently so hopped on this podcast to chat about them. CSP! HSTS! Zero trust networks!

This is a perfect sponsor this week, as Jetpack has lots of powerful security features. For example, Jetpack can help automatically keep your plugins updated. A big part of security is keeping all your code up-to-date. Jetpack can also monitor your site's uptime, meaning that if you go down you'll be alerted and can get on top of it. It will also help against brute force login attacks. Just that stuff is amazing, but Jetpack also does backups and can scan your backups for security problems in the code itself. That's a fantastic security package, all together.

Stephen and I dig into just about every way that ES Modules are relevant on CodePen. They are extremely wonderful. The fact that browsers support native import/export for JavaScript, and the existence of amazing projects like Skypack which bring the npm ecosystem to ES Modules, opens up all sorts of doors on CodePen. We look at how to use ES Modules in the Pen Editor, Project Editor, and Vue Editor.

Jetpack is a plugin for WordPress, and we use it right here on this very site. It powers our realtime backups, helps secure the site, allows us to use Markdown, speeds up the site with a CDN, and provides a powerful site search experience.