CodePen Radio https://blog.codepen.io/series/codepen-radio/ The CodePen team talk about the ins and outs of running a web software business. Tue, 31 Mar 2026 21:55:57 +0000 en-US © 2025 CodePen The CodePen team talk about the ins and outs of running a web software business. CodePen Blog episodic The CodePen team talk about the ins and outs of running a web software business. CodePen Blog chriscoyier@gmail.com false https://blog.codepen.io/wp-content/uploads/2025/08/podcast-itunes-large.png CodePen Radio https://blog.codepen.io/series/codepen-radio/ chriscoyier@gmail.com The CodePen team talk about the ins and outs of running a web software business. No yes 93579b66-e591-5d9d-ab53-cd6da2f8c720 67416426 420: What are Blocks? https://blog.codepen.io/2026/03/10/420-what-are-blocks/ Wed, 11 Mar 2026 01:28:27 +0000 61bf651c-8869-5d13-a19d-e749e9430e70 With CodePen 2.0, we've got a new word we're using: Blocks. A way to think about Blocks is anything that processes code. They are added as steps to the CodePen Compiler as needed. For example, TypeScript is a block, because it processes files in the TypeScript syntax into JavaScript files. But something like Lodash is not a block. Lodash is a package from npm (which we also handle, but that's a topic for another podcast). Lodash doesn't process code, it's just a library that is linked up or bundled.

Time Jumps

]]> With CodePen 2.0, we've got a new word we're using: Blocks. A way to think about Blocks is anything that processes code. They are added as steps to the CodePen Compiler as needed. For example, TypeScript is a block, because it processes files in the TypeScript syntax into JavaScript files. But something like Lodash is not a block. Lodash is a package from npm (which we also handle, but that's a topic for another podcast). Lodash doesn't process code, it's just a library that is linked up or bundled.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2026/03/np_blocks_3553587_000000.svg 420: What are Blocks? false no 0:00 No no 419: Why 2.0? https://blog.codepen.io/2026/03/05/419-why-2-0/ Thu, 05 Mar 2026 19:04:37 +0000 cfe9f9e6-a52d-5e09-882e-caf3a31a4c46 CodePen 2.0 was the most ambitious project that we've ever taken on in our lives. Why would we do such a thing? Chris and Alex explain the thinking behind it. We've been around a long time, know what our customers want, and are developers ourselves, so we know how this industry moves. We thought we could serve both in a powerful and flexible way, taking us into the future.

Time Jumps

]]> CodePen 2.0 was the most ambitious project that we've ever taken on in our lives. Why would we do such a thing? Chris and Alex explain the thinking behind it. We've been around a long time, know what our customers want, and are developers ourselves, so we know how this industry moves. We thought we could serve both in a powerful and flexible way, taking us into the future.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2026/02/np_questioning_2696253_000000.svg 419: Why 2.0? false no 0:00 No no 418: CodeMirror 6 https://blog.codepen.io/2026/02/21/418-codemirror-6/ Sat, 21 Feb 2026 20:44:37 +0000 7a8b7942-3a00-5e15-a9be-b1e523bd08dd Chris Coyier and Stephen Shaw discuss the transition from CodeMirror 5 to CodeMirror 6, highlighting the significant improvements in accessibility, performance, and user experience. They delve into architectural changes, integration with modern JavaScript frameworks such as Next.js, and the new theming options available in the editor.

Time Jumps

]]> Chris Coyier and Stephen Shaw discuss the transition from CodeMirror 5 to CodeMirror 6, highlighting the significant improvements in accessibility, performance, and user experience. They delve into architectural changes, integration with modern JavaScript frameworks such as Next.js, and the new theming options available in the editor.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2026/02/np_mirror_563676_000000.svg 418: CodeMirror 6 false no 0:00 No no 417: Iframe Allow Attribute Saga https://blog.codepen.io/2025/11/18/417-iframe-allow-attribute-saga/ Tue, 18 Nov 2025 23:11:32 +0000 4bfd5df6-976d-577e-9ea5-7574a9c1e94b There was a day not long ago where a Google Chrome browser update left any page with a CodePen Embed on it throwing a whole big pile of red JavaScript errors in the console. Not ideal, obviously.

The change was related to how the browser handles allow attributes on iframes (i.e. <iframe allow="...">). CodePen was calculating the appropriate values inside an iframe for a nested iframe. That must have been a security issue of sorts, as now those values need to be present on the outside iframe as well.

We documented all this in a blog post so hopefully we could get some attention from Chrome on this, and for other browser makers as well since it affects all of us.

And I posted it on the ol' social media:

Huge thanks to Bramus Van Damme who saw this, triaged it at Chrome, and had a resolution within a day:

I think the patch is a great change so hats off to everyone involved for getting it done so quickly. It's already in Canary and don't really know when it'll get the stable but that sure will be good. It follows how Safari is doing things where values that aren't understood are just ignored (which we think is fine and inline with how HTML normally works).

Fortunately we were able to mitigate the problem a little until then. For most Embedded Pens, a <script> is loaded on the page embedding it, and we dynamically create the <iframe> for you. This is just nice as it makes making an accessible fallback easier and gives you access to API-ish features for the embeds. We were able to augment that script to do a little browser user-agent sniffing and apply the correct set of allow attributes on the iframe, as to avoid those JavaScript errors we were seeing.

But there's the rub: we'd rather not do any user-agent sniffing at all.

If we could just put all the possible allow attributes we want on there, and not be terribly concerned if any particular browser didn't support any particular value, that would be ideal. We just can't have the scary console errors, out of concern for our users who may not understand them.

Where we're at in the saga now is that:

  1. We're waiting for the change to Chrome to get to stable.
  2. We're hoping Safari stays the way it is.
  3. OH HI FIREFOX.

On that last point, if we put all the allow attributes we would want to on an <iframe> in Firefox, we also get console-bombed. This time not with red-errors but with yellow-warnings.

So yes, hi Firefox, if you could also not display these warnings (unless a reporting URL is set up) that would be great. We'd be one less website out there relying on user-agent sniffing.

]]> There was a day not long ago where a Google Chrome browser update left any page with a CodePen Embed on it throwing a whole big pile of red JavaScript errors in the console. Not ideal, obviously.

The change was related to how the browser handles allow attributes on iframes (i.e. <iframe allow="...">). CodePen was calculating the appropriate values inside an iframe for a nested iframe. That must have been a security issue of sorts, as now those values need to be present on the outside iframe as well.

We documented all this in a blog post so hopefully we could get some attention from Chrome on this, and for other browser makers as well since it affects all of us.

And I posted it on the ol' social media:

Huge thanks to Bramus Van Damme who saw this, triaged it at Chrome, and had a resolution within a day:

I think the patch is a great change so hats off to everyone involved for getting it done so quickly. It's already in Canary and don't really know when it'll get the stable but that sure will be good. It follows how Safari is doing things where values that aren't understood are just ignored (which we think is fine and inline with how HTML normally works).

Fortunately we were able to mitigate the problem a little until then. For most Embedded Pens, a <script> is loaded on the page embedding it, and we dynamically create the <iframe> for you. This is just nice as it makes making an accessible fallback easier and gives you access to API-ish features for the embeds. We were able to augment that script to do a little browser user-agent sniffing and apply the correct set of allow attributes on the iframe, as to avoid those JavaScript errors we were seeing.

But there's the rub: we'd rather not do any user-agent sniffing at all.

If we could just put all the possible allow attributes we want on there, and not be terribly concerned if any particular browser didn't support any particular value, that would be ideal. We just can't have the scary console errors, out of concern for our users who may not understand them.

Where we're at in the saga now is that:

  1. We're waiting for the change to Chrome to get to stable.
  2. We're hoping Safari stays the way it is.
  3. OH HI FIREFOX.

On that last point, if we put all the allow attributes we would want to on an <iframe> in Firefox, we also get console-bombed. This time not with red-errors but with yellow-warnings.

So yes, hi Firefox, if you could also not display these warnings (unless a reporting URL is set up) that would be great. We'd be one less website out there relying on user-agent sniffing.

]]> https://blog.codepen.io/wp-content/uploads/2025/11/np_iframe_7179060_000000.svg 417: Iframe Allow Attribute Saga false no 0:00 No no 416: Upgrading Next.js & React https://blog.codepen.io/2025/11/05/416-upgrading-next-js-react/ Wed, 05 Nov 2025 23:15:47 +0000 7c71b69e-cc26-5c53-a6cb-190c9c993541 Shaw and Chris are on the show to talk about the thinking and challenges behind upgrading these rather important bits of technology in our stack. We definitely think of React version upgrades and Next.js version upgrades as different things. Sometimes they are prerequisites. The Next.js ones are a bit more important as 1) the docs for the most recent version tend to be the best and 2) it involves server side code which is important for security reasons. Never has any of it been trivially easy.

Time Jumps

]]> Shaw and Chris are on the show to talk about the thinking and challenges behind upgrading these rather important bits of technology in our stack. We definitely think of React version upgrades and Next.js version upgrades as different things. Sometimes they are prerequisites. The Next.js ones are a bit more important as 1) the docs for the most recent version tend to be the best and 2) it involves server side code which is important for security reasons. Never has any of it been trivially easy.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2025/11/np_upgrade_2225566_000000.svg 416: Upgrading Next.js & React false no 0:00 No no 415: Babel Choices https://blog.codepen.io/2025/10/28/415-babel-choices/ Tue, 28 Oct 2025 18:07:00 +0000 https://blog.codepen.io/?p=20659 Robert and Chris hop on the show to talk about choices we've had to make around Babel.

Probably the best way to use Babel is to just use the @babel/preset-env plugin so you get modern JavaScript features processed down to a level of browser support you find comfortable. But Babel supports all sorts of plugins, and in our Classic Editor, all you do is select "Babel" from a dropdown menu and that's it. You don't see the config nor can you change it, and that config we use does not use preset env.

So we're in an interesting position with the 2.0 editor. We want to give new Pens, which do support editable configs, a good modern config, and we want all converted Classic Pens a config that doesn't break anything. There is some ultra-old cruft in that old config, and supporting all of it felt kinda silly. We could support a "legacy" Babel block that does support all of it, but so far, we've decided to just provide a config that handles the vast majority of old stuff, while using the same Babel block that everyone will get on day one.

We're still in the midst of working on our conversion code an verifying the output of loads of Classic Pens, so we'll see how it goes!

Time Jumps

]]> Robert and Chris hop on the show to talk about choices we've had to make around Babel.

Probably the best way to use Babel is to just use the @babel/preset-env plugin so you get modern JavaScript features processed down to a level of browser support you find comfortable. But Babel supports all sorts of plugins, and in our Classic Editor, all you do is select "Babel" from a dropdown menu and that's it. You don't see the config nor can you change it, and that config we use does not use preset env.

So we're in an interesting position with the 2.0 editor. We want to give new Pens, which do support editable configs, a good modern config, and we want all converted Classic Pens a config that doesn't break anything. There is some ultra-old cruft in that old config, and supporting all of it felt kinda silly. We could support a "legacy" Babel block that does support all of it, but so far, we've decided to just provide a config that handles the vast majority of old stuff, while using the same Babel block that everyone will get on day one.

We're still in the midst of working on our conversion code an verifying the output of loads of Classic Pens, so we'll see how it goes!

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2025/10/np_babylon_3561171_000000.svg 415: Babel Choices false no 0:00 No no 414: Apollo (and the Almighty Cache) https://blog.codepen.io/2025/10/23/414-apollo-and-the-almighty-cache/ Thu, 23 Oct 2025 16:15:59 +0000 https://blog.codepen.io/?p=20649 Rachel and Chris jump on the show to talk about a bit of client-side technology we use: Apollo. We use it because we have a GraphQL API and Apollo helps us write queries and mutations that go through that API. It slots in quite nicely with our React front-end, providing hooks we use to do the data work we need to do when we need to do it. Plus we get typed data all the way through.

Chris gets to learn that the Apollo Cache isn't some bonus feature that just helps makes things faster, but an inevitable and deeply integrated feature into how this whole thing works.

Time Jumps

]]> Rachel and Chris jump on the show to talk about a bit of client-side technology we use: Apollo. We use it because we have a GraphQL API and Apollo helps us write queries and mutations that go through that API. It slots in quite nicely with our React front-end, providing hooks we use to do the data work we need to do when we need to do it. Plus we get typed data all the way through.

Chris gets to learn that the Apollo Cache isn't some bonus feature that just helps makes things faster, but an inevitable and deeply integrated feature into how this whole thing works.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2025/10/np_layer-server_8005123_000000.svg 414: Apollo (and the Almighty Cache) false no 0:00 No no 413: Still indie after all these years https://blog.codepen.io/2025/10/14/413-still-indie-after-all-these-years/ Tue, 14 Oct 2025 13:52:25 +0000 https://blog.codepen.io/?p=20586 We're over 13 years old as a company now. We decide that we're not a startup anymore (we're a "small business" with big dreams) but we are still indie. We've seen trends come and go. We just do what we do, knowing the tradeoffs, and plan to keep getting better as long as we can.

Links

Time Jumps

]]> We're over 13 years old as a company now. We decide that we're not a startup anymore (we're a "small business" with big dreams) but we are still indie. We've seen trends come and go. We just do what we do, knowing the tradeoffs, and plan to keep getting better as long as we can.

Links

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2025/10/np_rock-on_1002381_000000.svg 413: Still indie after all these years false no 0:00 No no 412: 2.0 Embedded Pens https://blog.codepen.io/2025/10/09/412-2-0-embedded-pens/ Thu, 09 Oct 2025 15:45:43 +0000 https://blog.codepen.io/?p=20584 Or just "Embeds" as we more frequently refer to them as. Stephen and Chris talk about the fairly meaty project which was re-writing our Embeds for a CodePen 2.0 world. No longer can we assume Pens are just one HTML, CSS, and JavaScript "file", so they needed a bit of a redesign, but doing as little as possible so that existing Embed Themes still work. This was plenty tricky as it was a re-write from Rails to Next.js, with everything needing to be Server-Side Rendered and as lightweight as possible (thank urql!).

Time Jumps

]]> Or just "Embeds" as we more frequently refer to them as. Stephen and Chris talk about the fairly meaty project which was re-writing our Embeds for a CodePen 2.0 world. No longer can we assume Pens are just one HTML, CSS, and JavaScript "file", so they needed a bit of a redesign, but doing as little as possible so that existing Embed Themes still work. This was plenty tricky as it was a re-write from Rails to Next.js, with everything needing to be Server-Side Rendered and as lightweight as possible (thank urql!).

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2022/07/icon-code.svg 412: 2.0 Embedded Pens false no 0:00 No no 411: The Power of Tree-Sitter https://blog.codepen.io/2025/10/01/411-the-power-of-tree-sitter/ Wed, 01 Oct 2025 13:24:46 +0000 https://blog.codepen.io/?p=20546 Alex and Chris hop on the show to talk about a bit of technology that Alex calls "The 2nd best technological choice he's ever made." That technology is called Tree-sitter. It's a code parsing tool for building ASTs (Abstract Syntax Trees) out of code. GitHub uses it to power search and "go to" functionality. The creators now work on Zen, where a code parser is paramount. We use it to understand an entire Pen very quickly so we can understand how it all links together (among other things) and make a plan for how to process the Pen (a "build plan"). It's fast, accurate, forgiving, and extensible. Just a heck of a learning curve.

Jump Links

]]> Alex and Chris hop on the show to talk about a bit of technology that Alex calls "The 2nd best technological choice he's ever made." That technology is called Tree-sitter. It's a code parsing tool for building ASTs (Abstract Syntax Trees) out of code. GitHub uses it to power search and "go to" functionality. The creators now work on Zen, where a code parser is paramount. We use it to understand an entire Pen very quickly so we can understand how it all links together (among other things) and make a plan for how to process the Pen (a "build plan"). It's fast, accurate, forgiving, and extensible. Just a heck of a learning curve.

Jump Links

]]> https://blog.codepen.io/wp-content/uploads/2025/09/np_tree_6843532_000000.svg 411: The Power of Tree-Sitter false no 0:00 No no 410: Trying to help humans in an industry that is becoming increasingly non-human https://blog.codepen.io/2025/09/23/410-trying-to-help-humans-in-an-industry-that-is-becoming-increasingly-non-human/ Tue, 23 Sep 2025 17:33:00 +0000 https://blog.codepen.io/?p=20525 Chris & Marie jump on the podcast to talk about just how drastically customer support has changed over the last few years. We still exclusively do customer support over email. Incoming email from real customers who need a hand with something where they type out that email in plain languages themselves are few and far between. Instead we get an onslaught of noise from users that don't exist about Pens and situations that don't exist. The influence of agentic AI is massive here, some of it with nefarious intent and some not. All of it needs work to mitigate.

Time Jumps

]]> Chris & Marie jump on the podcast to talk about just how drastically customer support has changed over the last few years. We still exclusively do customer support over email. Incoming email from real customers who need a hand with something where they type out that email in plain languages themselves are few and far between. Instead we get an onslaught of noise from users that don't exist about Pens and situations that don't exist. The influence of agentic AI is massive here, some of it with nefarious intent and some not. All of it needs work to mitigate.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2025/09/np_bot_2319833_000000.svg 410: Trying to help humans in an industry that is becoming increasingly non-human false no 0:00 No no 409: Our Own Script Injection https://blog.codepen.io/2025/09/16/409-our-own-script-injection/ Tue, 16 Sep 2025 15:41:29 +0000 https://blog.codepen.io/?p=20513 Chris and Stephen talk about how we use a Cloudflare Worker & HTMLRewriter to inject a very special <script> tag into the previews of the Pens you work on. This script has a lot of important jobs so it's presence is crucial, and getting it in there reliably can is a bit of a challenge.

Time Jumps

]]> Chris and Stephen talk about how we use a Cloudflare Worker & HTMLRewriter to inject a very special <script> tag into the previews of the Pens you work on. This script has a lot of important jobs so it's presence is crucial, and getting it in there reliably can is a bit of a challenge.

Time Jumps

]]> tag into the previews of the Pens you work on. This script has a lot of important jobs so it's presence is crucial, and getting it in there reliably can is a bit of a challenge. Time Jumps]]> https://blog.codepen.io/wp-content/uploads/2025/09/np_javascript_4505859_000000.svg 409: Our Own Script Injection false no 0:00 tag into the previews of the Pens you work on. This script has a lot of important jobs so it's presence is crucial, and getting it in there reliably can is a bit of a challenge. Time Jumps]]> No no 408: Proxied Third-Party JavaScript https://blog.codepen.io/2025/09/09/408-proxied-third-party-javascript/ Tue, 09 Sep 2025 15:55:27 +0000 https://blog.codepen.io/?p=20500 Chris and Stephen hop on the podcast to discuss the concept of a proxy. Possibly the most "gray hat" thing that CodePen does. We use a third-party analytics tool called Fullres. We could just put a link to the <script> necessary to make that work directly to fullres.com, but being an analytics tool, it's blocked by a ton of ad blocking browsers and browser extensions. We made the conscious choice to have that <script> point to a codepen.io URL instead (a proxy) so that we get (much) more accurate usage data on the app. Since there is nothing tracked that is an anonymity concern, and we do nothing with the data other than help inform ourselves on how to make a better app, we wear this gray hat.

If you'd still like to block these requests, the path would be https://codepen.io/stats/fr/*

Time Jumps

]]> Chris and Stephen hop on the podcast to discuss the concept of a proxy. Possibly the most "gray hat" thing that CodePen does. We use a third-party analytics tool called Fullres. We could just put a link to the <script> necessary to make that work directly to fullres.com, but being an analytics tool, it's blocked by a ton of ad blocking browsers and browser extensions. We made the conscious choice to have that <script> point to a codepen.io URL instead (a proxy) so that we get (much) more accurate usage data on the app. Since there is nothing tracked that is an anonymity concern, and we do nothing with the data other than help inform ourselves on how to make a better app, we wear this gray hat.

If you'd still like to block these requests, the path would be https://codepen.io/stats/fr/*

Time Jumps

]]> necessary to make that work directly to fullres.com, but being an analytics tool, it's blocked by a ton of ad blocking browsers and browser extensions. We made the conscious choice to have that <script> point to a codepen.io URL instead (a proxy) so that we get (much) more accurate usage data on the app. Since there is nothing tracked that is an anonymity concern, and we do nothing with the data other than help inform ourselves on how to make a better app, we wear this gray hat. If you'd still like to block these requests, the path would be https://codepen.io/stats/fr/* Time Jumps]]> https://blog.codepen.io/wp-content/uploads/2025/09/np_proxy_3548542_000000.svg 408: Proxied Third-Party JavaScript false no 0:00 necessary to make that work directly to fullres.com, but being an analytics tool, it's blocked by a ton of ad blocking browsers and browser extensions. We made the conscious choice to have that <script> point to a codepen.io URL instead (a proxy) so that we get (much) more accurate usage data on the app. Since there is nothing tracked that is an anonymity concern, and we do nothing with the data other than help inform ourselves on how to make a better app, we wear this gray hat. If you'd still like to block these requests, the path would be https://codepen.io/stats/fr/* Time Jumps]]> No no 407: Our Own CDN https://blog.codepen.io/2025/09/02/407-our-own-cdn/ Tue, 02 Sep 2025 14:32:51 +0000 https://blog.codepen.io/?p=20472 Robert and Chris jump on to talk about our little CDN project. Maybe that's not the right term, but we struggled with naming it. Truth be told, it's the /public/ folder in our monorepo, where the purpose is getting files to the world wide internet at URLs that anyone can access. Our favicon is a good example, where many of our sites need access to that, but we only want it once in our repo (but we have actually lots of use-cases.)

There are several complications along the way. One is that we need to fingerprint these files so we can cache-bust them when needed. We also need to be able to import the URLs in other parts of the repo, so we need manifest files that contain those URLs in multiple formats. Plus many of the files have their own build process, they aren't just entirely static files. In the end, building our own thing was probably the right move.

The files go to Cloudflare R2, which, I suppose, is the CDN part.

Time Jumps

]]> Robert and Chris jump on to talk about our little CDN project. Maybe that's not the right term, but we struggled with naming it. Truth be told, it's the /public/ folder in our monorepo, where the purpose is getting files to the world wide internet at URLs that anyone can access. Our favicon is a good example, where many of our sites need access to that, but we only want it once in our repo (but we have actually lots of use-cases.)

There are several complications along the way. One is that we need to fingerprint these files so we can cache-bust them when needed. We also need to be able to import the URLs in other parts of the repo, so we need manifest files that contain those URLs in multiple formats. Plus many of the files have their own build process, they aren't just entirely static files. In the end, building our own thing was probably the right move.

The files go to Cloudflare R2, which, I suppose, is the CDN part.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2025/08/np_network_5161068_000000.svg 407: Our Own CDN false no 0:00 No no 406: Hot Trends of 2025 https://blog.codepen.io/2025/08/28/406-hot-trends-of-2025/ Thu, 28 Aug 2025 14:01:41 +0000 https://blog.codepen.io/?p=20445 Marie and Chris jump on to discuss some of the trends of what people are building on CodePen here, approximately halfway through 2025.

New CSS!

Hot Styles

Hot Pens

Time Jumps

]]> Marie and Chris jump on to discuss some of the trends of what people are building on CodePen here, approximately halfway through 2025.

New CSS!

Hot Styles

Hot Pens

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2025/08/np_hot_5788787_000000.svg 406: Hot Trends of 2025 false no 0:00 No no 405: Elasticsearch → Postgres Search https://blog.codepen.io/2025/08/19/405-elasticsearch-%e2%86%92-postgres-search/ Tue, 19 Aug 2025 19:15:02 +0000 https://blog.codepen.io/?p=20437 Alex & Chris get into a fairly recent technological change at CodePen where we ditched our Elasticsearch implementation for just using our own Postgres database for search. Sometimes choices like this are more about team expertise, dev environment practicalities, and complexity tradeoffs. We found this change to be much better for us, which matters! For the most part search is better and faster. Postgres is not nearly as fancy and capable as Elasticsearch, but we werent taking advantage of what Elasticsearch had to offer anyway.

For the power users out there: it's true that we've lost the ability to do in-code search for now. But it's temporary and will be coming back in time.

Time Jumps

]]> Alex & Chris get into a fairly recent technological change at CodePen where we ditched our Elasticsearch implementation for just using our own Postgres database for search. Sometimes choices like this are more about team expertise, dev environment practicalities, and complexity tradeoffs. We found this change to be much better for us, which matters! For the most part search is better and faster. Postgres is not nearly as fancy and capable as Elasticsearch, but we werent taking advantage of what Elasticsearch had to offer anyway.

For the power users out there: it's true that we've lost the ability to do in-code search for now. But it's temporary and will be coming back in time.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2025/08/np_search_1157129_000000.svg 405: Elasticsearch → Postgres Search false no 0:00 No no 404: Preventing Infinite Loops from Crashing the Browser https://blog.codepen.io/2025/08/06/404-preventing-infinite-loops-from-crashing-the-browser/ Wed, 06 Aug 2025 18:50:41 +0000 https://blog.codepen.io/?p=20390 Stephen and Chris hop on to talk about how we're saving everyone from crashed browser tabs in CodePen's 2.0 editor. One simple:

Executing JavaScript can cause a browser tab to entirely lock up, preventing you from doing anything, like potentially saving your work. It can even crash other same-domain tabs. But not on our watch! CodePen is now using a "heartbeat" technique to report up from the preview iframe to the parent page, and if we don't hear the heartbeat, we can rip out the iframe and stop the crash. But it was very tricky to get working and not too jumpy.

Fortunately, we got it all working, because our previous technique of instrumenting your JavaScript wasn't going to scale well to the 2.0 editor.

Time Jumps

]]> Stephen and Chris hop on to talk about how we're saving everyone from crashed browser tabs in CodePen's 2.0 editor. One simple:

Executing JavaScript can cause a browser tab to entirely lock up, preventing you from doing anything, like potentially saving your work. It can even crash other same-domain tabs. But not on our watch! CodePen is now using a "heartbeat" technique to report up from the preview iframe to the parent page, and if we don't hear the heartbeat, we can rip out the iframe and stop the crash. But it was very tricky to get working and not too jumpy.

Fortunately, we got it all working, because our previous technique of instrumenting your JavaScript wasn't going to scale well to the 2.0 editor.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2025/08/np_infinite_4732902_000000.svg 404: Preventing Infinite Loops from Crashing the Browser false no 0:00 No no 403: Privacy & Permissions https://blog.codepen.io/2025/07/27/403-privacy-permissions/ Sun, 27 Jul 2025 15:27:51 +0000 https://blog.codepen.io/?p=20369 Chris & Rachel hop on the show to talk about the expanded privacy (access) model in the 2.0 editor (in Private Beta as we speak). Private Pens have always been a big deal, but as private as they are, if someone has the URL, they have the URL, and it doesn't always feel very private. There are two new levels of privacy in the 2.0 editor: password protected and collaborators only. Passwords are an obvious choice we probably should have done long ago. With it, both the Pen in the editor itself, as well as the potentially deployed site are password protected.

Our new permissions model is intertwined in this. Now you can invite others directly to be a fellow Editor or simply a Viewer to an otherwise private Pen. If you set the privacy level to "collaborators only", that's the most private a Pen can possibly be.

Time Jumps

]]> Chris & Rachel hop on the show to talk about the expanded privacy (access) model in the 2.0 editor (in Private Beta as we speak). Private Pens have always been a big deal, but as private as they are, if someone has the URL, they have the URL, and it doesn't always feel very private. There are two new levels of privacy in the 2.0 editor: password protected and collaborators only. Passwords are an obvious choice we probably should have done long ago. With it, both the Pen in the editor itself, as well as the potentially deployed site are password protected.

Our new permissions model is intertwined in this. Now you can invite others directly to be a fellow Editor or simply a Viewer to an otherwise private Pen. If you set the privacy level to "collaborators only", that's the most private a Pen can possibly be.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2025/07/icon-password.svg 403: Privacy & Permissions false no 0:00 No no 402: Bookmarks https://blog.codepen.io/2025/07/16/402-bookmarks/ Wed, 16 Jul 2025 19:42:27 +0000 https://blog.codepen.io/?p=20349 Pins are dead!

Long live bookmarks!

Pins was never a good name for the feature we have on CodePen where you can mark a Pen or Collection to more quickly jump back to it from anywhere on the site. The word is too similar to "Pen" that it's just awkward, not to mention it's not exactly and obvious metaphor. A bookmark is a much more clear term and icon, so we decided to switch to it.

Switching the UI is kind of the easy part. It's kind of a cultural thing at CodePen, but when we make a change like this, we change it 100% through the entire code base, down to the database itself. In order to do that, we had to chunk it into stages so that those stages can roll out independently, but in order, to make it seamless.

Now that it's done, we were able to extend the functionality of Bookmarks a bit, such that bookmarking a template is extra useful. One place to see that is on the new Create page.

As an extra bit of history, the idea for Bookmarks came from Katie Kovalcin when we worked with Sparkbox for a redesign ages ago, then Klare Frake took the idea home.

Time Jumps

]]> Pins are dead!

Long live bookmarks!

Pins was never a good name for the feature we have on CodePen where you can mark a Pen or Collection to more quickly jump back to it from anywhere on the site. The word is too similar to "Pen" that it's just awkward, not to mention it's not exactly and obvious metaphor. A bookmark is a much more clear term and icon, so we decided to switch to it.

Switching the UI is kind of the easy part. It's kind of a cultural thing at CodePen, but when we make a change like this, we change it 100% through the entire code base, down to the database itself. In order to do that, we had to chunk it into stages so that those stages can roll out independently, but in order, to make it seamless.

Now that it's done, we were able to extend the functionality of Bookmarks a bit, such that bookmarking a template is extra useful. One place to see that is on the new Create page.

As an extra bit of history, the idea for Bookmarks came from Katie Kovalcin when we worked with Sparkbox for a redesign ages ago, then Klare Frake took the idea home.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2025/07/icon-bookmark.svg 402: Bookmarks false no 0:00 No no 401: Outgoing Email https://blog.codepen.io/2025/07/10/401-outgoing-email/ Thu, 10 Jul 2025 11:04:57 +0000 https://blog.codepen.io/?p=20270 Hi!

We're back!

Weird right? It's been over 2 years. 

We took a break after episode 400, not because we ran out of things to talk about, but because we were so focused on our CodePen 2.0 work, it got old not being able to discuss it yet. We'll be talking plenty about that going forward. But CodePen has a ton of moving parts, so we'll be talking about all of it. 

This week we'll be kicking off the podcast again talking about a huge and vital bit of CodePen infastructure: our email system. Outgoing email, that is. We get plenty of incoming email from y'all as well, but this is about the app itself sending email. 

Timeline

Links

]]> Hi!

We're back!

Weird right? It's been over 2 years. 

We took a break after episode 400, not because we ran out of things to talk about, but because we were so focused on our CodePen 2.0 work, it got old not being able to discuss it yet. We'll be talking plenty about that going forward. But CodePen has a ton of moving parts, so we'll be talking about all of it. 

This week we'll be kicking off the podcast again talking about a huge and vital bit of CodePen infastructure: our email system. Outgoing email, that is. We get plenty of incoming email from y'all as well, but this is about the app itself sending email. 

Timeline

Links

]]> https://blog.codepen.io/wp-content/uploads/2025/07/np_mail_888713_000000.svg 401: Outgoing Email false no 33:54 No no 400: Hiatus https://blog.codepen.io/2023/02/08/400-hiatus/ Wed, 08 Feb 2023 16:20:31 +0000 https://blog.codepen.io/?p=17774 Marie and I jump on the show to tell y'all we're taking a little break! It feels like years since we've been eluding to the fact that we're working on a new major upgrade to CodePen. Rather than keep dancing around it, we're going to minimize or remove working on anything that isn't working on that. We can't wait to come back for episode 401 and tell you all about it.

Time Jumps

Sponsor: Split

This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release.

Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

]]> Marie and I jump on the show to tell y'all we're taking a little break! It feels like years since we've been eluding to the fact that we're working on a new major upgrade to CodePen. Rather than keep dancing around it, we're going to minimize or remove working on anything that isn't working on that. We can't wait to come back for episode 401 and tell you all about it.

Time Jumps

Sponsor: Split

This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release.

Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

]]> https://blog.codepen.io/wp-content/uploads/2023/02/np_pause_219786_000000.svg 400: Hiatus false no 0:00 No no 399: Data Munging https://blog.codepen.io/2023/02/01/399-data-munging/ Wed, 01 Feb 2023 22:05:53 +0000 https://blog.codepen.io/?p=17740 There was a small problem in our database. Some JSON data we kept in a column would sometimes have a string instead of an integer. Like {"tabSize": "5"} instead of {"tabSize": 5} of the like. Investigation on how that happened was just silly stuff like not calling parseInt on a value as it came off a <select> element in the DOM. This problem never surfaced because our Rails app just papered over it. But we're moving our code to Go in when you parse JSON in Go, the struct type that you parse it out into needs to match those types perfectly, or else it panics. We had found that our Go code was working around this in all sorts of ways that felt sloppy and inconsistent.

One way to fix this? Fix any bad data going into the DB, then write a script to fix all the data in the DB. This is exactly the approach I took at first, and it would have absolutely fixed this problem.

But Alex took a step back and looked at the problem a bit wider, and we ended up building some tools that helped us solve this problem, and solve future problems related to this. For one, we built a more permission JSON parser that would not panic on something as easy to fix as a string-as-int problem. This worked by way of some Go reflection that could tell what types the data was supposed to be and coerce them if possible. But what should the value fall back to if it's not savable? That was another tool we built to set the default values of Go structs to be potentially other values than what the defaults for their types are. And since this is all in the realm of data validation, we built another tool to validate the data in Go structs against constraints, so we can always keep the data they contain good.

Once all these tools were in place, the new script to fix the data was much easier to write. Just call the safe JSON function to fix the data and put it back. And the result is a cleaned up code base and tools we can use for data safety for the long term.

Time Jumps

Sponsor: Split

This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release.

Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

]]> There was a small problem in our database. Some JSON data we kept in a column would sometimes have a string instead of an integer. Like {"tabSize": "5"} instead of {"tabSize": 5} of the like. Investigation on how that happened was just silly stuff like not calling parseInt on a value as it came off a <select> element in the DOM. This problem never surfaced because our Rails app just papered over it. But we're moving our code to Go in when you parse JSON in Go, the struct type that you parse it out into needs to match those types perfectly, or else it panics. We had found that our Go code was working around this in all sorts of ways that felt sloppy and inconsistent.

One way to fix this? Fix any bad data going into the DB, then write a script to fix all the data in the DB. This is exactly the approach I took at first, and it would have absolutely fixed this problem.

But Alex took a step back and looked at the problem a bit wider, and we ended up building some tools that helped us solve this problem, and solve future problems related to this. For one, we built a more permission JSON parser that would not panic on something as easy to fix as a string-as-int problem. This worked by way of some Go reflection that could tell what types the data was supposed to be and coerce them if possible. But what should the value fall back to if it's not savable? That was another tool we built to set the default values of Go structs to be potentially other values than what the defaults for their types are. And since this is all in the realm of data validation, we built another tool to validate the data in Go structs against constraints, so we can always keep the data they contain good.

Once all these tools were in place, the new script to fix the data was much easier to write. Just call the safe JSON function to fix the data and put it back. And the result is a cleaned up code base and tools we can use for data safety for the long term.

Time Jumps

Sponsor: Split

This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release.

Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

]]> https://blog.codepen.io/wp-content/uploads/2023/02/np_change_4520039_000000.svg 399: Data Munging false no 0:00 No no 398: DevOops https://blog.codepen.io/2023/01/25/398-devoops/ Thu, 26 Jan 2023 01:30:59 +0000 https://blog.codepen.io/?p=17722 Stephen and I hop on the podcast to chat about some of our recent tooling, local development, and DevOps work. A little while back, we cleaned up our entire monorepo's circular dependency problems using Madge and elbow grease. That kind of thing usually isn't the biggest of deals and the kind of thing a super mature bundler like webpack deals with, but other bundlers might choke on. Later, we learned that we had more dependency issues like inter-package circular dependencies (nothing like production deployments to keep you honest) and used more tooling (shout out npx depcheck) to clean more of it up. Workspaces in a monorepo can also paper over missing dependencies — blech.

Another change was moving off using a .dev domain for local development, which oddly actually caused some strange and hard-to-diagnose DNS issues sometimes. We're on .test now, which should never be a public TLD.

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com. Take your first step toward an organized, happier team, today.

]]> Stephen and I hop on the podcast to chat about some of our recent tooling, local development, and DevOps work. A little while back, we cleaned up our entire monorepo's circular dependency problems using Madge and elbow grease. That kind of thing usually isn't the biggest of deals and the kind of thing a super mature bundler like webpack deals with, but other bundlers might choke on. Later, we learned that we had more dependency issues like inter-package circular dependencies (nothing like production deployments to keep you honest) and used more tooling (shout out npx depcheck) to clean more of it up. Workspaces in a monorepo can also paper over missing dependencies — blech.

Another change was moving off using a .dev domain for local development, which oddly actually caused some strange and hard-to-diagnose DNS issues sometimes. We're on .test now, which should never be a public TLD.

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com. Take your first step toward an organized, happier team, today.

]]> https://blog.codepen.io/wp-content/uploads/2023/01/np_devops_2606577_000000.svg 398: DevOops false no 0:00 No no 397: User-Generated Content Saftey https://blog.codepen.io/2023/01/18/397-user-generated-content-saftey/ Wed, 18 Jan 2023 22:48:29 +0000 https://blog.codepen.io/?p=17692 I was asked about the paradoxical nature of CodePen itself recently. CodePen needs to be safe and secure, yet we accept and gleefully execute user-authored code, which is like don't-do-that 101 in web security. Marie and I hop on the show to talk this through as an update from quite a long time ago. It's wonderfully-terribly complicated. Part of what complicates it is that there are many different kinds of worrisome code, from malicious, to distasteful, to spam, and they all need different treatment. This is a daily and never-ending war.

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com. Take your first step toward an organized, happier team, today.

]]> I was asked about the paradoxical nature of CodePen itself recently. CodePen needs to be safe and secure, yet we accept and gleefully execute user-authored code, which is like don't-do-that 101 in web security. Marie and I hop on the show to talk this through as an update from quite a long time ago. It's wonderfully-terribly complicated. Part of what complicates it is that there are many different kinds of worrisome code, from malicious, to distasteful, to spam, and they all need different treatment. This is a daily and never-ending war.

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com. Take your first step toward an organized, happier team, today.

]]> https://blog.codepen.io/wp-content/uploads/2023/01/np_saftey_402856_000000.svg 397: User-Generated Content Saftey false no 32:52 No no 396: Open Source https://blog.codepen.io/2023/01/11/396-open-source/ Wed, 11 Jan 2023 17:16:11 +0000 https://blog.codepen.io/?p=17650 Robert and I jump on the podcast to have a little chat about open source generally and what we do with open source at CodePen. CodePen itself is not open source, aside from the small bits we've made public and the open-source things we include within it. But all Public Pens on CodePen are open source, so we certainly handle a lot of it! Enough that I felt comfortable making our Mastodon presence on Fosstodon, which is an open-source-focused instance.

Time Jumps

Sponsor: Split

This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release.

Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

]]> Robert and I jump on the podcast to have a little chat about open source generally and what we do with open source at CodePen. CodePen itself is not open source, aside from the small bits we've made public and the open-source things we include within it. But all Public Pens on CodePen are open source, so we certainly handle a lot of it! Enough that I felt comfortable making our Mastodon presence on Fosstodon, which is an open-source-focused instance.

Time Jumps

Sponsor: Split

This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release.

Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

]]> https://blog.codepen.io/wp-content/uploads/2023/01/np_open-source_5239835_000000.png 396: Open Source false no 0:00 No no 395: The Most Hearted of 2022 https://blog.codepen.io/2023/01/04/395-the-most-hearted-of-2022/ Wed, 04 Jan 2023 17:33:07 +0000 https://blog.codepen.io/?p=17619 Marie and I hop on the show to discuss our recently released Most Hearted of 2022 Pens. We only did the calculations the day before, so this is more of a first reaction than a deep dive.

  • Congrats to Hyperplexed for #1 and a massive year on CodePen. Last year, just one entry on the Top 100, and this year, nine. "Full layouts" like this appeared a number of times, including Aysenur Turk, last year's winner, at #13 with Liquid Transition Effect, and there were two NFT-themed landing pages (1, 2) in the Top 100.
  • A lot of Pens attract attention when they have that "I could use this" feel to them, demonstrated by Ryan Mulligan's Logo Wall at #2!
  • High five to Greensock for taking #3 with a re-creation of Brian Cross' lovely Pen. The tag "gsap" was used a ton in the Top 100.
  • Jon Kantner took #4 and 10 other spots making this the most appearances on the Top 100 list ever, and also took a spot with a Pen made on December 13th! Aaron Iker and Yoav Kadosh both had 4 spots.
  • Perhaps my favorite because of the deep CSS trickery involved was Scott Kellum's Apple inspired pride clock. Scott has the oldest account of anyone in the list, over 10 years old! Huge fan of Steve Gardener's joke, though as well.
  • 11 of the Top 100 were created for CodePen Challenges.

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com. Take your first step toward an organized, happier team, today.

]]> Marie and I hop on the show to discuss our recently released Most Hearted of 2022 Pens. We only did the calculations the day before, so this is more of a first reaction than a deep dive.

  • Congrats to Hyperplexed for #1 and a massive year on CodePen. Last year, just one entry on the Top 100, and this year, nine. "Full layouts" like this appeared a number of times, including Aysenur Turk, last year's winner, at #13 with Liquid Transition Effect, and there were two NFT-themed landing pages (1, 2) in the Top 100.
  • A lot of Pens attract attention when they have that "I could use this" feel to them, demonstrated by Ryan Mulligan's Logo Wall at #2!
  • High five to Greensock for taking #3 with a re-creation of Brian Cross' lovely Pen. The tag "gsap" was used a ton in the Top 100.
  • Jon Kantner took #4 and 10 other spots making this the most appearances on the Top 100 list ever, and also took a spot with a Pen made on December 13th! Aaron Iker and Yoav Kadosh both had 4 spots.
  • Perhaps my favorite because of the deep CSS trickery involved was Scott Kellum's Apple inspired pride clock. Scott has the oldest account of anyone in the list, over 10 years old! Huge fan of Steve Gardener's joke, though as well.
  • 11 of the Top 100 were created for CodePen Challenges.

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com. Take your first step toward an organized, happier team, today.

]]> https://blog.codepen.io/wp-content/uploads/2023/01/np_hearts_367206_000000.png 395: The Most Hearted of 2022 false no 0:00 No no 394: Very Remote Work https://blog.codepen.io/2022/12/14/394-very-remote-work/ Wed, 14 Dec 2022 16:51:26 +0000 https://blog.codepen.io/?p=17498 Rach lives in Australia, so for our otherwise U.S.-based team, that's about as remote as it gets. We've always been remote at CodePen, so we have it built-in to our culture already, but that doesn't mean we don't have to plan for it, think about it, and adjust things to make sure we're all doing the best we can. Writing is a fundamental aspect of it all, but even that is funny sometimes because you have to choose where those words will go that make the most sense. Right now, it's a balance between Notion, GitHub, Slack, and even our codebase itself.

Time Jumps

Sponsor: Split

This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release.

Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

]]> Rach lives in Australia, so for our otherwise U.S.-based team, that's about as remote as it gets. We've always been remote at CodePen, so we have it built-in to our culture already, but that doesn't mean we don't have to plan for it, think about it, and adjust things to make sure we're all doing the best we can. Writing is a fundamental aspect of it all, but even that is funny sometimes because you have to choose where those words will go that make the most sense. Right now, it's a balance between Notion, GitHub, Slack, and even our codebase itself.

Time Jumps

Sponsor: Split

This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release.

Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

]]> https://blog.codepen.io/wp-content/uploads/2022/12/np_work_4555974_000000.svg 394: Very Remote Work false no 0:00 No no 393: Challenges in 2022 https://blog.codepen.io/2022/12/07/393-challenges-in-2022/ Wed, 07 Dec 2022 15:20:05 +0000 https://blog.codepen.io/?p=17479 Marie and Chris talk about the year in CodePen Challenges. If you participate, this might be an interesting look into how we think about them. If you don't, it might help you understand what they are and how they might just tickle your fancy.

Time Jumps

Sponsor: Split

This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release.

Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

]]> Marie and Chris talk about the year in CodePen Challenges. If you participate, this might be an interesting look into how we think about them. If you don't, it might help you understand what they are and how they might just tickle your fancy.

Time Jumps

Sponsor: Split

This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release.

Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

]]> https://blog.codepen.io/wp-content/uploads/2022/12/np_achievement_5249257_000000-1.svg 393: Challenges in 2022 false no 0:00 No no 392: Project Management Refresh https://blog.codepen.io/2022/11/30/392-project-management-refresh/ Wed, 30 Nov 2022 17:01:18 +0000 https://blog.codepen.io/?p=17462 Dee and Chris chat about our latest take on Project Management (PM), a somewhat tricky topic for us with such a small team where literally everyone is an individual contributor (IC) with a lot on their shoulders aside from PM.

We're attempting a project of large scale, so part of what has helped us so far is scoping the project into phases releases. That way work that we know is in a later release can be put off until we're literally working on that release. Without at least that prioritization, things would take much longer. The releases are also chunked into sub-projects with a no-too-little and not-too-big quality, and within those projects is where the kan-baning happens. If we can keep the whole team on one project (or at least a group of 2-3), it limits the context switching which also helps speed and productivity.

We use Notion for most of this work, and it's been nice to keep literally all of it (all the way up through all the phases) in one big database, then we scope the views down to phases and projects and cards. Each card we make sure has a very actionable tone to it and includes everything one might need to finish the task, including decisions, previous conversations, relevant other tickets, etc. Each card has things you might expect like who is working on it, the current status, whether it's blocked or not, and several other useful bits of metadata. It also contains time estimates, so we can, at a glance, see how far we've come and what's left on any given project. We know things like time estimates can change quite a bit, but everyone is well aware of that and isn't beholden to the numbers. It just gives us some idea of what is going on other than feeling like we're entirely driving blind. Each week we take a look at the progress together as a team.

Time Jumps

Sponsor: Split

This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release.

Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

]]> Dee and Chris chat about our latest take on Project Management (PM), a somewhat tricky topic for us with such a small team where literally everyone is an individual contributor (IC) with a lot on their shoulders aside from PM.

We're attempting a project of large scale, so part of what has helped us so far is scoping the project into phases releases. That way work that we know is in a later release can be put off until we're literally working on that release. Without at least that prioritization, things would take much longer. The releases are also chunked into sub-projects with a no-too-little and not-too-big quality, and within those projects is where the kan-baning happens. If we can keep the whole team on one project (or at least a group of 2-3), it limits the context switching which also helps speed and productivity.

We use Notion for most of this work, and it's been nice to keep literally all of it (all the way up through all the phases) in one big database, then we scope the views down to phases and projects and cards. Each card we make sure has a very actionable tone to it and includes everything one might need to finish the task, including decisions, previous conversations, relevant other tickets, etc. Each card has things you might expect like who is working on it, the current status, whether it's blocked or not, and several other useful bits of metadata. It also contains time estimates, so we can, at a glance, see how far we've come and what's left on any given project. We know things like time estimates can change quite a bit, but everyone is well aware of that and isn't beholden to the numbers. It just gives us some idea of what is going on other than feeling like we're entirely driving blind. Each week we take a look at the progress together as a team.

Time Jumps

Sponsor: Split

This podcast is powered by Split. The Feature Management & Experimentation Platform that reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release.

Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.

]]> https://blog.codepen.io/wp-content/uploads/2022/12/np_project_4450194_000000.svg 392: Project Management Refresh false no 0:00 No no 391: Early TypeScript at CodePen https://blog.codepen.io/2022/11/23/391-early-typescript-at-codepen/ Wed, 23 Nov 2022 17:02:20 +0000 https://blog.codepen.io/?p=17455 TypeScript ain't exactly new, but it's a bit new to us. Robert was the most knowledgeable about TypeScript on the team and felt like it could be valuable for us. What does that mean though? Where would we use TypeScript? What blockers were there? What does it actually help with? The implementation hasn't been trivial, so has it been worth it? Will it be worth it? Robert, Chris, and Stephen discuss.

Time Jumps

]]> TypeScript ain't exactly new, but it's a bit new to us. Robert was the most knowledgeable about TypeScript on the team and felt like it could be valuable for us. What does that mean though? Where would we use TypeScript? What blockers were there? What does it actually help with? The implementation hasn't been trivial, so has it been worth it? Will it be worth it? Robert, Chris, and Stephen discuss.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2022/11/np_ts-file-document-icon_2604571_000000.svg 391: Early TypeScript at CodePen false no 0:00 No no 390: The Social Media Zeitgiest https://blog.codepen.io/2022/11/16/390-the-social-media-zeitgiest/ Wed, 16 Nov 2022 20:53:19 +0000 https://blog.codepen.io/?p=17448 Marie and I talk about what's going on in the world of social media, and what that might mean for CodePen and front-end developers. Twitter doesn't feel particularly healthy at the moment, but has been the biggest player for front-end developers for a lot of years. Are we moving? Not? Where?

Time Jumps

]]> Marie and I talk about what's going on in the world of social media, and what that might mean for CodePen and front-end developers. Twitter doesn't feel particularly healthy at the moment, but has been the biggest player for front-end developers for a lot of years. Are we moving? Not? Where?

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2022/11/np_social-media_4379140_000000.svg 390: The Social Media Zeitgiest false no 0:00 No no 389: Migrating a Ruby on Rails GraphQL API to a Go GraphQL API https://blog.codepen.io/2022/11/02/389-migrating-a-ruby-on-rails-graphql-api-to-a-go-graphql-api/ Wed, 02 Nov 2022 20:57:44 +0000 https://blog.codepen.io/?p=17420 One thing that's been keeping us very busy at CodePen is moving our main API. We decided on GraphQL long ago and it's served us pretty well. We originally built it in Ruby on Rails alongside a lot of the rest of our app. But while Rails served us well, we've been moving off of it. We like our React architecture and we're better served leaning into that, with frameworks like Next, than staying on Rails. We proved out this combination of technologies for ourselves, building a whole set of admin tools with it. Now we're ready to keep that train going as we build out more of CodePen with the same stack. But removing Rails means moving off of our Rails-based GraphQL implementation. This means re-writing that API in Go, another bit of tech we've had a lot of luck with.

Turns out that re-writing an API is more time-consuming than writing it to begin with, especially as we need to run them side-by-side and behave identically. No refactoring allowed! Unless of course we want to refactor it on both sides and take even more time.

Dee joined me this week in talking about all this. It's a huge job! But we've been doing well at it, building our own tooling, doing lots of testing, and ultimately proving that it works by releasing it in small areas on the production site. It's all working out how we hoped it would: fast, cheap, and easier to reason about.

Time Jumps

Sponsor: Equinix Metal’s Startup Partner Program

Equinix Metal’s Startup Partner Program helps early stage companies level up. Their experts work with startups like Koord and INVISV to build their competitive edge with infrastructure. Equinix Metal provides real time guidance and support to help startups grow faster. With up to $100,000 in infrastructure credit, access to Equinix’s global ecosystem of over 10,000 customers and 1,800 networks, they might just be what you need to take your startup global.

Visit metal.equinix.com/startups to take your startup to the next level.

]]> One thing that's been keeping us very busy at CodePen is moving our main API. We decided on GraphQL long ago and it's served us pretty well. We originally built it in Ruby on Rails alongside a lot of the rest of our app. But while Rails served us well, we've been moving off of it. We like our React architecture and we're better served leaning into that, with frameworks like Next, than staying on Rails. We proved out this combination of technologies for ourselves, building a whole set of admin tools with it. Now we're ready to keep that train going as we build out more of CodePen with the same stack. But removing Rails means moving off of our Rails-based GraphQL implementation. This means re-writing that API in Go, another bit of tech we've had a lot of luck with.

Turns out that re-writing an API is more time-consuming than writing it to begin with, especially as we need to run them side-by-side and behave identically. No refactoring allowed! Unless of course we want to refactor it on both sides and take even more time.

Dee joined me this week in talking about all this. It's a huge job! But we've been doing well at it, building our own tooling, doing lots of testing, and ultimately proving that it works by releasing it in small areas on the production site. It's all working out how we hoped it would: fast, cheap, and easier to reason about.

Time Jumps

Sponsor: Equinix Metal’s Startup Partner Program

Equinix Metal’s Startup Partner Program helps early stage companies level up. Their experts work with startups like Koord and INVISV to build their competitive edge with infrastructure. Equinix Metal provides real time guidance and support to help startups grow faster. With up to $100,000 in infrastructure credit, access to Equinix’s global ecosystem of over 10,000 customers and 1,800 networks, they might just be what you need to take your startup global.

Visit metal.equinix.com/startups to take your startup to the next level.

]]> https://blog.codepen.io/wp-content/uploads/2022/11/np_api_3132336_000000.svg 389: Migrating a Ruby on Rails GraphQL API to a Go GraphQL API false no 0:00 No no 388: Durable Objects https://blog.codepen.io/2022/10/19/388-durable-objects/ Wed, 19 Oct 2022 16:49:30 +0000 https://blog.codepen.io/?p=17372 Robert and I jump on to chat about Cloudflare's product Durable Objects. It's part of their Workers platform, which we already use at CodePen a good bit, but with Durable Objects...

Global Uniqueness guarantees that there will be a single instance of a Durable Object class with a given ID running at once, across the world. Requests for a Durable Object ID are routed by the Workers runtime to the Cloudflare data center that owns the Durable Object.

In their intro blog post a few years back, they call the "killer app" real-time collaborative document editing, which is obviously of interest to us. So we've been tinkering and playing with how that might work with CodePen's future technology.

Time Jumps

Sponsor: Equinix Metal’s Startup Partner Program

Equinix Metal’s Startup Partner Program helps early stage companies level up. Their experts work with startups like Koord and INVISV to build their competitive edge with infrastructure. Equinix Metal provides real time guidance and support to help startups grow faster. With up to $100,000 in infrastructure credit, access to Equinix’s global ecosystem of over 10,000 customers and 1,800 networks, they might just be what you need to take your startup global.

Visit metal.equinix.com/startups to take your startup to the next level.

]]> Robert and I jump on to chat about Cloudflare's product Durable Objects. It's part of their Workers platform, which we already use at CodePen a good bit, but with Durable Objects...

Global Uniqueness guarantees that there will be a single instance of a Durable Object class with a given ID running at once, across the world. Requests for a Durable Object ID are routed by the Workers runtime to the Cloudflare data center that owns the Durable Object.

In their intro blog post a few years back, they call the "killer app" real-time collaborative document editing, which is obviously of interest to us. So we've been tinkering and playing with how that might work with CodePen's future technology.

Time Jumps

Sponsor: Equinix Metal’s Startup Partner Program

Equinix Metal’s Startup Partner Program helps early stage companies level up. Their experts work with startups like Koord and INVISV to build their competitive edge with infrastructure. Equinix Metal provides real time guidance and support to help startups grow faster. With up to $100,000 in infrastructure credit, access to Equinix’s global ecosystem of over 10,000 customers and 1,800 networks, they might just be what you need to take your startup global.

Visit metal.equinix.com/startups to take your startup to the next level.

]]> https://blog.codepen.io/wp-content/uploads/2022/10/np_durability_4750699_000000.svg 388: Durable Objects false no 0:00 No no 387: CodePen Co-Founders AMA https://blog.codepen.io/2022/10/05/387-codepen-co-founders-ama/ Wed, 05 Oct 2022 14:02:57 +0000 https://blog.codepen.io/?p=17338 A few months back, Alex and I did a 10-year anniversary episode that took the form of 10 bits of advice formed in the fires of running a software company for a decade. That was us talking at you. We thought it would be fun to turn the tables and have you talk at us in the form of an Ask-Me-Anything follow-up to that 10-year show.

Time Jumps

]]> A few months back, Alex and I did a 10-year anniversary episode that took the form of 10 bits of advice formed in the fires of running a software company for a decade. That was us talking at you. We thought it would be fun to turn the tables and have you talk at us in the form of an Ask-Me-Anything follow-up to that 10-year show.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2022/10/np_ask_4652381_000000.svg 387: CodePen Co-Founders AMA false no 0:00 No no 386: Hakim El Hattab https://blog.codepen.io/2022/09/28/386-hakim-el-hattab/ Wed, 28 Sep 2022 17:21:57 +0000 https://blog.codepen.io/?p=17284 This week I got to speak with Hakim El Hattab. I feel pretty special as Hakim told me he doesn't do public stuff very often. I get it! He's a busy man with a family, a successful company, and ambitious other projects. I think of Hakim as the master of simple but satisfying UI concepts that have a way of becoming bigger than demos. Consider Ladda, which you can find as part of his personal site, which is a button that expands to show a spinner. This concept started with Hakim and has now made its way to surely hundreds or thousands of websites, some as big as Slack and some as awesome as CodePen itself.

Time Jumps

Sponsor: Equinix Metal

Equinix Metal’s Startup Partner Program helps early-stage companies level up. Their experts work with startups like GenesysGo and Cuemby to build their competitive edge with infrastructure. Equinix Metal provides real-time guidance and support to help startups grow faster. With up to $100,000 in infrastructure credit, access to Equinix’s global ecosystem of over 10,000 customers and 1,800 networks, they might just be what you need to take your startup global.

Visit metal.equinix.com/startups to take your startup to the next level.

]]> This week I got to speak with Hakim El Hattab. I feel pretty special as Hakim told me he doesn't do public stuff very often. I get it! He's a busy man with a family, a successful company, and ambitious other projects. I think of Hakim as the master of simple but satisfying UI concepts that have a way of becoming bigger than demos. Consider Ladda, which you can find as part of his personal site, which is a button that expands to show a spinner. This concept started with Hakim and has now made its way to surely hundreds or thousands of websites, some as big as Slack and some as awesome as CodePen itself.

Time Jumps

Sponsor: Equinix Metal

Equinix Metal’s Startup Partner Program helps early-stage companies level up. Their experts work with startups like GenesysGo and Cuemby to build their competitive edge with infrastructure. Equinix Metal provides real-time guidance and support to help startups grow faster. With up to $100,000 in infrastructure credit, access to Equinix’s global ecosystem of over 10,000 customers and 1,800 networks, they might just be what you need to take your startup global.

Visit metal.equinix.com/startups to take your startup to the next level.

]]> https://blog.codepen.io/wp-content/uploads/2022/09/np_slider_1819662_000000.svg 386: Hakim El Hattab false no 0:00 No no 385: Kristopher Van Sant https://blog.codepen.io/2022/09/14/385-kristopher-van-sant/ Wed, 14 Sep 2022 19:10:38 +0000 https://blog.codepen.io/?p=17277 This week I got to talk to Kristopher Van Sant! Again! This time we got to talk about Kristopher's professional work as well as some favorite Pens.

Time Jumps

Sponsor: Equinix Metal’s Startup Partner Program

Equinix Metal’s Startup Partner Program helps early stage companies level up. Their experts work with startups like GenesysGo and Cuemby to build their competitive edge with infrastructure. Equinix Metal provides real time guidance and support to help startups grow faster. With up to $100,000 in infrastructure credit, access to Equinix’s global ecosystem of over 10,000 customers and 1,800 networks, see why startups choose Equinix Metal. It’s not just about the infrastructure, it's about the people behind it. Are you ready to go global?

Visit metal.equinix.com/startups to take your startup to the next level.

]]> This week I got to talk to Kristopher Van Sant! Again! This time we got to talk about Kristopher's professional work as well as some favorite Pens.

Time Jumps

Sponsor: Equinix Metal’s Startup Partner Program

Equinix Metal’s Startup Partner Program helps early stage companies level up. Their experts work with startups like GenesysGo and Cuemby to build their competitive edge with infrastructure. Equinix Metal provides real time guidance and support to help startups grow faster. With up to $100,000 in infrastructure credit, access to Equinix’s global ecosystem of over 10,000 customers and 1,800 networks, see why startups choose Equinix Metal. It’s not just about the infrastructure, it's about the people behind it. Are you ready to go global?

Visit metal.equinix.com/startups to take your startup to the next level.

]]> https://blog.codepen.io/wp-content/uploads/2022/09/np_dentist_3582500_000000-1.svg 385: Kristopher Van Sant false no 0:00 No no 384: The 300 Sparks Milestone https://blog.codepen.io/2022/09/07/384-the-300-sparks-milestone/ Wed, 07 Sep 2022 18:21:19 +0000 https://blog.codepen.io/?p=17267 We just recently published the 300th CodePen Spark. Marie joins me on the show, as she leads up the creation of the vast majority of Spark newsletters. We get into things like why we do it, how we create it, how we send it, and things we've learned along the way sending a newsletter of this magnitude. We have some interesting failsafe procedures in place. Plus we get into some of the analytic numbers behind what we're doing. Here's to another upcoming many hundred more!

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com. Take your first step toward an organized, happier team, today.

]]> We just recently published the 300th CodePen Spark. Marie joins me on the show, as she leads up the creation of the vast majority of Spark newsletters. We get into things like why we do it, how we create it, how we send it, and things we've learned along the way sending a newsletter of this magnitude. We have some interesting failsafe procedures in place. Plus we get into some of the analytic numbers behind what we're doing. Here's to another upcoming many hundred more!

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com. Take your first step toward an organized, happier team, today.

]]> https://blog.codepen.io/wp-content/uploads/2022/09/np_spark_3760780_000000.svg 384: The 300 Sparks Milestone false no 0:00 No no 383: Soft Delete All https://blog.codepen.io/2022/08/31/383-soft-delete-all/ Wed, 31 Aug 2022 19:18:45 +0000 https://blog.codepen.io/?p=17227 In this show, Stephen and Chris get to talk about an internal technical detail we were improving in our database, which led to a public-facing feature for y'all. The idea is that all (most, anyway) database tables should have a deleted_at column. When you query against them, under regular circumstances, any rows that have a non-null value will be filtered out. This is the concept of "soft" delete. It's not really gone from the database, it just behaves like it is. This has two clear benefits:

  1. Deleting is super fast, it's just manipulating a single value.
  2. It opens the door for un-deleting things that perhaps were mistakenly deleted.

This approach can be slightly more work. You'll need to offer a way to truly wipe data completely for users. You'll probably want a reaper to clean up data that has been deleted long enough. You'll need to comply with regulations about data deletion. You might have to build un-deletion features. You might need to be doing that filtering yourself throughout the app. It's work, but it's generally worth it.

In our case, because we soft delete everything on CodePen now, the Deleted Items area of Your Work now works for all Item Types (Pens, Collections, and Projects). Before, it only worked for Pens, and even there it was a little messy as it didn't retain the URL slug or comments and such — now it does.

Time Jumps

Sponsor: Memberful

Memberful is a best-in-class membership software used by the web's biggest creators. If you're building a membership website for a client, Memberful handles the hard stuff so you can complete your builds quickly and your clients can focus on creating content while earning revenue with ease. It seamlessly integrates with popular tools like WordPress, Mailchimp, and Discord, so they can reach and monetize their existing audience. Memberful maintains GraphQL API, webhooks, and OAuth Single Sign on to make integration even easier.

Help your client monetize their passion. Get started for free at Memberful.com

]]> In this show, Stephen and Chris get to talk about an internal technical detail we were improving in our database, which led to a public-facing feature for y'all. The idea is that all (most, anyway) database tables should have a deleted_at column. When you query against them, under regular circumstances, any rows that have a non-null value will be filtered out. This is the concept of "soft" delete. It's not really gone from the database, it just behaves like it is. This has two clear benefits:

  1. Deleting is super fast, it's just manipulating a single value.
  2. It opens the door for un-deleting things that perhaps were mistakenly deleted.

This approach can be slightly more work. You'll need to offer a way to truly wipe data completely for users. You'll probably want a reaper to clean up data that has been deleted long enough. You'll need to comply with regulations about data deletion. You might have to build un-deletion features. You might need to be doing that filtering yourself throughout the app. It's work, but it's generally worth it.

In our case, because we soft delete everything on CodePen now, the Deleted Items area of Your Work now works for all Item Types (Pens, Collections, and Projects). Before, it only worked for Pens, and even there it was a little messy as it didn't retain the URL slug or comments and such — now it does.

Time Jumps

Sponsor: Memberful

Memberful is a best-in-class membership software used by the web's biggest creators. If you're building a membership website for a client, Memberful handles the hard stuff so you can complete your builds quickly and your clients can focus on creating content while earning revenue with ease. It seamlessly integrates with popular tools like WordPress, Mailchimp, and Discord, so they can reach and monetize their existing audience. Memberful maintains GraphQL API, webhooks, and OAuth Single Sign on to make integration even easier.

Help your client monetize their passion. Get started for free at Memberful.com

]]> https://blog.codepen.io/wp-content/uploads/2022/08/np_delete_51740_000000.svg 383: Soft Delete All false no 0:00 No no 382: Bulk Actions for Assets https://blog.codepen.io/2022/08/24/382-bulk-actions-for-assets/ Wed, 24 Aug 2022 14:22:41 +0000 https://blog.codepen.io/?p=17222 CodePen will host your assets, like images, data models, libraries, whatever. It's quite useful! They are easy to browse, easy to copy URLs or code snippets of usage, served with the right headers from a fast global CDN, and heck, we'll even help optimize them. It's easy to amass a lof of them, as we allow you upload many at a time.

But while we had Bulk Upload, as it were, we didn't offer any other "bulk" actions, until now. Stephen and I talk about how we added more bulk actions for assets, making them all the easier to manage. Shout out to our user with many thousands of assets which helped provide the motivation to get this out.

Time Jumps

Sponsor: Memberful

Memberful is a best-in-class membership software used by the web's biggest creators. If you're building a membership website for a client, Memberful handles the hard stuff so you can complete your builds quickly and your clients can focus on creating content while earning revenue with ease. It seamlessly integrates with popular tools like WordPress, Mailchimp, and Discord, so they can reach and monetize their existing audience. Memberful maintains GraphQL API, webhooks, and OAuth Single Sign on to make integration even easier.

Help your client monetize their passion. Get started for free at Memberful.com

]]> CodePen will host your assets, like images, data models, libraries, whatever. It's quite useful! They are easy to browse, easy to copy URLs or code snippets of usage, served with the right headers from a fast global CDN, and heck, we'll even help optimize them. It's easy to amass a lof of them, as we allow you upload many at a time.

But while we had Bulk Upload, as it were, we didn't offer any other "bulk" actions, until now. Stephen and I talk about how we added more bulk actions for assets, making them all the easier to manage. Shout out to our user with many thousands of assets which helped provide the motivation to get this out.

Time Jumps

Sponsor: Memberful

Memberful is a best-in-class membership software used by the web's biggest creators. If you're building a membership website for a client, Memberful handles the hard stuff so you can complete your builds quickly and your clients can focus on creating content while earning revenue with ease. It seamlessly integrates with popular tools like WordPress, Mailchimp, and Discord, so they can reach and monetize their existing audience. Memberful maintains GraphQL API, webhooks, and OAuth Single Sign on to make integration even easier.

Help your client monetize their passion. Get started for free at Memberful.com

]]> https://blog.codepen.io/wp-content/uploads/2022/09/np_checklist_1415369_000000.svg 382: Bulk Actions for Assets false no 0:00 No no 381: Data on External Library Usage https://blog.codepen.io/2022/08/17/381-data-on-external-library-usage/ Wed, 17 Aug 2022 15:02:00 +0000 https://blog.codepen.io/?p=17202 Marie and I this week! Marie dug up some interesting data about "external library" usage on CodePen. In the Pen Editor (specifically), you have the option of adding external resources. These are literally placed in the Settings area and added to the end of your HTML. We're specifically focused on these (not scripts you might add in the HTML by hand, Projects, imports, or otherwise) because we have them in a special database table — good for exactly this kind of data analysis! We're also focusing on just JavaScript this time. We'll look at the top 10 in terms of usage over time.

Time Jumps

Sponsor: Whiskey Web and Whatnot

Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, Wes Bos, and the incomparable Chris Coyier! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, favorite power tools, the best casseroles, and of course whiskey!

]]> Marie and I this week! Marie dug up some interesting data about "external library" usage on CodePen. In the Pen Editor (specifically), you have the option of adding external resources. These are literally placed in the Settings area and added to the end of your HTML. We're specifically focused on these (not scripts you might add in the HTML by hand, Projects, imports, or otherwise) because we have them in a special database table — good for exactly this kind of data analysis! We're also focusing on just JavaScript this time. We'll look at the top 10 in terms of usage over time.

Time Jumps

Sponsor: Whiskey Web and Whatnot

Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, Wes Bos, and the incomparable Chris Coyier! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, favorite power tools, the best casseroles, and of course whiskey!

]]> https://blog.codepen.io/wp-content/uploads/2022/08/np_braille_3638656_000000.svg 381: Data on External Library Usage false no 0:00 No no 380: Ol’ Jake https://blog.codepen.io/2022/08/10/380-ol-jake/ Wed, 10 Aug 2022 16:13:58 +0000 https://blog.codepen.io/?p=17195 This week I got to speak with Jake Albaugh. Long-time listeners will remember Jake as an alumnus of Team CodePen. That's a first for a podcast guest! We looked back a bit, where Marie dug up some of the best Jake classic Pens, and talked with him about what his professional life has looked like post-CodePen.

Time Jumps

Sponsor: Memberful

Memberful is easy to use, best-in-class membership software for independent creators, publishers, podcasters, educators, and more. We take care of the hard stuff so you and your clients can focus on what you do best, while earning revenue quickly. Memberful seamlessly integrates with the tools you already use, like WordPress, Mailchimp, Discord, and lots more. With Memberful, you have full control and ownership of all things related to your brand, your audience, and your finances. Learn more at Memberful.com and get started for free — no credit card required.

]]> This week I got to speak with Jake Albaugh. Long-time listeners will remember Jake as an alumnus of Team CodePen. That's a first for a podcast guest! We looked back a bit, where Marie dug up some of the best Jake classic Pens, and talked with him about what his professional life has looked like post-CodePen.

Time Jumps

Sponsor: Memberful

Memberful is easy to use, best-in-class membership software for independent creators, publishers, podcasters, educators, and more. We take care of the hard stuff so you and your clients can focus on what you do best, while earning revenue quickly. Memberful seamlessly integrates with the tools you already use, like WordPress, Mailchimp, Discord, and lots more. With Memberful, you have full control and ownership of all things related to your brand, your audience, and your finances. Learn more at Memberful.com and get started for free — no credit card required.

]]> https://blog.codepen.io/wp-content/uploads/2022/08/np_self-improvement_2139237_000000.svg 380: Ol’ Jake false no 0:00 No no 379: Chris & Alex have been running CodePen for 10 Years. What have they learned? Here’s the top 10! https://blog.codepen.io/2022/08/03/379-chris-alex-have-been-running-codepen-for-10-years-what-have-they-learned-heres-the-top-10/ Wed, 03 Aug 2022 21:55:03 +0000 https://blog.codepen.io/?p=17154 Both Alex and I, the co-founders of CodePen, spent time trying to whittle down hopefully interesting and practical advice for you from our experience in running a SaaS company for a decade! Let's go back and forth, combining into a top 10 like we did in the show.

🔟 Alex: The High Low Principle

Only do things that are either:

  • High time, high value
  • Low time, low value

As in, they take a long time but are going to make a big difference. Or they won't take too long, don't ask too much of you, but are still helpful. This is the answer to the build vs buy conundrum. It's a buy for everything in between.

9️⃣ Chris: The Co-Founder Relationship is at the heart of the business

Every relationship between people at a company is important, but the relationship between the founders is crucial. It sets the culture and makes everything work. The company cannot continue with a broken relationship at the founder level. They say it is like marriage, and that analogy isn't far off.

Chances are, you’re going to find out you are very different people who think and feel differently about all sorts of things. You need to get along, you need to respect each other, you need to trust each other, but you can’t avoid hard conversations (as much as I would like to).

8️⃣ Alex: Build Minimalist Tech

Do more with less. Just because you didn't write it doesn't mean it's less complex. Just because you did write it doesn't mean it's less complex. You might have to add technology in the short term as you're migrating to what will end up with more minimal tech. It is a focusing of you and your team's expertise.

7️⃣ Chris: You're probably undercharging people

You’re probably undercharging people for your software product. Software is always difficult to build and maintain. It's likely your intuition leads you toward lower prices, but every experience we've ever had with higher prices (and raising prices) has been positive. Fewer people than you think will care, revenue goes up, and your time is better compensated. Plus, there is a weird correlation between your high-paying customers being chill and low-paying customers being more challenging.

6️⃣ Alex: One thing at a time

Only do one of these at a time: learn new tech or solve a new problem. Do not do both. One is a magical number. Do one thing at a time.

5️⃣ Chris: Nobody has the same thing in their brain

Making sure everyone is on the same page is hard. There are so many business constructs designed to get everyone there: meetings, documents, emails... and yet, if you think everyone understands what is happening the same way you do, you are not right. But keeping everyone together is still a vital part of the process. Try to get better at expressing what is in your brain and sussing out when you think it might be different than what is in other people you work with's brains. Time spent communicating is time well spent.

4️⃣ Alex: Honesty defines your culture

Honesty is a fundamental part of your culture. That is, honesty or dishonesty, like it or not. Honesty is better. Be honest about your work, your management, and yourself. Remember that honesty has nothing to do with being nice. Being nice doesn't mean being honest. Being mean doesn't mean being honest. But being honest might mean uncomfortable conversations.

A person's success in life can usually be measured by the number of uncomfortable conversations he or she is willing to have.

— Tim Ferris

3️⃣ Chris: Time is precious and easily chewed away

Anything and everything is a threat to your time. Slice away what isn’t core to your business. You'll be drowning for time soon enough, so spend it on what really matters to your business. This is where technical debt comes in, and being careful about where you acquire it. You'll make mistakes, but a better you can recover from them. Pay the debts and move on.

2️⃣ Alex: Do not poke

It's easy to poke at problems. Take a guess, try it, and if it seems to work, do it and move on. Don't do that. Draw a line in the sand. Stop poking. Slow down and deeply understand the problem. Read the source code. You'll understand the problem better if you move slowly. Eventually, that style of slow problem-solving will feel smooth, and that smoothness will, ironically, help you move faster.

Slow is smooth and smooth is fast.

— Navy Seals saying

1️⃣ Chris: Here are your cheat codes: writing, persistence, and positivity

If anything has given me, and by extension CodePen, a jump in this world, it is these three things. You can build an audience through writing. An audience of people that trust you and like you and will try the things you make. The ability to communicate well with words will serve you forever, inside and outside your company. Persistence is a byproduct of having a good idea, knowing it, and having the wherewithal to see it through. A business is not built in 6 months. Stick with your good idea, it's the only way. Positivity ties it all together. Writing is your vehicle for telling your tribe, over and over, that everything is going to be great and you'll be there to help make sure it is.

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com/codepen. Take your first step toward an organized, happier team, today.

]]> Both Alex and I, the co-founders of CodePen, spent time trying to whittle down hopefully interesting and practical advice for you from our experience in running a SaaS company for a decade! Let's go back and forth, combining into a top 10 like we did in the show.

🔟 Alex: The High Low Principle

Only do things that are either:

  • High time, high value
  • Low time, low value

As in, they take a long time but are going to make a big difference. Or they won't take too long, don't ask too much of you, but are still helpful. This is the answer to the build vs buy conundrum. It's a buy for everything in between.

9️⃣ Chris: The Co-Founder Relationship is at the heart of the business

Every relationship between people at a company is important, but the relationship between the founders is crucial. It sets the culture and makes everything work. The company cannot continue with a broken relationship at the founder level. They say it is like marriage, and that analogy isn't far off.

Chances are, you’re going to find out you are very different people who think and feel differently about all sorts of things. You need to get along, you need to respect each other, you need to trust each other, but you can’t avoid hard conversations (as much as I would like to).

8️⃣ Alex: Build Minimalist Tech

Do more with less. Just because you didn't write it doesn't mean it's less complex. Just because you did write it doesn't mean it's less complex. You might have to add technology in the short term as you're migrating to what will end up with more minimal tech. It is a focusing of you and your team's expertise.

7️⃣ Chris: You're probably undercharging people

You’re probably undercharging people for your software product. Software is always difficult to build and maintain. It's likely your intuition leads you toward lower prices, but every experience we've ever had with higher prices (and raising prices) has been positive. Fewer people than you think will care, revenue goes up, and your time is better compensated. Plus, there is a weird correlation between your high-paying customers being chill and low-paying customers being more challenging.

6️⃣ Alex: One thing at a time

Only do one of these at a time: learn new tech or solve a new problem. Do not do both. One is a magical number. Do one thing at a time.

5️⃣ Chris: Nobody has the same thing in their brain

Making sure everyone is on the same page is hard. There are so many business constructs designed to get everyone there: meetings, documents, emails... and yet, if you think everyone understands what is happening the same way you do, you are not right. But keeping everyone together is still a vital part of the process. Try to get better at expressing what is in your brain and sussing out when you think it might be different than what is in other people you work with's brains. Time spent communicating is time well spent.

4️⃣ Alex: Honesty defines your culture

Honesty is a fundamental part of your culture. That is, honesty or dishonesty, like it or not. Honesty is better. Be honest about your work, your management, and yourself. Remember that honesty has nothing to do with being nice. Being nice doesn't mean being honest. Being mean doesn't mean being honest. But being honest might mean uncomfortable conversations.

A person's success in life can usually be measured by the number of uncomfortable conversations he or she is willing to have.

— Tim Ferris

3️⃣ Chris: Time is precious and easily chewed away

Anything and everything is a threat to your time. Slice away what isn’t core to your business. You'll be drowning for time soon enough, so spend it on what really matters to your business. This is where technical debt comes in, and being careful about where you acquire it. You'll make mistakes, but a better you can recover from them. Pay the debts and move on.

2️⃣ Alex: Do not poke

It's easy to poke at problems. Take a guess, try it, and if it seems to work, do it and move on. Don't do that. Draw a line in the sand. Stop poking. Slow down and deeply understand the problem. Read the source code. You'll understand the problem better if you move slowly. Eventually, that style of slow problem-solving will feel smooth, and that smoothness will, ironically, help you move faster.

Slow is smooth and smooth is fast.

— Navy Seals saying

1️⃣ Chris: Here are your cheat codes: writing, persistence, and positivity

If anything has given me, and by extension CodePen, a jump in this world, it is these three things. You can build an audience through writing. An audience of people that trust you and like you and will try the things you make. The ability to communicate well with words will serve you forever, inside and outside your company. Persistence is a byproduct of having a good idea, knowing it, and having the wherewithal to see it through. A business is not built in 6 months. Stick with your good idea, it's the only way. Positivity ties it all together. Writing is your vehicle for telling your tribe, over and over, that everything is going to be great and you'll be there to help make sure it is.

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com/codepen. Take your first step toward an organized, happier team, today.

]]> https://blog.codepen.io/wp-content/uploads/2022/07/np_hang-ten_4811048_000000.svg 379: Chris & Alex have been running CodePen for 10 Years. What have they learned? Here’s the top 10! false no 0:00 No no 378: Lee Martin https://blog.codepen.io/2022/07/27/378-lee-martin/ Wed, 27 Jul 2022 21:57:47 +0000 https://blog.codepen.io/?p=17147 This week I got to speak with Lee Martin! Lee is a fascinating fella, due in part to him having a job I think we all want: designing weird cool digital experiences for good bands. Fortunately for us, he often writes about them. Just check out the Inter Dimensional Video Player for Lord Huron, for example, or Using Three.js to Hear the Dawn with Jack White. Keep up with Lee on Instagram, Twitter, or his personal site. He's overflowing with ideas, not just doing all the freelancing but taking some of those ideas and scaling them, like he's doing with Turn, Mock, and Listening Party. We got a chance to talk about a handful of Lee's favorite Pens, but there are more in the Collection he made.

Time Jumps

Sponsor: Whiskey Web and Whatnot

Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, Wes Bos, and the incomparable Chris Coyier! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, favorite power tools, the best casseroles, and of course whiskey!

]]> This week I got to speak with Lee Martin! Lee is a fascinating fella, due in part to him having a job I think we all want: designing weird cool digital experiences for good bands. Fortunately for us, he often writes about them. Just check out the Inter Dimensional Video Player for Lord Huron, for example, or Using Three.js to Hear the Dawn with Jack White. Keep up with Lee on Instagram, Twitter, or his personal site. He's overflowing with ideas, not just doing all the freelancing but taking some of those ideas and scaling them, like he's doing with Turn, Mock, and Listening Party. We got a chance to talk about a handful of Lee's favorite Pens, but there are more in the Collection he made.

Time Jumps

Sponsor: Whiskey Web and Whatnot

Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, Wes Bos, and the incomparable Chris Coyier! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, favorite power tools, the best casseroles, and of course whiskey!

]]> https://blog.codepen.io/wp-content/uploads/2022/07/np_record_15406_000000.svg 378: Lee Martin false no 0:00 No no 377: Jase Smith https://blog.codepen.io/2022/07/20/377-jase-smith/ Wed, 20 Jul 2022 18:46:52 +0000 https://blog.codepen.io/?p=17132 This week I got to speak with Jase Smith, a kindred spirit bouncing across the designer/developer line out of Denver, Colorado. Before you know it, we're doing a bit of a rundown of Jase's career path, all the way from that all-too-familiar fake-it-til-you-make it early days to being a successful developer and mentoring as a form of industry payback.

We didn't get to talk about as many of them as I would have liked, but Jase graciously made a Collection of some of his favorites. Quite a few explorations of color!

Jase is on Twitter as @CSSBites, has a site of the same name, and is on LinkedIn.

Time Jumps

Sponsor: Reflect

Reflect is an automated no-code testing tool that enables you to shave countless hours off of your end-to-end testing timeline, from writing and maintaining tests to root-causing and debugging errors. Features include cross-browser testing, email/SMS validation, visual validation, and more. All plans include unlimited users and unlimited test creation.

As a special offer for CodePen listeners, get a free t-shirt when you sign up through our referral link. To start your free two-week trial and claim your free t-shirt, visit reflect.run/codepen.

]]> This week I got to speak with Jase Smith, a kindred spirit bouncing across the designer/developer line out of Denver, Colorado. Before you know it, we're doing a bit of a rundown of Jase's career path, all the way from that all-too-familiar fake-it-til-you-make it early days to being a successful developer and mentoring as a form of industry payback.

We didn't get to talk about as many of them as I would have liked, but Jase graciously made a Collection of some of his favorites. Quite a few explorations of color!

Jase is on Twitter as @CSSBites, has a site of the same name, and is on LinkedIn.

Time Jumps

Sponsor: Reflect

Reflect is an automated no-code testing tool that enables you to shave countless hours off of your end-to-end testing timeline, from writing and maintaining tests to root-causing and debugging errors. Features include cross-browser testing, email/SMS validation, visual validation, and more. All plans include unlimited users and unlimited test creation.

As a special offer for CodePen listeners, get a free t-shirt when you sign up through our referral link. To start your free two-week trial and claim your free t-shirt, visit reflect.run/codepen.

]]> https://blog.codepen.io/wp-content/uploads/2022/07/np_color_2225528_000000.svg 377: Jase Smith false no 0:00 No no 376: Ilithya https://blog.codepen.io/2022/07/13/376-ilithya/ Wed, 13 Jul 2022 17:17:14 +0000 https://blog.codepen.io/?p=17087 This week I got to speak with Ilithya, who put together some favorite Pens, some of which we actually manage to get to during the show 😂. Like our chat with Lea Rosema, we really get into the magic of Shaders. Shaders are certainly of the web, but often feel extraordinary, giving off a "the web can do that?" kind of feeling. Check out: personal website, collaboration with Eliza Struthers-Jobin, shaders tutorial video with Alex Trost, NFTs.

Time Jumps

Sponsor: Memberful

Memberful is easy to use, best-in-class membership software for independent creators, publishers, podcasters, educators, and more. We take care of the hard stuff so you can focus on what you do best, while earning revenue quickly. With Memberful, you have full control and ownership of all things related to your brand, your audience, and your finances.

]]> This week I got to speak with Ilithya, who put together some favorite Pens, some of which we actually manage to get to during the show 😂. Like our chat with Lea Rosema, we really get into the magic of Shaders. Shaders are certainly of the web, but often feel extraordinary, giving off a "the web can do that?" kind of feeling. Check out: personal website, collaboration with Eliza Struthers-Jobin, shaders tutorial video with Alex Trost, NFTs.

Time Jumps

Sponsor: Memberful

Memberful is easy to use, best-in-class membership software for independent creators, publishers, podcasters, educators, and more. We take care of the hard stuff so you can focus on what you do best, while earning revenue quickly. With Memberful, you have full control and ownership of all things related to your brand, your audience, and your finances.

]]> https://blog.codepen.io/wp-content/uploads/2022/07/np_wave_3248845_000000.svg 376: Ilithya false no 0:00 No no 375: Craig Roblewsky https://blog.codepen.io/2022/07/06/375-craig-roblewsky/ Wed, 06 Jul 2022 15:07:36 +0000 https://blog.codepen.io/?p=17077 This week I got to speak with Craig Roblewsky! Craig does a lot of web animation and hangs around the Greensock forums quite a bit, giving him a unique perspective on solving animation problems and coming up with clever solutions to them. Craig has his own site, motiontricks.com, as well which is an educational resource for animation. We get into all that, some of Craig's own favorite Pens, and some of Craig's other professional history on the show.

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com/codepen. Take your first step toward an organized, happier team, today.

]]> This week I got to speak with Craig Roblewsky! Craig does a lot of web animation and hangs around the Greensock forums quite a bit, giving him a unique perspective on solving animation problems and coming up with clever solutions to them. Craig has his own site, motiontricks.com, as well which is an educational resource for animation. We get into all that, some of Craig's own favorite Pens, and some of Craig's other professional history on the show.

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com/codepen. Take your first step toward an organized, happier team, today.

]]> https://blog.codepen.io/wp-content/uploads/2022/07/np_sitting-fox_4332366_000000.svg 375: Craig Roblewsky false no 0:00 No no 374: Kevin Powell https://blog.codepen.io/2022/07/01/374-kevin-powell/ Fri, 01 Jul 2022 21:10:57 +0000 https://blog.codepen.io/?p=17071 This week I got to speak with Kevin Powell! Kevin has had tremendous success on YouTube educating people about CSS 'n' friends. But like so many good content creators, he'll meet with where you are at and what you need — his personal site has written articles, resources, courses, and a newsletter. Kevin is a joy to talk to. We took the opportunity to nerd out on a variety of mostly CSS-related things.

Time Jumps

]]> This week I got to speak with Kevin Powell! Kevin has had tremendous success on YouTube educating people about CSS 'n' friends. But like so many good content creators, he'll meet with where you are at and what you need — his personal site has written articles, resources, courses, and a newsletter. Kevin is a joy to talk to. We took the opportunity to nerd out on a variety of mostly CSS-related things.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2022/06/np_youtube_4393877_000000.svg 374: Kevin Powell false no 0:00 No no 373: Script Injection with Cloudflare Workers https://blog.codepen.io/2022/06/22/373-script-injection-with-cloudflare-workers/ Wed, 22 Jun 2022 17:45:31 +0000 https://blog.codepen.io/?p=17057 This week Shaw and Chris dig into some deepnerd tech stuff: manipulating HTML. In a perfect world, perhaps we wouldn't need to, but today, and even moreso in the foreseeable future of CodePen, we need to do a smidge of HTML manipulation on the HTML that you write or that is generated by code you write on CodePen. A tiny example is removing the autofocus attribute when a Pen in shown in a grid view <iframe>. A more significant example is that we need to inject some of our own JavaScript into your Pen, to power features of CodePen itself, like the console, which receives information from your rendered page (like logs, errors, etc) and can push commands to execute as well.

So how do we inject a <script> into absolutely 100% arbitrary HTML? Well, it's tricky. We're starting to do it with Cloudflare Workers and the HTMLRewriter stuff they can do. Even then, it's not particularly easy, with lots of edge cases. Thank gosh for Miniflare for the ability to work on this stuff locally and write tests for it.

Time Jumps

]]> This week Shaw and Chris dig into some deepnerd tech stuff: manipulating HTML. In a perfect world, perhaps we wouldn't need to, but today, and even moreso in the foreseeable future of CodePen, we need to do a smidge of HTML manipulation on the HTML that you write or that is generated by code you write on CodePen. A tiny example is removing the autofocus attribute when a Pen in shown in a grid view <iframe>. A more significant example is that we need to inject some of our own JavaScript into your Pen, to power features of CodePen itself, like the console, which receives information from your rendered page (like logs, errors, etc) and can push commands to execute as well.

So how do we inject a <script> into absolutely 100% arbitrary HTML? Well, it's tricky. We're starting to do it with Cloudflare Workers and the HTMLRewriter stuff they can do. Even then, it's not particularly easy, with lots of edge cases. Thank gosh for Miniflare for the ability to work on this stuff locally and write tests for it.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2022/06/np_script_3550563_000000.svg 373: Script Injection with Cloudflare Workers false no 0:00 No no 372: Trends https://blog.codepen.io/2022/06/15/372-trends/ Wed, 15 Jun 2022 20:43:46 +0000 https://blog.codepen.io/?p=17050 This week Marie and Chris get together to chat about what's been hot hot hot on CodePen lately. We've discovered there is a really taking to the creamy cardstock look, for one thing. Typography is always great, but we're seeing more typographic trickery often including variable fonts. While not new, there are still loads of really wonderfully creative Pens using Three.js and p5.js. Neon-on-dark is a fresh look. We get into those and more, a bit sneakily as we can take an internal look at what the Top 100 might look like this year, but we can't share those details too early!

Time Jumps

]]> This week Marie and Chris get together to chat about what's been hot hot hot on CodePen lately. We've discovered there is a really taking to the creamy cardstock look, for one thing. Typography is always great, but we're seeing more typographic trickery often including variable fonts. While not new, there are still loads of really wonderfully creative Pens using Three.js and p5.js. Neon-on-dark is a fresh look. We get into those and more, a bit sneakily as we can take an internal look at what the Top 100 might look like this year, but we can't share those details too early!

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2022/06/np_trend_2592004_000000.svg 372: Trends false no 0:00 No no 371: Jon Kantner https://blog.codepen.io/2022/06/08/371-jon-kantner/ Wed, 08 Jun 2022 13:07:43 +0000 https://blog.codepen.io/?p=17000 I got to speak to Jon Kantner! Jon is an incredibly prolific creator, and I believe has the most appearances in the CodePen Spark of any creator. Like so many other creators I've talked to Jon also shares what he knows in a variety of ways, like writing (see his personal site, or articles he wrote when I ran CSS-Tricks). We got to chat about some of his iconic Pens, his work, and some past fascinations like Tweet-sized code experiments. Follow him on Twitter here.

Time Jumps

]]> I got to speak to Jon Kantner! Jon is an incredibly prolific creator, and I believe has the most appearances in the CodePen Spark of any creator. Like so many other creators I've talked to Jon also shares what he knows in a variety of ways, like writing (see his personal site, or articles he wrote when I ran CSS-Tricks). We got to chat about some of his iconic Pens, his work, and some past fascinations like Tweet-sized code experiments. Follow him on Twitter here.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2022/06/np_train_4560436_000000.svg 371: Jon Kantner false no 0:00 No no 370: Alex Trost https://blog.codepen.io/2022/06/01/370-alex-trost/ Wed, 01 Jun 2022 15:21:42 +0000 https://blog.codepen.io/?p=16971 This week I got to speak with Alex Trost! Alex has been hard at work created Frontend Horse, a clever brand celebrating the beautiful and clever things in our industry via a newsletter, articles, streaming, a Discord community and more. This is the way to do it!

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company's information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com/codepen. Take your first step toward an organized, happier team, today.

]]> This week I got to speak with Alex Trost! Alex has been hard at work created Frontend Horse, a clever brand celebrating the beautiful and clever things in our industry via a newsletter, articles, streaming, a Discord community and more. This is the way to do it!

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company's information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com/codepen. Take your first step toward an organized, happier team, today.

]]> https://blog.codepen.io/wp-content/uploads/2022/05/np_horse_4196145_000000.svg 370: Alex Trost false no 0:00 No no 369: With Chris Smith https://blog.codepen.io/2022/05/25/369-with-chris-smith/ Wed, 25 May 2022 21:34:21 +0000 https://blog.codepen.io/?p=16944 This week I got to speak with Chris Smith! We got to talk about all sorts of things from blogging, to pushing the boundaries of CSS, to logic in CSS, to digging into some of Chris' most interesting Pens, to Chris' actual favorite Pen of all time.

Time Jumps

Sponsor: React Summit

Ken Wheeler, Tejas Kumar, Sara Vieira, Tanner Linsley – these are just a few of the names coming to this year’s React Summit, the biggest React conference worldwide. Discover the future of the React and meet thousands of front-end and full-stack engineers!

The format of the event will be hybrid. The first day, June 17, will be streamed from the Amsterdam venue. The second day, June 21, and numerous free workshops will be streamed to the global audience online.

Would you like to participate? Get 10% off on remote & in-person tickets with our discount code CodePen.

]]> This week I got to speak with Chris Smith! We got to talk about all sorts of things from blogging, to pushing the boundaries of CSS, to logic in CSS, to digging into some of Chris' most interesting Pens, to Chris' actual favorite Pen of all time.

Time Jumps

Sponsor: React Summit

Ken Wheeler, Tejas Kumar, Sara Vieira, Tanner Linsley – these are just a few of the names coming to this year’s React Summit, the biggest React conference worldwide. Discover the future of the React and meet thousands of front-end and full-stack engineers!

The format of the event will be hybrid. The first day, June 17, will be streamed from the Amsterdam venue. The second day, June 21, and numerous free workshops will be streamed to the global audience online.

Would you like to participate? Get 10% off on remote & in-person tickets with our discount code CodePen.

]]> https://blog.codepen.io/wp-content/uploads/2022/05/np_game_1127407_000000.svg 369: With Chris Smith false no 0:00 No no 368: Lea Rosema https://blog.codepen.io/2022/05/18/368-lea-rosema/ Wed, 18 May 2022 13:35:56 +0000 https://blog.codepen.io/?p=16867 I got to talk with Lea Rosema this week! She's an incredibly talented digital artist and front-end developer. She does quite a bit of art with some of the trickiest web technology out there: shaders! But rather than just learn it and use it, she helps other people learn and get more out of it. Several times that has taken the shape of Web Components. For example, a <shader-art> Web Component that takes some of the boilerplate work out of designing with them. See this Collection of examples.

Time Jumps

Sponsor: JS Nation

Evan You, Kyle Simpson, Addy Osmani, Sarah Drasner – these are just a few of the speakers coming to this year’s JSNation, a 2-day conference focusing exclusively on JavaScript development. Discover the future of the JavaScript ecosystem and get connected to its stellar crowd! The format of the event will be hybrid. The first day (June 16) will be streamed from the Amsterdam venue. The second day (June 20) & numerous free workshops will be streamed to the global audience online.

Would you like to participate? Get 10% off on remote & in-person tickets with our discount code CodePen.

]]> I got to talk with Lea Rosema this week! She's an incredibly talented digital artist and front-end developer. She does quite a bit of art with some of the trickiest web technology out there: shaders! But rather than just learn it and use it, she helps other people learn and get more out of it. Several times that has taken the shape of Web Components. For example, a <shader-art> Web Component that takes some of the boilerplate work out of designing with them. See this Collection of examples.

Time Jumps

Sponsor: JS Nation

Evan You, Kyle Simpson, Addy Osmani, Sarah Drasner – these are just a few of the speakers coming to this year’s JSNation, a 2-day conference focusing exclusively on JavaScript development. Discover the future of the JavaScript ecosystem and get connected to its stellar crowd! The format of the event will be hybrid. The first day (June 16) will be streamed from the Amsterdam venue. The second day (June 20) & numerous free workshops will be streamed to the global audience online.

Would you like to participate? Get 10% off on remote & in-person tickets with our discount code CodePen.

]]> https://blog.codepen.io/wp-content/uploads/2022/05/np_sunglasses_2810285_000000-1.svg 368: Lea Rosema false no 0:00 No no 367: With Micah Godbolt https://blog.codepen.io/2022/05/11/367-with-micah-godbolt/ Wed, 11 May 2022 15:26:25 +0000 https://blog.codepen.io/?p=16845 I got to talk with Micah Godbolt this week! Micah is is a long-hauler at Microsoft working on Design Systems and such. His CodePen account looks a lot like mine: steady consistent usage of "just trying to figure something out" Pens sprinkled with some ideas that somehow seem to click with the wider front-end world. I found it fascinating that putting the word "Design Systems" into his book title "Front-end Architecture for Design Systems" was suggested by the publisher, and they were right! Turns out the term Design Systems clicked a lot harder since the 2016 publication and I'm sure hasn't hurt sales!

Time Jumps

Sponsor: Linode

Visit linode.com/codepen and see why over a million developers trust Linode for the infrastructure.  From their award-winning support (offered 24/7/365 to every level of user) to ease of use and set up; it’s clear why developers have been trusting Linode for projects both big and small since 2003.   Linode offers the industry’s best price-to-performance value for all compute instances, including shared, dedicated, high memory, and GPUs. Linode makes cloud computing simple, affordable, and accessible allowing you to focus on your customers, not your infrastructure.  Visit linode.com/codepen, create a free account and you’ll get $100 in credit.

]]> I got to talk with Micah Godbolt this week! Micah is is a long-hauler at Microsoft working on Design Systems and such. His CodePen account looks a lot like mine: steady consistent usage of "just trying to figure something out" Pens sprinkled with some ideas that somehow seem to click with the wider front-end world. I found it fascinating that putting the word "Design Systems" into his book title "Front-end Architecture for Design Systems" was suggested by the publisher, and they were right! Turns out the term Design Systems clicked a lot harder since the 2016 publication and I'm sure hasn't hurt sales!

Time Jumps

Sponsor: Linode

Visit linode.com/codepen and see why over a million developers trust Linode for the infrastructure.  From their award-winning support (offered 24/7/365 to every level of user) to ease of use and set up; it’s clear why developers have been trusting Linode for projects both big and small since 2003.   Linode offers the industry’s best price-to-performance value for all compute instances, including shared, dedicated, high memory, and GPUs. Linode makes cloud computing simple, affordable, and accessible allowing you to focus on your customers, not your infrastructure.  Visit linode.com/codepen, create a free account and you’ll get $100 in credit.

]]> https://blog.codepen.io/wp-content/uploads/2022/05/np_bird_4312581_000000.svg 367: With Micah Godbolt false no 0:00 No no 366: Paulina Hetman https://blog.codepen.io/2022/05/05/366-paulina-hetman/ Thu, 05 May 2022 13:00:15 +0000 https://blog.codepen.io/?p=16800 I got to talk to Paulina Hetman this week! Paulina is a heck of a creative coder, using her skills as an illustrator and all-around web developer to make ideas come to life. And she doesn't keep all those ideas to herself, she spends time educating other budding developers both professionally and by building courses and things like her incredibly clever quizzes (as Pens!).

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company's information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com/codepen. Take your first step toward an organized, happier team, today.

]]> I got to talk to Paulina Hetman this week! Paulina is a heck of a creative coder, using her skills as an illustrator and all-around web developer to make ideas come to life. And she doesn't keep all those ideas to herself, she spends time educating other budding developers both professionally and by building courses and things like her incredibly clever quizzes (as Pens!).

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your company's information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com/codepen. Take your first step toward an organized, happier team, today.

]]> https://blog.codepen.io/wp-content/uploads/2022/05/np_quiz_36447_000000.svg 366: Paulina Hetman false no 0:00 No no 365: Klare https://blog.codepen.io/2022/04/27/365-klare/ Wed, 27 Apr 2022 21:42:45 +0000 https://blog.codepen.io/?p=16788 Klare is moving on from design at CodePen to design at GitHub. Huge congrats Klare! If you didn't know Klare was our one and only dedicated designer here at CodePen and left a massive mark here in the design and UX of CodePen, the app, as well as internally in our organization practices. I'm talking with Klare here just a few days before her last day to reflect on her years here.

Time Jumps

]]> Klare is moving on from design at CodePen to design at GitHub. Huge congrats Klare! If you didn't know Klare was our one and only dedicated designer here at CodePen and left a massive mark here in the design and UX of CodePen, the app, as well as internally in our organization practices. I'm talking with Klare here just a few days before her last day to reflect on her years here.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2022/04/np_hands_117108_000000.svg 365: Klare false no 0:00 No no 364: Varun Vachhar https://blog.codepen.io/2022/04/20/364-varun-vachhar/ Wed, 20 Apr 2022 14:26:16 +0000 https://blog.codepen.io/?p=16773 I got to talk to Varun! Varun is an incredible artist and would have been interesting to talk with him about literally anything, but since he's dipped numerous toes into the world of NFTs, I wanted to chat with him about that in conjunction with his own art and other artists he's a fan of.

Time Jumps

Sponsor: Linode

Visit linode.com/codepen and see why over a million developers trust Linode for the infrastructure.  From their award-winning support (offered 24/7/365 to every level of user) to ease of use and set up; it’s clear why developers have been trusting Linode for projects both big and small since 2003.   Linode offers the industry’s best price-to-performance value for all compute instances, including shared, dedicated, high memory, and GPUs. Linode makes cloud computing simple, affordable, and accessible allowing you to focus on your customers, not your infrastructure.  Visit linode.com/codepen, create a free account and you’ll get $100 in credit.

]]> I got to talk to Varun! Varun is an incredible artist and would have been interesting to talk with him about literally anything, but since he's dipped numerous toes into the world of NFTs, I wanted to chat with him about that in conjunction with his own art and other artists he's a fan of.

Time Jumps

Sponsor: Linode

Visit linode.com/codepen and see why over a million developers trust Linode for the infrastructure.  From their award-winning support (offered 24/7/365 to every level of user) to ease of use and set up; it’s clear why developers have been trusting Linode for projects both big and small since 2003.   Linode offers the industry’s best price-to-performance value for all compute instances, including shared, dedicated, high memory, and GPUs. Linode makes cloud computing simple, affordable, and accessible allowing you to focus on your customers, not your infrastructure.  Visit linode.com/codepen, create a free account and you’ll get $100 in credit.

]]> https://blog.codepen.io/wp-content/uploads/2022/04/np_clad-pipes_2906630_000000.svg 364: Varun Vachhar false no 0:00 No no 363: Kyle Shook https://blog.codepen.io/2022/04/13/363-kyle-shook/ Wed, 13 Apr 2022 18:56:01 +0000 https://blog.codepen.io/?p=16756 This week I got a chance to talk to Kyle Shook. Kyle has started a new job at Foxtrot so we talked about what that process was like. In addition to creating all sorts of incredibly creative work on CodePen (just look at this Collection of Menus), Kyle helps other people level up their front-end skills too, with sites like Frontend Practice.

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your companies information, but helps with project management as well. We know that all to well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com/codepen. Take your first step toward an organized, happier team, today.

]]> This week I got a chance to talk to Kyle Shook. Kyle has started a new job at Foxtrot so we talked about what that process was like. In addition to creating all sorts of incredibly creative work on CodePen (just look at this Collection of Menus), Kyle helps other people level up their front-end skills too, with sites like Frontend Practice.

Time Jumps

Sponsor: Notion

Notion is an amazing collaborative tool that not only helps organize your companies information, but helps with project management as well. We know that all to well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com/codepen. Take your first step toward an organized, happier team, today.

]]> https://blog.codepen.io/wp-content/uploads/2022/04/np_lightning_4730659_000000.svg 363: Kyle Shook false no 0:00 No no 362: Chris Nager https://blog.codepen.io/2022/04/06/362-chris-nager/ Wed, 06 Apr 2022 14:37:52 +0000 https://blog.codepen.io/?p=16718 This week I got to speak with Chris Nager! I've known Chris quite a while. I remember being inspired by his hand-drawn SVG plus symbol and subsequent guide to <path> commands, which inspired my own shortly after I was properly obsessed with SVG. We talk about all sorts of things like accessibility, how far CSS has come, and some of the amazing stuff that has shipped recently in Safari Technical Preview. Check out Chris' Twitter, personal site, and classic great project Give 'n' Go, a CodePen/Dribbble crossover website.

Time Jumps

]]> This week I got to speak with Chris Nager! I've known Chris quite a while. I remember being inspired by his hand-drawn SVG plus symbol and subsequent guide to <path> commands, which inspired my own shortly after I was properly obsessed with SVG. We talk about all sorts of things like accessibility, how far CSS has come, and some of the amazing stuff that has shipped recently in Safari Technical Preview. Check out Chris' Twitter, personal site, and classic great project Give 'n' Go, a CodePen/Dribbble crossover website.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2022/04/np_balls_426395_000000-1.svg 362: Chris Nager false no 0:00 No no 361: Forks in a New Tab https://blog.codepen.io/2022/03/30/361-forks-in-a-new-tab/ Thu, 31 Mar 2022 00:43:47 +0000 https://blog.codepen.io/?p=16688 If you Command (Mac) or Control (PC) click the Fork button, it will open the newly forked Pen in a new tab in your browser. That's new behavior. Before, it would open the fork in the same tab, no matter how you click. That was unfortunate, as Cassie called out:

Why didn't it work like this before? Well, that's what Shaw and I get into in this podcast. It's a smidge complicated. The root of it is that that Fork button isn't a hyperlink. It's a button handled by JavaScript because of the nature of how it works (a fork might have data that only the client knows about: unsaved code changes). But Shaw found a way to make it work anyway, by essentially passing the metaKey information through all the forking process until that moment we had an opportunity to open that new tab.

Time Jumps

Sponsor: Notion

Notion is an incredible organizational tool. Individuals can get a ton out of it, but I find the most benefit in making it a home base for teams. It can replace so many separate tools (documents, meeting notes, todos, kanbans, calendars, etc) that it really becomes the hub of doing work, and everything stays far more organized than disparate tools ever could.

]]> If you Command (Mac) or Control (PC) click the Fork button, it will open the newly forked Pen in a new tab in your browser. That's new behavior. Before, it would open the fork in the same tab, no matter how you click. That was unfortunate, as Cassie called out:

Why didn't it work like this before? Well, that's what Shaw and I get into in this podcast. It's a smidge complicated. The root of it is that that Fork button isn't a hyperlink. It's a button handled by JavaScript because of the nature of how it works (a fork might have data that only the client knows about: unsaved code changes). But Shaw found a way to make it work anyway, by essentially passing the metaKey information through all the forking process until that moment we had an opportunity to open that new tab.

Time Jumps

Sponsor: Notion

Notion is an incredible organizational tool. Individuals can get a ton out of it, but I find the most benefit in making it a home base for teams. It can replace so many separate tools (documents, meeting notes, todos, kanbans, calendars, etc) that it really becomes the hub of doing work, and everything stays far more organized than disparate tools ever could.

]]> https://blog.codepen.io/wp-content/uploads/2022/03/np_fork_2417438_000000.svg 361: Forks in a New Tab false no 0:00 No no 360: Sarah Fossheim https://blog.codepen.io/2022/03/23/360-sarah-fossheim/ Wed, 23 Mar 2022 16:17:31 +0000 https://blog.codepen.io/?p=16666 I got to talk to Sarah Fossheim this week! One of the impressive things that Sarah does is near photograph-quality recreations of iconic old technology in HTML & CSS. I enjoyed the fact that neither of us quite totally knows what some of these machines even did, but appreciate their incredible aesthetics. Perhaps my favorite part of the conversation was emphasizing that this work, while almost being a relaxing hobby in the vein of knitting, still levels up one's CSS ability. Sarah got me thinking that it's not just CSS, but perhaps equally or more importantly HTML ability, the ability to break down sections into components and think about how smaller parts become a whole, just like any other website work.

Time Jumps

Sponsor: Retool

Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.

Thousands of teams at companies like Amazon, DoorDash, Peloton, and Brex collaborate around custom-built Retool apps to solve internal workflows. To learn more, visit retool.com.

]]> I got to talk to Sarah Fossheim this week! One of the impressive things that Sarah does is near photograph-quality recreations of iconic old technology in HTML & CSS. I enjoyed the fact that neither of us quite totally knows what some of these machines even did, but appreciate their incredible aesthetics. Perhaps my favorite part of the conversation was emphasizing that this work, while almost being a relaxing hobby in the vein of knitting, still levels up one's CSS ability. Sarah got me thinking that it's not just CSS, but perhaps equally or more importantly HTML ability, the ability to break down sections into components and think about how smaller parts become a whole, just like any other website work.

Time Jumps

Sponsor: Retool

Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.

Thousands of teams at companies like Amazon, DoorDash, Peloton, and Brex collaborate around custom-built Retool apps to solve internal workflows. To learn more, visit retool.com.

]]> https://blog.codepen.io/wp-content/uploads/2022/03/np_calculator_4575983_000000.svg 360: Sarah Fossheim false no 0:00 No no 359: Tiffany Choong https://blog.codepen.io/2022/03/16/359-tiffany-choong/ Wed, 16 Mar 2022 13:49:15 +0000 https://blog.codepen.io/?p=16661 I had tons of fun talking to Tiffany Choong this week! I loved learning her process on creating countless code art Pokémon characters. Just look at it and wing it! Wild. While I'm not nearly as creative as Tiffany, I feel some kinship looking through her Pens. Like how there are all these amazingly creative ones that clearly took tons of effort, that don't have nearly the hearts they deserve (c'mon dino loader!), and then relatively simple practical Pens (like a menu) that go nuts with popularity and it's hard to know why.

Time Jumps

]]> I had tons of fun talking to Tiffany Choong this week! I loved learning her process on creating countless code art Pokémon characters. Just look at it and wing it! Wild. While I'm not nearly as creative as Tiffany, I feel some kinship looking through her Pens. Like how there are all these amazingly creative ones that clearly took tons of effort, that don't have nearly the hearts they deserve (c'mon dino loader!), and then relatively simple practical Pens (like a menu) that go nuts with popularity and it's hard to know why.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2022/03/np_pokemon_687284_000000.png 359: Tiffany Choong false no 0:00 No no 358: CJ Gammon https://blog.codepen.io/2022/03/09/358-cj-gammon/ Wed, 09 Mar 2022 21:06:09 +0000 https://blog.codepen.io/?p=16636 I got to chat with CJ Gammon this week! CJ is a creative technologist, a term he's tried to hang onto as he does more development work, so he can continue to communicate that he's a designer as well. CJ has been at Adobe for nearly 10 years and has played with a huge variety of interesting creative technologies.

Time Jumps

]]> I got to chat with CJ Gammon this week! CJ is a creative technologist, a term he's tried to hang onto as he does more development work, so he can continue to communicate that he's a designer as well. CJ has been at Adobe for nearly 10 years and has played with a huge variety of interesting creative technologies.

Time Jumps

]]> https://blog.codepen.io/wp-content/uploads/2022/03/np_fir-trees_1464297_000000.png 358: CJ Gammon false no 33:43 No no 357: Ryan Mulligan https://blog.codepen.io/2022/03/02/357-ryan-mulligan/ Wed, 02 Mar 2022 22:17:43 +0000 https://blog.codepen.io/?p=16609 This week I get to talk to Ryan Mulligan! Ryan put together a Collection of some of his personal picks for favorite Pens and we get a chance to talk through a lot of them. There are some classic moments here I really feel, like when something you consider pretty basic gets way more popular than you ever thought it would. Ryan has a knack for feeling out really cool new technologies and then quickly using them to build great demos that play up what those technologies were born to do.

Time Jumps

Sponsor: Automattic

Automattic are the makers of WordPress.com, the fastest and easiest place to spin up a WordPress site, without sacrificing the power of self-hosted options. If you sell stuff on WordPress.com, the built-in help to do that is powered by WooCommerce, the premier eCommerce solution for WordPress. It's the same WooCommerce whether you are on WordPress.com or not. If you are self-hosted, you can almost certainly take advantage of Jetpack, Automattic's WordPress plugin that adds enormous functionality to WordPress, like a vastly improved site search, real-time backups, security features, and tons more.

]]> This week I get to talk to Ryan Mulligan! Ryan put together a Collection of some of his personal picks for favorite Pens and we get a chance to talk through a lot of them. There are some classic moments here I really feel, like when something you consider pretty basic gets way more popular than you ever thought it would. Ryan has a knack for feeling out really cool new technologies and then quickly using them to build great demos that play up what those technologies were born to do.

Time Jumps

Sponsor: Automattic

Automattic are the makers of WordPress.com, the fastest and easiest place to spin up a WordPress site, without sacrificing the power of self-hosted options. If you sell stuff on WordPress.com, the built-in help to do that is powered by WooCommerce, the premier eCommerce solution for WordPress. It's the same WooCommerce whether you are on WordPress.com or not. If you are self-hosted, you can almost certainly take advantage of Jetpack, Automattic's WordPress plugin that adds enormous functionality to WordPress, like a vastly improved site search, real-time backups, security features, and tons more.

]]> https://blog.codepen.io/wp-content/uploads/2022/03/np_burger_1200609_000000.svg 357: Ryan Mulligan false no 35:12 No no 356: Amit Sheen https://blog.codepen.io/2022/02/23/356-amit-sheen/ Wed, 23 Feb 2022 16:00:44 +0000 https://blog.codepen.io/?p=16577 I got to talk with Amit Sheen this week about his journey into creative coding. Even his early work is incredibly interesting and recent work is downright stunning. Now he's entering a phase of sharing what he knows with workshops like Pushing CSS to the Limit. Here's a list of Pens we talk about in the podcast (mostly):

Time Jumps

Sponsor: Retool

Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.

Thousands of teams at companies like Amazon, DoorDash, Peloton, and Brex collaborate around custom-built Retool apps to solve internal workflows. To learn more, visit retool.com.

]]> I got to talk with Amit Sheen this week about his journey into creative coding. Even his early work is incredibly interesting and recent work is downright stunning. Now he's entering a phase of sharing what he knows with workshops like Pushing CSS to the Limit. Here's a list of Pens we talk about in the podcast (mostly):

Time Jumps

Sponsor: Retool

Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.

Thousands of teams at companies like Amazon, DoorDash, Peloton, and Brex collaborate around custom-built Retool apps to solve internal workflows. To learn more, visit retool.com.

]]> https://blog.codepen.io/wp-content/uploads/2022/02/np_table-tennis_3827077_000000.svg 356: Amit Sheen false no 0:00 No no 355: With Adam Argyle https://blog.codepen.io/2022/02/16/355-with-adam-argyle/ Wed, 16 Feb 2022 15:47:14 +0000 https://blog.codepen.io/?p=16556 I grabbed Adam intending to chat about all sorts of CSS stuff and his work at Google and on VisBug. But then we chatted pretty much the entire time about color and what's coming there to the web platform.

Time Jumps

Sponsor: WordPress.com

WordPress.com is the fastest way to spin up a WordPress site. You'll be able to build any sort of site around it to power your business or hobby. How do you make the most of it? Subscribe to their brand spankin' new YouTube channel to learn more about using your site and what fellow customers are doing with theirs.

]]> I grabbed Adam intending to chat about all sorts of CSS stuff and his work at Google and on VisBug. But then we chatted pretty much the entire time about color and what's coming there to the web platform.

Time Jumps

Sponsor: WordPress.com

WordPress.com is the fastest way to spin up a WordPress site. You'll be able to build any sort of site around it to power your business or hobby. How do you make the most of it? Subscribe to their brand spankin' new YouTube channel to learn more about using your site and what fellow customers are doing with theirs.

]]> https://blog.codepen.io/wp-content/uploads/2022/02/np_color_1250541_000000.svg 355: With Adam Argyle false no 0:00 No no 354: With Steve Gardner https://blog.codepen.io/2022/02/09/354-with-steve-gardner/ Wed, 09 Feb 2022 19:37:53 +0000 https://blog.codepen.io/?p=16509 We've got Steve Gardner on this week! We get into all sorts of nitty gritty detail on the ol' Christmas Cannon, a Pen of pure joy. Steve has some absolute classics that show off the web at it's very best, like the Airplanes Pen. Can't beat Steve's cleverness and execution.

Time Jumps

Sponsor: Netlify

Quirrel Joins Netlify and now we have Scheduled Functions (in Beta)! Wanna run your cloud functions on a time-based schedule? Now you can without even leaving your repo.

]]> We've got Steve Gardner on this week! We get into all sorts of nitty gritty detail on the ol' Christmas Cannon, a Pen of pure joy. Steve has some absolute classics that show off the web at it's very best, like the Airplanes Pen. Can't beat Steve's cleverness and execution.

Time Jumps

Sponsor: Netlify

Quirrel Joins Netlify and now we have Scheduled Functions (in Beta)! Wanna run your cloud functions on a time-based schedule? Now you can without even leaving your repo.

]]> https://blog.codepen.io/wp-content/uploads/2022/02/np_cannon_2054657_000000.svg 354: With Steve Gardner false no 0:00 No no 353: With Louis Hoebregts https://blog.codepen.io/2022/02/02/353-with-louis-hoebregts/ Wed, 02 Feb 2022 15:28:10 +0000 https://blog.codepen.io/?p=16482 Louis Hoebregts (aka Mamboleoo) has been creating wonderfully creative Pens on CodePen for many years. His early work, as we learn on this episode, was inspired by the CSS trickery of Lea Verou! He rotates his tools between HTML and CSS, SVG, and canvas, but tends to have an aspect of motion and the unexpected. Some of the most popular Pens have an aspect of education to them as well. Here's a list of Louis' Pens he chose to talk about, covering some of his history here, each of which is symbolic of a personal era and often unlocking new professional doors:

Time Jumps

Sponsor: WooCommerce

WooCommerce can do it all as far as adding eCommerce functionality to a WordPress site. One off product sales, for sure, including shipping and inventory management and all that. But it can also sell digital products. It can also sell memberships and subscriptions. Put on your what if hat. What if your business sold memberships? What could you offer? It's always worth thinking about.

]]> Louis Hoebregts (aka Mamboleoo) has been creating wonderfully creative Pens on CodePen for many years. His early work, as we learn on this episode, was inspired by the CSS trickery of Lea Verou! He rotates his tools between HTML and CSS, SVG, and canvas, but tends to have an aspect of motion and the unexpected. Some of the most popular Pens have an aspect of education to them as well. Here's a list of Louis' Pens he chose to talk about, covering some of his history here, each of which is symbolic of a personal era and often unlocking new professional doors:

Time Jumps

Sponsor: WooCommerce

WooCommerce can do it all as far as adding eCommerce functionality to a WordPress site. One off product sales, for sure, including shipping and inventory management and all that. But it can also sell digital products. It can also sell memberships and subscriptions. Put on your what if hat. What if your business sold memberships? What could you offer? It's always worth thinking about.

]]> https://blog.codepen.io/wp-content/uploads/2022/02/np_snowman_4562031_000000.svg 353: With Louis Hoebregts false no 0:00 No no 352: With Aysenur Turk https://blog.codepen.io/2022/01/26/352-with-aysenur-turk/ Wed, 26 Jan 2022 20:25:25 +0000 https://blog.codepen.io/?p=16456 Aysenur Turk had a number of appearances on this year's Top Hearted of 2021, including #1! In this podcast, I get to catch up with her, find out where she gets ideas and inspiration, how much time it takes to build something like her amazing layouts, and what her favorites are.

Time Jumps

Sponsor: Retool

Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.

Thousands of teams at companies like Amazon, DoorDash, Peloton, and Brex collaborate around custom-built Retool apps to solve internal workflows. To learn more, visit retool.com.

]]> Aysenur Turk had a number of appearances on this year's Top Hearted of 2021, including #1! In this podcast, I get to catch up with her, find out where she gets ideas and inspiration, how much time it takes to build something like her amazing layouts, and what her favorites are.

Time Jumps

Sponsor: Retool

Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.

Thousands of teams at companies like Amazon, DoorDash, Peloton, and Brex collaborate around custom-built Retool apps to solve internal workflows. To learn more, visit retool.com.

]]> https://blog.codepen.io/wp-content/uploads/2022/01/np_layout_3557831_000000.png 352: With Aysenur Turk false no 0:00 No no 351: Moving to PostgreSQL from MySQL https://blog.codepen.io/2022/01/20/351-moving-to-postgresql-from-mysql/ Thu, 20 Jan 2022 23:09:53 +0000 https://blog.codepen.io/?p=16401 As you read this, CodePen is 100% on PostgreSQL for our main relational database. It was a transition that took a couple weeks of pretty intense effort, and lots of planning and prep before that. I've got Alex on the show to talk about it, as he was the main instigator and led the effort, but everyone contributed in some way.

Wondering why? Well...

  • We were on a pretty old version of MySQL (5.6), and upgrading to something more modern (like 8) would have required just as much effort, so we thought we'd move on to something we saw more value in.
  • We're undertaking big new efforts that require a bunch of data specific work. It'll be more work to change after that, so it felt like a now or never situation.
  • PostgreSQL means consolidating of technology, which is big for our small team. We've done some of this, and it opens the door for more. For example, we can stop using Elasticsearch as a totally separate database for search and lean on PostgreSQL. The same goes for an analytics-focused database, job queuing, and even potentially static asset hosting.

There is a lot to talk about here, so we get into all the nitty-gritty detail, including how we pulled it off with near-zero downtime and the tools involved.

Time Jumps

Sponsor: WooCommerce

WooCommerce is eCommerce for WordPress. It's powerful software in that it can do anything you could ever want to do in selling online. You can sell physical products. You can sell digital and downloadable products. You can sell memberships or tickets or appointments. The sky is the limit. I've used it personally for all those things and have had a great experience every time.

]]> As you read this, CodePen is 100% on PostgreSQL for our main relational database. It was a transition that took a couple weeks of pretty intense effort, and lots of planning and prep before that. I've got Alex on the show to talk about it, as he was the main instigator and led the effort, but everyone contributed in some way.

Wondering why? Well...

  • We were on a pretty old version of MySQL (5.6), and upgrading to something more modern (like 8) would have required just as much effort, so we thought we'd move on to something we saw more value in.
  • We're undertaking big new efforts that require a bunch of data specific work. It'll be more work to change after that, so it felt like a now or never situation.
  • PostgreSQL means consolidating of technology, which is big for our small team. We've done some of this, and it opens the door for more. For example, we can stop using Elasticsearch as a totally separate database for search and lean on PostgreSQL. The same goes for an analytics-focused database, job queuing, and even potentially static asset hosting.

There is a lot to talk about here, so we get into all the nitty-gritty detail, including how we pulled it off with near-zero downtime and the tools involved.

Time Jumps

Sponsor: WooCommerce

WooCommerce is eCommerce for WordPress. It's powerful software in that it can do anything you could ever want to do in selling online. You can sell physical products. You can sell digital and downloadable products. You can sell memberships or tickets or appointments. The sky is the limit. I've used it personally for all those things and have had a great experience every time.

]]> https://blog.codepen.io/wp-content/uploads/2022/01/np_postgresql_3451760_000000.svg 351: Moving to PostgreSQL from MySQL false no 0:00 No no 350: 2021’s Most Hearted https://blog.codepen.io/2022/01/12/350-2021s-most-hearted/ Wed, 12 Jan 2022 15:10:21 +0000 https://blog.codepen.io/?p=16352 It's back! We counted up all the hearts given to every Pen created in 2021 and created a list of the top 100. Marie and Chris chat about this year's list. Who's on it, what's on it, and digging into the numbers where we can.

Remember that people can heart pens up to 3 times each, so if it looks like a Pen lower down the list has more hearts than one higher up the list, it's because of the density of hearts. The number you see on the card only reflects the number of people that have hearted not the true number of hearts.

Lots of folks hitting multiple times. George Francis hit 6(!) times (7, 28, 59, 75, 80, 82), an impressive feat for a member who only joined in late 2020. Four people with four placements: Aysenur Turk (3, 11, 14... and 🥁 1), Yoav Kadosh (17, 33, 72, 95), Dilum Sanjaya (22, 24, 64, 65), and Aybüke Ceylan (38, 46, 63, 91), and a couple of 2-position people. Woot!

"Full page" layouts were quite a trend on the Top 100 this year. That is, Pens that look like complete websites with widgets and cards and navigation and sidebars and the whole nine yards. That's opposed to some past years where more minimal small-yet-surprising Pens were more dominant in the Top 100.

Advice for those shooting for the top? Talk about your work. Almost nobody on the list creates work and then never shares it. Share it on social media, blog about it, make a video, re-promote it multiple times. Be part of the community by liking other people's work. Remember, your hearts come from other CodePen members. Also, feel free to update and revise your Pens. Many of the Top 100 are updated and improved even after their initial wave of popularity.

Time Jumps

Sponsor: Netlify

Did you Netlify offers auth? They call it Netlify Identity. Why would you need auth on a static site? Well, a static site can also by quite dynamic, that's the nature of Jamstack. Say you're building a TODO app. No problem! You can have users sign up and log in. You can store their data in a cloud database. You can pull the data for that user from the database based on information about the logged-in user because of Netlify Identity.

]]> It's back! We counted up all the hearts given to every Pen created in 2021 and created a list of the top 100. Marie and Chris chat about this year's list. Who's on it, what's on it, and digging into the numbers where we can.

Remember that people can heart pens up to 3 times each, so if it looks like a Pen lower down the list has more hearts than one higher up the list, it's because of the density of hearts. The number you see on the card only reflects the number of people that have hearted not the true number of hearts.

Lots of folks hitting multiple times. George Francis hit 6(!) times (7, 28, 59, 75, 80, 82), an impressive feat for a member who only joined in late 2020. Four people with four placements: Aysenur Turk (3, 11, 14... and 🥁 1), Yoav Kadosh (17, 33, 72, 95), Dilum Sanjaya (22, 24, 64, 65), and Aybüke Ceylan (38, 46, 63, 91), and a couple of 2-position people. Woot!

"Full page" layouts were quite a trend on the Top 100 this year. That is, Pens that look like complete websites with widgets and cards and navigation and sidebars and the whole nine yards. That's opposed to some past years where more minimal small-yet-surprising Pens were more dominant in the Top 100.

Advice for those shooting for the top? Talk about your work. Almost nobody on the list creates work and then never shares it. Share it on social media, blog about it, make a video, re-promote it multiple times. Be part of the community by liking other people's work. Remember, your hearts come from other CodePen members. Also, feel free to update and revise your Pens. Many of the Top 100 are updated and improved even after their initial wave of popularity.

Time Jumps

Sponsor: Netlify

Did you Netlify offers auth? They call it Netlify Identity. Why would you need auth on a static site? Well, a static site can also by quite dynamic, that's the nature of Jamstack. Say you're building a TODO app. No problem! You can have users sign up and log in. You can store their data in a cloud database. You can pull the data for that user from the database based on information about the logged-in user because of Netlify Identity.

]]> https://blog.codepen.io/wp-content/uploads/2022/01/np_heart_1235501_000000.svg 350: 2021’s Most Hearted false no 0:00 No no 349: With Olivia https://blog.codepen.io/2022/01/05/349-with-olivia/ Wed, 05 Jan 2022 14:38:28 +0000 https://blog.codepen.io/?p=16336 Olivia Ng has done loads of wonderful work here on CodePen and off (check out her super cool travel bucket list site) She got started just out of pure desire to build things. "I just really like the internet" she told me. Hear hear! Her eye for design takes all her work to the next level. She had a particular focus on grid for a while there, and used those interesting designs to teach it. Also find her on Twitter and on her personal website.

Time Jumps

Sponsor: Jetpack

There are lots of reasons to look at Jetpack for your self-hosted WordPress site. One of which is the powerful search upgrade you get just by flipping a switch. Say you run a lot of WordPress sites, perhaps for clients as an agency would, now Jetpack offers a Licesning Dashboard for managing all the Jetpack subscriptions so that becomes a lot easier.

]]> Olivia Ng has done loads of wonderful work here on CodePen and off (check out her super cool travel bucket list site) She got started just out of pure desire to build things. "I just really like the internet" she told me. Hear hear! Her eye for design takes all her work to the next level. She had a particular focus on grid for a while there, and used those interesting designs to teach it. Also find her on Twitter and on her personal website.

Time Jumps

Sponsor: Jetpack

There are lots of reasons to look at Jetpack for your self-hosted WordPress site. One of which is the powerful search upgrade you get just by flipping a switch. Say you run a lot of WordPress sites, perhaps for clients as an agency would, now Jetpack offers a Licesning Dashboard for managing all the Jetpack subscriptions so that becomes a lot easier.

]]> https://blog.codepen.io/wp-content/uploads/2022/01/np_grid_3550035_000000.svg 349: With Olivia false no 0:00 No no 348: With Jhey https://blog.codepen.io/2021/12/29/348-with-jhey/ Wed, 29 Dec 2021 12:51:20 +0000 https://blog.codepen.io/?p=16306 Jhey Tompkins is one of the most prolific CodePen creators out there! Find him as @jh3y on CodePen and @jh3yy on Twitter. His creations tend to have a twist of whimsey while being beautifully designed as well as pushing the platform in unique ways. You'll always be surprised at a Jhey Pen! I talk with him about the creative process, problem-solving, and sharing what you learn.

Time Jumps

Sponsor: Notion

For companies of all sizes, Notion provides one central and customizable workspace that can be tailored to fit any team and bring all teams together to get more done and move faster. Notion is an all-in-one team collaboration tool that combines note-taking, document sharing, wikis, project management, and much more into one space that’s simple, powerful, and beautifully designed. Find out how Notion may be the missing piece your team needs to grow, get more done, and delight everyone who uses it in the process.

]]> Jhey Tompkins is one of the most prolific CodePen creators out there! Find him as @jh3y on CodePen and @jh3yy on Twitter. His creations tend to have a twist of whimsey while being beautifully designed as well as pushing the platform in unique ways. You'll always be surprised at a Jhey Pen! I talk with him about the creative process, problem-solving, and sharing what you learn.

Time Jumps

Sponsor: Notion

For companies of all sizes, Notion provides one central and customizable workspace that can be tailored to fit any team and bring all teams together to get more done and move faster. Notion is an all-in-one team collaboration tool that combines note-taking, document sharing, wikis, project management, and much more into one space that’s simple, powerful, and beautifully designed. Find out how Notion may be the missing piece your team needs to grow, get more done, and delight everyone who uses it in the process.

]]> https://blog.codepen.io/wp-content/uploads/2021/12/np_bear_1563431_000000.svg 348: With Jhey false no 0:00 No no 347: Using Notion https://blog.codepen.io/2021/12/22/347-using-notion/ Wed, 22 Dec 2021 13:29:01 +0000 https://blog.codepen.io/?p=16293 Rachel and Chris dig into the many, many ways in which we use Notion at CodePen. Heads up, Notion has sponsored a couple of episodes of CodePen Radio lately, but not this. It's just a tool we heavily use and this podcast is all about that sort of thing. Heck, this podcast itself was planned in a calendar database on Notion, which deals with dates, publication status, sponsors, and all sorts of stuff. And it's probably one of the least involved Notion setups we have. Much more involved is stuff like project planning and our individual structures for our company-public weeknotes.

Time Jumps

Sponsor: Jetpack Backups

The big news from Jetpack is that all backups are realtime now. Realtime backups are awesome. Anything that happens on your site, it's backed up immediately. That makes backups extremely useful as there is no risk you have to miss three-quarters of a day of content, purchase, comments or anything else because all you have is daily backups.

]]> Rachel and Chris dig into the many, many ways in which we use Notion at CodePen. Heads up, Notion has sponsored a couple of episodes of CodePen Radio lately, but not this. It's just a tool we heavily use and this podcast is all about that sort of thing. Heck, this podcast itself was planned in a calendar database on Notion, which deals with dates, publication status, sponsors, and all sorts of stuff. And it's probably one of the least involved Notion setups we have. Much more involved is stuff like project planning and our individual structures for our company-public weeknotes.

Time Jumps

Sponsor: Jetpack Backups

The big news from Jetpack is that all backups are realtime now. Realtime backups are awesome. Anything that happens on your site, it's backed up immediately. That makes backups extremely useful as there is no risk you have to miss three-quarters of a day of content, purchase, comments or anything else because all you have is daily backups.

]]> https://blog.codepen.io/wp-content/uploads/2021/12/np_asl-letter-n_4433240_000000.svg 347: Using Notion false no 0:00 No no 346: With Ben Evans https://blog.codepen.io/2021/12/15/346-with-ben-evans/ Wed, 15 Dec 2021 17:40:30 +0000 https://blog.codepen.io/?p=16283 You might recognize Ben Evans from his absolutely incredible CSS "paintings", like the portrait of his daughter or the still life. Paintings aren't the quite word as Ben designs them all to be entirely scalable. And sometimes they have interactivity, like the slight parallax in the Vaccum from Space. Like so many other great artists, Ben's skills aren't isolated to CSS trickery, his portfolio reveals artist exploration across nearly every creative outlet there is, including moss, and as I learned in our conversation, even music.

Time Jumps

Sponsor: Notion

For companies of all sizes, Notion provides one central and customizable workspace that can be tailored to fit any team, and bring all teams together to get more done and move faster. Notion is an all-in-one team collaboration tool that combines note-taking, document sharing, wikis, project management and much more into one space that’s simple, powerful, and beautifully-designed. Find out how Notion may be the missing piece your team needs to grow, get more done, and delight everyone who uses it in the process.

]]> You might recognize Ben Evans from his absolutely incredible CSS "paintings", like the portrait of his daughter or the still life. Paintings aren't the quite word as Ben designs them all to be entirely scalable. And sometimes they have interactivity, like the slight parallax in the Vaccum from Space. Like so many other great artists, Ben's skills aren't isolated to CSS trickery, his portfolio reveals artist exploration across nearly every creative outlet there is, including moss, and as I learned in our conversation, even music.

Time Jumps

Sponsor: Notion

For companies of all sizes, Notion provides one central and customizable workspace that can be tailored to fit any team, and bring all teams together to get more done and move faster. Notion is an all-in-one team collaboration tool that combines note-taking, document sharing, wikis, project management and much more into one space that’s simple, powerful, and beautifully-designed. Find out how Notion may be the missing piece your team needs to grow, get more done, and delight everyone who uses it in the process.

]]> https://blog.codepen.io/wp-content/uploads/2021/12/np_pint_1393701_000000.svg 346: With Ben Evans false no 0:00 No no 345: With Gabrielle Wee https://blog.codepen.io/2021/12/08/345-with-gabrielle-wee/ Wed, 08 Dec 2021 17:58:14 +0000 https://blog.codepen.io/?p=16270 This week I talk with Gabrielle Wee, who's done loads of creative coding work here on CodePen but like so many other creative people we talk to, her creativity explodes into so many other areas like illustration, photography, drawing, and even gardening. Plus a desire to share those techniques. Her path has led her to be working at Apple, a dream job.

Gabrielle on Dribbble and Twitter.

Some advice from Gabrielle: doing work that she was personally interested in, rather than pandering to any recent trend, was much more fun and led to more clear success. Also: be curious and inspect element.

Time Jumps

Sponsor: Jetpack

Jetpack has some good news. All backups are now in realtime, whatever plan you are on or buy. If you already have daily backups on your plan, email them them to get on the new system. The blog post has details. Real time backups are amazing, because you can back up to very specific moments in time (say, right before a certain post was edited) rather than the more broad sword of having to pick a day.

]]> This week I talk with Gabrielle Wee, who's done loads of creative coding work here on CodePen but like so many other creative people we talk to, her creativity explodes into so many other areas like illustration, photography, drawing, and even gardening. Plus a desire to share those techniques. Her path has led her to be working at Apple, a dream job.

Gabrielle on Dribbble and Twitter.

Some advice from Gabrielle: doing work that she was personally interested in, rather than pandering to any recent trend, was much more fun and led to more clear success. Also: be curious and inspect element.

Time Jumps

Sponsor: Jetpack

Jetpack has some good news. All backups are now in realtime, whatever plan you are on or buy. If you already have daily backups on your plan, email them them to get on the new system. The blog post has details. Real time backups are amazing, because you can back up to very specific moments in time (say, right before a certain post was edited) rather than the more broad sword of having to pick a day.

]]> https://blog.codepen.io/wp-content/uploads/2021/12/np_menu_4436150_000000.svg 345: With Gabrielle Wee false no 0:00 No no 344: With Aaron Iker https://blog.codepen.io/2021/12/01/344-with-aaron-iker/ Wed, 01 Dec 2021 18:20:02 +0000 https://blog.codepen.io/?p=16257 Today I get the pleasure of talking with Aaron Iker. Aaron builds incredibly delightful bits and bobs of UI that give you the feeling of hey, I bet I could actually use this! And that's exactly what Aaron wants you to do. He takes care to make sure the code is easy for you to use if you wish. This idea of taking somewhat practical-looking UI elements, like buttons, loaders, toggles, etc, and then making them do something unexpected and fun is a perfect fit for popularity on CodePen. Last year, Aaron occupied 10 spots in the Top 100! Aaron's advice: keep challenging yourself.

Time Jumps

Sponsor: Netlify

Netlify is Jamstack hosting with all sorts of features to help make developing sites easier (have you seen Netlify Dev? You can run the whole platform locally) and deployed sites better. But Netlify is a big place! They do all sorts of community things like Jamstack Explorers, a whole learning platform for leveling up your Jamstack skills. Not to mention several YouTube channels loaded with learning and fun.

]]> Today I get the pleasure of talking with Aaron Iker. Aaron builds incredibly delightful bits and bobs of UI that give you the feeling of hey, I bet I could actually use this! And that's exactly what Aaron wants you to do. He takes care to make sure the code is easy for you to use if you wish. This idea of taking somewhat practical-looking UI elements, like buttons, loaders, toggles, etc, and then making them do something unexpected and fun is a perfect fit for popularity on CodePen. Last year, Aaron occupied 10 spots in the Top 100! Aaron's advice: keep challenging yourself.

Time Jumps

Sponsor: Netlify

Netlify is Jamstack hosting with all sorts of features to help make developing sites easier (have you seen Netlify Dev? You can run the whole platform locally) and deployed sites better. But Netlify is a big place! They do all sorts of community things like Jamstack Explorers, a whole learning platform for leveling up your Jamstack skills. Not to mention several YouTube channels loaded with learning and fun.

]]> https://blog.codepen.io/wp-content/uploads/2021/12/np_confetti_3329228_000000.svg 344: With Aaron Iker false no 0:00 No no 343: cpshots https://blog.codepen.io/2021/11/24/343-cpshots/ Wed, 24 Nov 2021 13:44:28 +0000 https://blog.codepen.io/?p=16172 We've been naming all our services cp____ lately. Get it? cp is short for CodePen. Clever, I know. We have many such services. The latest to join them is cpshots. We've been doing our own screenshotting for a long time now, but like all software we're always working on it for various everchanging reasons.

Robert and I discuss this last round of changes to this service. Part of the purpose of this round is that we wanted to bring image resizing in-house to keep costs down. We need screenshots in various sizes because we literally show them in different circumstances at different sizes, but also because of the responsive images syntax. That resizing we do with sharp via a Lamda. But we only want to do it once! That is, whenever a Pen has changed and the screenshot needs to be regenerated. In order to do that, we send the requests to a Cloudflare Worker which, through the KV store, knows if we already have the screenshot or not. If yes, send it along. If no, head over 1) the screenshotting service to get the screenshot 2) the Lambda for resizing it 3) over to S3 to store the images 4) back to the Cloudflare Worker to serve it.

It's a lot of moving parts! But they are all very smart, simple, tuned parts that are designed to do what they do well. The best parts, for us, is that this project was a great excuse to give Robert a trial-by-fire of a fairly complex tech stack, and that we made literally every part of it work on both development and staging. Making sure every service of CodePen runs locally means that there is no secret magic, we can all work on it and see it working.

Time Jumps

Sponsor: Jetpack and WooCommerce Black Friday Sales

Huge sales in WordPress land! As we write, there is less than 4 days left in the Jetpack Black Friday Sale, which is 60%+ off all Jetpack products and plans for your first year. Over in WooCommerce land, nearly everything in the entire WooCommerce marketplace is 40% off and there is less than 6 days left. It's worth it to spend a little time thinking ahead about what you might need for the year ahead as these deals are pretty massive.

]]> We've been naming all our services cp____ lately. Get it? cp is short for CodePen. Clever, I know. We have many such services. The latest to join them is cpshots. We've been doing our own screenshotting for a long time now, but like all software we're always working on it for various everchanging reasons.

Robert and I discuss this last round of changes to this service. Part of the purpose of this round is that we wanted to bring image resizing in-house to keep costs down. We need screenshots in various sizes because we literally show them in different circumstances at different sizes, but also because of the responsive images syntax. That resizing we do with sharp via a Lamda. But we only want to do it once! That is, whenever a Pen has changed and the screenshot needs to be regenerated. In order to do that, we send the requests to a Cloudflare Worker which, through the KV store, knows if we already have the screenshot or not. If yes, send it along. If no, head over 1) the screenshotting service to get the screenshot 2) the Lambda for resizing it 3) over to S3 to store the images 4) back to the Cloudflare Worker to serve it.

It's a lot of moving parts! But they are all very smart, simple, tuned parts that are designed to do what they do well. The best parts, for us, is that this project was a great excuse to give Robert a trial-by-fire of a fairly complex tech stack, and that we made literally every part of it work on both development and staging. Making sure every service of CodePen runs locally means that there is no secret magic, we can all work on it and see it working.

Time Jumps

Sponsor: Jetpack and WooCommerce Black Friday Sales

Huge sales in WordPress land! As we write, there is less than 4 days left in the Jetpack Black Friday Sale, which is 60%+ off all Jetpack products and plans for your first year. Over in WooCommerce land, nearly everything in the entire WooCommerce marketplace is 40% off and there is less than 6 days left. It's worth it to spend a little time thinking ahead about what you might need for the year ahead as these deals are pretty massive.

]]> https://blog.codepen.io/wp-content/uploads/2021/11/np_screenshot_3971474_000000.svg 343: cpshots false no 0:00 No no 342: Workers https://blog.codepen.io/2021/11/17/342-workers/ Wed, 17 Nov 2021 15:59:47 +0000 https://blog.codepen.io/?p=16007 Chris and Shaw talk about how CodePen uses Cloudflare Works with the KV storage to power several things on CodePen. We do some cool stuff with them, like serve landing pages with the content provided by WordPress yet served on an entirely different Ruby on Rails powered site. We also serve up assets through them which provides lots of nice features both for us and for users indirectly and directly, like resizing and optimization.

Sponsor: Jetpack

Thanks to Jetpack for sponsoring CodePen Radio! Jetpack is a plugin, or perhaps now more like a suite of plugins, that help out your self-hosted WordPress site. Say you have a lot of WordPress sites under your purview and they all have different needs (super normal!). Jetpack has a new billing dashboard that helps manage at all in a sane way. Say you've got two sites that just need daily backup only, all good. Another that uses Jetpack Complete. Another where you use VideoPress and realtime backup, totally covered. You might have dozens or hundreds of sites if you manage client sites, and now this brings it all together in a manageable way.

]]> Chris and Shaw talk about how CodePen uses Cloudflare Works with the KV storage to power several things on CodePen. We do some cool stuff with them, like serve landing pages with the content provided by WordPress yet served on an entirely different Ruby on Rails powered site. We also serve up assets through them which provides lots of nice features both for us and for users indirectly and directly, like resizing and optimization.

Sponsor: Jetpack

Thanks to Jetpack for sponsoring CodePen Radio! Jetpack is a plugin, or perhaps now more like a suite of plugins, that help out your self-hosted WordPress site. Say you have a lot of WordPress sites under your purview and they all have different needs (super normal!). Jetpack has a new billing dashboard that helps manage at all in a sane way. Say you've got two sites that just need daily backup only, all good. Another that uses Jetpack Complete. Another where you use VideoPress and realtime backup, totally covered. You might have dozens or hundreds of sites if you manage client sites, and now this brings it all together in a manageable way.

]]> https://blog.codepen.io/wp-content/uploads/2021/11/np_cloud_888688_000000.svg 342: Workers false no 0:00 No no 341: Challenges https://blog.codepen.io/2021/11/10/341-challenges/ Thu, 11 Nov 2021 00:43:54 +0000 https://blog.codepen.io/?p=16001 Marie and Chris talk about CodePen Challenges, which have been going strong for many years now. The gist is that you pop in and make something along a theme. The "challenge" is doing the work (they aren't meant to be tricky otherwise). We've seen people seriously level up their skills by participating, but of course, there is no obligation, and no prizes other than the satisfaction of a job well done.

One interesting twist is that Chris used to do a lot of the challenges while Marie was running the podcast, but we just up and switched jobs and we both prefer our new jobs much better (for now!).

Time Jumps

Sponsor: Netlify

Just look at the October 2021 changelog at Netlify. They are always building things and making the features they offer better. We know firsthand how difficult that is to pull off, so hats off! One feature (BETA) that is definitely worth a look is On-Demand Builders. What a great idea for making your builds and deploys fast and efficient.

]]> Marie and Chris talk about CodePen Challenges, which have been going strong for many years now. The gist is that you pop in and make something along a theme. The "challenge" is doing the work (they aren't meant to be tricky otherwise). We've seen people seriously level up their skills by participating, but of course, there is no obligation, and no prizes other than the satisfaction of a job well done.

One interesting twist is that Chris used to do a lot of the challenges while Marie was running the podcast, but we just up and switched jobs and we both prefer our new jobs much better (for now!).

Time Jumps

Sponsor: Netlify

Just look at the October 2021 changelog at Netlify. They are always building things and making the features they offer better. We know firsthand how difficult that is to pull off, so hats off! One feature (BETA) that is definitely worth a look is On-Demand Builders. What a great idea for making your builds and deploys fast and efficient.

]]> https://blog.codepen.io/wp-content/uploads/2021/11/np_strong_3519951_000000.svg 341: Challenges false no 0:00 No no 340: With George Francis https://blog.codepen.io/2021/11/03/340-with-george-francis/ Wed, 03 Nov 2021 22:53:47 +0000 https://blog.codepen.io/?p=15997 Chris gets to chat with George Francis, an incredible digital artist in the generative art space as well as educator and all-around developer. George has been all over the place lately, producing really outstanding work (CSS-Tricks uses a Houdini paint worklet from George in the header and footer). Not only does George make art that has that little special something that turns heads, he helps you do it too by sharing all the tools and techniques he uses in blog posts.

Time Jumps

Sponsor: Netlify

Netlify has used the slogan "Static without limits" — which I really like. It's useful to think of Netlify as a static file host as the foundation. That's what Jamstack is, after all. But it doesn't mean that you are limited in what you can build. You can make a site that is every bit dynamic as any other architecture out there, and Netlify not only encourages it but will help you do it with features like hosted cloud functions.

]]> Chris gets to chat with George Francis, an incredible digital artist in the generative art space as well as educator and all-around developer. George has been all over the place lately, producing really outstanding work (CSS-Tricks uses a Houdini paint worklet from George in the header and footer). Not only does George make art that has that little special something that turns heads, he helps you do it too by sharing all the tools and techniques he uses in blog posts.

Time Jumps

Sponsor: Netlify

Netlify has used the slogan "Static without limits" — which I really like. It's useful to think of Netlify as a static file host as the foundation. That's what Jamstack is, after all. But it doesn't mean that you are limited in what you can build. You can make a site that is every bit dynamic as any other architecture out there, and Netlify not only encourages it but will help you do it with features like hosted cloud functions.

]]> https://blog.codepen.io/wp-content/uploads/2021/11/np_eyes_912605_000000.svg 340: With George Francis false no 0:00 No no 339: Apollo at CodePen https://blog.codepen.io/2021/10/27/339-apollo-at-codepen/ Wed, 27 Oct 2021 22:17:43 +0000 https://blog.codepen.io/?p=15977 Rachel and Chris chat all things Apollo GraphQL. Apollo is in this weird category of software where like by far most websites do not need it or anything like it. But for CodePen, we consider it nearly essential. The typical sales pitch for GraphQL applies to us for sure (e.g. only ask for the data you need!) but you can add to that the fact that it is empowering for front-end developers, which we have plenty of here on the CodePen Staff. But beyond GraphQL, we need ergonomic ways to write those queries and trust technology to do the right things. For example, 15 components on any given page might need to know the PRO status of a user, and thus be part of that components query, but the network very much does not need to do 15 requests. Apollo does stuff like figuring out what the page needs in aggregate and requesting is and dissemeninating that information as efficiently as possible and caching it. Plus we leverage Apollo for client-only state too, meaning we have a unified system for state management that plays very nicely in our React-based world.

Time Jumps

Sponsor: Jetpack Backup Stand-Alone Plugin

If the only feature of Jetpack you need is the backups, now you can install that as a stand-alone plugin and have a paid plan for that feature alone. Built and hosted on WordPress.com’s secure infrastructure, Jetpack Backup provides peace of mind — you can rest easy knowing that what you’ve built will always be there and can be easily recovered in an emergency.

]]> Rachel and Chris chat all things Apollo GraphQL. Apollo is in this weird category of software where like by far most websites do not need it or anything like it. But for CodePen, we consider it nearly essential. The typical sales pitch for GraphQL applies to us for sure (e.g. only ask for the data you need!) but you can add to that the fact that it is empowering for front-end developers, which we have plenty of here on the CodePen Staff. But beyond GraphQL, we need ergonomic ways to write those queries and trust technology to do the right things. For example, 15 components on any given page might need to know the PRO status of a user, and thus be part of that components query, but the network very much does not need to do 15 requests. Apollo does stuff like figuring out what the page needs in aggregate and requesting is and dissemeninating that information as efficiently as possible and caching it. Plus we leverage Apollo for client-only state too, meaning we have a unified system for state management that plays very nicely in our React-based world.

Time Jumps

Sponsor: Jetpack Backup Stand-Alone Plugin

If the only feature of Jetpack you need is the backups, now you can install that as a stand-alone plugin and have a paid plan for that feature alone. Built and hosted on WordPress.com’s secure infrastructure, Jetpack Backup provides peace of mind — you can rest easy knowing that what you’ve built will always be there and can be easily recovered in an emergency.

]]> https://blog.codepen.io/wp-content/uploads/2021/10/np_space_1720393_000000.svg 339: Apollo at CodePen false no 0:00 No no 338: With Lynn Fisher https://blog.codepen.io/2021/10/20/338-with-lynn-fisher/ Wed, 20 Oct 2021 15:49:43 +0000 https://blog.codepen.io/?p=15971 Lynn Fisher is my guest this week! You might know her as @lynnandtonic on CodePen and most other platforms. We get to talk about her A Single Div project and all the CSS magic that goes into those, other creative projects and why those are so satisfying, a recent transition over to Netlify, and the fact that we've worked together on an illustration project without ever having met.

Time Jumps

Sponsor: VideoPress

There is a bit of a rebirth of VideoPress that just happened! If you run a self-hosted WordPress site like we do, VideoPress is a major upgrade to hosting videos in content. You get VideoPress through Jetpack. If you buy Jetpack Complete, you've got it, otherwise, it's an ala-carte purchase. Meaning if VideoPress is the only feature of Jetpack you want, no problem, it's literally the only thing you need to pay for and use. To name a few things... with VideoPress you get a nice customized video player, cloud-hosted optimized video delivery, playback speed control, and the videos will look good on mobile without you having to manually create a poster.

]]> Lynn Fisher is my guest this week! You might know her as @lynnandtonic on CodePen and most other platforms. We get to talk about her A Single Div project and all the CSS magic that goes into those, other creative projects and why those are so satisfying, a recent transition over to Netlify, and the fact that we've worked together on an illustration project without ever having met.

Time Jumps

Sponsor: VideoPress

There is a bit of a rebirth of VideoPress that just happened! If you run a self-hosted WordPress site like we do, VideoPress is a major upgrade to hosting videos in content. You get VideoPress through Jetpack. If you buy Jetpack Complete, you've got it, otherwise, it's an ala-carte purchase. Meaning if VideoPress is the only feature of Jetpack you want, no problem, it's literally the only thing you need to pay for and use. To name a few things... with VideoPress you get a nice customized video player, cloud-hosted optimized video delivery, playback speed control, and the videos will look good on mobile without you having to manually create a poster.

]]> https://blog.codepen.io/wp-content/uploads/2021/10/np_squid_1399464_000000.svg 338: With Lynn Fisher false no 0:00 No no 337: ES Modules on CodePen https://blog.codepen.io/2021/10/13/337-es-modules-on-codepen/ Wed, 13 Oct 2021 23:22:51 +0000 https://blog.codepen.io/?p=15961 ES Modules are a native feature of JavaScript! The import and export keywords are actually a mighty powerful thing for a language to have. You can use them right on CodePen of course. For example, with our URL extensions, you can export stuff from one Pen and import it in another without having to use the External Resources feature in Settings or anything, which might make your code more clear.

Then with incredible services like Skypack, you have the entire world of npm available to import. Here's a whole Collection of examples like that. React is easy pickings:

ES Modules is getting fancier and fancier!

import all the things!

Sponsor: Netlify

Among many incredibly innovative things Netlify has done is to offer cloud functions for any site you publish on Netlify. You chuck your functions in a functions folder (configurable) and they'll run as AWS Lambda functions, without you even having to have an AWS account or deal with any of that ceremony. Now if you need a bit of server side code for your otherwise static site, you got it. Incredibly useful for doing any sort of dynamic functionality that needs to reach out to databases or APIs with security. And hey, if you need to import stuff, you got it.

]]> ES Modules are a native feature of JavaScript! The import and export keywords are actually a mighty powerful thing for a language to have. You can use them right on CodePen of course. For example, with our URL extensions, you can export stuff from one Pen and import it in another without having to use the External Resources feature in Settings or anything, which might make your code more clear.

Then with incredible services like Skypack, you have the entire world of npm available to import. Here's a whole Collection of examples like that. React is easy pickings:

ES Modules is getting fancier and fancier!

import all the things!

Sponsor: Netlify

Among many incredibly innovative things Netlify has done is to offer cloud functions for any site you publish on Netlify. You chuck your functions in a functions folder (configurable) and they'll run as AWS Lambda functions, without you even having to have an AWS account or deal with any of that ceremony. Now if you need a bit of server side code for your otherwise static site, you got it. Incredibly useful for doing any sort of dynamic functionality that needs to reach out to databases or APIs with security. And hey, if you need to import stuff, you got it.

]]> https://blog.codepen.io/wp-content/uploads/2021/10/np_module_1210571_000000.svg 337: ES Modules on CodePen false no 0:00 No no 336: Cassie Evans https://blog.codepen.io/2021/10/06/336-cassie-evans/ Wed, 06 Oct 2021 15:01:56 +0000 https://blog.codepen.io/?p=15903 Cassie Evans is our special guest this week! Cassie is a front-end developer with a special talent and passion for animation and SVG, as evidenced in part by her amazing work on CodePen. She's recently became part of the team over at Greensock, a very popular JavaScript-powered animation framework.

We got to talk specifically about the Greensock 3.8 release and an SVG workshop she's got ready to that she does with the gang at Pland.

Time Jumps

Sponsor: Retool for Startups

After working with thousands of startups, we’ve noticed that technical founders spend a ton of time building internal tools—which means less time on their core product. So, we built Retool For Startups—a program that gives early-stage founders free access to a lot of the software you need for great internal tooling.

The goal is to make it 10x faster to build the admin panels, CRUD apps, and dashboards that most early stage teams need. We’ve bundled together a year of free access to Retool with over $160,000 in discounts to save you money while building with software commonly connected to internal tools like AWS, MongoDB, Brex, and Segment.

We give you a head start with pre-built UI components, integrations, and other advanced features that make building from scratch much faster. To learn more, check out our site, apply, join webinars and much more at retool.com/startups.

]]> Cassie Evans is our special guest this week! Cassie is a front-end developer with a special talent and passion for animation and SVG, as evidenced in part by her amazing work on CodePen. She's recently became part of the team over at Greensock, a very popular JavaScript-powered animation framework.

We got to talk specifically about the Greensock 3.8 release and an SVG workshop she's got ready to that she does with the gang at Pland.

Time Jumps

Sponsor: Retool for Startups

After working with thousands of startups, we’ve noticed that technical founders spend a ton of time building internal tools—which means less time on their core product. So, we built Retool For Startups—a program that gives early-stage founders free access to a lot of the software you need for great internal tooling.

The goal is to make it 10x faster to build the admin panels, CRUD apps, and dashboards that most early stage teams need. We’ve bundled together a year of free access to Retool with over $160,000 in discounts to save you money while building with software commonly connected to internal tools like AWS, MongoDB, Brex, and Segment.

We give you a head start with pre-built UI components, integrations, and other advanced features that make building from scratch much faster. To learn more, check out our site, apply, join webinars and much more at retool.com/startups.

]]> https://blog.codepen.io/wp-content/uploads/2021/10/np_motion_3202414_000000.svg 336: Cassie Evans false no 0:00 No no 335: Code’s a Drag https://blog.codepen.io/2021/09/29/335-codes-a-drag/ Wed, 29 Sep 2021 20:33:37 +0000 https://blog.codepen.io/?p=15897 There are lots of types of dragging that can happen on websites. While they are all click (or tap), hold down, move, and let go, they are all quite a bit different. For instance:

  • Drag files/folders onto the browser window and drop them. The likely use case there is uploading.
  • Drag an element on the screen to another (valid) area of the screen. The likely use case is dragging cards from one column to another
  • Drag the position of an element. The likely use case is dividers between different areas.

There are native APIs for dragging stuff on the web, and it's nice to use them when you can as that means not relying on potentially hefty JavaScript libraries. And yet, the native APIS are fairly limited, and the JavaScript libraries that exist for this stuff are pretty darn nice.

We use Filestack for file uploading. There are lots of incentives there, like them staying on top of the latest and greatest in browser tech around this stuff rather than us having to. Back when we switched to this, we got mobile uploading support overnight, for example. For drag-elements-to-other-areas we use react-beautiful-dnd, which is a pretty darn nice library for that, especially since we're using React anyway. Interestingly, as robust as react-beautiful-dnd is, it doesn't really support position-dragging at all. Just not what it's built for. So for that, we've gone back to the trenches to write our own componentry, which is a delicate balance of JavaScript event-powered and CSS behind it that supports the changes.

Time Jumps

Sponsor: WordPress.com

WordPress.com is easily the fastest way to spin up a great-looking WordPress site. Not to mention performant and secure, as your site will be hosted on the great WordPress cloud, and they make those things their concern, not yours. You might think you'd have to give up a lot of control and customizability when you use a fully hosted and managed WordPress service (as opposed to hosting yourself), but that's actually not true. If you're on the Business Plan or higher, you can install plugins, SFTP into the server, and even have direct database access like any other host.

]]> There are lots of types of dragging that can happen on websites. While they are all click (or tap), hold down, move, and let go, they are all quite a bit different. For instance:

  • Drag files/folders onto the browser window and drop them. The likely use case there is uploading.
  • Drag an element on the screen to another (valid) area of the screen. The likely use case is dragging cards from one column to another
  • Drag the position of an element. The likely use case is dividers between different areas.

There are native APIs for dragging stuff on the web, and it's nice to use them when you can as that means not relying on potentially hefty JavaScript libraries. And yet, the native APIS are fairly limited, and the JavaScript libraries that exist for this stuff are pretty darn nice.

We use Filestack for file uploading. There are lots of incentives there, like them staying on top of the latest and greatest in browser tech around this stuff rather than us having to. Back when we switched to this, we got mobile uploading support overnight, for example. For drag-elements-to-other-areas we use react-beautiful-dnd, which is a pretty darn nice library for that, especially since we're using React anyway. Interestingly, as robust as react-beautiful-dnd is, it doesn't really support position-dragging at all. Just not what it's built for. So for that, we've gone back to the trenches to write our own componentry, which is a delicate balance of JavaScript event-powered and CSS behind it that supports the changes.

Time Jumps

Sponsor: WordPress.com

WordPress.com is easily the fastest way to spin up a great-looking WordPress site. Not to mention performant and secure, as your site will be hosted on the great WordPress cloud, and they make those things their concern, not yours. You might think you'd have to give up a lot of control and customizability when you use a fully hosted and managed WordPress service (as opposed to hosting yourself), but that's actually not true. If you're on the Business Plan or higher, you can install plugins, SFTP into the server, and even have direct database access like any other host.

]]> https://blog.codepen.io/wp-content/uploads/2021/09/np_drag_2496400_000000.svg 335: Code’s a Drag false no 0:00 No no 334: Custom Properties https://blog.codepen.io/2021/09/22/334-custom-properties/ Wed, 22 Sep 2021 19:13:38 +0000 https://blog.codepen.io/?p=15889 Chris & Shaw talk about a big ol' conversion to getting CodePen's color system to use --custom-properties all the way through, rather than Sass variables. Why? All sorts of reasons, kinda boiling down to the fact that they are just better. Here's a tiny one: you can use the Web Inspector and see what some other element is colored easily. Here's a huge one: ability to do theming way easier. But the refactoring isn't without some bumps in the road, like the fact that CSS doesn't have a way to alter colors (like lighten, darken, or add alpha) terribly easily yet, meaning we needed some work arounds.

Time Jumps

Sponsor: Retool for Startups

After working with thousands of startups, we’ve noticed that technical founders spend a ton of time building internal tools—which means less time on their core product. So, we built Retool For Startups—a program that gives early-stage founders free access to a lot of the software you need for great internal tooling.

The goal is to make it 10x faster to build the admin panels, CRUD apps, and dashboards that most early stage teams need. We’ve bundled together a year of free access to Retool with over $160,000 in discounts to save you money while building with software commonly connected to internal tools like AWS, MongoDB, Brex, and Segment.

We give you a head start with pre-built UI components, integrations, and other advanced features that make building from scratch much faster. To learn more, check out our site, apply, join webinars and much more at retool.com/startups.

]]> Chris & Shaw talk about a big ol' conversion to getting CodePen's color system to use --custom-properties all the way through, rather than Sass variables. Why? All sorts of reasons, kinda boiling down to the fact that they are just better. Here's a tiny one: you can use the Web Inspector and see what some other element is colored easily. Here's a huge one: ability to do theming way easier. But the refactoring isn't without some bumps in the road, like the fact that CSS doesn't have a way to alter colors (like lighten, darken, or add alpha) terribly easily yet, meaning we needed some work arounds.

Time Jumps

Sponsor: Retool for Startups

After working with thousands of startups, we’ve noticed that technical founders spend a ton of time building internal tools—which means less time on their core product. So, we built Retool For Startups—a program that gives early-stage founders free access to a lot of the software you need for great internal tooling.

The goal is to make it 10x faster to build the admin panels, CRUD apps, and dashboards that most early stage teams need. We’ve bundled together a year of free access to Retool with over $160,000 in discounts to save you money while building with software commonly connected to internal tools like AWS, MongoDB, Brex, and Segment.

We give you a head start with pre-built UI components, integrations, and other advanced features that make building from scratch much faster. To learn more, check out our site, apply, join webinars and much more at retool.com/startups.

]]> https://blog.codepen.io/wp-content/uploads/2021/09/np_color_1250541_000000.svg 334: Custom Properties false no 0:00 No no 333: Robert https://blog.codepen.io/2021/09/15/333-robert/ Wed, 15 Sep 2021 21:30:57 +0000 https://blog.codepen.io/?p=15864 New CodePen team member! As we recorded this, it was just Robert's 2nd day at CodePen, and we snuck this podcast in within the hurricane of stuff happening during that time. There is a pile of new software to get access to and acquainted with. There is the dev environment stuff. There is getting acquainted with people, with the extra challenge of doing that remotely. There is understanding the flow and structure of our work days. There are meetings! So many meetings! Figuring out the Zoom culture.

For now though, we chat about Robert's history and how we're luck to have gotten someone with such deep expertise in the field. He lives right in Bend, Oregon where Chris is, hence them knowing each other through BendJS.

Timejumps

Sponsor: Jetpack

It's so cool that Jetpack acquired Social Image Generator. Jetpack already does stuff to help your WordPress site be better integrated with social media (check this video), so why not really go the extra mile and help you with those tricky-to-pull-off social media images? We're all very much looking forward to see what new features this acquisition unlocks.

]]> New CodePen team member! As we recorded this, it was just Robert's 2nd day at CodePen, and we snuck this podcast in within the hurricane of stuff happening during that time. There is a pile of new software to get access to and acquainted with. There is the dev environment stuff. There is getting acquainted with people, with the extra challenge of doing that remotely. There is understanding the flow and structure of our work days. There are meetings! So many meetings! Figuring out the Zoom culture.

For now though, we chat about Robert's history and how we're luck to have gotten someone with such deep expertise in the field. He lives right in Bend, Oregon where Chris is, hence them knowing each other through BendJS.

Timejumps

Sponsor: Jetpack

It's so cool that Jetpack acquired Social Image Generator. Jetpack already does stuff to help your WordPress site be better integrated with social media (check this video), so why not really go the extra mile and help you with those tricky-to-pull-off social media images? We're all very much looking forward to see what new features this acquisition unlocks.

]]> https://blog.codepen.io/wp-content/uploads/2021/09/np_person_1995015_000000.svg 333: Robert false no 0:00 No no 332: Running the Finances of a Startup https://blog.codepen.io/2021/09/08/332-running-the-finances-of-a-startup/ Wed, 08 Sep 2021 22:29:51 +0000 https://blog.codepen.io/?p=15859 Dee and Chris talk about "everything money-related" at CodePen. Dee has been managing this stuff since CodePen's beginning. First largely pro-bono (sorry, Dee), then later as a side gig and part-time job. Dee is full-time now at CodePen, but finance stuff is only part of her role (programming being the main job). It's a lot of work, but she likes being able to influence CodePen for the better from multiple angles.

At a big company, all this finance work would probably manifest as a COO. But CodePen is just a midling startup, too small really for a COO, but also too big for a homegrown spreadsheet. Dee gets into all the work that goes into finance, from the vital documents that are the Profit & Loss Statement, Balance Sheet, and Cash Flow, to other work like cohort analysis and cap table work.

Time Jumps

Sponsor: Retool for Startups

After working with thousands of startups, we’ve noticed that technical founders spend a ton of time building internal tools—which means less time on their core product. So, we built Retool For Startups—a program that gives early-stage founders free access to a lot of the software you need for great internal tooling.

The goal is to make it 10x faster to build the admin panels, CRUD apps, and dashboards that most early stage teams need. We’ve bundled together a year of free access to Retool with over $160,000 in discounts to save you money while building with software commonly connected to internal tools like AWS, MongoDB, Brex, and Segment.

We give you a head start with pre-built UI components, integrations, and other advanced features that make building from scratch much faster. To learn more, check out our site, apply, join webinars and much more at retool.com/startups.

]]> Dee and Chris talk about "everything money-related" at CodePen. Dee has been managing this stuff since CodePen's beginning. First largely pro-bono (sorry, Dee), then later as a side gig and part-time job. Dee is full-time now at CodePen, but finance stuff is only part of her role (programming being the main job). It's a lot of work, but she likes being able to influence CodePen for the better from multiple angles.

At a big company, all this finance work would probably manifest as a COO. But CodePen is just a midling startup, too small really for a COO, but also too big for a homegrown spreadsheet. Dee gets into all the work that goes into finance, from the vital documents that are the Profit & Loss Statement, Balance Sheet, and Cash Flow, to other work like cohort analysis and cap table work.

Time Jumps

Sponsor: Retool for Startups

After working with thousands of startups, we’ve noticed that technical founders spend a ton of time building internal tools—which means less time on their core product. So, we built Retool For Startups—a program that gives early-stage founders free access to a lot of the software you need for great internal tooling.

The goal is to make it 10x faster to build the admin panels, CRUD apps, and dashboards that most early stage teams need. We’ve bundled together a year of free access to Retool with over $160,000 in discounts to save you money while building with software commonly connected to internal tools like AWS, MongoDB, Brex, and Segment.

We give you a head start with pre-built UI components, integrations, and other advanced features that make building from scratch much faster. To learn more, check out our site, apply, join webinars and much more at retool.com/startups.

]]> https://blog.codepen.io/wp-content/uploads/2021/09/np_finance_2341992_000000.svg 332: Running the Finances of a Startup false no 0:00 No no 331: Next.js + Apollo + Server Side Rendering (SSR) https://blog.codepen.io/2021/09/01/331-next-js-apollo-server-side-rendering-ssr/ Wed, 01 Sep 2021 19:49:56 +0000 https://blog.codepen.io/?p=15830 Our goal here was to explore server-side rendering (SSR) in Next.js using data from Apollo GraphQL, for faster client-rendering and SEO benefits.

There are a variety of approaches, but Shaw has set his sights on a very developer-ergonomic version here where you can leave queries on individual components and mark them as SSR-or-not.

There are two "official" approaches:

  1. Apollo's documentation
  2. Next.js' example

These are sorta-kinda-OK, except...

  • They have to be configured per-page
  • They are mostly limited to queries at the top page level
  • You'd likely need to duplicate queries with slightly differently handling from client to server
  • May or may not populate the client cache so that the client can have live queries without having to query for the same data. For example, ay you have data that you want to change on the client side (pagination, fetching new results). If it's fetched and rendered server-side, you have to fetch again client side or send over the cache from the server so the queries on the client-side can be ready to update with new data.

These limitations are workable in some situations, but we want to avoid duplicating code and also have server-side rendered queries that aren't top-level on the page.

A probably-better approach is to use the getDataFromTree method, which walks down the tree and executes the queries to fill up the ApolloClient cache. We got this from a two-year old Gist from Tylerian showing a way to integrate getDataFromTree into Next.js. Tylerian's gist had some extra complications that might've been due to older Next.js limitations, but the overall process was sound:

  1. Create a shared ApolloClient instance
  2. Render the page using getDataFromTree() to fill the cache with data
  3. Render the page again with that data using Next's Document.getInitialProps()
  4. Extract the cache to deliver with the page and hydrate the client-side Apollo cache

The benefits:

  • Quick to set up
  • No duplicate queries
  • Nothing special per page to handle server-side rendering or client-side queries.
  • Cache hydration to keep client active without re-querying data
  • Easy to enable / disable server-side rendering for individual queries

Here's a repo with Shaw's findings.

]]> Our goal here was to explore server-side rendering (SSR) in Next.js using data from Apollo GraphQL, for faster client-rendering and SEO benefits.

There are a variety of approaches, but Shaw has set his sights on a very developer-ergonomic version here where you can leave queries on individual components and mark them as SSR-or-not.

There are two "official" approaches:

  1. Apollo's documentation
  2. Next.js' example

These are sorta-kinda-OK, except...

  • They have to be configured per-page
  • They are mostly limited to queries at the top page level
  • You'd likely need to duplicate queries with slightly differently handling from client to server
  • May or may not populate the client cache so that the client can have live queries without having to query for the same data. For example, ay you have data that you want to change on the client side (pagination, fetching new results). If it's fetched and rendered server-side, you have to fetch again client side or send over the cache from the server so the queries on the client-side can be ready to update with new data.

These limitations are workable in some situations, but we want to avoid duplicating code and also have server-side rendered queries that aren't top-level on the page.

A probably-better approach is to use the getDataFromTree method, which walks down the tree and executes the queries to fill up the ApolloClient cache. We got this from a two-year old Gist from Tylerian showing a way to integrate getDataFromTree into Next.js. Tylerian's gist had some extra complications that might've been due to older Next.js limitations, but the overall process was sound:

  1. Create a shared ApolloClient instance
  2. Render the page using getDataFromTree() to fill the cache with data
  3. Render the page again with that data using Next's Document.getInitialProps()
  4. Extract the cache to deliver with the page and hydrate the client-side Apollo cache

The benefits:

  • Quick to set up
  • No duplicate queries
  • Nothing special per page to handle server-side rendering or client-side queries.
  • Cache hydration to keep client active without re-querying data
  • Easy to enable / disable server-side rendering for individual queries

Here's a repo with Shaw's findings.

]]> https://blog.codepen.io/wp-content/uploads/2021/09/np_decrypt_2311334_000000.svg 331: Next.js + Apollo + Server Side Rendering (SSR) false no 0:00 No no #330: New Admin Tools https://blog.codepen.io/2021/08/25/330-new-admin-tools/ Wed, 25 Aug 2021 20:11:27 +0000 https://blog.codepen.io/?p=15821 Chris & Marie talk about a big long project that we've finished at CodePen: our new Admin Tools. Any web app is gonna need 'em. They do stuff that is unique to customer service on your app. Say you need to manually trigger a password reset email or hand-verify an account. You look them up in an Admin Tool, and perform those specialized actions. Our Admin Tools are heavily focused on users and content. We've totally re-built them to focus on the UX of actually doing customer support, as well as to make a clean UI that users the same componentry that the main CodePen app does. We do a lot of spam cleanup in our Admin Tools as well, so getting a chance to re-think those experiences was satisfying.

We dove into this project not just to make customer support better, but because of an alignment of concerns. We got to use a whole new development stack to do this, using technology we wanted to prove out for more of CodePen. We used Next.js on the front end and for server side rendering, and a Go-powered GraphQL API for the data. We made it all work in our monorepo. We build tools for deployment, so in a cool twist of fate, this app can deploy itself.

Sponsor: Mailpoet

If you build your website and business around WordPress, you're in good hands for a lot of reasons. One of which is that you own your site, you own your own data, you own all aspects of what powers your business, and the rug can't get pulled out from under you entirely. Check out this article and video on how to make a paid subscription newsletter with WordPress + WooCommerce + Mailpoet. That is a business model right there, from which you can grow forever entirely under your control.

]]> Chris & Marie talk about a big long project that we've finished at CodePen: our new Admin Tools. Any web app is gonna need 'em. They do stuff that is unique to customer service on your app. Say you need to manually trigger a password reset email or hand-verify an account. You look them up in an Admin Tool, and perform those specialized actions. Our Admin Tools are heavily focused on users and content. We've totally re-built them to focus on the UX of actually doing customer support, as well as to make a clean UI that users the same componentry that the main CodePen app does. We do a lot of spam cleanup in our Admin Tools as well, so getting a chance to re-think those experiences was satisfying.

We dove into this project not just to make customer support better, but because of an alignment of concerns. We got to use a whole new development stack to do this, using technology we wanted to prove out for more of CodePen. We used Next.js on the front end and for server side rendering, and a Go-powered GraphQL API for the data. We made it all work in our monorepo. We build tools for deployment, so in a cool twist of fate, this app can deploy itself.

Sponsor: Mailpoet

If you build your website and business around WordPress, you're in good hands for a lot of reasons. One of which is that you own your site, you own your own data, you own all aspects of what powers your business, and the rug can't get pulled out from under you entirely. Check out this article and video on how to make a paid subscription newsletter with WordPress + WooCommerce + Mailpoet. That is a business model right there, from which you can grow forever entirely under your control.

]]> https://blog.codepen.io/wp-content/uploads/2021/08/np_admin_2805231_000000.svg #330: New Admin Tools false no 0:00 No no #329: Gathering Data https://blog.codepen.io/2021/08/18/329-gathering-data/ Wed, 18 Aug 2021 23:14:43 +0000 https://blog.codepen.io/?p=15811 Marie and Chris talk about all the sources of data we have, think about, and use to help us. We do have one main database on CodePen, and truth be told, it's got a bunch of data in it. If we want to know how many Pens there are, we can just ask it. We can learn a lot from asking that database questions, and we even have fancy charts that express information like that to us on dashboards. But that database isn't the only place we have data, because it doesn't know everything. It can't tell us, for example, how many times a feature is toggled on and off, because we don't track that kind of data in our main database. But we can track that data, and do when we need to with Appcues. And then there is general analytic data like traffic which we can explore with Cloudflare. And support-driven data we can look at in Front. And that's not all. When answering important business questions, the data can come from lots of sources.

Time Jumps

Sponsor: Clubhouse

Your project management tool should be a breeze to setup, at least mildly enjoyable to use, and help evolve your already existing development workflows so it's easier to get things done. Does that describe your current tool? If it does, great! You can stop reading. If not, then Clubhouse could be the perfect fit. We're project management built specifically for software teams and we're fast, intuitive, flexible, powerful, and many other nice, positive adjectives. Delight the grumpiest scrum masters with Clubhouse.

]]> Marie and Chris talk about all the sources of data we have, think about, and use to help us. We do have one main database on CodePen, and truth be told, it's got a bunch of data in it. If we want to know how many Pens there are, we can just ask it. We can learn a lot from asking that database questions, and we even have fancy charts that express information like that to us on dashboards. But that database isn't the only place we have data, because it doesn't know everything. It can't tell us, for example, how many times a feature is toggled on and off, because we don't track that kind of data in our main database. But we can track that data, and do when we need to with Appcues. And then there is general analytic data like traffic which we can explore with Cloudflare. And support-driven data we can look at in Front. And that's not all. When answering important business questions, the data can come from lots of sources.

Time Jumps

Sponsor: Clubhouse

Your project management tool should be a breeze to setup, at least mildly enjoyable to use, and help evolve your already existing development workflows so it's easier to get things done. Does that describe your current tool? If it does, great! You can stop reading. If not, then Clubhouse could be the perfect fit. We're project management built specifically for software teams and we're fast, intuitive, flexible, powerful, and many other nice, positive adjectives. Delight the grumpiest scrum masters with Clubhouse.

]]> https://blog.codepen.io/wp-content/uploads/2021/08/np_data_2605404_000000.svg #329: Gathering Data false no 37:07 No no #328: Large Scale Planning https://blog.codepen.io/2021/08/11/328-large-scale-planning/ Wed, 11 Aug 2021 14:54:51 +0000 https://blog.codepen.io/?p=15803 Chris and Klare chat about the incredibly daunting task of planning a project that is huge and long-term. We know we're pretty OK at planning smaller-scale projects. We plan, we kanban, we get the job done. But a single basic kanban isn't going to cut it for a truly gigantic project. We get into talking about chopping the project into phases, chopping those phases into sections (sometimes with their own phases), and a databasing/kanbaning strategy to tie it all together. This also touches GitHub workflows and meeting structures, so there is a lot to think through here and it requires constant effort.

Time Jumps

Sponsor: WordPress.com Growth Summit

The WordPress.com Growth Summit is coming up August 17th (Americas & EMEA) and August 18th (Asia Pacific) and is focused on running a business with a WordPress website as a core.

Get expert advice on how to design your site, write effective copy, attract traffic, build a community, and earn money.

]]> Chris and Klare chat about the incredibly daunting task of planning a project that is huge and long-term. We know we're pretty OK at planning smaller-scale projects. We plan, we kanban, we get the job done. But a single basic kanban isn't going to cut it for a truly gigantic project. We get into talking about chopping the project into phases, chopping those phases into sections (sometimes with their own phases), and a databasing/kanbaning strategy to tie it all together. This also touches GitHub workflows and meeting structures, so there is a lot to think through here and it requires constant effort.

Time Jumps

Sponsor: WordPress.com Growth Summit

The WordPress.com Growth Summit is coming up August 17th (Americas & EMEA) and August 18th (Asia Pacific) and is focused on running a business with a WordPress website as a core.

Get expert advice on how to design your site, write effective copy, attract traffic, build a community, and earn money.

]]> https://blog.codepen.io/wp-content/uploads/2021/08/np_kanban_376079_000000.svg #328: Large Scale Planning false no 39:15 No no #327: 99.999% Uptime https://blog.codepen.io/2021/08/04/327-99-999-uptime/ Wed, 04 Aug 2021 13:47:18 +0000 https://blog.codepen.io/?p=15793 Chris & Alex talk about DevOps, servers, and keeping CodePen online at all times. We were are 100% for the year until a few weeks ago when we had a 10 minute drop. That still keeps us in the realm of 99.99% uptime, where we get 52 minutes and 35 seconds of downtime per year, but next year we're shooting for 5-nines, that is, 99.999% uptime, where we only get 5 minutes and 16 seconds of downtime. Of course, our goals (and eventually, promises) can only be as strong as the service providers we use. Thankfully with providers like AWS and Cloudflare, we're in good hands.

There are a number of things that have traditionally got in the way of this high of uptime, like database manipulation work. These days, we have the tech and the strategies for that, like seeding a newly manipulated database alongside the existing one and cutting over. We also have code in place for doing intelligent things like cutting off services if they become unreliable, rather than letting them bog down or kill the site entirely.

Time Stamps

Sponsor: Netlify

Netlify is the Jamstack hostess with the mostest. Netlify Dev allows you to run their entire platform on your own machine. That means being able to test things like cloud functions, redirects, form submissions, etc without even having to do a preview build. Another aspect of Netlify, that is fundamental, is that you don't really have to worry about scaling on Netlify. Your static-based site is ready to scale to any level, and that includes all the cloud functions too, as they are lambdas and designed to scale.

]]> Chris & Alex talk about DevOps, servers, and keeping CodePen online at all times. We were are 100% for the year until a few weeks ago when we had a 10 minute drop. That still keeps us in the realm of 99.99% uptime, where we get 52 minutes and 35 seconds of downtime per year, but next year we're shooting for 5-nines, that is, 99.999% uptime, where we only get 5 minutes and 16 seconds of downtime. Of course, our goals (and eventually, promises) can only be as strong as the service providers we use. Thankfully with providers like AWS and Cloudflare, we're in good hands.

There are a number of things that have traditionally got in the way of this high of uptime, like database manipulation work. These days, we have the tech and the strategies for that, like seeding a newly manipulated database alongside the existing one and cutting over. We also have code in place for doing intelligent things like cutting off services if they become unreliable, rather than letting them bog down or kill the site entirely.

Time Stamps

Sponsor: Netlify

Netlify is the Jamstack hostess with the mostest. Netlify Dev allows you to run their entire platform on your own machine. That means being able to test things like cloud functions, redirects, form submissions, etc without even having to do a preview build. Another aspect of Netlify, that is fundamental, is that you don't really have to worry about scaling on Netlify. Your static-based site is ready to scale to any level, and that includes all the cloud functions too, as they are lambdas and designed to scale.

]]> https://blog.codepen.io/wp-content/uploads/2021/08/np_server_3041812_000000.svg #327: 99.999% Uptime false no 32:29 No no #326: Design Pattern Deepdives: Tabs and InfoBox https://blog.codepen.io/2021/07/28/326-design-pattern-deepdives-tabs-and-infobox/ Wed, 28 Jul 2021 23:13:22 +0000 https://blog.codepen.io/?p=15778 Chris and Stephen pick out a couple of components from our design pattern library (which we talked about last here) and go into why they exist, what they do, what makes them complex, and the API choices. Relatively new to us is the idea of compound components which have, so far, been good to us as far as composing components in a way that makes them easier to use and more flexible.

Time Jumps

Sponsor: Jetpack

We're fans of Jetpack! You might recognize Instant Search right here in the CodePen docs. But we're well aware that not everybody feels as strongly positively as we do. Last call here... have your say, tell us why you don't use it if you don't:

]]> Chris and Stephen pick out a couple of components from our design pattern library (which we talked about last here) and go into why they exist, what they do, what makes them complex, and the API choices. Relatively new to us is the idea of compound components which have, so far, been good to us as far as composing components in a way that makes them easier to use and more flexible.

Time Jumps

Sponsor: Jetpack

We're fans of Jetpack! You might recognize Instant Search right here in the CodePen docs. But we're well aware that not everybody feels as strongly positively as we do. Last call here... have your say, tell us why you don't use it if you don't:

]]> https://blog.codepen.io/wp-content/uploads/2021/07/np_tab_2768111_000000.svg #326: Design Pattern Deepdives: Tabs and InfoBox false no 29:20 No no #325: New Embed Modal https://blog.codepen.io/2021/07/21/325-new-embed-modal/ Wed, 21 Jul 2021 14:44:29 +0000 https://blog.codepen.io/?p=15760 Chris and Stephen talk about the New Embed Modal. We got to re-architect the thing into our modern stack, using all our latest design patterns, and improve the UX of it quite a bit while we were at it. This is something like the 4th generation of that experience, and we're already eyeing up future improvements. Such is the nature of software development.

Time Jumps

Sponsor: Clubhouse

Your project management tool should be a breeze to setup, at least mildly enjoyable to use, and help evolve your already existing development workflows so it's easier to get things done. Does that describe your current tool? If it does, great! You can stop reading. If not, then Clubhouse could be the perfect fit. We're project management built specifically for software teams and we're fast, intuitive, flexible, powerful, and many other nice, positive adjectives. Delight the grumpiest scrum masters with Clubhouse.

]]> Chris and Stephen talk about the New Embed Modal. We got to re-architect the thing into our modern stack, using all our latest design patterns, and improve the UX of it quite a bit while we were at it. This is something like the 4th generation of that experience, and we're already eyeing up future improvements. Such is the nature of software development.

Time Jumps

Sponsor: Clubhouse

Your project management tool should be a breeze to setup, at least mildly enjoyable to use, and help evolve your already existing development workflows so it's easier to get things done. Does that describe your current tool? If it does, great! You can stop reading. If not, then Clubhouse could be the perfect fit. We're project management built specifically for software teams and we're fast, intuitive, flexible, powerful, and many other nice, positive adjectives. Delight the grumpiest scrum masters with Clubhouse.

]]> https://blog.codepen.io/wp-content/uploads/2021/07/np_modal_137132_000000.svg #325: New Embed Modal false no 0:00 No no #324: How can we help you better? https://blog.codepen.io/2021/07/14/324-how-can-we-help-you-better/ Wed, 14 Jul 2021 11:14:45 +0000 https://blog.codepen.io/?p=15757 Chris and Marie talk about customer support. If you're a regular listener of this show, you'll remember that we've had a lot of success with customer support over the last year, the point that our volume of direct support is rather low. That'll happen when you fix every major problem that comes up. But it also means that we have some space to do better! It's a big bummer when we have a customer leave when they never reach out at all to get a hand from us on whatever they might need. It leaves us thinking... what else can we do? Can we help you with anything? We've been trying a handful of things to get better data and answers to these kind of questions.

And that Call-To-Action: If we can do anything to help you, hit us up.

Time Jumps

Sponsor: WooCommerce + MailPoet = Paid Newsletter Subscriptions!

WooCommerce is the premier eCommerce plugin for WordPress. MailPoet brings a fancy email builder right into WordPress. Combine the two and you get more than power of them individually. For one thing, you get extra powerful eCommerce email abilities — things like abandoned cart emails. Better, you can combine them to make a paid subscription newsletter, but powered by your own site!

]]> Chris and Marie talk about customer support. If you're a regular listener of this show, you'll remember that we've had a lot of success with customer support over the last year, the point that our volume of direct support is rather low. That'll happen when you fix every major problem that comes up. But it also means that we have some space to do better! It's a big bummer when we have a customer leave when they never reach out at all to get a hand from us on whatever they might need. It leaves us thinking... what else can we do? Can we help you with anything? We've been trying a handful of things to get better data and answers to these kind of questions.

And that Call-To-Action: If we can do anything to help you, hit us up.

Time Jumps

Sponsor: WooCommerce + MailPoet = Paid Newsletter Subscriptions!

WooCommerce is the premier eCommerce plugin for WordPress. MailPoet brings a fancy email builder right into WordPress. Combine the two and you get more than power of them individually. For one thing, you get extra powerful eCommerce email abilities — things like abandoned cart emails. Better, you can combine them to make a paid subscription newsletter, but powered by your own site!

]]> https://blog.codepen.io/wp-content/uploads/2021/07/np_help_2302541_000000.svg #324: How can we help you better? false no 17:33 No no #323: Trends https://blog.codepen.io/2021/07/07/323-trends/ Wed, 07 Jul 2021 22:39:41 +0000 https://blog.codepen.io/?p=15747 Chris & Marie talk about some of the types of Pens that have been particularly popular this year so far, now that's we're halfway through it. There is still plenty of time to make the best-of-the-year list (you could make a Pen the third week of December and still make it!). Heads up though, giving out hearts in general on CodePen is a great idea as it helps improve search results, helps improve your own personal feeds, and helps people feel good about what they make.

Some trends are eternal, some trends are ephemeral, and we talk about them both.

Time Jumps

Sponsor: Netlify

The original coiners of Jamstack! Netlify helps you with everything Jamstack. They are a static file host, which is incredibly useful already, in that it means your site is fast and secure and scales forever. That also opens the door for deploy previews, which have gotten even more amazing lately with feedback tools built right in. But they also help with dynamic aspects of the Jamstack like processing your forms and running cloud functions.

]]> Chris & Marie talk about some of the types of Pens that have been particularly popular this year so far, now that's we're halfway through it. There is still plenty of time to make the best-of-the-year list (you could make a Pen the third week of December and still make it!). Heads up though, giving out hearts in general on CodePen is a great idea as it helps improve search results, helps improve your own personal feeds, and helps people feel good about what they make.

Some trends are eternal, some trends are ephemeral, and we talk about them both.

Time Jumps

Sponsor: Netlify

The original coiners of Jamstack! Netlify helps you with everything Jamstack. They are a static file host, which is incredibly useful already, in that it means your site is fast and secure and scales forever. That also opens the door for deploy previews, which have gotten even more amazing lately with feedback tools built right in. But they also help with dynamic aspects of the Jamstack like processing your forms and running cloud functions.

]]> https://blog.codepen.io/wp-content/uploads/2021/07/np_trend_2286691_000000.svg #323: Trends false no 34:34 No no #322: Upgrading Upgrades https://blog.codepen.io/2021/06/30/322-upgrading-upgrades/ Wed, 30 Jun 2021 13:24:06 +0000 https://blog.codepen.io/?p=15727 Dee and Chris talk about a recent release where we re-built the upgrade experience on CodePen. For example, you're a free user, you want to upload an asset, you can upload via a modal that pops up, and get on with your task. You could kind of do that before, but it was much jankier UI and UX. This release brings that experience in line with current design patterns on CodePen.

But the reality of this release is much deeper than that. There were a half-dozen or more mostly behind-the-scenes releases that were stepping stones to this. The biggest of which was around cleaning up our billing model and billing data into a much easier to manage and much cleaner place. While doing that work, we identified some users that needed to upgrade to maintain their status, so a big aspect of this release was reaching out to them about that, which meant building the lowest-friction-possible upgrading experience and giving us a chance to try out something we'd never tried before: discounts.

Time Jumps

Sponsor: Jetpack

Jetpack has a brand new mobile app. It's essentially the WordPress app, except a bit more streamlined. It allows you to connect to your self-hosted WordPress sites and manage everything from content and comments to plugins and backups.

]]> Dee and Chris talk about a recent release where we re-built the upgrade experience on CodePen. For example, you're a free user, you want to upload an asset, you can upload via a modal that pops up, and get on with your task. You could kind of do that before, but it was much jankier UI and UX. This release brings that experience in line with current design patterns on CodePen.

But the reality of this release is much deeper than that. There were a half-dozen or more mostly behind-the-scenes releases that were stepping stones to this. The biggest of which was around cleaning up our billing model and billing data into a much easier to manage and much cleaner place. While doing that work, we identified some users that needed to upgrade to maintain their status, so a big aspect of this release was reaching out to them about that, which meant building the lowest-friction-possible upgrading experience and giving us a chance to try out something we'd never tried before: discounts.

Time Jumps

Sponsor: Jetpack

Jetpack has a brand new mobile app. It's essentially the WordPress app, except a bit more streamlined. It allows you to connect to your self-hosted WordPress sites and manage everything from content and comments to plugins and backups.

]]> https://blog.codepen.io/wp-content/uploads/2021/06/np_add-to-cart_3592867_000000.svg #322: Upgrading Upgrades false no 24:14 No no #321: Six Million https://blog.codepen.io/2021/06/23/321-six-million/ Wed, 23 Jun 2021 21:20:35 +0000 https://blog.codepen.io/?p=15712 A big milestone for us! We're now well over that number of registered users on CodePen. It's a fun number to watch — but we know it's not a particularly useful or industry-standard metric. Monthly active users, for example, is much more meaningful. In this podcast, Marie and Chris reminisce a bit on the early days and reflect on what is different between then and now. You'd think we'd have way more support work to do, but we don't. You'd think we'd have way higher server costs, but we don't. We all feel it in different ways. We're more boring in a very satisfying way. We're more consistent, secure, stable, and reliable.

Time Jumps

Sponsor: Secureframe

Security compliance isn’t the biggest priority for startups...until it is. When it comes to enterprise deals, every large company requires a SOC 2 report. Secureframe allows companies to get SOC 2 compliant within weeks, rather than months and monitors 40+ services, including AWS, GCP, and Azure. Secureframe continuously collects audit evidence, runs security awareness training, manages vendors, monitors infrastructure, and more, all automatically.

Our customers save an average of 50% on their audit costs and hundreds of hours of their time. Learn more at secureframe.com

]]> A big milestone for us! We're now well over that number of registered users on CodePen. It's a fun number to watch — but we know it's not a particularly useful or industry-standard metric. Monthly active users, for example, is much more meaningful. In this podcast, Marie and Chris reminisce a bit on the early days and reflect on what is different between then and now. You'd think we'd have way more support work to do, but we don't. You'd think we'd have way higher server costs, but we don't. We all feel it in different ways. We're more boring in a very satisfying way. We're more consistent, secure, stable, and reliable.

Time Jumps

Sponsor: Secureframe

Security compliance isn’t the biggest priority for startups...until it is. When it comes to enterprise deals, every large company requires a SOC 2 report. Secureframe allows companies to get SOC 2 compliant within weeks, rather than months and monitors 40+ services, including AWS, GCP, and Azure. Secureframe continuously collects audit evidence, runs security awareness training, manages vendors, monitors infrastructure, and more, all automatically.

Our customers save an average of 50% on their audit costs and hundreds of hours of their time. Learn more at secureframe.com

]]> https://blog.codepen.io/wp-content/uploads/2021/06/np_dice-6_1194691_000000.svg #321: Six Million false no 0:00 No no