andydavies

/* 
 * For more detail see https://andydavies.me/blog/2020/09/22/exploring-site-speed-optimisations-with-webpagetest-and-cloudflare-workers/
 * Started from Pat's example in https://www.slideshare.net/patrickmeenan/getting-the-most-out-of-webpagetest
 *
 * Change site to be site you want to experiment with
 */

const site = 'www.example.com';

async function handleRequest(request) {

tkadlec

:root {
 --violation-color: red; /* used for clear issues */
 --warning-color: orange; /* used for potential issues we should look into */
}

/* IMAGES */

/*
 * Lazy-Loaded Images Check
 * ====

scottjehl

var list = [];
document.querySelectorAll("body *")
   .forEach(function(elem){ 
    if(elem.getBoundingClientRect().width > document.body.getBoundingClientRect().width){ 
      list.push(elem.outerHTML.split('>')[0] + '>'); 
    } 
}); 
confirm( "these elements are wider than the viewport:\n\n " + list.join("\n") )

stowball

Front-End Guidelines

Table of Contents generated with DocToc

• CSS
  • Sass/SCSS
  • BEM
• CSS Syntax

adactio

// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/
(function (win, doc) {
    'use strict';
    if (!win.XMLHttpRequest || !win.FormData || !win.addEventListener || !doc.querySelectorAll) {
        // doesn't cut the mustard.
        return;
    }
    function hijaxForm (formElement) {
        var progressBar;

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

scottjehl

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/

---

For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

joecritch

.module {
  some: stuff;
  &__child {
    blah: blah;
  }
  &--modifier {
    modify: me;
  }
}

WebReflection

visit ie-touch repo for updates

LeaVerou

// DISCLAIMER: This is not necessarily good code. It’s just code that I wrote 
// as quickly as possible to do each task.

// 1

return 2*i;

// 2

return !(i%2);