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

  • 01:03 Rolling out large infastructure to an audience
  • 04:18 Creating different size images ourselves
  • 05:30 What were the moving parts?
  • 06:54 Using AWS Lambda
  • 09:31 4 sizes of screenshots at CodePen
  • 12:29 Sponsor: Jetpack & WooCommerce Sales
  • 13:24 How did we architect this?
  • 16:06 Our local dev environment
  • 19:45 Making other improvements besides the primary one
  • 27:16 Lessons learned

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.