tunguskha

Gradient shadow in pure CSS

HTML

<button>Let's Go !</button>

jbmoelker

if ('performance' in window) {
    window.addEventListener('load', function () {
        var paintMetrics = performance.getEntriesByType('paint');
        if (paintMetrics !== undefined && paintMetrics.length > 0){
            console.table(paintMetrics.map(function(metric) {
                return {
                    event: metric.name,
                    startTime: metric.startTime.toFixed(2) + ' ms',
                    duration: metric.duration + ' ms'
                }

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);
   }
}