paulcollett

// https://github.com/js-cookie/js-cookie/blob/master/src/converter.mjs
const cookieValueEncode = (val) => encodeURIComponent(val).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g, decodeURIComponent)
const cookieValueDecode = (val) => val.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent)
const cookieNameEncode = (name) => encodeURIComponent(name).replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent).replace(/[()]/g, escape)

const getCookie = (name) => Object.fromEntries(document.cookie.split(';').map((v) => {
  const [ name, ...value ] = v.trim().split('=').map(cookieValueDecode)
  return [ name, value.join('=')]
}))[name]

paulcollett

// For Yoast SEO Plugin Version: 14.1+   add to your Wordpress Theme's functions.php...

// Remove All Yoast HTML Comments
// https://gist.github.com/paulcollett/4c81c4f6eb85334ba076
// Credit @devendrabhandari (https://gist.github.com/paulcollett/4c81c4f6eb85334ba076#gistcomment-3303423)
add_filter( 'wpseo_debug_markers', '__return_false' );



// For Yoast SEO Plugin Version: < 14.1   add to your Wordpress Theme's functions.php...

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

paulcollett

Paul's base HTML starter file

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

// 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

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

/*
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

/**
 * 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: '[email protected]'

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 } }')
 */