Ire Aderinokun, author of the CanIUse Embed, has added an extra option where you can embed static images of features as mentioned on CanIUse.com. The images are generated using Puppeteer, are stored on Cloudinary, and are updated daily using Heroku Scheduler.
What I wanted to do was have a URL linking to an image (hosted on Cloudinary) that I would periodically update with the support table for that feature. For example, to get the latest image of CSS Grid support, anyone could use this URL: https://caniuse.bitsofco.de/image/css-grid.png
A detailed writeup on how she created those images (and how she updates) takes you through the whole process.
Here’s the source of a Google Cloud function that, using Puppeteer, takes a screenshot of a given website and store the resulting screenshot in a bucket on Google Cloud Storage:
💡 If I were to run this in production I’d extend the code to first check the presence of an existing screenshot in the bucket or not, and – if the screenshot is not too old – redirect to it.
A tweet that’s been making rounds this week is on how to disable macOS Mojave’s floating screenshot preview thumbnail (and remove that delay along with it).
PSA: If you’re on macOS Mojave, you can revert to the old, good, screenshot behavior
(no floating screenshot thumbnail, no delay before file shows on desktop)
✨ 1: ⌘+Shift+5 2: Click “options” on the toolbar 3: Uncheck “Show floating thumbnail” ✨
☝ I’ve also added this tweak to ./freshinstall, a tool which I built to automatically configure my MacBook (Preferences, Dotfiles, Installed Software, etc)
Did this help you out? Like what you see? Thank me with a coffee.
I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!
Nice new tool by Cameron Adams (The Man in Blue): just enter the URL of a tweet, et voila: you get a screenshot – without any cruft and in a decent resolution – in return.
To do this on the technical side, I fetch the tweet text using Twitter’s API and then analyse the author’s profile picture using Color Thief; this gives me a nice background colour that matches their profile picture, which I then layer with a lightly transparent copy of their Twitter header to produce a good-looking backdrop to their tweet.
To capture the final image, I use the excellent html2canvas to render all the HTML to a canvas element and then save out the pixel data. Bingo! You get an image of your tweet.
Supports link and hashtagh highlighting, but would also love to see image support. That’d really complete it.
This one’s quite fun: tlapse is a tiny utility that takes periodic screenshots of your site while you develop. Combine all generated screenshots and you can get a sequence like this:
The interval to take screenshots is configurable, and duplicates are omitted.
The folks over at Spatie have just release Browsershot v3:
Browsershot is a PHP package which can convert a webpage to an image or pdf. The conversion is done behind the scenes by Puppeteer which controls a headless version of Google Chrome.
Conversion is easy-peasy, hence this example:
use Spatie\Browsershot\Browsershot;
// an image will be saved
Browsershot::url('https://example.com')
->save($pathToImage);
To save to a PDF give the target path a .pdf extension, or use the savePdf() method. Here’s an example with some more manipulations: