The Webkit blog, on how to optimize your pages so that they don’t drain the battery of your visitors their devices: Users spend a large proportion of their online time on mobile devices, and a significant fraction of the rest is users on untethered laptop computers. For both, battery life is critical. In this post, …
Tag Archives: link
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 …
Continue reading “SessionBox – Log in with multiple accounts to any website”
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: …
Continue reading “class-names – Conditionally join CSS class names together”
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 …
Continue reading “React Navigation 5.0 alpha – Rethinking Navigation as a Component-first API”
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 …
Continue reading “Take both Light and Dark Mode screenshots with Puppeteer”
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 …
Continue reading “Convert a Google Doc to Markdown or HTML with “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; …
Continue reading “pagemap, a mini map navigation for web pages”
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 …