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 →

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 […]

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 […]