On Using Custom Properties

On Twitter, John Allsopp recently shared that Flexbox is the greatest thing that happed to CSS. I quickly chimed in with my personal favourite. To me the single greatest addition to CSS over the past 20 years is Custom Properties. They’ve opened up a ton of possibilities, and make us CSS Authors way more productive. …

ESNext: Import Assertions (JSON Modules, CSS Modules, …)

Did you know you can import JSON and CSS files just like you import JavaScript Modules? Thanks to Import Assertions, it’s as easy as this: Building upon "Import Assertions" we recently saw JSON Modules land in V8/Chromium 91: “`import json from './foo.json' assert { type: 'json' };“` In Chromium 93 the same thing for CSS …

Manage Google Maps API keys with the Google Cloud SDK (gcloud)

To manage cloud infrastructure I’m a huge fan of Terraform. Unfortunately I noticed that it’s not possible to use Terraform for managing API Keys for Google Maps (and other services). After some digging I found that the alpha version of the Google Cloud SDK has support for it. Commands available in the stable gcloud release: …

Prevent content from being hidden underneath the Virtual Keyboard by means of the VirtualKeyboard API

One of the problems on mobile devices is that the keyboard can hide some of your content. The VirtualKeyboard API aims to solve this. The Problem The current behavior on mobile devices in Safari on iOS is that as the keyboard gets shown, the Layout Viewport remains the same size but the Visual Viewport shrinks. …

Multiple Accounts and Git

If you have multiple accounts to use with Git — such as a personal and a work account — you can have your Git Config (typically ~/.gitconfig) conditionally include other configs depending on the folder you’re working in. In those extra configs you then can override some settings. Here’s an example ~/.gitconfig that has two …

Pick Colors from websites your entire screen with the JavaScript EyeDropper API

Mid-August the WICG published a (unofficial) specification for a Native Eye Dropper — a tool you can use to get the color from the pixel that’s underneath the cursor — on the web. Let’s take a look … Usage The proposal is pretty straightforward: This API enables authors to use a browser supplied eyedropper in …

Execute ES Modules on the CLI

Jonathan Neal shared this little snippet on Twitter: Execute JavaScript modules like: bash ./command.js 1. Add the funky header.2. Optional: Omit the extension to not write `.js`.3. Optional: `chmod +x command` to not write `bash `.https://t.co/rhlPg2XPRJ pic.twitter.com/nbAvTFtt0w — Jonathan Neal (@jon_neal) July 25, 2021 Here’s the code: “:” //#;exec /usr/bin/env node –input-type=module – “$@” < …