PurpleBooth

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Rich-Harris

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

Chalarangelo

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};

bradtraversy

GENERATORS:

• Text Content Generator - http://www.lipsum.com
• Favicon Generator - http://tools.dynamicdrive.com/favicon
• Data Generator - https://mockaroo.com/
• Mobile Mockup Generator - https://mockuphone.com
• Logo Generator - https://www.logaster.com
• UUID Generator - https://www.uuidgenerator.net/
• Hash Generator - https://passwordsgenerator.net/sha256-hash-generator/
• Ultimate Code Generator - https://webcode.tools/

charisTheo

navigate    https://www.example.com

addHeader	Link: <images/example-image.jpg>; rel=preload; as=image

addHeader	Link: <https://fonts.gstatic.com>; rel=preconnect

addHeader	Link: </next-page-navigation>; rel=prefetch

danieltxok

javascript:
(function(){
  try {
    let cls = 0;
    const canvas = document.createElement('canvas');
    canvas.style.width = '100%';
    canvas.style.height = '100%';
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.style.position = 'absolute';

danieltxok

javascript:
new PerformanceObserver((entryList)=>{
    for (const entry of entryList.getEntries()) {
        let consoleGroup = `%cLCP candidate: ${Math.round(entry.startTime)}ms`;
        let styles = '';
        if (entry.startTime >= 2500) {
          styles = 'color: red;';
        }
        console.group(consoleGroup, styles);
        console.log('Element:', entry.element);

danieltxok

javascript:
new PerformanceObserver((entryList)=>{
    for (const entry of entryList.getEntries()) {
        const delay = entry.processingStart - entry.startTime;
        let consoleGroup = `%cFID value: ${Math.round(delay)}ms`;
        let styles = '';
        if (delay >= 100) {
          styles = 'color: red;';
        }
        console.group(consoleGroup, styles);

mmocny

// max-INP:
(()=>{let o=globalThis;return void 0===o.winp&&(o.winp=0,new PerformanceObserver(n=>{for(let e of n.getEntries()){if(!e.interactionId)continue;o.winp=Math.max(e.duration,o.winp);let r=o=>o<=200?"color: green":o<=500?"color: yellow":"color: red";console.log(`%c[Interaction: ${e.name.padEnd(12)}] %cDuration: %c${e.duration}`,"color: grey; font-family: Consolas,monospace","",r(e.duration))}}).observe({type:"event",durationThreshold:0,buffered:!0})),o.winp})();

// interactionCount
performance.interactionCount;