Skip to content

Instantly share code, notes, and snippets.


Adam Argyle argyleink

View GitHub Profile
Myndex /
Last active Oct 13, 2021
A discussion that continues the Lab/Luv Gist. This one on working spaces and whitepoints.

Will Work For Color

Color Manglement and Working Spaces.

A continuation of the Lab/Luv Gist

Let's not forget the many other color appearance models and methods. CAM02-UCS, RLAB, LLAB, IPT, CAM16 which is Luo's work in progress, etc. Many choices beyond the 44 year old Lab. The fact that Lab is one of the PCS used in ICC profiles is notwithstanding. If you look through profiles, you'll see that Lab is typically used as a PCS in profiles for CMYK and printing, while RGB space and monitor profiles use XYZ for the PCS.

Among other things, XYZ is computationally simpler than Lab. XYZ is infinite/unbounded••, you can transit through it without much penalty assuming the same source and destination illuminant (D65), here the fact the PCS is "D50" is essentially irrelevant: we are never really "in" D50, just passing through. Gamut mapping, soft clipping, etc. are usually not a huge concern going from a D65 RGB to another D65 RGB especiall

scottjehl / whichones.js
Created Aug 21, 2020
which elements are wider than the viewport?
View whichones.js
var list = [];
document.querySelectorAll("body *")
if(elem.getBoundingClientRect().width > document.body.getBoundingClientRect().width){
list.push(elem.outerHTML.split('>')[0] + '>');
confirm( "these elements are wider than the viewport:\n\n " + list.join("\n") )

Cascade Layers, a Proposal

A syntax proposal for Cascade Layers #4470. This does not include full discussion of the Cascade Layer purpose and use-cases, which can be found in the various linked issues, but attempts to answer many of the outstanding questions about how we might implement a layering feature.


  • Elika Etemad
  • Florian Rivoal
  • Miriam Suzanne
  • Tab Atkins Jr.
tomhodgins / css-input.css
Last active Sep 5, 2019
Code from “How to Design & Support Your Own Custom CSS Features”, watch on YouTube →
View css-input.css
@--variation 1 {
body { background: lime; }
h1 { font-size: 10pt; }
@--variation 2 {
body { background: orange; }
h1 { font-size: 99pt; }
samthor / css-modules-plugin.mjs
Last active Aug 2, 2022
CSS Modules plugin for Rollup
View css-modules-plugin.mjs
import fs from 'fs';
// as per
export default function cssModules() {
return {
name: 'css-modules',
async load(id) {
if (!id.endsWith('.css')) {
una /
Last active Mar 11, 2020
CSS Color Functions

CSS Color Functions

Web developers and design systems developers often use functions to design components. With the increasing usage of design systems that support multiple platforms, and increased capability of Dark Mode in UI, this becomes even more useful to not need to manually set color, and to instead have a single source from which layouts are calculated. Currently Sass, calc() on HSL values, or PostCSS is used to do this.


  • Components with color variations based on calculations from a parent. (i.e. Button with outline that uses the primary button color to adjust the size)
  • Theming - Palletes based on a color or set of colors for themes. Especially when a single base system is used with multiple themes
  • Uniformity among transformations between components with different primary colors


View Importable Constructable

Proposal: Importable Constructable Stylesheets

We're getting Constructable Stylesheets. This seems like an intuitive value to obtain when importing CSS from JavaScript, since it's the DOM's representation of a Stylesheet:

import stylesheet from './style.css';
console.log(stylesheet);  // CSSStyleSheet

No such system is in place to allow this to work (see [whatwg/loader]), however frontend build tooling has congregated around this approach as a mechanism for bringing CSS assets into the JavaScript module graph. There are many benefits to be obtained from moving CSS into this graph, however the most important is that imported CSS can be attributed to the consuming JS Module. This allows it to be bundled, optimized, and potentially dead-code-eliminated leveraging static analysis performed on the surrounding module graph.

argyleink / blingbling.js
Last active May 19, 2018 — forked from paulirish/bling.js
add some sugar to bling dot js
View blingbling.js
const sugar = {
on: function(names, fn) {
.split(' ')
.forEach(name =>
this.addEventListener(name, fn))
setAttributes: function(attrs) {
.forEach(([key, val]) =>
argyleink / easings.css
Created Feb 26, 2018
Handy CSS properties for easing functions
View easings.css
:root {
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
staltz / .bashrc
Created Mar 7, 2017
Show a macOS notification when a terminal task is done
View .bashrc
# Name it whatever you want. I like `y` because in my keyboard layout it's close to `;`
function y() {
if [ $previous -eq 0 ]; then
osascript -e "display notification \"Done\" with title \"Terminal Task\"" && say "it is done";
osascript -e "display notification \"Failed\" with title \"Terminal Task\"" && say "it went to the trees";