)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

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…

// codegolf // random // regex // speedcoding // strings

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

// codegolf // golfed // javascript // regex // strings

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. );
// javascript // regex // strings

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
Older Posts

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}