CodePen Radio

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.

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.

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! JSON ModulesCSS Module Scripts 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.

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.

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

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.

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.

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.

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 documentationNext.js' example These are sorta-kinda-OK, except... They have to be configured per-pageThey are mostly limited to queries at the top page levelYou'd likely need to duplicate queries with slightly differently handling from client to serverMay 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: Create a shared ApolloClient instanceRender the page using getDataFromTree() to fill the cache with dataRender the page again with that data using Next's Document.getInitialProps()Extract the cache to deliver with the page and hydrate the client-side Apollo cache The benefits: Quick to set upNo duplicate queriesNothing special per page to handle server-side rendering or client-side queries.Cache hydration to keep client active without re-querying dataEasy to enable / disable server-side rendering for individual queries Here's a repo with Shaw's findings.

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

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.

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

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

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.

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