šŸ‘‹šŸ»  Hello!

Thanks for visiting! You'll find a bunch of musings I've been writing around these parts since the early 2000's. Lately, I've been reviewing a lot of books. But I also write about code. But really, you're just here to see pictures of Benson.

3 weeks of GOES-17 imagery: hurricanes, wildfires and more

I recently built a side project recently that automatically downloads GOES-17 imagery every 10 minutes and then compiles it into a video.

The result is pretty darn awesome! Here is 3 weeks of GOES-17 imagery sourced from NOAA / CIRA / RAMMB. The video begins the night of August 15th, 2020 as lightning storms rolled through Northern California and runs until the afternoon of September 10th, 2020.

Almost immediately, you begin to see smoke plumes from fires created due to lightning strikes.

Note: The blue and yellow blocks that you see periodically flash on screen are the result of corrupted image data downlinked from GOES-17. Iā€™m not sure exactly what causes this, but these errors are present within the original images files hosted on NOAAā€™s CDN.

(Be sure to bump up the video quality ā€” YouTubeā€™s default compression really ruins the image)

For those who appreciate clean air…

It seems like every year, late in the summer or early in the fall, the air in the Bay Area fills with thick smoke from raging infernos happening around northern California. The air is hazardous to breath, preventing you from taking kids to the park, walking your dog or even opening your windows.

Last year, we made the wise decision to purchase an air purifier, which admittedly, looks like a giant iPod shuffle.

As fires continue to burn around these parts, weā€™ve started to rely on air quality data from PurpleAir, which monitors air quality data from a series of IoT sensors that people can purchase for their homes or businesses.

You can view a map featuring realtime data collected from their sensors. Here in the Bay Area, the sensors are quite ubiquitous and can give a more realistic pictures of air quality near your home.

For example, here is the current air quality around the Bay Area from PurpleAir while I write this post.

For comparison, here is the current air quality map for Bay Area Air Quality Management District (BAAQMD), which we used to reference when trying to determine local air quality.

The fidelity you get from PurpleAir is pretty amazing.

Knowing this, I decided to write a Node app that periodically queries PurpleAir for air quality data from a sensor located a few blocks from our house. It continuously runs on a Raspberry Pi setup in our entertainment center and sends me a text message to close our windows when the AQI crosses above 100.

Iā€™ve made the source code available on Github. Check it out!

It’s kind of fun when a band gives you a call out…

In the early 2000ā€™s, one of my favorite punk bands was Tsunami Bomb. I followed them up and down the West Coast, going to a ton of shows and meeting a lot of cool people in the process. They went on hiatus in 2005. In 2009, the had a reunion show up here in the Bay Area, so I went and took a number of photos.

(Interestingly, they reformed again in 2015 with a slightly different lineupā€¦ and I sadly havenā€™t gone to see them live yet).

Anyway, they recently had an Instagram post celebrating their anniversary and posted one of my photos. Nice!

It was a pretty awesome show. A few more photosā€¦

Book Review: “The Wax Pack” by Brad Balukjian

The premise: a baseball fan fondly recalls his childhood memories of obsessively opening and collecting packs of baseball cards.

While watching an Aā€™s game one afternoon at the Coliseum (which he rightly describes as a ā€œpost-apocalyptic crater ringed with hot dog standsā€), he wonders what the players featured on the cards he collected as a kid were doing with their lives after their baseball careers had ended.

After purchasing a pack of cards on eBay from 1986, (the first year the author remembers having baseball cards), he sets off on a road trip across America to find and hopefully meet the 14 players featured in this 30-year-old card pack.

High jinks, hilarity and even important life lessons ensue.

This was just a great read and I highly recommend it for any baseball fan. Check it out on Goodreads.

A simple dark-mode hook for React

I recently wrote a simple hook for React to automatically detect a deviceā€™s dark mode preference (as well as any changes to it) and style your web app accordingly, using something like ThemeProvider from styled-components.

It was developed as part of a side project I was hacking around on using my personal React Starter Kit, which is my own React project for quickly getting prototypes and side projects up and running.

Iā€™ve released this as a standard GitHub repo instead of an NPM module due to the simplicity of this hook, especially in light of one-line packages breaking the Internet. To use it, just copy it into your project where needed.

Iā€™ve released this under an MIT license. Feel free to use as-is, fork, copy, tear apart, profit, and share as you wish.

You can check out the code on Github.

This might explain why I enjoy washing dishes

Fun fact: I like washing dishes.

In light of current events, Iā€™ve found myself doing it much more than usual. However, Iā€™ve never really been able to explain why Iā€™ve enjoyed it so much but Iā€™ve felt there is something relaxing and even meditative about it.

It turns out, Iā€™m not alone in this line of thinking and itā€™s been mentioned by ThĆ­ch Nhįŗ„t Hįŗ”nh as a way to cultivate mindfulness.

Adam Hanley randomized two groups of college kids and had half read Thich Nhat Hanhā€™s instructions for mindful dish-washing while the others read simple, mechanical instructions.

After the students washed the dishes, members of the group that had read mindfulness teachings reported having a better experience, a joyful experience, and had lost track of time.

Hanleyā€™s study was published in 2014. Some notes from the abstract are below:

This study sought to investigate whether washing dishes could be used as an informal contemplative practice, promoting the state of mindfulness along with attendant emotional and attentional phenomena. We hypothesized that, relative to a control condition, participants receiving mindful dishwashing instruction would evidence greater state mindfulness, attentional awareness, and positive affect, as well as reduce negative affect and lead to overestimations of time spent dishwashing. A sample of 51 college students engaged in either a mindful or control dishwashing practice before completing measures of mindfulness, affect, and experiential recall. Mindful dishwashers evidenced greater state mindfulness, increases in elements of positive affect (i.e., inspiration), decreases in elements of negative affect (i.e., nervousness), and overestimations of dishwashing time.

Fixing rendering issues with React and IE11

Happy April Foolsā€™ Day. This post is no laughing matter because it deals with IE11. šŸ™€

Awhile back, we had an issue where visitors to our site would hit our landing page and not see anything if they were using Internet Explorer 11. The skeleton layout would appear on the screen and that was it.

Debugging the issue using IE11 on a Windows box proved to be difficult. Normally, we open up the inspector window, look for an error stack and start working backwards to see what is causing the issue.

However, the moment I opened the inspector, the site would start working normally again. This lead me down a rabbit hole and I eventually found a relevant post on StackOverflow: ā€œWhy does my site behave differently when developer tools are open in IE11?ā€

The suggested solution was to implement a polyfill for console.log, like so:

if (!window.console || Object.keys(window.console).length === 0) {
  window.console = {
    log: function() {},
    info: function() {},
    error: function() {},
    warn: function() {}
  };
}

Interestingly, we didnā€™t have console.log statements anywhere in our production build, so I figured it must be from some third party library that we were importing. We added this line of code at the top of our web appā€™s entry point to try and catch any instances of this. For us, that was located at the following path: src/app/client/index.js

After rebuilding the app, things were still broken, so the investigation continued.

We eventually concluded that the issue had to do with how our app was built. Our web app is server side rendered and we use Babel and Webpack to transpile and bundle things up. It turns out, Babel wasnā€™t transpiling code that was included in third party libraries, so any library that was using console.log for one reason or another would cause our site to break.

(The fact that IE11 treats console.log statements differently when the inspector is open vs. not is an entirely separate issue and is frankly ridiculous.)

Knowing this, we were eventually able to come up with a fix. We added the polyfill I posted above directly into the HTML template we use to generate our app as one of the first things posted in the head block. The patches console.log so that itā€™s available in any subsequent scripts (both external or not) that use it.

<!doctype html>
  <html>
    <head lang="en">
      <meta content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport"/>
      <meta charSet="UTF-8"/>
      <script>
        if (!window.console || Object.keys(window.console).length === 0) {
          window.console = {
            error: function() {},
            log: function() {},
            warn: function() {},
            info: function() {},
            debug: function() {},
          };
        }
      </script>

After that, everything started working again in IE11.

#TheMoreYouKnow