paulcollett

// There seems to be a few algorithms floating around for brightness/luminance detection.
// One uses NTSC `(299*R + 587*G + 114*B)` which is incorrect for web colors (sRGB) see
// `rgbLuminance` for "better" coefficients (seems subjective but agreed apon). To be more
// accurate you need to also convert RGB from sRGB color space (which gives more spectrum to lighter colors)
// to linear rgb which normalizes colors across the spectrum - better for processing.
// see https://stackoverflow.com/questions/596216/formula-to-determine-perceived-brightness-of-rgb-color

// convert sRGB to linear RGB values
// - channel ** 2.218 same as Math.pow((channel + 0.055) / 1.055, 2.4)
// - i've seen this simplified to be just `(channel / 255) ** 2.21`

paulcollett

Fetch "keepalive" Javascript Web feature detection

fetch()'s keepalive is a new option parameter in Web API spec to replace the Navigator.sendBeacon() API for usecases where requests should outlive the current page, like tracking clicks.

Current Support

This new fetch option is supported in all modern browsers except Firefox (at time of writing, Firefox 110):

https://caniuse.com/mdn-api_request_keepalive

paulcollett

/**
 * small graphql request that adheres to the POST JSON spec, returns promise
 * @param {string} endpoint graphql url
 * @param {string} query graphql query / mutation
 * @param {object=} variables object of variables, optional
 * @param {object=} headers object of headers, optional
 * @return {Promise.<object, Error>} promise with json data
 * @example
    graphQlRequest('https://domain/endpoint', 'query { hero { name } }')
 */

paulcollett

/**
 * Mailchimp client-side ajax subscribe request promise
 * @param {object} options
 * @param {string} options.action Mailchimp subscribe form action url <form action="URL">
 * @param {string} options.email email address
 * @returns {Promise.<string, Error>} promise of a success message or an Error containing message
 * @example
    mailchimpSubscribeRequest({
      action: 'https://blabla.us6.list-manage.com/subscribe/post?u=61f5z352da53ba442da9cb35&amp;id=02435aaa99',
      email: 'my@email.test'

paulcollett

/*
this is the stylesheet to support creating grid layouts in just html.

experimentation in using css variables to create the a grid layout

Usage:

<div style="--grid; --gap:10px">
<div style="--grow">input</div>
<div style="--min-width: 10%">submit</div>

paulcollett

import React, { useEffect, useRef, useReducer } from 'react'
import { useState } from 'react'

const createComponent = (setup) => {
  return (rawProps) => {
    const hookCallbacks = useRef(new Set([]))
    const instance = useRef()
    const props = useRef({})
    const state = useRef({})
    const [, runRender] = useReducer((counter) => counter + 1, 0)

paulcollett

// Allows using a function as a template literal
// normal: myFunc('hello')
// template literal: myFunc`hello`

const myFunc = (...args) => {
  // 1. get first and remaining arguments. Remaining args can be interpolated values
  // 2. concat to force array. This allow us support normal myFunc('hello') usage
  // 3. reduce to combine both template parts and interpolated values. This allows: myFunc`im at ${window.location}!!`
  const [ templateRaw, ...templateArgs ] = args;
  const template = [].concat(templateRaw).reduce((acc, templatePart, i) => acc += String(templatePart) + String(templateArgs[i] === undefined ? '' : templateArgs[i]), '')

paulcollett

@mixin pauls-burger-button($width: 50px, $height: 30px, $line-height: 3px, $outer-padding: 0px, $active-selector: '&:active')
  $line-spacing: ($height - $line-height * 3) / 2
  display: inline-block
  vertical-align: middle
  width: $width
  border: $outer-padding solid transparent
  margin: $outer-padding * -1
  box-sizing: content-box
  touch-action: manipulation
  &:before, &:after, > *

paulcollett

Paul's base HTML starter file

paulcollett

// Dummy.js Simple placeholder text
document.querySelectorAll('[data-dummy]').forEach(el => {
  if(el.nodeName == 'IMG') return el.src = '//placehold.it/'
    + (el.getAttribute('data-dummy') || el.parentNode.offsetWidth);

  let lib = `lorem ipsum dolor sit amet consectetur adipiscing elit nunc euismod vel
    dolor nec viverra nullam at auctor enim id condimentum odio in laoreet libero
    libero a tincidunt est sagittis id curabitur vitae`
    .split(' ').sort(() => 0.5 - Math.random())
    .slice(0, +el.getAttribute('data-dummy') || 10).join(' ');