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

Validate Anagram

  1. function normalizeString(word) {
  2.   word = word.toLowerCase()
  3.   const result = normalizeString.memo[word]
  4.   if (result) return result
  5.   return normalizeString.memo[word] =
  6.     [...word.replace(/\s/g, '')]
  7.       .sort() + ''
  8. }
  9. normalizeString.memo = {}
  10.  
  11. const checkAnagram = (word, source) =>
  12.   normalizeString(word) === normalizeString(source)
  13.  
  14.  
  15. // try it out 
  16.  
  17. const target = 'adorn hair'
  18. const anagrams = [
  19.   'hoard rain',
  20.   'hair radon',
  21.   'hadron air',
  22.   'hairdo ran',
  23.   'radian rho',
  24.   'au revoir fail'
  25. ];
  26.  
  27. anagrams.forEach(anigram => { 
  28.   console.log(anigram, '=', checkAnagram(anigram, target))
  29. })

Check if two strings are anagrams of one another.

// javascript // speed-coded // speedcoding // strings // tricks

Save a Text File with JavaScript

  1. function saveFile(text, name = 'file', mime = 'text/plain') {
  2.   const blob = new Blob([
  3.     text
  4.   ], { type: mime });
  5.   const a = document.createElement('a')
  6.  
  7.   a.download = name + '.txt'
  8.   a.href = window.URL.createObjectURL(blob)
  9.   a.click();
  10. }
  11.  
  12. // hacky way to create the button and have it call `saveFile`
  13. // when clicked
  14. document.body.appendChild(
  15.   Object.assign(
  16.     document.createElement`button`,
  17.   { innerText: 'click me' })
  18. ).onclick = () => saveFile('Hello there')
// io // javascript // strings

Log All Class Method Calls

  1. class ConfusingClass {
  2.   constructor() {
  3.     logMethodCalls(this)
  4.     this.confuseMe = 1
  5.     this.someFn(300)
  6.   }
  7.   someFn(startVal = 1) {
  8.     this.confuseMe = startVal
  9.     this.testFn(() => this.otherFn(123))
  10.   }
  11.   testFn(fn) {
  12.     this.confuseMe += 1
  13.     fn(this.confuseMe)
  14.   }
  15.   otherFn(value = 111) {
  16.     this.confuseMe += 2
  17.     this.testFn(() => this.confuseMe += value)
  18.  
  19.     this.confuseMe = this.add(this.confuseMe, 999)
  20.     console.log(this.confuseMe)
  21.   }
  22.   add(a, b) {
  23.     return a + b
  24.   }
  25. }
  26. const confusing = new ConfusingClass()
  27.  
  28. function logMethodCalls(target) { 
  29.   const keys = Object.getOwnPropertyNames(target.constructor.prototype)
  30.   for (let i = 0; i < keys.length; i++) {
  31.     const key = keys[i]
  32.     const propOrMethod = target[key]
  33.     if (typeof propOrMethod === 'function') {
  34.       target[key] = function(...args) {
  35.         console.log(key, '(', args.join(', '), ') - was run')
  36.         return propOrMethod.apply(target, args);
  37.       }
  38.     }
  39.   }
  40. }

This one is good for dealing with confusing classes with lots of method calls. It logs any time a method is called, what its name is and what arguments were passed to it. Sometimes this really beats stepping through breakpoints, at least in my experience…

// javascript // oop // tricks

Little Trading Program

  1. let id = 0;
  2. function person(startValue = 100) {
  3.   const props = {
  4.     id: id++, 
  5.     el: document.body.appendChild(
  6.       Object.assign(
  7.         document.createElement`b`, { 
  8.           innerText: startValue,
  9.           style: 'padding: 1em'
  10.       })
  11.     ),
  12.     value: startValue,
  13.     trade(other) {
  14.       if (props.value <= 0) return;
  15.       other.value += 1;
  16.       props.value -= 1;
  17.       other.el.innerText = other.value
  18.       props.el.innerText = props.value
  19.     }
  20.   }
  21.   return props
  22. }
  23.  
  24.  
  25. const NUM = 4
  26. const people = Array.from({ length: NUM }, person)
  27.  
  28. setInterval(() => {
  29.   const a = people[~~(Math.random() * people.length)]
  30.   const b = people[~~(Math.random() * people.length)]
  31.  
  32.   if (a.id != b.id) a.trade(b)
  33. }, 1)

4 “people” randomly trade…

I asked Chat GPT to describe this… funny response…

The trading program you provided is essentially an example of a random walk or “drunkard’s walk” problem. In such problems, each individual (in this case, the ‘people’) make random moves (in this case, trades), and we observe the resulting dynamics of the system as a whole. In this particular case, each trade involves one individual giving one unit of value to another individual. Since each trade is random, there’s a possibility that over time, all the value might get concentrated in one individual. This isn’t guaranteed, but given enough time, it’s likely. You could compare it to the idea that given enough time, a group of monkeys randomly typing on a keyboard would eventually type out the complete works of Shakespeare. It’s also worth noting that this concentration of value becomes more likely because the individuals with no value left cannot trade anymore, so they are essentially removed from the trading pool. This progressively reduces the number of individuals that can gain value and increases the probability of the remaining individuals gaining more value. This is a simple model of economic transactions and it illustrates how wealth can concentrate over time even if all the transactions are fair and random. Of course, it’s a very simplified model, and real-world economics are much more complex.
// arrays // humor // javascript // math // speed-coded // speedcoding

Simple Way to Validate CSS Colors

  1. function isColor(col) {
  2.   const cache = isColor[col]
  3.   if (cache != null) {
  4.     console.log('- reading cache')
  5.     return cache
  6.   }
  7.   isColor.el.style = ''
  8.   isColor.el.style.color = col
  9.   return isColor[col] = !!isColor.el.style.color
  10. }
  11. isColor.el = document.createElement('div')
  12.  
  13.  
  14. console.log('is "red" a color?', isColor('red'))
  15. console.log('from the cache: ', isColor('red'))
  16.  
  17. console.log('is "rgbx(1, 2, 3)" a color?', isColor('rgbx(1, 2, 3)'))
  18.  
  19. console.log('is "#0f0" a color?', isColor('#0f0'))
  20.  
  21. console.log('is "hsl(192, 50%, 50%)" a color?', isColor('hsl(192, 50%, 50%)'))
  22. console.log('from the cache: ', isColor('hsl(192, 50%, 50%)'))
  23.  
  24. console.log('is "lab(2000.1337% -8.6911 -159.131231 / .987189732)" ?',
  25.   isColor('lab(2000.1337% -8.6911 -159.131231 / .987189732)'))
  26.  
  27. console.log('is "snippetZone" ?', isColor('snippetZone'))

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

// color // css // dom // graphics // hacks // hex // html // javascript // tricks
Older Posts
Newer Posts

Recent

Archive

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