johnfmorton

ol {
  list-style-type: none;
  counter-reset: custom-counter;
}

ol li {
  counter-increment: custom-counter;
}

ol li::before {

johnfmorton

Keybase proof

I hereby claim:

• I am johnfmorton on github.
• I am johnmorton (https://keybase.io/johnmorton) on keybase.
• I have a public key ASDu_0vG5Qiy-9cd2ilRG_Ykj1cFsrOxNLWZ5aiNYh1ZSQo

To claim this, I am signing this object:

johnfmorton

// https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

/**
 * Interface CopyToClipboard params
 */
interface ICopyToClipboard {
  /** HTML reference identifier ```<div id="foo"></div>```  */
  target?: string;
  /** String value */
  value?: string;

johnfmorton

<?php
namespace modules;

use modules\TwigFilterSha512;
use Craft;

/**
 * Custom module class.
 *
 * This class will be available throughout the system via:

johnfmorton

// get all .blade elements
let bladeElements = document.querySelectorAll('.blade');

function handleIntersection(entries) {
  entries.map((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('blade--active');
    } else {
      entry.target.classList.remove('blade--active');
    }

johnfmorton

<?php

/**
 * About this script:
 * This proxy was built with PartyTown.js in mind. https://github.com/BuilderIO/partytown
 * Partytown is a lazy-loaded library to help relocate resource intensive scripts into a
 * web worker, and off of the main thread.
 * Many third-party scripts already provide the correct CORS headers, but not all do.
 * For services that do not add the correct headers, then a reverse proxy to another domain must be used in order to provide the CORS headers.
 * see: https://github.com/BuilderIO/partytown/wiki/Proxying-Requests

johnfmorton

var ambientVideo = document.getElementById("ambientVideo");

/**

// in HTML page

<video muted playsinline id='abientVideo'>
  <source src="my-video-file.webm" type="video/webm">
</video>

johnfmorton

<!-- Revised snippet based on https://www.stefanjudis.com/snippets/a-picture-element-to-load-correctly-resized-webp-images-in-html/ -->
<picture>
  <!-- load avif if supported -->
	<source type="image/avif"
	srcset="image-100x200.avif 100w,
	image-200x400.avif 200w" 
	sizes="
	(max-width: 768px) calc(100vw - 3em),
	(max-width: 1376px) calc(50vw - 8em),
	550px"

johnfmorton

# This script is used to deploy a Craft CMS site on an Arcustech server
# 
# It will clone the git main branch from a private repo into 
# a 'deployments' directory and them create symlinks for the 
# static assets: .env, and 3 directories of assets.
# It then does a composer install of the Craft site. 
# The scripts in the composer file are like this: https://github.com/nystudio107/devmode/blob/f2b231e772026860f75e255c9e22722dac983de8/cms/composer.json#L55
# These scripts update Craft, clear caches, etc.
# Finally, it will symlink the web directory in the newly downloaded files
# to the public folder which is the one used by Arcustech

johnfmorton

// Select the multiselect fields
var mulitSelectFields = document.querySelectorAll('select[multiple]');
// For each field found...
Array.prototype.forEach.call(mulitSelectFields, function(el, i) {
  // count how many selection options are present
  var itemsInSelect = el.length;
  // then set the height with the size attribute to match
  el.setAttribute('size', itemsInSelect);
  // finally remove the scroll indicator for that field
  el.style.overflowY = 'auto';