Skip to content

Instantly share code, notes, and snippets.

Avatar
💀
calc(dev*design)

Adam Argyle argyleink

💀
calc(dev*design)
View GitHub Profile
@argyleink
argyleink / caption-color-hint.css
Created Mar 2, 2021
CSS gradient <color-hint> or <transition-hint> example
View caption-color-hint.css
figcaption {
background: linear-gradient(to top,
hsla(0 0% 0% / 90%),
75%, /* <color-hint> */
hsla(0 0% 0% / 0)
);
}
View conic.example.css
div {
background: conic-gradient(at top right, deeppink, rebeccapurple);
}
View hsl-lch-lightness.css
/* HSL's 50% lightness */
/* middle grey */
hsl(0 0% 50%)
lab(53.39% 0 -0.01)
/* 3.94:1 ❌ */
/* lime */
hsl(100 100% 50%)
lab(88.66% -77.99 84.31)
@argyleink
argyleink / is.css
Last active Nov 22, 2019
light intro to the :is() selector syntax and value
View is.css
/* before :is() */
button.focus,
button:focus {
...
}
/* after :is() */
button:is(.focus, :focus) {
...
}
View logical-property-border-example.css
main {
/* writing mode contextual shorthand for border-top and border-bottom respectively */
border-block: 1px solid hotpink;
/* writing mode contextual shorthand for border-left and border-right respectively */
border-inline: 1px solid hotpink;
}
@argyleink
argyleink / css&js.css
Created Dec 26, 2018
css and js doing similar tasks
View css&js.css
foo {
color: hsl(100,80%,75%);
background-color: hsl(100,20%,25%);
}
foo.map(styles => ({
...styles,
color: 'hsl(100,80%,75%)',
background-color: 'hsl(100,20%,25%)',
}))
@argyleink
argyleink / immutables.js
Last active Jun 14, 2019
immutable array examples
View immutables.js
const clone = x => [...x]
const push = y => x => [...x, y]
const pop = x => x.slice(0,-1)
const unshift = y => x => [y, ...x]
const shift = x => x.slice(1)
const sort = f => x => [...x].sort(f)
const delete = i => x => [...x.slice(0,i), ...x.slice(i+1)]
const splice = (s,c,...y) => x => [...x.slice(0,s), ...y, ...x.slice(s+c)]
const unique = arr => [...new Set(arr)]
@argyleink
argyleink / custom.element.js
Last active Dec 12, 2019
custom element with shadow dom
View custom.element.js
export default class CustomElement extends HTMLElement {
constructor() {
super()
this.$shadow = this.attachShadow()
this.$shadow.innerHTML = this.render()
}
connectedCallback() {}
disconnectedCallback() {}
@argyleink
argyleink / tweak-sublime-theme-italics.md
Last active Mar 9, 2021 — forked from lavaldi/tweaks-sublime-italic-operator-mono.md
Operator Mono (or others) & any Sublime Text 3 theme cursive settings
View tweak-sublime-theme-italics.md
  1. Install Package Resource Viewer.
  2. In package control window select ‘Package Resource Viewer: Open Resource’.
  3. Scroll down until you find the option: ‘Color Scheme — Default’ (or your theme with color scheme .tmTheme) and select it.
  4. Add the following to the end of the node to style selected (scope) syntax tokens cursive:
<dict>
	<key>name</key>
	<string>Mono Tweaks</string>
	<key>scope</key>
@argyleink
argyleink / ice-reveal.module.js
Last active May 7, 2018
simple, safe, compose-able, testable logic container
View ice-reveal.module.js
const module = (deps) => {
const actuallyPrivate = 'foo'
return Object.freeze({
interface
})
const interface = () =>
console.log(deps, actuallyPrivate)
}