think-john

"How Fast is Fast" notes

These are notes that Brian McElaney and Amanda Kalk will be using to answer questions in our webinar chat. You may have been given this link directly -- welcome! Feel free to add comments with your questions below, and we will follow up with you!

-- John Young

How to measure the speed index using Lighthouse

First: set up a clean profile

reecelucas

import { useRef } from 'react';

const safeDocument = typeof document !== 'undefined' ? document : {};

/**
 * Usage:
 * const [blockScroll, allowScroll] = useScrollBlock();
 */
export default () => {
  const scrollBlocked = useRef();

rafaelrozon

import React from 'react';
import { storiesOf } from '@storybook/react';

// 1. import axios and MockAdapter
import  axios from 'axios';
import  MockAdapter from 'axios-mock-adapter';

// 2. create the mock
const mock = new MockAdapter(axios);

tomhodgins

// CSS Overlay
var overlay_styles = document.createElement('style')
var virtual_stylesheet = document.createElement('style')
var textarea = document.createElement('textarea');

overlay_styles.textContent = `
  [data-css=overlay] {
    box-sizing: border-box;
    margin: 0;
    padding: 1em;

sanusart

// ./__mocks__/localStorage.js
let mockStorage = {};

module.exports = window.localStorage = {
  setItem: (key, val) => Object.assign(mockStorage, {[key]: val}),
  getItem: (key) => mockStorage[key],
  clear: () => mockStorage = {}
};

mrdoob

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

barneycarroll

jquery.scrollLock.js

Useful for when a blocking user experience is needed (in my case, didn't want people unwittingly loosing their place by scrolling while a modal required their attention): $.scrollLock() locks the body in place, preventing scroll until it is unlocked.

// Locks the page if it's currently unlocked
$.scrollLock();

// ...or vice versa

afrex

,\s*?\]|,\s+}