robby1066’s gists

robby1066 / keyboard-sortable-example.scss

Created March 16, 2021 20:04

Structural CSS for a keyboard sortable list

	/* ==== The `drag-handle` control that's visible without keyboard interaction ==== */
	LI.drag-handle {
	cursor: ns-resize;
	position: relative;

	// Controls for keyboard navigation
	// by default this gets hidden for everything except screen readers
	DIV.keyboard-navigation {
	position:absolute;
	left:-10000px;

robby1066 / keyboard-sortable-example.js

Last active June 27, 2025 09:05

Javascript for up and down keyboard-accessible controls on a sortable list with sortable.js

	// Move the element either up or down in the list
	// this piggybacks on Sortablejs's `sort` function

	// This code needs to have access to the Sortablejs object that controls the list.
	// A couple of things you'll need to customize
	// LIST_CONTAINER is the DOM element that shoud contain the list
	// LIST_ITEM_SELECTOR is the
	// (e.g. The UL where the LI elements should be sortable)

	// You will probably want to customize these, or use a different way to select your list and list items

robby1066 / css-starting-structure.css

Created February 3, 2021 23:47

CSS boilerplate structure that prioritizes user preferences

	/* VARIABLES */
	/* SASS VARIABLES - WILL BE PREPROCESSED */

	$mobile-breakpoint: 768px;

	/* CSS VARIABLES - WILL BE RENDERED IN BROWSER */
	:root {
	/* COLORS */
	/* --example-color: #000000; */

robby1066 / css-starting-structure.scss.json

Created December 28, 2020 23:45

CSS boilerplate structure for multiple contexts and user preferences

	{
	"CSS Initializeer": {
	"prefix": "initialize",
	"body": [
	"/* VARIABLES */",
	"/* SASS VARIABLES - WILL BE PREPROCESSED */",
	"",
	"\\$mobile-breakpoint: 768px;",
	"",
	"/* CSS VARIABLES - WILL BE RENDERED IN BROWSER */ ",

robby1066 / prioritize-focus-scss.json

Last active December 28, 2020 16:06

A VS Code snippet for css / scss files that includes a `:focus` selector on `:hover` declarations to enhance keyboard navigation

	{
	"Hover / Focus": {
	"prefix": ":hover",
	"body": [
	":hover,",
	"${TM_CURRENT_LINE/:ho?v?e?r?/:focus/} {",
	" $1",
	"}"
	],
	"description": "Hover / Focus"

robby1066 / accessible-html-erb.json

Last active January 19, 2021 22:06

These snippets for VS Code add attributes to HTML tags that are useful for assistive technologies. By including these attributes by default, it becomes easier to get in the habit of using them.

	{
	"Accessible Image Method": {
	"prefix": "image_*",
	"body": [
	"image_tag('$1', alt: '$2'$3) "
	],
	"description": "Accessible Image"
	},
	"Accessible Image Tag": {
	"prefix": "<img",

robby1066 / deal-with-me-google-apps-script.js

Last active March 20, 2021 22:14

A short Google Apps script that will label any starred items in your inbox that are older than 14 days with a "DEAL WITH ME" label. Go to https://developers.google.com/apps-script/reference/gmail/ for documentation.

	/**
	* Get the "DEAL WITH ME" label, or create it if it doesn't exist
	* This is called by the other two functions, you shouldn't need to call it directly
	*/
	function _getNaggingLabel() {
	/**
	* If you'd like your label to say something different, modify it here
	*/
	var nagging_label_text = "DEAL WITH ME";

robby1066 / index.html

Created March 12, 2012 20:58

pie chart test

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Testing Pie Chart</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.1.3"></script>

	</head>
	<body>
	<script type="text/javascript">

Robby Macdonell robby1066