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 […]
Tag Archives: screenshot
Building a Website Screenshot API with Puppeteer and Google Cloud Functions
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: const puppeteer = require('puppeteer'); const { Storage } = require('@google-cloud/storage'); const GOOGLE_CLOUD_PROJECT_ID = "screenshotapi"; const BUCKET_NAME = "screenshot-api-net"; exports.run = async (req, res) => { […]
Take both Light and Dark Mode screenshots with Puppeteer
dark-mode-screenshot is a Puppeteer script to take screenshots of both the light and dark mode versions of a website. $ npx dark-mode-screenshot –url https://googlechromelabs.github.io/dark-mode-toggle/demo/index.html –output screenshot –fullPage Works in somewhat odd way first requiring the OS to have dark mode enabled (?), and then launch Chromium: Once with prefers-color-scheme disabled (using –disable-blink-features=MediaQueryPrefersColorScheme) Once with Dark […]
macOS Mojave: Disable the floating screenshot thumbnail (using defaults write)
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+52: Click […]
carbon-cli – Carbon, from the CLI
carbon-cli is a CLI tool which interacts with the aforementioned Carbon, allowing you to create beautiful images of your source code. Installation per NPM/Yarn, or run it directly using npx npm i -g carbon-cli Usage is quite simple: carbon -f file.js carbon-cli – Carbon, from the CLI →
Easily create high resolution Twitter screenshots with “Screenshot a Tweet”
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 […]
Generate code screenshots straight from within Visual Studio Code with Polacode
Remember those really nice screenshots of code, generated with Carbon? Polacode is an extension for Visual Studio Code that offers (somewhat) the same functionality directly inside the IDE. Polacode – Polaroid for your Code →
Create a timelapse of your web development with tlapse
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. tlapse –every 60s –directory ./screens — localhost:3000 tlapse – Create a timelapse of […]
Browsershot: Convert a webpage to an image or PDF using headless Chrome
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 […]
Create and share beautiful images of your source code with Carbon
Carbon is a great tool to create lovely source code screenshots you can share. Just start typing, or drop a file into the textarea. An example image generated by Carbon is included above. Supports several themes and syntaxes. Carbon →