Snippet Zone

Simple Way to Validate CSS Colors

```
function isColor(col) {
```
```
  const cache = isColor[col]
```
```
  if (cache != null) {
```
```
    console.log('- reading cache')
```
```
    return cache
```
```
  }
```
```
  isColor.el.style = ''
```
```
  isColor.el.style.color = col
```

  return isColor[col] = !!isColor.el.style.color

```
}
```

isColor.el = document.createElement('div')

```
 
```
```
 
```

console.log('is "red" a color?', isColor('red'))

console.log('from the cache: ', isColor('red'))

```
 
```

console.log('is "rgbx(1, 2, 3)" a color?', isColor('rgbx(1, 2, 3)'))

```
 
```

console.log('is "#0f0" a color?', isColor('#0f0'))

```
 
```

console.log('is "hsl(192, 50%, 50%)" a color?', isColor('hsl(192, 50%, 50%)'))

console.log('from the cache: ', isColor('hsl(192, 50%, 50%)'))

```
 
```

console.log('is "lab(2000.1337% -8.6911 -159.131231 / .987189732)" ?',

  isColor('lab(2000.1337% -8.6911 -159.131231 / .987189732)'))

```
 
```

console.log('is "snippetZone" ?', isColor('snippetZone'))

I find this technique is usually good enough to validate colors…

July 17, 2023

// color // css // dom // graphics // hacks // hex // html // javascript // tricks

Multiplicative Persistence

```
const multp = (val, count = 1, res) => 
```
```
  (res = (val + '').split``
```

    .reduce((a, b) => a * b, 1) + '').length > 1 ?

```
      multp(res, count + 1) : count
```
```
 
```
```
 
```
```
console.log('test:', multp(2678789))
```

Started watching this youtube video from numberphile and instantly made this half-golfed thing

Found this:

f=n=>[n,...n>9?f(eval([...n+''].join`*`)):[]]

By Arnauld over at codegolf.stackexchange

will definitely remember: [...n+'']

June 10, 2023

// golfed // hacks // humor // javascript // math

Pass a Class

```
function callMethods(evt) {
```
```
  const e = new evt
```
```
  e.one()
```
```
  e.two()
```
```
}
```
```
 
```
```
callMethods(class {
```
```
  one() {
```
```
    console.log('one')
```
```
  }
```
```
 
```
```
  two() {
```
```
    console.log('two')
```
```
  }
```
```
})
```

This is so tempting for something I want to do… but too strange to use probably… maybe…

May 4, 2022

// functions // hacks // humor // objects // oldschool // oop

x.x()

```
function x() {
```
```
  return { x }
```
```
}
```
```
x.x = x
```
```
 
```
```
x(x(x.x.x).x(x)).x(
```
```
  x().x(x.x())
```
```
).x
```
```
.x
```
```
.x
```
```
.x.x.x.x()
```

April 13, 2022

// hacks // tricks

React Vanilla

<style>*{ font-family: sans-serif; margin-bottoM: .5em;}</style>

```
 
```
```
<h3>TODO</h3>
```
```
<ul id=todos></ul>
```
```
<label>What needs to be done?<br>
```

  <input id=todo onchange="newTodo()"/><br>

```
</label>
```

<button id=add onclick="newTodo()">Add #1</button>

```
 
```
```
<script>
```
```
  let count = 1
```
```
  function newTodo() {
```
```
    if (todo.value.length > 0) {
```

      todos.innerHTML += `<li>${todo.value}</li>`

```
      todo.value = ''
```
```
      add.innerText = `Add #${++count}`
```
```
    }
```
```
  }
```
```
</script>
```

I don’t really like React… Don’t get me wrong, I don’t mind it and I even kind of like using it – there’s something fun about it… But it’s surprising to me that UI work is still so bulky… I think React and most other UI libraries are overly complex… Every now and then I do evil style vanilla js versions of the React homepage examples as a sort of rebellion 😀 This is the React version of the above snippet:

```
class TodoApp extends React.Component {
```
```
  constructor(props) {
```
```
    super(props);
```

    this.state = { items: [], text: '' };

    this.handleChange = this.handleChange.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);

```
  }
```
```
 
```
```
  render() {
```
```
    return (
```
```
      <div>
```
```
        <h3>TODO</h3>
```

        <TodoList items={this.state.items} />

        <form onSubmit={this.handleSubmit}>

```
          <label htmlFor="new-todo">
```
```
            What needs to be done?
```
```
          </label>
```
```
          <input
```
```
            id="new-todo"
```

            onChange={this.handleChange}

```
            value={this.state.text}
```
```
          />
```
```
          <button>
```

            Add #{this.state.items.length + 1}

```
          </button>
```
```
        </form>
```
```
      </div>
```
```
    );
```
```
  }
```
```
 
```
```
  handleChange(e) {
```

    this.setState({ text: e.target.value });

```
  }
```
```
 
```
```
  handleSubmit(e) {
```
```
    e.preventDefault();
```
```
    if (this.state.text.length === 0) {
```
```
      return;
```
```
    }
```
```
    const newItem = {
```
```
      text: this.state.text,
```
```
      id: Date.now()
```
```
    };
```
```
    this.setState(state => ({
```

      items: state.items.concat(newItem),

```
      text: ''
```
```
    }));
```
```
  }
```
```
}
```
```
 
```

class TodoList extends React.Component {

```
  render() {
```
```
    return (
```
```
      <ul>
```
```
        {this.props.items.map(item => (
```

          <li key={item.id}>{item.text}</li>

```
        ))}
```
```
      </ul>
```
```
    );
```
```
  }
```
```
}
```
```
 
```
```
root.render(<TodoApp />);
```

April 3, 2022

// dom // globals // hacks // humor // ui

Older Posts

Newer Posts

Simple Way to Validate CSS Colors

Multiplicative Persistence

Pass a Class

x.x()

React Vanilla

Recent

Archive