blog

home > blog >

Refactoring 1.0 — Part II

— 7 min read

This is the second part of a series of posts about my recent refactoring in this site.

To read the first part, go here.

Scroll down to continue reading the next refactoring topics on my list:

  • Fix IE 10-11 and older browsers bugs
  • Fix MS Edge bug

To skip to the third part, go here.

Happy reading!

Fix IE 10-11 and older browsers bugs

You might be asking yourself, why does she care about IE anymore? When this is a site focused on people most-likely using modern browsers.

Well, true that. But also who knows? Maybe suddenly one person visiting my site it's sitting behind a computer with an older browser or likes IE. The latter not officially dead yet [maybe soon, I heard].

Such a scenario does haunt me. I'd like that such a person access the content on my site, even if the experience is not as shiny as in modern browsers.

By the time I got to debug IE 10-11, everything was a blank page. But not to worry, the fixes weren't as terrible as I first thought.

I had forgotten to fallback my CSS variables, also known as custom properties.

One of the fixes looks like this:

.m-wrapper {
  background-color: purple; /* IE and older browsers fallback */
  background-color: var(--c_theme_bg);
}

After those CSS variables alterations, the content was viewable. The rest of my CSS was almost bulletproof, as there was nothing else broken on content pages, except for the footer floating in the middle of the page.

The floating footer bug fix consisted of removing the height I had on the html and body elements, making sure the fix wouldn't affect other browsers.

/* CSS deleted */ 
- html,
- body {
-   height: 100%;
- }

There were two remaining JS bugs — the theme picker and 3D intro didn't work.

The theme picker bug fix involved a CSS feature detection test made to display it only in browsers supporting custom properties.

if (window.CSS && CSS.supports('color', 'var(--css-var)')) {
  /* JS theme picker code */
}

Otherwise, it's hidden by default via CSS.

.c-picker {
  display: none; /* Display via JS if supported */
}

I decided on making the theme picker an enhancement for modern browsers, thus older browsers solely rejoice on the default colors of this site.

The last IE bug fix included creating a fallback for the 3D intro.

IE 11 supports WebGL to a certain extent, and I'm using the ThreeJS library to work with WebGL. I'm working with a ThreeJS version via modules for tree-shaking that uses ES6 classes, which are not supported on IE at all.

In a nutshell, I created a regular 2D fallback with a headline matching the design of all the headlines on my site.

<div id="js-fallback" class="is-fallback-hidden">
  <h2 class="c-page__heading">Creative developer...</h2>
</div>

This fallback hides by default via CSS, and I display it on browsers without certain ES6 support.

I think it's a win-win fix not only for IE, but also for older browsers that weren't running my 3D intro because of the same issue.

To show the 2D fallback I made a small JS built-in object detection test.

if (!window.Promise) {
  /* More JS */
  document.querySelector('#js-canvas-fallback').style.display = 'flex';
}

And I placed it inside a script tag outside the only JS bundle I have on the start page including ThreeJS.

<script src="/js/bundle.min.js" defer="defer"></script>
<script>
  "use strict";
  if (!window.Promise) { /* JS code */ }
</script>

The fallback built-in object detection test is not inside the JS bundle, because as soon as IE finds any kind of error inside a script, it stops and won't run anything else working on that same script.

After that worked out, I had now to make sure my 3D intro was being displayed only on browsers supporting that JS built-in object.

if (window.Promise) {
  init3dIntro();
}

I chose to make the built-in object detection test around ES6 promises and not ES6 classes, because it was a simpler and cleaner solution to my taste.

Also, because my site's visitors using IE 10-11 or older browsers are about 1%. Thus, I didn't want to invest more time in further ThreeJS debugging.

There are probably many other ways I could have solve my WebGL/ThreeJS IE 10-11 bug dilemma. But this was my take.

Sometimes the solution to a problem doesn't have to be that complex.

References:

Fix MS Edge bug

There was only one annoying bug on MS Edge since I built my site — the dotted sky background didn't show up.

I could never figure out what happened there. But also never debugged it properly.

Once I started with this refactoring, all of a sudden [boom!], the bug was gone.

Now the dotted sky background shows up on MS Edge. And this is one of those coding bugs that I like to call 'the mystery bug'.

I'll bet at least once in your dev life you've encountered one.

I'm not going to lie, 'mystery bugs' are dangerous. One wouldn't like to encounter them ever, but it might happen. It's best to avoid them.