Codepen Radio

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

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

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.

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.

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 pl

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 g

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 s

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 anotherDrag 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 up

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 t

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

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 p

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 GraphQ

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

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 & 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.

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 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.