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: Netlif...
Nov 03, 20210
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...
Oct 27, 20210
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-hoste...
Oct 20, 20210
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. He...
Oct 13, 20210
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 t...
Oct 06, 20210
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....
Sep 29, 20210
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 ...
Sep 22, 20210
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 cultur...
Sep 15, 20210
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 Code...
Sep 08, 20210
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: Apollo's documentation Next.js' example These are sorta-kinda-OK, except... They have to be configured per-page They are mostly ...
Sep 01, 20210
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 ...
Aug 25, 20210
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, fo...
Aug 18, 2021•37 min
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 GitHu...
Aug 11, 2021•39 min
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...
Aug 04, 2021•32 min
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 d...
Jul 28, 2021•29 min
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...
Jul 21, 20210
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...
Jul 14, 2021•18 min
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...
Jul 07, 2021•35 min
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 releas...
Jun 30, 2021•24 min
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...
Jun 23, 20210
Learn CSS is a very cool project from a whole team of people at Google (and outside). It does a great job of documenting where is right now, in a fairly comprehensive way. Learn CSS was spearheaded by Una Kravets and Andy Bell did the bulk of the writing, so they are two extra-special guests to have on the show to talk about it. Why CodePen Radio though? Because there are literally hundreds of Embedded Pens used in this course, all using a style guide base and are live editors in the site itself...
Jun 16, 2021•33 min
Stephen and Chris talk about cplibrary the Pattern Library that the CodePen Monorepo can use to share components. What goes in there and what doesn't? What are common and not-so-common components? Can components be combinations of other components? Time Jumps Sponsor: Lemon Productions Chris Enns of Lemon Productions edits this podcast. Got a podcast you wanna outsource the editing on? Hit him up.
Jun 09, 2021•39 min
When Anna Lytical heard Stephen and I talking about "What is CodePen?" she mentioned we did fab without her . So of course, I had to do one with her! Anna creates fun coding content all over the web, in addition to being an engineer at Google. Catch her on YouTube , Instagram , TikTok , and Twitter . For Anna, the appeal of CodePen is in the simplicity: nothing to set up, easy/free to get started, and you can get to the heart of learning quickly. Not to mention the sharing—as a teacher you can p...
Jun 02, 2021•30 min
I got to chat with Stephanie this week, a senior web engineer at Microsoft, who I've given the prestigious gold-star award for top front-end web development content producer this year ;). She's got so many cool projects like Modern CSS , Style Stage , SmolCSS , and a beginner course on making a website . So many of the sites she makes are in Eleventy , she's taken to teaching that too, like on her site 11ty Rocks and on Egghead . She's always teaching, like through her podcast Word Wrap or in on...
May 26, 2021•30 min
Adam Created this brand new intro video animation for CodePen Radio (on TV). Like when we do a video instead of audio for the podcast. We got to get into his creative process a little bit. While the output of this was a video, Adam used web technology to produce it, using animation libraries like David Desandro's Zdog (David also worked on the CodePen logo) and Greensock . But you won't find those libraries on the final Pen, because to preserve animation performance, those were used only to prod...
May 19, 2021•31 min
Over the last year, almost every metric that you want to go up has gone up at CodePen. More users creating and doing more things. You'd think that customer support would go up at the same level. And if it did, we would have thought that was very normal and dealt with it. But customer support doesn't have to be this static thing that just is the way it is forever. If you find that people have the same questions over and over, you can fix your app or documentation such to answer that question bett...
May 13, 2021•34 min
Marie and Chris discuss the big round of updates that went out around Team Management . There is a new "admin" role that it took us years of having a Teams product to understand that many teams could actually use. In the end, these updates to how Teams work make them way more useful. Teams can self-manage themselves in a way they never could before, and we're hoping that makes people much happier with the product, less likely to leave because of something silly like access controls, and reduce s...
May 05, 2021•27 min
Being, ya know, human beings with thoughts and emotions trying to build something together, sometimes we clash. There are big clashes. Sometimes those end in drastic changes. We've done that. You might have noticed that we're down to two co-founders actively at the company. There are tiny clashes too, like needing to tell someone when they've made a mistake. Medium clashes (this is not a real classification by the way, it's just how it feels) are when multiple people feel pretty strongly about s...
Apr 28, 2021•42 min
This isn't actually a podcast actually talking about what CodePen is. Well, it kinda is. But actually it's Stephen and Chris talking about and planning for what they would say if they only had five minutes (or so) to explain what CodePen is. So we need to hash out what the most important things are, what to lede with, and how to cover all the most vital things with clarity in such a short amount of time. We'll have to get around to actually trying to shoot a video like this soon! Timestamps Spon...
Apr 21, 2021•33 min
Marie & Chris talk about the brand new event tracking feature in Appcues . We're still pretty stoked we can even afford Appcues, since it's super pricey software for our company. The fact that they just released event tracking dashboards makes it feel much more affordable though, because this unlocks super valuable information for us instantly. It's like we get what would get by also buying super expensive analytics software, only it's rolled into what we already pay for. Sponsor: Netlify Hi...
Apr 15, 2021•35 min
