Skip to content

Instantly share code, notes, and snippets.

💀
thoughts$.scan(x => x * 2).share()

Adam Argyle argyleink

💀
thoughts$.scan(x => x * 2).share()
Block or report user

Report or block argyleink

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@tomhodgins
tomhodgins / css-input.css
Last active Sep 5, 2019
Code from “How to Design & Support Your Own Custom CSS Features”, watch on YouTube → https://youtu.be/Q3yruVWYHWk
View css-input.css
@--variation 1 {
body { background: lime; }
h1 { font-size: 10pt; }
}
@--variation 2 {
body { background: orange; }
h1 { font-size: 99pt; }
}
@samthor
samthor / css-modules-plugin.mjs
Last active Aug 14, 2019
CSS Modules plugin for Rollup
View css-modules-plugin.mjs
import fs from 'fs';
// as per https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/CSSModules/v1Explainer.md
export default function cssModules() {
return {
name: 'css-modules',
async load(id) {
if (!id.endsWith('.css')) {
return;
@una
una / color-functions.md
Last active Nov 20, 2019
CSS Color Functions
View color-functions.md

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.

Examples:

  • 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

Proposal

View Importable Constructable Stylesheets.md

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
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) {
names
.split(' ')
.forEach(name =>
this.addEventListener(name, fn))
},
setAttributes: function(attrs) {
Object.entries(attrs)
.forEach(([key, val]) =>
@argyleink
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
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() {
previous=$?
if [ $previous -eq 0 ]; then
osascript -e "display notification \"Done\" with title \"Terminal Task\"" && say "it is done";
else
osascript -e "display notification \"Failed\" with title \"Terminal Task\"" && say "it went to the trees";
fi
}
View rxjs_operators_by_example.md
@davatron5000
davatron5000 / the-state-of-element-container-queries.md
Last active Nov 21, 2019
The State of Element/Container Queries
View the-state-of-element-container-queries.md

The State of Container Queries

tl;dr Developers would like the idea to style components based on a parent's width rather than depend solely on the viewport media query. This would allow modular components to style themselves while being agnostic to the viewport.

There is currently a lot of developer interest in getting a feature like Container Queries (née "Element Queryies") shipped in a browser.

2-min Catchup

Here are official'ish documents to outline the developer community's desires.

View bling.js
/* bling.js */
window.$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function (name, fn) {
this.addEventListener(name, fn);
}
NodeList.prototype.__proto__ = Array.prototype;
You can’t perform that action at this time.