ricealexander’s gists

ricealexander / grove-embeddable-audio-player.html

Created February 5, 2021 18:26

A demo, built for Grove, that creates an audio player that can be embedded on websites

	<!doctype html>
	<html>
	<head>
	<title>Audio Player</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
	</head>
	<body>
	<!--
	This demo is built on top of APlayer

ricealexander / un-allcaps-ifier.js

Created December 24, 2020 21:55

When you receive a list of sponsors in ALL CAPS

	const sponsors = [
	'BARNES JEWISH HOSPITAL',
	'BARNES JEWISH WEST COUNTY HOSPITAL',
	'BELLEVILLE NEWS DEMOCRAT',
	'BESPOKE APPAREL',
	'BETTER BUSINESS BUREAU',
	'BIG BOW EVENTS',
	'BIG O LIQUEUR',
	]

ricealexander / getFacebookStats.js

Created December 2, 2020 22:29

Given Facebook Insights Reactions/Comments/Shares State, return an object with their sums

	// This function simplifies totalling up Reactions, Comments, and Shares in Facebook Insights
	// To get the Reactions/Comments/Shares state, you must have the React Developer Tools Extension

	// 1. Navigate to Page Insights > Reach
	// 2. Set the date range at the top right of the view to the target range
	// 3. Inspect the "Reactions, Comments, Shares and More" chart
	// 4. In the React Components tool, navigate to c [from HubbleAreaLineChart] within HubbleChart
	// 5. In the props, right click on "lines" and "Copy value to clipboard"
	// The state of Reactions/Comments/Shares is now a nested array within your clipboard

ricealexander / getItem.js

Last active December 2, 2020 00:02

Gets an item from an array by its index. For indexes outside of the array, it loops the index.

	function getItem (array, index) {
	if (typeof index !== 'number' \|\| Number.isNaN(index)) {
	throw new TypeError(`Expected index to be a Number. Instead got "${index}"`)
	}
	if (Math.abs(index) === Infinity) {
	throw new ReferenceError(`Cannot access item at index "${index}"`)
	}

	const {length} = array
	let wrappedIndex = index

ricealexander / semicolon-indentation.js

Last active November 27, 2020 22:12

Indent 30 lines of code with four semicolons instead of tabs or spaces

	{
	;;;;// Helper Functions
	;;;;async function asyncMap (array, callback) {
	;;;;;;;;const results = []
	;;;;;;;;for (const item of array) {
	;;;;;;;;;;;;results.push(await callback(item))
	;;;;;;;;}
	;;;;;;;;return results
	;;;;}
	;

ricealexander / grove-reddit-sharing.js

Created November 23, 2020 10:19

Grove Posts share on Facebook, Twitter, LinkedIn, Email. Here's some logic for a Reddit Share link

ricealexander / grove-blockquote-linebreak-fix.js

Last active August 25, 2025 17:20

Grove Blockquotes do not preserve linebreaks within the quote. Here is a workaround

	const quotes = document.querySelectorAll('.Quote blockquote')

	for (const quote of quotes) {
	quote.innerHTML = quote.innerHTML.replace('\n\n', '<br><br>')
	}

ricealexander / adobe-fonts-bad-quality.md

Last active November 22, 2020 21:09

Adobe Fonts fonts may display poorly on non-retina devices. Here's a collection of examples

Adobe Fonts display Errors

A while back, I noticed that the fonts in our Typekit subscription displayed poorly at many many sizes.

I mapped out font/weight combinations for the font Acumin Pro across 25 font-sizes and all 9 weights, and noticed that a shocking 41% of font/weight combinations had noticeable distortions, particularly around the characters a, e, s.

The font Utopia Std also had distortions at multiple sizes, though not as many as Acumin Pro.

Both Acumin and Utopia were made by the Adobe Originals font foundry and can only, per their LICENSE, be served via Adobe Fonts (Typekit). As I continue to visit websites, fonts with artifacts around a, e, and s stick out like a sore thumb and I take the time to inspect them. They're almost all by Adobe Originals, and every instance I've seen has been served with Adobe Fonts.

ricealexander / grove-subheading-links.css

Last active August 25, 2025 17:24

Subheading Jump-To Links

	a.jump-to-anchor {
	opacity: 0.5;
	position: absolute;
	margin-left: -24px;
	display: none;
	}

	.ArticlePage-articleBody > h2:hover .jump-to-anchor {
	display: block;
	}

ricealexander / makePlainText.js

Created October 16, 2020 02:07

Strips all formatting from an element

	function makePlainText (element = document.body) {
	element.innerHTML = element.innerText
	.replace(/\r\n?/g, '\n') // normalize line-endings to \n
	.replace(/\n/g, '<br>') // replace linebreaks with <br>
	.replace(/<br>\s+<br>/g, '<br><br>') // remove gaps between between <br>
	.replace(/(<br>){3,}/g, '<br><br>') // cap <br> at just 2
	}

	function redditShareLink () {
	const { storyTitle } = window.Glade.getMetadata()

	const title = storyTitle ?? document.title
	const url = document.location.href

	return `https://www.reddit.com/submit?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`
	}

Alex Rice ricealexander

Adobe Fonts display Errors