Skip to content
Swizec Teller - a geek with a hatswizec.com

My favorite serverless project

When's the last time your first project in a new technology was also your favorite? Doesn't happen very often ...πŸ€”

It happened to me in November 2018.

Pat Walls of Starter Story fame posed a challenge: Build a startup in 24 hours.

Absolute mad man. There's no way.

Is there ... what if? No, no that's crazy. But maybe ... no hell no. Unless ...

I have been paying someone \\$500/mo to do a boring task πŸ‘‰ take my markdown, put images on imgur, screenshot tweets, code snippets, and youtube embeds, export to HTML and paste into a newsletter.

That sounds automatable ...

Fuck it, Pat Walls you're on!

12 hours later, TechLetter.App was born. You see its output every time you read my email.

And every day it feels like magic. πŸ§™β€β™‚οΈ

😍

TechLetterApp showing off

Write email in markdown. Paste into box on the left, get rendered HTML on the right. Basic markdown parsing and rendering. There's libraries for that.

Here's where it gets cool πŸ‘‡

TechLetter.App uses an AWS Lambda to spin up a Chrome browser and take screenshots. Tweets, Youtube thumbnails, Instagram, code snippets, CodeSandbox, and a few more.

How TechLetterApp takes a screenshot
How TechLetterApp takes a screenshot

Think about it – every time you paste a link, a few dozen steps go just right in a dance of magic:

  1. Markdown plugin recognizes a link
  2. Matches link to Regex of screenshottable stuffs
  3. Renders a <Screenshot > React component
  4. Component uses useEffect to make an API request
  5. DNS config maps request to my API Gateway
  6. API Gateway says "Oh, _that lambda"_
  7. AWS Lambda spins up a whole new server
  8. That server runs my JavaScript function
  9. Function starts a Chrome browser
  10. Browser loads the link (another magical dance)
  11. My code uses browser JavaScript to find the correct DOM node to use
  12. Tells browser to take a screenshot of that node
  13. Uploads screenshot to S3 as a file
  14. Returns the URL as an API response
  15. <Screenshot> component renders image

All this in 3 seconds for \\$0. 😳

The future boggles the mind my friend. You can try it at this URL πŸ‘‰ link to my AWS Lambda

Before you ask: Yes, a lot has happened to this Lambda over the years. Fixes to how Chrome works, tweaks to screenshots, new features, cleaned up the codebase recently. It's been a fun project.

Even got 91 stars on GitHub despite being hardcoded for my usecase and with a Readme so out of date it's hilarious. I should fix that πŸ˜…

Why I love this project

Sometimes you love things just because they're cool. You don't need an excuse to be a nerd.

And it's saved me countless hours and almost \\$10,000 in outsourcing cost. So that's nice. πŸ˜‡

Not bad for a few hours of hacking and \\$0 in hosting cost huh?

What would you build, if running server code was a breeze? Hit reply

Cheers, ~Swizec

PS: want to learn serverless in a focused setting without investing 2 years of pain and reading random blogposts? Join my Serverless Workshop, sales close tomorrow. Also available in installments

PPS: the distributed serverless data processing pipeline chomping through millions of events per day that I built at work sounds impressive on a resume, but it isn't cool

Did you enjoy this article?

Published on September 24th, 2020 in

Learned something new?
Want to become a high value JavaScript expert?

Here's how it works πŸ‘‡

Leave your email and I'll send you an Interactive Modern JavaScript Cheatsheet πŸ“–right away. After that you'll get thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over my 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

Start with an interactive cheatsheet πŸ“–

Then get thoughtful letters πŸ’Œ on mindsets, tactics, and technical skills for your career.

"Man, love your simple writing! Yours is the only email I open from marketers and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. πŸ‘Œ"

~ Ashish Kumar

Join over 10,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. ✌️

Have a burning question that you think I can answer?Β I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

Ready to Stop copy pasting D3 examples and create data visualizations of your own? Β Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first πŸ’° on the side with ServerlessReact.Dev

Want to brush up on your modern JavaScript syntax?Β Check out my interactive cheatsheet: es6cheatsheet.com

By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❀️