Embeddable CanIUse Images

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.

How I created 488 “live images” →

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) => {
  res.setHeader("content-type", "application/json");
  
  try {
    const buffer = await takeScreenshot(req.body);
    
    let screenshotUrl = await uploadToGoogleCloud(buffer, "screenshot.png");
    
    res.status(200).send(JSON.stringify({
      'screenshotUrl': screenshotUrl
    }));
    
  } catch(error) {
    res.status(422).send(JSON.stringify({
      error: error.message,
    }));
  }
};

async function uploadToGoogleCloud(buffer, filename) {
    const storage = new Storage({
        projectId: GOOGLE_CLOUD_PROJECT_ID,
    });

    const bucket = storage.bucket(BUCKET_NAME);

    const file = bucket.file(filename);
    await uploadBuffer(file, buffer, filename);
  
    await file.makePublic();

  	return `https://${BUCKET_NAME}.storage.googleapis.com/${filename}`;
}

async function takeScreenshot(params) {
	const browser = await puppeteer.launch({
		args: ['--no-sandbox']
	});
	const page = await browser.newPage();
	await page.goto(params.url, {waitUntil: 'networkidle2'});

	const buffer = await page.screenshot();

	await page.close();
	await browser.close();
  
  	return buffer;
}

async function uploadBuffer(file, buffer, filename) {
    return new Promise((resolve) => {
        file.save(buffer, { destination: filename }, () => {
            resolve();
        });
    })
}

Usage:

curl -X POST -d '{"url": "https://github.com"}' https://google-cloud-endpoint/my-function

Building a Website Screenshot API →

💡 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.

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:

  1. Once with prefers-color-scheme disabled (using --disable-blink-features=MediaQueryPrefersColorScheme)
  2. Once with Dark Mode force enabled (using --force-dark-mode)

dark-mode-screenshot (GitHub) →

❓ New to Dark Mode? No worries, this post on CSS Color Scheme Queries has got you covered.

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).

Nice, but there’s also a way to do this from the CLI:

defaults write com.apple.screencapture show-thumbnail -bool FALSE
killall SystemUIServer

There, much better 😉

Happy Screenshotting! 📸

☝ 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!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

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 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.

Screenshot a Tweet →
Screenshot a Tweet introductory post →

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 your web development →

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 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:

Browsershot::html($someHtml)
   ->paperSize($width, $height)
   ->margins($top, $right, $bottom, $left)
   ->save('example.pdf');

Don’t forget to install the required puppeteer:

npm install puppeteer

Browsershot →