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 😅
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 that the agency I worked at made for Facebook Events that was really proud of, but in the three years since, they’ve completely redone the site. Many other sites I’ve worked on were also either renovated to the point where I can only claim to have worked on their previous incarnations, or have been completely 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 there’s an even better option that I recently discovered — webrecorder.io (it’s a free service, open source, operated by a non-profit). 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:
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
