drwpow

CSS Toolchain Megalist

A list of all CSS toolchains ever made (parsers, preprocessors, and transformers, NOT style kits like Bootstrap).

Name	Description	Created	Deprecated	Notes
Sass	GOATed preprocessor	2006		O

drwpow

CSS Custom Properties in React with TypeScript

Ever encounter the following error when trying to do the following?

<div style={{ '--height': '32px' }}>
              ~~~~~~~~~~~~~~~~~~
// Type '{ "--height": string; }' is not assignable to type 'Properties<string | number, string & {}>'.
//   Object literal may only specify known properties, and '"--height"' does not exist in type 'Properties<string | number, string & {}>'.

drwpow

Git diff files in Node

Useful for when you want to run a CI job only on files that have changed. Usage:

import { getChangedFiles } from './git-diff.js';

getChangedFiles('main');             // get list of diffs from "main"
getChangedFiles('[current branch]'); // get list of diffs from previous commit

drwpow

Blog posts

• You can’t fix diversity in tech without fixing the technical interview
• Gusto hires for culture enhancement, not culture fit
• Unpacking Interview Questions (series)

Tools

• re:Work — Structured interviewing Guide
• re:Work — Interviewer training Guide

drwpow

Count unique HSL colors

Convert every possible RGB value to HSL to map the overlapping color space.

Setup

1. Save this locally
2. Install the color-convert package
3. Run with node (node map-hsl.js)

drwpow

👾 Konami Code (browser-only)

Tiny, lightweight, cross-browser compatible. Only 461 bytes minified!

Instructions

Copy & paste into a `

drwpow

javascript:(()=>{function a(a){let b=a.cloneNode(!0);return b.querySelectorAll("a,b,br,code,em,i,mark,p,span,strong,strike").forEach(a=>{switch(a.tagName){case"A":{a.replaceWith(document.createTextNode("["),...a.childNodes,document.createTextNode("]"),document.createTextNode("("),document.createTextNode(a.getAttribute("href")),document.createTextNode(")"));break}case"B":case"STRONG":{a.replaceWith(document.createTextNode("**"),...a.childNodes,document.createTextNode("**"));break}case"BR":{a.replaceWith(document.createTextNode("\n"));break}case"EM":case"I":{a.replaceWith(document.createTextNode("_"),...a.childNodes,document.createTextNode("_"));break}case"CODE":{a.replaceWith(document.createTextNode("`"),...a.childNodes,document.createTextNode("`"));break}case"STRIKE":{a.replaceWith(document.createTextNode("~~"),...a.childNodes,document.createTextNode("~~"));break}case"MARK":case"SPAN":{a.replaceWith(...a.childNodes);break}case"P":{a.replaceWith(...a.childNodes,document.createTextNode("\n\n"));break}}}),b.inne

drwpow

Art

The woods would be very silent if no birds sang except those who sang best.

Henry Van Dyke

Love

I do not trust people who don’t love themselves and yet tell me “I love you.” There is an African saying which is: “Be careful when a naked person offers you a shirt.”

drwpow

/**
 * fetch() with retries
 * @param {string} url URL to fetch
 * @param {object} options All options required
 * @param {number} options.timeout Max timeout, in milliseconds (default: 5000)
 * @param {retries} options.retries Max number of retries (default: 2)
 */
async function fetchWithRetry(url, { timeout, retries } = { timeout: 5000, retries: 2 }) {
  let data;
  let controller;

drwpow

[
  "abdominal",
  "abrupt",
  "absolute",
  "academic",
  "acceptable",
  "acclaimed",
  "accomodating",
  "accountable",
  "accurate",