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

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;

stowball

Front-End Guidelines

Table of Contents generated with DocToc

• CSS
  • Sass/SCSS
  • BEM
• CSS Syntax

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") )

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
 * ====

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) {