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”

Read Post →

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 …

Continue reading “Google Cloud Platform Terraform Recipes”

Read Post →

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

Read Post →

React-Native “Could not find iPhone X simulator”

One of my React Native projects recently decided to no longer launch any of the iPhone Simulator devices anymore. When running react-native run-ios I was greeted with an error stating that the simulator could not be found. bramus in ~/repos/projects/react-native-maps-directions-example on master* $ react-native run-ios –simulator="iPhone X" Found Xcode project RNMapsExample.xcodeproj Could not find iPhone …

Continue reading “React-Native “Could not find iPhone X simulator””

Read Post →

“I didn’t know that” – A Short Talk Packed with JavaScript Tips and Tricks

Video of a lightning talk by Stefan Judis, as presented at NDC Oslo 2019, in which he highlights a few of the lesser known JavaScript things he learned over time His tips can also be found on his blog, in a dedicated “Today I Learned” section.

Read Post →

Hierarchic Indeterminate Checkboxes with JavaScript (Vanilla)

Earlier today Chris Coyier tweeted that he was in the process of rewriting one of his pens without jQuery: Been trying to re-write this without jQuery: https://t.co/xvsZMKsfvL I’m like 70% there but haven’t quite gotten it. jQuery is doing so much helpful DOM traversal here it’s a pain in the ass without it. — Chris …

Continue reading “Hierarchic Indeterminate Checkboxes with JavaScript (Vanilla)”

Read Post →

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”

Read Post →

Open your React Native’s Xcode project file from the CLI with xed

For a long time I always used the open command to open the Xcode project file contained inside React Native Projects. bramus in ~/repos/projects/react-native/example $ open ios/Example.xcodeproj It wasn’t until I recently started a new React Native project that react-native init afterwards informed me to use xed instead. The xed tool launches the Xcode application …

Continue reading “Open your React Native’s Xcode project file from the CLI with xed“

Read Post →

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 …

Continue reading “Stop Apple Spotlight from slowing down your Mac by preventing it to index node_modules folders”

Read Post →