ricealexander

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

ricealexander

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)}`
}

ricealexander

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

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

ricealexander

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

:root {
  --overlordGoldLight: #ffc926;
  --overlordGold:      #eaab00;
  --overlordGoldDark:  #d7a102;
  --overlordRedLight:  #c32640;
  --overlordRed:       #a1003d;
  --overlordRedDark:   #962c38;
  --overlordGreyLight: #666666;
  --overlordGrey:      #434343;
  --overlordGreyDark:  #333333;

ricealexander

body {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-column-gap: 1.5rem;
}

h3 {
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;

ricealexander

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

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

ricealexander

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
}

ricealexander

# Partials

## optional index: optionally matches trailing slash or index file
(/|/index.php)?

## query string: matches the end of the pattern or a ? followed by anything.
(\?.*)?$


# Pages

ricealexander

function map (array, mapFunction) {
  if (array.length === 0) return []
  return [
    mapFunction(array[0]),
    ...map(array.slice(1), mapFunction)
  ]
}
map([1, 2, 3], x => x * 2) // [2, 4, 6]