Jun Fu 文蔺 AngusFu

Pure SASS-adaption of Lea Verou's contrast-ratio javascript. Can be useful when eg. generating colored buttons from a single supplied color as you can then check which out of a couple of text colors would give the best contrast.

This script currently lacks the support for alpha-transparency that Lea supports in her script though.

In addition to the color-contrast adaption there's also some math methods that were needed to be able to calculate the exponent of a number and especially so when the exponent is a decimal number. A 2.4 exponent is used to calculate the luminance of a color and calculating such a thing is not something that SASS supports out of the box and not something I found a good pure-SASS script for calculating and I much prefer pure-SASS over ruby extensions. The math methods might perhaps be unecessary though if you're running Compass or similar as they may provide compatible math methods themselves.

Normal usage: `color: pick_best_color(#f00

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

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.

用例子讲解 RxJS 5 的 Operators 。

原文链接：RxJS 5 Operators By Example by @btroncone

JS Pop Quiz: How well do you know your functions?

Given an Array of Functions fns, what argument(s) can you pass to fns.forEach such that each function in fns will execute, in order, without creating any anonymous (or named) functions or invoking the Function constructor?

Conditions

Do not use the function keyword, or arrow functions () => .
Do not invoke the Function constructor.
Do not use method definitions.
Function#bind & friends on the Function.prototype are ok.

Experiments

http://absulit.com/portfolio/demo/webvr/001/
https://www.clicktorelease.com/code/polygon-shredder/vr/ #positional
https://www.clicktorelease.com/tmp/threejs/webvr-physics/ #positional #input #haptic
https://janusweb.metacade.com/ https://github.com/jbaicoianu/janusweb/
https://jzitelli.github.io/poolvr/
https://kuva.io/block-background/ #positional #input
https://www.shadertoy.com/results?filter=vr
https://vr-batted-ball-vis.herokuapp.com/index.html

Edit — February 2019

This gist had a far larger impact than I imagined it would, and apparently people are still finding it, so a quick update:

TC39 is currently moving forward with a slightly different version of TLA, referred to as 'variant B', in which a module with TLA doesn't block sibling execution. This vastly reduces the danger of parallelizable work happening in serial and thereby delaying startup, which was the concern that motivated me to write this gist
In the wild, we're seeing (async main(){...}()) as a substitute for TLA. This completely eliminates the blocking problem (yay!) but it's less powerful, and harder to statically analyse (boo). In other words the lack of TLA is causing real problems
Therefore, a version of TLA that solves the original issue is a valuable addition to the language, and I'm in full support of the current proposal, which you can read here.

I'll leave the rest of this document unedited, for archaeological

Array Iteration

https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it mu

	//
	// _oo0oo_
	// o8888888o
	// 88" . "88
	// (\| -_- \|)
	// 0\ = /0
	// ___/`---'\___
	// .' \\\| \|// '.
	// / \\\|\|\| : \|\|\|// \
	// / _\|\|\|\|\| -:- \|\|\|\|\|- \

	/*
	* This script will download a package (and all of its dependencies) from the
	* online NPM registry, then create a gzip'd tarball containing that package
	* and all of its dependencies. This archive can then be copied to a machine
	* without internet access and installed using npm.
	*
	* The idea is pretty simple:
	* - npm install [package]
	* - rewrite [package]/package.json to copy dependencies to bundleDependencies
	* - npm pack [package]