SessionBox – Log in with multiple accounts to any website

For some online services such as Twitter and Facebook I have more than one account. Be it accounts for my company, an alter ego, my children, etc. To easily switch between these accounts – without logging out, back in, and doing the 2FA dance – I rely on a Chrome Extension named SessionBox which allows […]

class-names – Conditionally join CSS class names together

One of the packages I’ve been using a lot is classnames, a simple JavaScript utility for conditionally joining classNames together. Recently I stumbled upon @sindresorhus/class-names, a likewise package whose usage is very similar. import classNames from '@sindresorhus/class-names'; // Think of these like props of your React component … const props = { type: 'success', small: […]

react-use – Browser APIs as React Hooks

react-use is a collection of React Hooks that wrap many browser APIs and functions. Want to track the geolocation of a device? Use useGeolocation. Want to read the battery status? Use useBattery. Etc. import {useBattery} from 'react-use'; const Demo = () => { const batteryState = useBattery(); if (!batteryState.isSupported) { return ( <div> <strong>Battery sensor</strong>: […]

React Navigation 5.0 alpha – Rethinking Navigation as a Component-first API

Just announced at React Native EU is an alpha release of React Navigation 5.0, a navigator for use with React Native. An exploration of a component-first API for React Navigation for building more dynamic navigation solutions. Should play well with static type system Navigation state should be contained in root component (helpful for stuff such […]

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

Google Cloud Platform Terraform Recipes

At work we’ve recently started to use Terraform to manage the cloud infrastructure of our clients. During my initial research on how to set up a Cloud SQL instance using Terraform, I stumbled upon the “Terraform Google Modules” organization (unaffiliated to Google). They provide several Terraform modules in order to easily create: A Kubernetes Engine […]

Convert a Google Doc to Markdown or HTML with “Docs to Markdown”

Now this comes in handy: Docs to Markdown (GD2md-html) converts Google Docs to simple, readable Markdown or HTML. This add-on allows you to create documents using the excellent editing and collaborative features of Google Docs, but publish as Markdown or HTML that you can store as text files using a version-control system. Docs to Markdown […]

pagemap, a mini map navigation for web pages

Many text editors nowadays sport a minimap on the right hand side of the screen. Pagemap is like that, but for webpages: To use it, position a canvas element fixed on your screen, and tell pagemap which elements to include in the map: <canvas id="map"></canvas> #map { position: fixed; top: 0; right: 0; width: 200px; […]

Stop Apple Spotlight from slowing down your Mac by preventing it to index node_modules folders

Speaking of node_modules folders, this tip by Roel Van Gils came to mind: Does your Mac becomes slow/unresponsive (fans kicking in etc.) when you `npm install` a huge project with a million tiny dependencies? I learned that adding an empty `.metadata_never_index` in /node_modules *beforehand* will prevent Spotlight from indexing all that crap. — Roel Van […]

Easily find and remove old and heavy node_modules/vendor folders with npkill

When working in web, you can be left with several lost node_modules (JS) and vendor (PHP) folders spread across your filesystem, unnecessarily taking up space. To find these, I use the following command: # List all node_modules (from current directory down) and their size $ find . -name ‘node_modules’ -type d -prune -print | xargs […]