Code Snippets

Snippet Description

This is a modified version of Wes Bos' JavaScript 30 Drum Machine.

Press the keys (e.g. "1", "2", "3") listed in the pink bars beneath each block-letter to play a Christmas sound effect and trigger a CSS transformation! There's a really clever use of data-attributes going on underneath the hood that stitches everything together.

Oh, and don't forget to tune into Jon Solomon's annual 25-hour holiday marathon on WPRBXmas this coming Christmas Eve at 5:00pm EST!

All sound effects were downloaded from freesound.org.

Snippet Use Case

While tweaking Wes' tutorial to create a sound maker for my MARATHON CHRISTMAS side project, I quickly discovered I needed to extend his use of event listeners.

In Wes' implementation, the addition & removal of classes on a given div whenever a sound was played was handled entirely via key-driven events. This worked fine when the sounds being sampled were extremely short, but longer samples resulted in a sub-par user experience. I rewrote the underlying code so that a given div's class was removed after an audio element's sound had finished playing.

Snippet Description

As part of my ING system, I keep a task log of (almost) everything I do on a day-to-day basis.

An integral part of my task log is timestamping: every ING task is associated with a 24-hour (i.e. "military time") timestamp.

Snippet Use Case

Timestamping task log entries is a deceptively "trivial" piece of data capture!

To help keep things moving along, with a minimum of administrative overhead, I created a simple keybinding (<leader>tlts</leader>) in Neovim's init.vim file that automatically creates a new 24-hour timestamp in the left margin of new task log entries. Additionally, this key-binding also puts Neovim in insert mode and performs some task-log-specific standard formatting (i.e. 2 tabs) whenever invoked.

It may not seem like much, but the time-savings associated with this simple keybinding really do add up! They also help keep my focus where it needs to be: on capturing qualitative task-specific data not amenable to automation.