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)

jbmoelker

import { h } from 'preact';
import { Details, Summary } from './DetailsSummary';

const App = () => (
    <Details>
        <Summary>This is a summary supporting <code>HTML</code></Summary>
        <p>... with expandible details.</p>
        <p>Based on <a href="http://html5doctor.com/summary-figcaption-element/">HTML5 details/summary elements</a>.</p>
        <p>And added <a href="http://caniuse.com/#feat=details">support for browsers</a> lacking built-in support.</p>
    </Details> 

addyosmani

/*

Flexbox CSS helpers from the Polymer team. Extracted from https://github.com/PolymerElements/iron-flex-layout for use as just CSS.
Docs: https://elements.polymer-project.org/guides/flex-layout

@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt

chicoxyzzy

Now using node v4.7.2 (npm v2.15.11)

  // v8 4.5.103.43 (Node.js 4.7.2)

forVar_______: 2ms
forLet_______: 13ms
forOfVar_____: 66ms
forOfLetConst: 64ms
forEachVar___: 15ms
forEachLet___: 21ms

threepointone

// this is a generic runner for iterators 
// for every yield, it checks to see if any time is remaining 
// on the idle loop, and executes more work if so. 
// else, it queues up for the next idle period 

function go(it, callback){
  requestIdleCallback(deadline => {
    let val = it.next()
    while(!val.done){
      if(deadline.timeRemaining() <= 0){

cramforce

/**
 * Delays calling the given function until the browser is notifying us
 * about a certain minimum budget or the timeout is reached.
 * @param {!Window} win
 * @param {number} startTime When we started waiting for idle.
 * @param {number} minimumTimeRemaining Minimum number of millis idle
 *     budget for callback to fire.
 * @param {number} timeout in millis for callback to fire.
 * @param {function()} fn Callback.
 */

addyosmani

RAIL encouraged loading a site in under 1000ms on cable and (not well documented) between 3000ms and 5000ms on 3G. This loosely correlates to Google's research that 53% of mobile users will abandon a site if it doesn't load in 3s. So 5s is the headroom we give you for loading and becoming interactive so a user can realistically tap on a part of your user interface and have something useful happen. Loading is more nuanced than we as web developers once thought however.

It's is a pretty broad term and we don'the think it's enough for the page to "look" done. It should be engagable.

kurtextrem

// no leading call, only trailing
function debounce(callback, timeout, _time) {
  timeout = timeout || 100;
  
  return function debounce() {
    window.clearTimeout(_time);
    _time = window.setTimeout(callback, timeout);
   }
}

colingourlay

(function(x,y,z){(x[y]&&x[y](z))||z()})(window,'requestIdleCallback',function(){
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X', 'auto');
ga('send', 'pageview');
});

shtrih

//META{"name":"CollapsibleEmbeds"}*//
/*
 Check for Updates: https://gist.github.com/shtrih/59a8be1f9ff53f0499c2
 How to install:
     1. If you don't have it, get Discord from https://discordapp.com/apps
     2. Download BetterDiscord for your platform on https://betterdiscord.net/home
     3. Push the button «Raw» then Ctrl + S.
     3. Place the plugin in %appdata%\BetterDiscord\plugins\.
     4. Refresh Discord with Ctrl + Shift + R or just restart Discord completely.
     5. Go to the BetterDiscord settings → plugins tab and check plugin.