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
/** | |
* 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, |
// 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'); |
/* ==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) |
/* ==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! */ |
/* ==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! */ |
/* ==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; |
/* | |
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 |
# 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') |
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
/* stylelint-disable selector-no-qualifying-type */ | |
applet, | |
acronym, | |
bgsound, | |
dir, | |
frame, | |
frameset, | |
noframes, | |
hgroup, | |
isindex, |