The deadly race to the South Pole

From the “Vox Darkroom” series: Robert Falcon Scott was a British explorer who dreamed of being the first person to reach the South Pole. In 1912, he reached the Pole only to learn that his Norwegian rival, Roald Amundsen, had beat him to it. Caught by freakish weather and a string of bad luck, his …

Run Lighthouse in a CI Pipeline using lighthouse-ci

Lighthouse CI is a set of commands that make continuously running, asserting, saving, and retrieving Lighthouse results as easy as possible. npm install -g @lhci/[email protected] lhci autorun –upload.target=temporary-public-storage || echo "LHCI failed!" Comes with default configurations for Travis, GitHub Actions, Circle CI, GitLab CI, and Jenkins. lighthouse-ci →

Upgrade to PHP 7.4 with Homebrew on Mac

Brent has done a writeup on how to upgrade your Homebrew-installed PHP version to PHP 7.4. Since the php formula now contains that 7.4 version (instead of 7.3 before), all you need to do is make sure brew is up-to-date and then upgrade the php formula itself: # make sure brew is up-to-date brew update …

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 …

Making a Better Custom Select Element

24ways – the advent calendar for web geeks – is back! First post is “Making a Better Custom Select Element” in which Julie Grundy tries to create an accessible Custom Select Element: Sometimes, I can’t recommend the select input. We want a way for someone to choose an item from a list of options, but …

Passing Elements as Props in React

I like this nuanced post by David Barral in which he goes over all the options on how to configure a Confirm component: what exactly do you pass in as props. In this story we are going to see a simple technique that allows you to write friendly customizable components with simple APIs, just by …

The Power of the JSON.stringify() replacer parameter

As previously detailed (2013 😱), you can use JSON.stringify()‘s second replacer parameter to pluck specific fields from it, by passing in an array: var person = {"name":"Jim Cowart","location":{"city":{"name":"Chattanooga","population":167674},"state":{"name":"Tennessee","abbreviation":"TN","population":6403000}},"company":"appendTo"}; JSON.stringify(person, ["name", "company"], 4); // ~> "{ // "name": "Jim Cowart", // "company": "appendTo" // }" As Pawel explains the parameter can also be a function, to …

Manage React State with zustand

Small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, that isn’t boilerplatey or opinionated, but still just enough to be explicit and flux-like. import create from 'zustand' const [useStore] = create(set => ({ count: 1, inc: () => set(state => ({ count: state.count + 1 })), dec: () => set(state …

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) => { …

Automatically upgrade your PHP code from 5.3 to PHP 7.4 with Rector

Rector is a reconstructor tool – it does instant upgrades and instant refactoring of your code. Why refactor manually if Rector can handle 80% for you? Installation per Composer: composer require rector/rector –dev For example, to upgrade the contents of the ./src folder: vendor/bin/rector process src –set php74 The cool thing is that Rector uses …