PhilippeVay / stylus-gitlab-related-linked-highlight.css

Created March 20, 2025 11:25

Stylus for Gitlab - Highlight related and linked items sections when appropriate

PhilippeVay / highlight-images-svg-masks.js

Created April 6, 2024 11:24

Highlight images and alike while making the rest of content barely visible (SVG masks, perf isn't good while scrolling)

	/**
	* 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 / isolate-images-a11y-tools.js

Created April 1, 2024 16:00

Readable code of "Isolate images" bookmarklet (from A11y Tools, author Lloydi)

PhilippeVay / links-infos.css

Created February 16, 2023 17:33

Stylus script: highlight links and display title, aria-label or aria-labelledby indications

	/* ==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 / heading-levels.css

Created February 16, 2023 16:53

Stylus script: headings display and count

	/* ==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 / language-indications.css

Last active March 21, 2023 14:17

Stylus script: display page language and highlights (and count) changes of languages in content for 2 dozens of lang codes.

	/* ==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 / empty-elements.css

Created February 16, 2023 16:16

Stylus script: empty elements (and blank in Firefox)

	/* ==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 / liens-texte-et-title.js

Created September 14, 2022 14:46

Accessibility audit - Title attribute in links must contain link content

	/*
	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 / svg-encode-inline.sed

Last active September 4, 2019 08:24

	# 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 / git-commands.md

Created February 13, 2019 09:28

Snippets git

CSSWizardry

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

	/* Stylus custom CSS
	GitLab - Highlight related and linked items sections IF they've at least 1 issue related or linked */
	/* Issue - Child items */
	#tasks:has(.content-list) {
	background-color: hsl(282, 100%, 98%);

	header {
	color: white;
	background-color: darkviolet;
	}

	// 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');