CodePen Radio

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.

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:

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.