Monthly Archives: April 2020

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