PhilippeVay

/**
 * Highlight images and alike while making the rest of content barely visible.
 * 
 * Useful for accessibility audits (RGAA / WCAG) to help distinguish visually HTML images from background images, icon fonts, etc
 * Performance isn't good (not that bad either). Scrolling is kind of sluggish in taaaall pages with dozens of images (bursts of
 * 100% CPU time with a Ryzen 5 laptop). Initial execution time is OK.
 * Pure CSS solution with `rgba(0,0,0, 0.2)` is way better.
 * 
 * This script:
 *  - gets the position and dimensions of each images,

PhilippeVay

// Bookmarklet "Isolate images" (unescaped and beautified code below)
// It's part of many other (stellar) bookmarklets "A11y Tools"
// Author: Lloydi
// Source: https://a11y-tools.com/bookmarklets/#isolateimages
(function () {
  'use strict'

  function isolateImages() {
    const els = document.querySelectorAll('*');
    const page = document.querySelector('body');

PhilippeVay

/* ==UserStyle==
@name           Highlight links and some indications
@namespace      github.com/openstyles/stylus
@version        0.1.0
@description    Links are highlighted with their title and aria-label/labelledby attributes
@author         Philippe Vayssière
==/UserStyle== */

/*
  TODO: counting links (with title, aria-label and aria-labelledby)

PhilippeVay

/* ==UserStyle==
@name           Headings: display and count
@namespace      github.com/openstyles/stylus
@version        0.1.0
@description    Highlight headings h1 to h6 plus role="heading". Count total number and also each level and role.
@author         Philippe Vayssière
==/UserStyle== */

/* Counting elements is adapted from a Stylus script made by Access42. Hat tip to them! */

PhilippeVay

/* ==UserStyle==
@name           Language indications
@namespace      github.com/openstyles/stylus
@version        0.1.0
@description    Displays page language and highlights changes of languages in content for 2 dozens of lang codes. Display total number of changes.
@author         Philippe Vayssière
==/UserStyle== */

/* Count of [lang] in the sidebar is adapted from a Stylus script made by Access42. Hat tip to them! */

PhilippeVay

/* ==UserStyle==
@name           Empty elements
@namespace      github.com/openstyles/stylus
@version        0.1.0
@description    Highlight and count empty elements (and blank ones only in Firefox)
@author         Philippe Vayssière
==/UserStyle== */

:root {
  --white: white;

PhilippeVay

/*
  Dépendance : ce script doit être concaténé à
    https://github.com/WhatSock/w3c-alternative-text-computation/tree/master/docs/Sample%20JavaScript%20Recursion%20Algorithm
    qui calcule le nom accessible d'un élément.

  Description:
  Title attribute in links must contain link content
  Display in *browser console* all links having a title and whether there's an error or if it's OK.

  Date: September 2022

PhilippeVay

# Encodes SVG to suitable string for CSS inlining
# Usage in terminal: sed -f svg-encode-inline.sed your-minified-with-svgomg-icon.svg > your-encoded-icon.svg
# Then paste result in your CSS as `background-image: url("data:image/svg+xml,PASTE");`
#
# Equivalent to
#  .replace(/"/g, '\'')
#  .replace(/%/g, '%25')
#  .replace(/#/g, '%23')  <-- hex colors
#  .replace(/{/g, '%7B')
#  .replace(/}/g, '%7D')

PhilippeVay

Snippets git

CSSWizardry

Getting to Know a Legacy Codebase

Get an Idea of What’s Been Changed

$ git log --name-only --since="365 days" | sort -u | awk '/\.(le|c|sa|sc)ss$/{print}' | nl

PhilippeVay

/* stylelint-disable selector-no-qualifying-type */
applet,
acronym,
bgsound,
dir,
frame,
frameset,
noframes,
hgroup,
isindex,