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

Working extra hard for those steps

20130507-223030.jpg

I love my Fitbit. It’s easily one of my favorite gadgets that I own. It’s unobtrusive, the battery lasts forever, and its presence subconsciously reminds you to get up and move around a bit more.

In my previous jobs, I’ve been lucky to have the option to walk to work instead of relying solely on public transit. This gave me a chance to get some extra activity in at the beginning and end of each day and reach Fitbit’s lofty goal of 10,000 steps per day (equivalent to about 5 miles). It’s something that I always enjoyed striving for.

With my new gig, I walk around the corner to BART, take that to my stop, hop right onto a shuttle and then get dropped off right in front of our office. This means I lose out on having a built in opportunity to get some activity each day. (The walk from the BART station to the office is a little bit longer that one would want to walk — about 5.5 miles each way.)

Fortunately, our campus has a free gym with some nice equipment. On days where Kerry and I don’t go to the gym in the morning, I try to go here after work and get in those much needed steps. It’s a bit crazy how hard you need to work for them. After a full day in the office, I’ll run 3 miles on the treadmill and feel extra accomplished. At least until I pull out my Fitbit and it says I’m short by about 1,500 steps. Wow.

So, I’ve been trying to make a conscious effort to get more steps each day. Make sure I go to the gym in the morning (and / or evening). Do a lap around our campus at lunch time while calling my parents. Walk to the grocery store in the evening when I get home. (Interestingly, recent studies seem to indicate that walking and running have nearly identical health benefits.)

It’s pretty crazy how much I’ve taken things like my simple morning walk to work for granted. But I’m happy that I’ve been able to make a conscious effort to do healthy things.

An ngnomo’

Due to downsizing and restructuring, last week was my last week at DeNA San Francisco (formerly ngmoco). Past ngmoco alum have a special saying for this type of thing: “I’m an ngnomo’!

The past year or so has been a blast! I met so many great people and I know we’ll cross paths again. We did a lot of great work together and had a lot of fun in the process, plus we learned a lot and taught each other a lot too.

Anyway, I’m excited for new opportunities and even bigger and better things to come. Stay tuned! 🙂

A look back at the last year:

It’s been a fun!

Gdgt office

Hey folks,

Today is my last day at gdgt. It’s hard to believe that I joined the team almost 3 years ago. Time flies when you’re having fun! It’s been a wild ride, but it’s time for me to pursue some new opportunities in 2012!

I want to thank the gdgt community for making my job an absolute blast and helping create something awesome! It’s been a fun experience chatting with everyone on gdgt, on Twitter, and even in person at our gdgt live events. I’ve met a countless number of great people, and for that, I’m super thankful.

Thanks for the fun times and happy memories!

Until next time,

-Dave