blog

home > blog >

Refactoring 1.0 — Part III

— 7 min read

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

To read the previous posts go here:

Scroll down to continue reading about the next refactoring topics:

  • Improve no-js and older browsers UX
  • Improve reduce motion UX on start page
  • Improve start page performance

To skip to the last part, go here.

Happy reading!

Improve no-js and older browsers UX

You might be asking again yourself, why does she care about no-js anymore? When [I repeat] this is a site focused on people most-likely using modern browsers.

Well, true that. But also who knows? Maybe again, suddenly one person visiting my site it's sitting behind a computer using a browser with JS disabled.

Maybe such a scenario will never happen. But even if so, one topic I care about anyway is progressive enhancement.

Progressive enhancement (PE) concentrates on starting a site with a bare-bones foundation — content with basic HTML and CSS. And then enhancing it with more complex or modern technologies.

I've already done that since the launch of this site, but I wasn't too satisfied with the basic UX on the start page. Instead of the 3D intro, I had an image if there were no-js.

After fixing older browsers and IE 10-11 bugs, I had a solution I could re-use to improve this — the 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>

And only add a no-js parent class to that solution via CSS.

/* SCSS syntax */

.is-fallback-hidden {
  .no-js & {
    display: flex;
  }
}

Curious to experience my site without JS? Go to your browser's settings, disable it, and come back visit.

References:

Improve reduce motion UX on start page

I had someone visiting my site asking me why couldn't they see the 3D intro floating animation on their computer as they did on their mobile phone.

They could see the 3D alright, but it wasn't moving. And they were on a Chrome browser.

I thought, [mhmh] new bug. And then I thought again, [weird]. I thought I've made sure the 3D intro worked well on modern browsers. What could it be?

I asked them to send me a screenshot, and then I remembered! I had setup a prefers-reduced-motion CSS feature for people turning off motion on their devices.

When this happens, the 3D intro ain't animated anymore in browsers supporting this feature, as well as the vampire smileys displayed on the preloader for the content pages. Instead, both animations are static images.

If I've forgotten I programmed this, rest assured some users turning on reduce motion in their devices most likely forget they did it, or are not aware my site has some animations in the first place.

To improve this UX, I decided to add a small banner at the bottom of the start page. A little reminder that the reduce motion accessibility feature is turned on in their system.

I created a new utility class and added it to the div tag rendering the 3D canvas.

<div id="js-canvas-title" class="u-info-motion"></div>

And added the message via CSS.

/* SCSS syntax */

.u-info-motion {
  &::before {
    @media (prefers-reduced-motion: reduce) {
      content: "*Reduce motion is turned on in your system.";
    }
  }
}

To try it, reduce the motion on your system and go back to the start page.

If you cannot find this feature in your system, follow the instructions from the references link below.

References:

Improve start page performance

Loading the start page with the 3D intro for a first-time visitor was not performant.

I was loading the full ThreeJS library I'm using to work with WebGL, before loading my custom JS.

When I created this site, I did it quickly in about a week. That time didn't include exclusively coding, but also landing a final concept, designing in the browser, choosing a color palette, making assets, etc.

By the time I wrote the JS to add dynamism to the site, I was a bit lazy.

I didn't want to spend too much time writing JS and organizing components for such a small personal project, but be done with it and revisit it later.

The later came, and as I refactored all my JS with proper ES6 modules, I improved the performance of the start page for first-time visitors by tree-shaking the ThreeJS library.

I say, first-time visitors because I am using a service worker to address caching and offline experiences that came with the Eleventy starter kit I'm using by Andy Bell — Hylia.

There's a wonderful little book about service workers by Jeremy Keith — Going Offline.

When speaking of tree-shaking in JS, one refers to the elimination of unused code.

Instead of making the first-time visitors download ca. 500kB of a library, plus a custom JS file, now they only download a 137kB bundle.

The bundle includes only the ThreeJS modules I need to create the 3D animation, and the JS I wrote for small components used on the start page.

To tree-shake ThreeJS, I added the library to my project via a package on npm.

npm install three --save-dev

And I included ThreeJS via ES6 modules to my custom component.

import * as THREE from 'three';

export default function run3dAnim() {
  /* JS code */
}

I didn't need to explicitly import the modules I used. My JS module bundler RollupJS did the job [oh, what a ride that was! I've never used RollupJS before].

RollupJS analyzed all ThreeJS library modules and deleted anything not used during compilation.

I don't know about you, but I like to call this kind of processes 'magic'.

References: