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. …
Category Archives: Original Content
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 …
Continue reading “ESNext: Import Assertions (JSON Modules, CSS Modules, …)”
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: …
Continue reading “Manage Google Maps API keys with the Google Cloud SDK (gcloud
)”
CSS Container Queries: Container Relative Lengths
The Future of CSS: Cascade Layers (CSS @layer
)
Prevent content from being hidden underneath the Virtual Keyboard by means of the VirtualKeyboard API
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 …
Continue reading “Pick Colors from websites your entire screen with the JavaScript EyeDropper API”
CSS Container Queries: Chrome DevTools Support
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 – “$@” < …