Sometimes I want a way to disable all CSS animations on a page. This is useful for end-to-end testing, automatic screenshots, or reducing motion sickness risk. This recent CSS Tricks post suggests disabling animations & transitions while resizing, to reduce needless browser work. This is an excellent idea! Here is the usual way of disabling […]
Author Archives: Simon
CSS snippet for better mobile screenshots
A useful tip when adding screenshots to posts or talks is to put them “inside” a device. This gives the screenshot some context. Even though this screenshot already contains Android top & bottom bars, with the added outline it’s immediately obvious it’s from a phone. To add the outline to images I use a simple […]
A little Awk
Awk is a command for doing things with text files. We give it a text file and it can do an action on each line. So we can print the whole line, or part of the line, or reorder parts. As a simple example, here’s a CSV of people’s last name, first name, age, and […]
Intercept requests with puppeteer
useful to mock backend responses when you don’t want to have to donate RAM to minikube when developing locally // from https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagesetrequestinterceptionvalue const puppeteer = require(‘puppeteer’); (async function main() { try { const browser = await puppeteer.launch({ headless: false }); const [page] = await browser.pages(); await page.setRequestInterception(true); page.on(‘request’, (interceptedRequest) => { if (interceptedRequest.url().includes(‘additional_metrics.json’) { interceptedRequest.respond({ […]
Numeronyms make Awful Names
a16z – Andresson Horowitz. I don’t hear/use this often enough to remember it, so completely forget what it stands for a11y – Accessibility. I come across this all the time, yet can never remember what word it is short for. Yet I link ‘a11y’ to the concept of accessibility. My issue with this is possibly […]
Sass Regrex
I was writing some large blocks of repetitive text in SCSS. Had some colors defined, and we wanted to group them in color-ranges, like this. So we started with with: $green-50: #f1fdf6; $green-100: #dcf5e7; $green-200: #b3e6c8; $green-300: #75d09b; $green-400: #37b96d; $green-500: #1aaa55; $green-600: #168f48; $green-700: #12753a; $green-800: #0e5a2d; $green-900: #0a4020; $green-950: #072b15; We want to […]
Troubles with input type=”number”
Using type=”number” on input fields is far less useful than I originally thought. We were previously using it for the form on Framer. Since they are number fields, having the number keyboard pop up on phones is something we wanted. It also prevents people typing in non-numbers, so there’s some free form validation. Here are […]
Find in Similar Files for VSCode
I want a shortcut for VSCode that lets me”Find in files”, but with the filter pre-filled to current file type. So searching from a scss file will default to searching scss files. Same for rb or js files. This might use a different shortcut to the default find in files, or use the same one […]
Utility CSS Is Not Inline Styles
I love utility CSS. It means I write CSS once, and change it rarely. I can quickly and easily add/change pages, and can often read a chunk of markup and know what something will look like. text-right font-bold is more obvious to me than nav_item–inner. But a common complaint is “it’s like inline styles”. This […]