Skip to content

Instantly share code, notes, and snippets.

View barneycarroll's full-sized avatar
🛠️
Working on Mithril type stuff

Barney Carroll barneycarroll

🛠️
Working on Mithril type stuff
View GitHub Profile
@barneycarroll
barneycarroll / inline-separators.css
Last active May 2, 2024 19:05
Inline separators
:root {
--separator-text : ' | ';
--separator-size : .45em;
}
.inline-separators {
&:dir(ltr) {
clip-path : inset(-100vh -100vw -100vh 0);
}
@barneycarroll
barneycarroll / rest_spread.js
Created November 24, 2022 19:23
WIP for a little demonstration of the various functions of ... operators in Javascript
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
barneycarroll / disable-zoom.js
Created April 3, 2024 06:17
Selectively disable mobile browser zoom on input focus
// 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
barneycarroll / .js
Created July 27, 2022 10:55
Using modules not components for associated functionalities, with state management left to application space
import {ordinals, defaultRange, rangeFromOrdinal, Calendar} from './DateRange.js'
const state = {
...rangeFromOrdinal('Today'),
showCalendar : false,
}
m.mount(document.body, {
view: () => [
m('form',
@barneycarroll
barneycarroll / ordinal-suffix.html
Created March 19, 2014 13:35
Append ordinals via CSS rather than in markup. Requires even more HTML bytes though.
<span
class="ordinal"
data-number="22">
22
</span>
<span
class="ordinal"
data-number="0">
0
</span>
@barneycarroll
barneycarroll / grid-tables-reset.css
Last active March 18, 2024 10:24
Grid tables reset
@property --columns {
syntax: '<integer>';
inherits: false;
initial-value: 1;
}
table {
display: grid;
grid-template-columns: repeat(var(--columns, 1), auto);
}
@barneycarroll
barneycarroll / jquery.notextSelector.js
Last active January 14, 2024 07:57
`:notext` is an alternative to the `:empty` selector for jQuery. Elements consisting exclusively of an amount of whitespace or HTML comments will be returned.
/*
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
barneycarroll / fileInput.css
Last active April 2, 2023 22:21
Total input[type=file] style control with pure CSS. File type inputs are notoriously hard to style, due to different semi-serious style restrictions in the name of security (the argument being that a file input presents access to the user's private file system, and should as such always look unambiguously like what it is — redundant if you ask m…
.fileContainer {
overflow: hidden;
position: relative;
}
.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 999px;
filter: alpha(opacity=0);

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
barneycarroll / unfuckReact.js
Last active September 2, 2022 14:37
React components are so fucking stupid, it's unbelievable. 3 months with this library version 15 and the glaring stupidity of the API just keeps coming in waves. Fixing some of this stuff – just for the sake of internal consistency – would have been so simple. The number of hoops you're required to jump through for trivial shit. Ugh.
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)
}