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 […]
Tag Archives: screenshot
macOS Mojava: 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 →
Get screenshots of websites in different resolutions with pageres
$ pageres bram.us 1366×768 1600×900 ✔ Successfully generated 2 screenshots from 1 url and 2 resolutions Install it using npm: $ npm install –global pageres pageres →
Barry – Save full length webpages as images using your iPhone and iPad
Barry makes it really simple to capture a full length webpage. We scroll the full length of the page and save it to an image for you to use. Barry →