mirisuzanne

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.

Collaborators:

• Elika Etemad
• Florian Rivoal
• Miriam Suzanne
• Tab Atkins Jr.

developit

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.

Mparaiso

var camera, 
scene,
renderer,
group,
grid, 
wave , 
mesh,
currentLayout,
container,
layoutNames,

samthor

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;

rodydavis

// Convert an RGB color to HSL
function rgbToHsl(r, g, b) {
    r /= 255;
    g /= 255;
    b /= 255;
    var max = Math.max(r, g, b);
    var min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;
    if (max == min) {
        h = s = 0;

willurd

This is a small collection of scripts showing how to use require.js. It's only one of several ways of setting up a require.js project, but it's enough to get started.

At its core, require.js is about three things:

1. Dependency management
2. Modularity
3. Dynamic script loading

The following files show how these are achieved.

scottjehl

var list = [];
document.querySelectorAll("body *")
   .forEach(function(elem){ 
    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") )

btroncone

RxJS 5 Operators By Example

⚠️ UPDATE: I have moved the contents of this gist plus more to http://www.learnrxjs.io and https://github.com/btroncone/learn-rxjs. For expanded examples, explanations, and resources, please check out this new location!

A complete list of RxJS 5 operators with easy to understand explanations and runnable examples.

Table of Contents

• buffer
• bufferCount
• bufferTime

davatron5000

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.

jaydeepw

private void enableHTML5AppCache() {
		
	      webView.getSettings().setDomStorageEnabled(true);
	       
	      // Set cache size to 8 mb by default. should be more than enough
	      webView.getSettings().setAppCacheMaxSize(1024*1024*8);
	       
	      // This next one is crazy. It's the DEFAULT location for your app's cache
	      // But it didn't work for me without this line
	      webView.getSettings().setAppCachePath("/data/data/"+ getPackageName() +"/cache");