CodePen Radio

343: cpshots


Listen Later

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 screenshot 2) the Lambda for resizing it 3) over to S3 to store the images 4) back to the Cloudflare Worker to serve it.

It's a lot of moving parts! But they are all very smart, simple, tuned parts that are designed to do what they do well. The best parts, for us, is that this project was a great excuse to give Robert a trial-by-fire of a fairly complex tech stack, and that we made literally every part of it work on both development and staging. Making sure every service of CodePen runs locally means that there is no secret magic, we can all work on it and see it working.

Time Jumps
Sponsor: Jetpack and WooCommerce Black Friday Sales

Huge sales in WordPress land! As we write, there is less than 4 days left in the Jetpack Black Friday Sale, which is 60%+ off all Jetpack products and plans for your first year. Over in WooCommerce land, nearly everything in the entire WooCommerce marketplace is 40% off and there is less than 6 days left. It's worth it to spend a little time thinking ahead about what you might need for the year ahead as these deals are pretty massive.

...more
View all episodesView all episodes
Download on the App Store

CodePen RadioBy CodePen Blog

  • 4.9
  • 4.9
  • 4.9
  • 4.9
  • 4.9

4.9

86 ratings


More shows like CodePen Radio

View all
Hanselminutes with Scott Hanselman by Scott Hanselman

Hanselminutes with Scott Hanselman

383 Listeners

The Changelog: Software Development, Open Source by Changelog Media

The Changelog: Software Development, Open Source

288 Listeners

Startups For the Rest of Us by Rob Walling

Startups For the Rest of Us

706 Listeners

ShopTalk by Chris Coyier & Dave Rupert

ShopTalk

500 Listeners

Software Engineering Daily by Software Engineering Daily

Software Engineering Daily

627 Listeners

Soft Skills Engineering by Jamison Dance and Dave Smith

Soft Skills Engineering

288 Listeners

Syntax - Tasty Web Development Treats by Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Syntax - Tasty Web Development Treats

989 Listeners

Abroad in Japan by Stak

Abroad in Japan

1,918 Listeners

Tech Brew Ride Home by Morning Brew

Tech Brew Ride Home

964 Listeners

Naval by Naval

Naval

2,121 Listeners

The Real Python Podcast by Real Python

The Real Python Podcast

141 Listeners

Hard Fork by The New York Times

Hard Fork

5,524 Listeners

PodRocket by LogRocket

PodRocket

59 Listeners

BG2Pod with Brad Gerstner and Bill Gurley by BG2Pod

BG2Pod with Brad Gerstner and Bill Gurley

472 Listeners

Risky Business with Nate Silver and Maria Konnikova by Pushkin Industries

Risky Business with Nate Silver and Maria Konnikova

291 Listeners