)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

### Random Color Strings

1. `R = Math.random`
2. `b = document.body`
3. `b.style = 'background: black; font-family: sans-serif; text-transform: uppercase; color: white;'`
4. ` `
5. `setInterval(_ => {`
6. `  if (R()<.9) {`
7. `    s = ''`
8. `    for(i=0;i<R() * 30 + 4;i++) s+=(~~(R() * 0xff)).toString(36)`
9. `      .replace(R() < .9 ? /[0-9]/g : '', '')`
10. ` `
11. `    b.innerHTML += ``
12. `     <n style="color:hsl(\${R()*360}, 30%, 50%)">\${s}</n> `+(R()<.1?'<br>':'');`
13. `  }`
14. `}, 100)`

Make some random strings and give them a random color… a friend of mine showed a work in progress forked codepen – so I created a golfed version/variation…

### Building Spikes Codegolf

1. `f = `
2. ` `
3. `n=>`   ^ `
4. `  /|\\`
5. ` /.|.\\`
6. `/..|..\\`
7. `___`.replace(/.[_|^]./g,'\$&'.repeat(n))+'____'`
8. ` `
9. `// test it out`
10. `document.body.innerHTML += `
11. ``<pre>\${f(1)}`
12. `\${f(3)}`
13. `\${f(4)}``

Great codegolf stackexchange answer from user tsh

### Odd Gradient Notation

1. `// "Being clever is not clever"`
2. `// -- Bjarne Stroustrup`
3. `D = document`
4. `ang = {`
5. `  '|': 180,`
6. `  '-': 90,`
7. `  '\\': 135,`
8. `  '/': 225`
9. `}`
10. ` `
11. `box = def => {`
12. `  def = def.split(/\s+/)`
13. `  form = def.length`
14. `  I = i => parseInt(def[i], 16)`
15. ` `
16. `  ;[,,, _=>{x = y = I(0); w = h = I(1); c = def[2]},`
17. `    _=>{x = I(0), y = I(1); w = h = I(2);c = def[3]},`
18. `    _=>{x = I(0); y = I(1); w = I(2); h = I(3); c = def[4]}`
19. `  ][form]()`
20. ` `
21. `  c = c.split```
22. ` `
23. `  ca = c[0]`
24. `  ca = ca+ca+ca`
25. `  cD = ang[c[1]]`
26. `  cb = c[2]`
27. `  cb = cb+cb+cb `
28. ` `
29. `  D.body.appendChild(`
30. `    D.createElement`div``
31. `  ).style = ``
32. `    position: absolute; left: \${x}px; top: \${y}px;`
33. `    width: \${w}px; height: \${h}px;`
34. `    background: linear-gradient(\${cD}deg, #\${ca}, #\${cb})`
35. `  ``
36. `}`
37. ` `
38. `const parse = prog => prog.trim()`
39. `  .split(/\n+/m)`
40. `  .map(line => box(line.trim()))`
41. ` `
42. `parse(``
43. `  0 64 0/f`
44. `  64 64 0\\f`
45. `  a0 f0 30 54 f\\0`
46. `  0 6f 20 60 0-c`
47. `  f 7f 20 60 0|c`
48. `  1f 8f 30 30 c/0`
49. ``)`

Just playing around… odd micro-gradient notation:

1. `'0 64 0/f'`
2. `// x=0 y=0 width=0x64 height=0x64`
3. `// 0/f = gradient black to white top right to bottom left`
4. ` `
5. `'64 64 0\\f'`
6. `// x=0 y=0 width=0x64 height=0x64`
7. `// 0\\f = black to to white gradient top left to bottom right`
8. ` `
9. `'0 6f 20 60 0-c'`
10. `// x=0 y=0x6f width=0x20 height=0x60`
11. `// 0-c = gradient black to grey (#ccc) left to right`
12. ` `
13. `// etc... ( | ) is top to bottom grad`
// css // dom // golfed // graphics // hacks // humor // regex // speed-coded

### Regex Match Words and More

1. `const phrase = `"That's the password: 'PASSWORD 123'!", cried the Special Agent.\nSo I fled.`;`
2. `const words = phrase.toLocaleLowerCase()`
3. `  .replace(/["!.:,]/g, '')`
4. `  .split(/\s\'|\'\s|\n|\s/g);`
5. `  console.log(words);`

Recently did this for a stackoverflow question… check it out…

There are other great (better) answers like this one by use MMMahdy-PAPION:

1. `const phrase = `"That's the password: 'PASSWORD 123'!", cried the Special Agent.\nSo I fled.``
2. `console.log(`
3. `  phrase.toLocaleLowerCase().match(/(?!')[\w']*\w/g)`
4. `);`

### Check if HTML Tag is Valid

1. `const isTag = tag => { `
2. `  return !/Unknown/.test(document.createElement(tag) + '')`
3. `}`
4. ` `
5. `console.log('section:', isTag('section'))`
6. `console.log('div:', isTag('div'))`
7. `console.log('nav:', isTag('nav'))`
8. `console.log('banana:', isTag('banana'))`

Check if a `tagName` is a valid html element.

When casting a dom node to a string, you’ll get a class name like this:

1. `document.createElement('div') + ''`
2. `// '[object HTMLDivElement]'`
3. ` `
4. `// you can cast to a string with `toString` if `
5. `// you want things to be more readable`
6. `document.createElement('section').toString()`
7. `// '[object HTMLElement]'`
8. ` `
9. `document.createElement('input') + ''`
10. `// '[object HTMLInputElement]'`

When you try to create something with an unknown `tagName` you’ll end up with:

1. `document.createElement('banana') + ''`
2. `// '[object HTMLUnknownElement]'`

So, testing for the presence of the string `Unknown` is an easy way to check if a `tagName` is valid in a given browser. This is the perfect kind of thing to memoize:

1. `const tags = {}`
2. `const isTag = tag => { `
3. `  if (tags[tag] != null) {`
4. `    // already calculated`
5. `    console.log('loking up: ', tag, tags[tag]);`
6. `    return tags[tag]`
7. `  }`
8. `  const result = !/Unknown/.test(document.createElement(tag) + '')`
9. `  tags[tag] = result`
10. `  return result`
11. `}`
12. ` `
13. `console.log('calculator', isTag('calculator'))`
14. `console.log('calculator', isTag('calculator'))`
15. ` `
16. `console.log('strong', isTag('strong'))`
17. `console.log('strong', isTag('strong'))`
// dom // html // javascript // regex // strings // tricks // ui
snippet.zone ~ 2021-24 /// {s/z}