jimmielemontgomery

'use strict';
/*
transform JSX to tagged template literals

history:

2019-01-25 initial working draft

available types:
JSX_TYPES = [

developit

export function loadConfigModule(filename) {
  // sub your own
  return require(filename);
}

/**
 *  Modify a Webpack configuration by applying a mutator module/function.
 *  @param {Object} options
 *  @param {Object} options.config    Webpack configuration object to modify in-place

developit

module.exports = {
  format(parts) {
    return new URL(parts).href;
  },
  parse(url) {
    const parsed = new URL(url);
    parsed.query = parsed.search ? parsed.search.substring(1) : null;
    parsed.auth = parsed.username + ':' + parsed.password;
    return parsed;
  },

necolas

/**
 * OnLayout is built upon: View (and ResizeObserver), StyleSheet
 */
 
const elementBreakpoints = {
  small: { minWidth: 200 },
  medium: { minWidth: 300 }
  large: { minWidth: 500 }
};
 

jakub-g

Testing double-fetching of module/nomodule JS code (including the Safari hack)

<script type="module" src="module.js"></script>
<script nomodule src="nomodule.js"></script>

Update September 2020: life's almost good. Edge Chromium is widely rolled out, and Safari 14.0 ships soon with a fix.

Test page: https://jg-testpage.github.io/es-modules/module-nomodule/

jakub-g

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

developit

🐻 valoo

just the bare necessities of state management.

Usage

Hotlink it from https://unpkg.com/valoo.

See Interactive Codepen Demo.

marianoviola

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import buble from 'rollup-plugin-buble';
import uglify from 'rollup-plugin-uglify';
import postcss from 'postcss';
import postcssImport from 'postcss-import';
import postcssCssnext from 'postcss-cssnext';

const production = !process.env.ROLLUP_WATCH;

iamakulov

Analysis of passive: true

In 2017, Chrome, Firefox and Safari added support for passive event listeners. They help to make scrolling work smoother and are enabled by passing {passive: true} into addEventListener().

The explainer mentions that passive: true works for wheel and touch events. I practically analyzed when passive: true actually helps:

Event	Works better with passive: true	Is passive by default
wheel¹	Yes (Chrome), No (Firefox)	No (Chrome), No (Firefox)
touchstart	Yes (Chrome), ?² (Firefox)	Yes (Chrome), ?² (Firefox)

PaulKinlan

const range = function* (stop = 0, step = 1) {
    const shouldStop = (n)=>stop >= 0 ? (n < stop) : (n > stop);
    const interval = (n)=>stop >= 0 ? n + step : n - step;
    let itr = function*() {
        let i = 0;
        while (shouldStop(i)) {
            yield i;
            i = interval(i);
        }
    };