PSA— snapshot your websites 📸

My portfolio website has been WIP since before I started professionally developing websites. Other priorities have always gotten in the way — paid projects, more interesting projects, reddit… I think most of you can relate😅

A problem that I hadn’t accounted for was that companies weren’t going to preserve their websites until I was ready to start on my portfolio.

There was a marketing site for Facebook Events that I was lead on and was hugely proud of, but it’s been three years and they’ve completely redone the site, and so many other sites that were either renovated to the point where I can only claim to have worked on their previous incarnations, or have just been shut down.

I started saving screenshots

It’s tedious. Do you capture all the pages? At what dimensions? You also miss any interactivity and animations. What do you do when a potential client asks you “what have you worked on?”, send them a zip of screenshots and describe how the interactive pieces were supposed to work?

What you should do instead — snapshot your sites.

The Internet Archive’s Wayback Machine is a good start, but you should also use webrecorder.io. It is not a screen-recording service, but rather saves webpages and their content, including Ajax requests.

Here’s an example snapshot of reddit

But that’s not the coolest part

Here’s a snapshot of my personal twitter feed:

My personal, logged-in twitter homepage

Try clicking on Dan’s comment (edit: I don’t mean in the image! Click the tweet from the example snapshot)

That window is populated with replayed Ajax requests! The tweet at the time of writing this post already has 325 likes, but it will always stay at 305 in this recording, even if Twitter changes their website and API.

Recordings of websites can be downloaded as warc.gz files — an open standard Web ARChive format that can be replayed online or offline.

To top it off, the service is open source and can be run locally using docker. You can self-host your own instance and never worry about it going offline!

If you’re a web developer or designer, you should start snapshotting your work ASAP. That way you can send your potential clients or employers links to archived versions of your sites, and allow yourself to come back to a site and selectively take screenshots for your portfolio, whenever you get around to building it.

Thanks for reading!

📬 Subscribe to my newsletter to receive drafts of upcoming articles before they’re published.

If you want to set up your own self-hosted webrecorder instance on Digital Ocean, have I got a shameless referral link for you!

This article is sponsored by my hobby project — npmcharts.com 📈Compare npm package download counts over time to spot trends and see which to use and which to avoid!

Here’s an interactive download histogram for Angular and react-router