barneycarroll

// Disable mobile zoom on focus
{
  // Customise the selector value as necessary
  const selector  = '[data-nozoom]'
  const $viewport =
    document.querySelector('meta[name=viewport]')
    ??
    Object.assign(document.createElement('meta'), {name: 'viewport'})

  const $scale0 = Object.assign($viewport.cloneNode(), {content: 'user-scalable=0'})

barneycarroll

@property --columns {
  syntax: '<integer>';
  inherits: false;
  initial-value: 1;
}

table {
  display: grid;
  grid-template-columns: repeat(var(--columns, 1), auto);
}

barneycarroll

/*
jQuery's ':empty' selector only returns true if the element contains no text node, or whose text node consists exclusively of zero or more spaces and tabs. This ':notext' selector will return true for elements whose text nodes can also contain line breaks (any whitespace character) and HTML comments.
*/

$.expr[':'].notext = function detectNoText(x){
	return x.innerHTML && x.innerHTML.replace(/(<!--.*(?!-->))|\s+/g, '').length === 0
}

barneycarroll

.fileContainer {
    overflow: hidden;
    position: relative;
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    font-size: 999px;
    filter: alpha(opacity=0);

barneycarroll

.inline-separators {
  --separator       : ' | ';
  --size            : .75em;
  clip-path         : inset(-100vh -100vw -100vh 0);
}

.inline-separators:dir(rtl) {
  clip-path         : inset(0 -100vh -100vw -100vh);
}

barneycarroll

const object = {a: 1, b: 2}
const array  = [3,4]

// Value expression
const foo = {...object, c: 3} // == {a: 1, b: 2, c: 3}
const bar = [...array,  5, 6] // == [3, 4, 5, 6]

// Destructuring assignment
{
  const {a, ...rest} = foo // a == {a: 1}; rest == {b: 2, c: 3}

barneycarroll

THE DRAWING IN INDIA INK

Hjalmar Söderberg translated by Charles Wharton Stork

One day in April many years ago, in the time when I still wondered about the meaning of life, I went into a little cigar booth on a back street to buy a cigar. I selected a dark and angular El Zelo, stuffed it into my case, paid for it, and made ready to go. But at that moment it occurred to me to show the young girl who stood in the booth, and of whom I used often to buy my cigars, a little sketch in India ink, which I happened to have lying in a portfolio. I had got it from a young artist, and to my thinking it was very fine. “Look here,” said I, handing it to her. “What do you think of that?” She took it in her hand with interested curiosity and looked at it very long and closely. She turned it in various directions, and her face took on an expression of strained mental activity. “Well, what does it mean?” she asked finally with an inquisitive glance. I was a little surprised.

barneycarroll

const mounted = new WeakSet()

export default (component, displayName = component.displayName || component.name || 'React.Component') => {
  const host = {
    [displayName] : class extends React.Component {
      constructor(){
        this.state = {}
        
        component.apply(this, arguments)
      }

barneycarroll

jquery.scrollLock.js

Useful for when a blocking user experience is needed (in my case, didn't want people unwittingly loosing their place by scrolling while a modal required their attention): $.scrollLock() locks the body in place, preventing scroll until it is unlocked.

// Locks the page if it's currently unlocked
$.scrollLock();

// ...or vice versa

barneycarroll

// Config plugins with reliable setup & teardown in Mithril without relying on unique real DOM element lifecycle.
// This is meant to stand in for `config` in a way that's more suited to an application that continuously diffs the DOM.
import m from 'mithril'

// A plugin consists of 1 or more of the following methods:
// * init runs once when the plugin first executes
// * draw runs on every draw loop
// * exit runs at the beginning of the config cycle when the plugin instance has disappeared from view
//
// Each method is passed the element, the element context / state object, and the virtual DOM element.