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

Disable Bouncing Dock Icons

  1. defaults write com.apple.dock no-bouncing -bool TRUE;

I have never liked those bouncing icons in osx…

// apple // osx

Label Thoughts

  1. main:{
  2.   header:{
  3.     {'Tasker'}
  4.     newCol:{'New Column'}
  5.   }
  6.  
  7.   columns:{
  8.     scroll:{
  9.       NoteCols:{}
  10.     }
  11.   }
  12. }
  13.  
  14. NoteCol:{
  15.   title:{['editable', 'focus']
  16.     close:{
  17.       {'×'}
  18.     }
  19.   }
  20.   newNote:{['editable', 'placeholder="New Note..."']}
  21.   hr:{}
  22.   noteContainer:{
  23.     Notes:{}
  24.   }
  25. }
  26.  
  27. Note:{['focus']
  28.   close:{
  29.     {'×'}
  30.   }
  31.   checkbox:{}
  32.   content:{['edtiable']}
  33. }
  34.  
  35. console.log('no errors :D');

The above is actually valid javascript, just a bunch of labels, blocks and a few arrays

// javascript // tricks // ui

CoffeeScript Ikeda Map

  1. canvas = document.querySelector "canvas"
  2. c = canvas.getContext "2d"
  3. locX = 120
  4. locY = 400
  5. xn1 = xn = yn1 = yn = tn = 0
  6. u = .7
  7. steps = 10
  8. iterations = 200
  9. scale = 180
  10.  
  11. c.fillStyle = "black"
  12. c.fillRect 0, 0, canvas.width, canvas.height
  13. c.fillStyle = "rgba(255,255,255,0.2)"
  14.  
  15. run = setInterval ->
  16.   clearInterval run if u > 1
  17.   i = 0
  18.  
  19.   while i < steps
  20.     u += 0.00015
  21.     j = 0
  22.  
  23.     while j < iterations
  24.       xn = xn1
  25.       yn = yn1
  26.       tn = 0.4 - (6 / (1 + xn * xn + yn * yn))
  27.       xn1 = 1 + u * (xn * Math.cos(tn) - yn * Math.sin tn)
  28.       yn1 = u * (xn * Math.sin(tn) + yn * Math.cos tn)
  29.       c.fillRect locX + xn1 * scale, locY + yn1 * scale, 1, 1
  30.       j++
  31.     i++
  32. , 30

I do quite miss CoffeeScript sometimes… here is an old codepen of the Ikeda Map:

See the Pen Ikeda Map by Zevan Rosser (@ZevanRosser) on CodePen.

CSS Checkbox

  1. <div class="toggle">
  2.   <input class="check" type="checkbox" tabindex="0">
  3.   <label></label>
  4. </div>
  5.  
  6. <style>
  7.   .toggle {
  8.     position: relative;
  9.   }
  10.   .check {
  11.     position: absolute;
  12.     width: 3rem;
  13.     height: 3rem;
  14.     margin: 0;
  15.     opacity: 0;
  16.     cursor: pointer;
  17.   }
  18.   label {
  19.     position: absolute;
  20.     pointer-events: none;
  21.     content: '';
  22.     width: 3rem;
  23.     height: 3rem;
  24.     background: black;
  25.     cursor: pointer
  26.   }
  27.   .check:checked + label {
  28.     background: red;
  29.   }
  30. </style>

Quick css checkbox. I used to do this all the time and feel like maybe there was a better way… anyway, this is what I did to get it working fast…

// css // html // ui

Soundex

  1. // Minimum length of Soundex keys.
  2. var minLength = 4
  3.  
  4. // Soundex values belonging to characters.
  5. // This map also includes vowels (with a value of 0) to easily distinguish
  6. // between an unknown value or a vowel.
  7. var map = {}
  8.  
  9. map.a = map.e = map.i = map.o = map.u = map.y = 0
  10. map.b = map.f = map.p = map.v = 1
  11. map.c = map.g = map.j = map.k = map.q = map.s = map.x = map.z = 2
  12. map.d = map.t = 3
  13. map.l = 4
  14. map.m = map.n = 5
  15. map.r = 6
  16.  
  17. /**
  18.  * Get the soundex key from a given value.
  19.  *
  20.  * @param {string} value
  21.  * @param {number} [maxLength=4]
  22.  * @returns {string}
  23.  */
  24. function soundex(value, maxLength) {
  25.   var lowercase = String(value).toLowerCase()
  26.   /** @type {Array.<string|number>} */
  27.   var results = []
  28.   var index = -1
  29.   /** @type {string} */
  30.   var character
  31.   /** @type {number} */
  32.   var previous
  33.   /** @type {number} */
  34.   var phonetics
  35.  
  36.   while (++index < lowercase.length) {
  37.     character = lowercase.charAt(index)
  38.     phonetics = map[character]
  39.  
  40.     if (index === 0) {
  41.       // Initial letter
  42.       results.push(character.toUpperCase())
  43.     } else if (phonetics && phonetics !== previous) {
  44.       // Phonetics value
  45.       results.push(phonetics)
  46.     } else if (phonetics === 0) {
  47.       // Vowel
  48.       phonetics = null
  49.     } else {
  50.       // Unknown character (including H and W)
  51.       phonetics = previous
  52.     }
  53.  
  54.     previous = phonetics
  55.   }
  56.  
  57.   return pad(results.join('')).slice(0, maxLength || minLength)
  58. }
  59.  
  60. /**
  61.  * Pad a given value with zero characters. The function only pads four characters.
  62.  *
  63.  * @param {string} value
  64.  * @returns {string}
  65.  */
  66. function pad(value) {
  67.   var length = minLength - value.length
  68.   var index = -1
  69.  
  70.   while (++index < length) {
  71.     value += '0'
  72.   }
  73.  
  74.   return value
  75. }
  76.  
  77. console.log(
  78.   soundex('Joe'),
  79.   soundex('Smith'),
  80.   soundex('Ed'), 
  81.   soundex('Vilowat')
  82. )

Was talking with someone about Soundex… I grabbed this implementation from the soundex-code npm package from Titus Wormer

Soundex has always been super interesting to me for some reason.

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