#299: Meet CPHub

01/20/21 • 40 min

CPHub is just the name of an internal project ("CodePen Hub") that we've released in the last couple of weeks. You (as a user) won't notice a thing (except, perhaps, that some of our processors have been upgraded, like RubySass to DartSass). But for us, we notice, because not only does it do everything we hoped it would, it's had side effects that have all been positive.

This show is Alex and Chris chatting about all the technical in-and-outs of the project. Short story: we have a new internally-facing relative URL, which is responsible for the vast majority of anything that would otherwise go out to a third-party URL. So for example, all our code processing services in the past would have been routed to an AWS Gateway and then to an AWS Lambda orchestrator and then to an individual AWS Lambda and back. Now they go to CPHub, to the individual Lambda, and back. But it's not just AWS stuff, it's really any third party HTTP request.

Among other things, CPHub is:

Faster — a handful of Go-powered web servers that are literally faster, never break a sweat, and require less hops
Less expensive — we have to manage those servers, but they are simple and cheap
Are not subject to CORS concerns — because the HTTP requests are to our own domain

The thing I'm most excited about though is the consolidation. Every service we have is consolidated into the CPHub area of our repo and we've improved the deployment story for all of it.

Episode Timestamps

01:14 Serverless functions on CodePen
06:43 Advantages of CP Hub
11:22 Sponsor: FeaturePeek
14:17 Benefits of CP Hub continued
19:16 Boom Boom
25:02 Writing a node function
32:15 A good idea all around
34:36 Squashing bugs

Sponsor: FeaturePeek

Turn front-end deployment previews into your hub for continuous product review. FeaturePeek is the easiest way for web development teams to collaborate on frontend work.

Take and annotate screenshots
Record session video
Tag coworkers and leave comments

FeaturePeek works with all frameworks and hosting providers and integrates with Linear, Clubhouse, Trello, and more.

Get started today at featurepeek.com and use code FP2021 for 30% off upgrades to FeaturePeek for business teams.

Among other things, CPHub is:

Faster — a handful of Go-powered web servers that are literally faster, never break a sweat, and require less hops
Less expensive — we have to manage those servers, but they are simple and cheap
Are not subject to CORS concerns — because the HTTP requests are to our own domain

The thing I'm most excited about though is the consolidation. Every service we have is consolidated into the CPHub area of our repo and we've improved the deployment story for all of it.

Episode Timestamps

01:14 Serverless functions on CodePen
06:43 Advantages of CP Hub
11:22 Sponsor: FeaturePeek
14:17 Benefits of CP Hub continued
19:16 Boom Boom
25:02 Writing a node function
32:15 A good idea all around
34:36 Squashing bugs

Sponsor: FeaturePeek

Turn front-end deployment previews into your hub for continuous product review. FeaturePeek is the easiest way for web development teams to collaborate on frontend work.

Take and annotate screenshots
Record session video
Tag coworkers and leave comments

FeaturePeek works with all frameworks and hosting providers and integrates with Linear, Clubhouse, Trello, and more.

Get started today at featurepeek.com and use code FP2021 for 30% off upgrades to FeaturePeek for business teams.

Previous Episode

#298: The Top Hearted Pens of 2020 by the Numbers

Chris and Marie talk through some of the data about the most hearted Pens of 2020. Marie loves pouring over data, and often uses Airtable to do that and help visualize it. This allowed us to figure out some of the top "categories" of the Pens that made the list, longtimers vs. brand new community members, and other data bits we'll cover in the show.

For example, here are the top creation months (remember, not overall, just of the Top 100 Most Hearted):

And here's us doing some broad categorization:

Time Jumps

01:38 Hearted Pens
07:13 The top 100 list
15:26 Sponsor: FeaturePeek
18:25 Mashing the space bar
21:56 Creation dates
28:04:18 Dribbble inspired

Sponsor: FeaturePeek (15:26)

Turn front-end deployment previews into your hub for continuous product review. FeaturePeek is the easiest way for web development teams to collaborate on frontend work.

Take and annotate screenshots
Record session video
Tag coworkers and leave comments

FeaturePeek works with all frameworks and hosting providers and integrates with Linear, Clubhouse, Trello, and more.

Get started today at featurepeek.com and use code FP2021 for 30% off upgrades to FeaturePeek for business teams.

Show Links

Next Episode

#300: Exploring Custom Profiles

You’ve got two options for customzing your profile on CodePen, and endless possibility: Open to everyone: Apply Custom CSS (which can be a link to a Pen on CodePen) PRO only: Apply a Pen-as-Header-Background In this video, Chris & Stephen look at a bunch of awesome profiles on CodePen, and find that many users (especially […]