blog

home > blog >

Refactoring 1.0 — Part I

— 7 min read

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

To skip to the second part, go here.

I built this site for myself at the end of 2019 in about 1.5 weeks. I'm talking about landing the final concept, designing in the browser, making assets, coding it and testing.

When I was done with it I thought of this site as a work-in-progress, since there were features I wanted to double-check in older browsers and revisit my code.

Furthermore after some feedback, I thought the UX in certain places could be improved.

The big response and all the good comments I received was surprising. Not that I didn't think my site was very cool, but sometimes what we think is cool is not perceived the same by everybody else.

I was distracted by the attention and making code art is always more fun, thus a decent refactoring happened until recently.

I figured I'd share my refactoring ride to give an update about the site's changes, and in case it helps somebody else looking for similar solutions to their site.

I am sure there are many other ways I could have tackled the improvements shown in this refactoring. But to date, these were the choices I made matching my current experience and preferences.

I can imagine another refactoring happening again in the future to enhance any of these improvements or add new features.

As of this writing, I already have a new list on my mind [oh, oh]. But I need to stop myself at some point for my own sake.

My refactoring list looked like this:

  • Add a preloader to lazy-load images
  • Add a scroll-to-top button
  • Add hotpink theme selection on start page
  • Fix IE 10-11 and older browsers bugs
  • Fix MS Edge bug
  • Improve no-js and older browsers UX
  • Improve reduce motion UX on start page
  • Improve start page performance
  • Improve the preloader UX in content pages
  • Refactor theme picker HTML architecture

If you're interested in reading each topic in detail, keep on scrolling down and follow the series.

By the time I finished writing this post [only took me a month] it was a 25 min read.

When it comes to reading posts I have the attention span of a fish, hence I decided to present the full writing as a series of posts.

Happy reading!

Add a preloader to lazy-load images

This was part of improving the overall UX in content pages. Since the launch of this site, I am lazy-loading all images.

I'm using the native lazy-loading HTML attribute loading="lazy" inside the img elements, and have a JS library as a fallback for browsers without support.

If the visitor's network was slow, they were experiencing a blank section on the page before the images were loaded.

To optimize such experience, I added a small SVG preloader of four dots animated, which I didn't create, but instead got from a preloaders' site.

I created a new component class to add the preloader graphic via CSS.

.c-preloader {
  background-image: url('/.../preloader.svg');
  /* More CSS */
}

And I added such preloader class to all img tags that were lazy-loading.

 <img src="..." alt="..." loading="lazy" class="c-preloader">

Today, if the visitor has a slow network while loading images in any of my content pages, they know some content is coming wherever the four dots are dancing.

References:

Add a scroll-to-top button

This was another topic to improve the UX in content pages. I wanted to do something simple without JS.

I created an anchor link targeting an id on the body tag.

<body id="page-top">
  <a href="#page-top">top</a>
</body>

And added a smooth scroll effect via CSS for modern browsers supporting the feature.

html {
  scroll-behavior: smooth;
}

Browsers without support will jump to the top of the page instead of scrolling back smoothly, and that's ok.

References:

Add hotpink theme selection on start page

One particular experience many people had told me they loved from this site is playing with the 3D intro.

When I created my site and decided to have a color theme picker, I thought of not giving the user too many choices to start with, but only after they decided to explore further other content.

Now, I changed my mind. :)

If users love spending time on the intro page, well, why not giving them one more thing to play with? And that is interacting with the floating 3D text and objects over a bright hotpink colored sky [yep, it's a kind of vibrant blinding color].

Coding-wise I didn't have to do much to make this happen since I already had the component written.

I added the proper HTML tags with the corresponding CSS classes and voilà!

<li class="c-picker__item">
  <div data-theme="hotpink" class="c-picker__btn c-picker__btn--02">
    <input type="radio" id="hotpink" name="theme" value="hotpink" class="is-hidden">
    <label for="hotpink" class="is-hidden">Hotpink theme</label>
  </div>
</li>

Haven't tried it yet? Go back to my start page.