Style updates
Tags: darkmode, css, javascript, progressbar
Published: 2019-10-19 08:34:12

---
title: Style updates
published: true
date: 2019-10-18 00:00:00 UTC
tags: ["dark mode", "css", "javascript", "progress bar"]
canonical_url: https://hambly.dev/style-updates.html
cover_image: "https://hambly.dev/assets/images/style.jpg"
---

Implementing user experience improvements on my blog, including dark mode and a reading progress bar.

**Reading on dev.to? See the actual effects here: [hambly.dev/style-updates.html](https://hambly.dev/style-updates.html)**


### Flashing cursor

I thought it would be cool to make the link in the header look like it has a flashing cursor. So I slapped a `<blink>` tag on it! Just kidding, the blink tag is [obsolete](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink), so I found a CSS animation and tweaked it as required. Simply animate the text color to transparent and back each second, infinitely.

```scss
// SCSS

.blink {
  color: $grey-color;
  animation: 1s blink step-end infinite;
}

@keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: $grey-color;
  }
}

```

### Reading time estimate

I added a reading time estimate next to the published date, with the following Liquid include. It works by counting the number of words in the content, and dividing it by an average reading speed. I had to wrap the snippet below in [raw tags](https://shopify.github.io/liquid/tags/raw/) so that it isn’t evaluated by Jekyll at build time!

```liquid

{{
  content
    | number_of_words
    | plus: 200
    | divided_by: 200
    | prepend: "⏱️ "
    | append: " min read"
}}

```

### Reading progress bar

I like the cosmetic effect of an animated progress bar while reading, enough to sacrifice my “Javascript only for analytics” rule. The site still works perfectly with Javascript disabled, which is what really matters - to the tech crowd anyway. Minimizing Javascript is good for mobile sites in general, as it all needs to be [downloaded, parsed, and compiled](https://v8.dev/blog/cost-of-javascript-2019). This increases CPU load and uses more energy from your precious battery.

The progress bar works by adding a [`<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) element to the page, and updating its `value` attribute when scrolling. An event listener is added to the `scroll` event, but we [decouple the animation](https://www.html5rocks.com/en/tutorials/speed/animations/) from the input events by using [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) to cue the animation for the next browser repaint.

```javascript
// add a <progress> element to the page, style and position it to taste
// <progress id="progress" max="100" value="0"></progress>

window.addEventListener("load", setup);
window.addEventListener("resize", setup);
var listening = false;

function setup() {
  var scrollPosition = 0,
    ticking = false,
    progress = document.getElementById("progress"),
    body = document.body,
    html = document.documentElement,
    width = 0;

  var height = Math.max(
    body.scrollHeight,
    body.offsetHeight,
    html.clientHeight,
    html.scrollHeight,
    html.offsetHeight
  );

  var maxScroll = height - html.clientHeight;

  function update() {
    scrollPosition = window.scrollY || window.pageYOffset;
    if (!ticking) {
      window.requestAnimationFrame(function() {
        progress.value = (100 * scrollPosition) / maxScroll;
        ticking = false;
      });
      ticking = true;
    }
  }
  update();
  if (!listening) {
    // only add the scrolling event listener once!
    window.addEventListener("scroll", update);
    listening = true;
  }
}

```

### Dark mode

I recently found out about the [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) CSS media feature after seeing [this post by Tom Brow](https://tombrow.com/dark-mode-website-css), and I had to have it. Something about great artists stealing, and all that. 🔪

Initially I was looking for a dark mode option in browser settings, before finding out it’s an operating system wide setting. [Here’s what it looks like on Windows 10](https://hambly.dev/style-updates.html#dark-mode).

This is nice and easy to do, just add another `@media` declaration to your css, and then overwrite your styling as required. A really nice tidbit from Tom’s article is to apply a slight grayscale [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) to the images in dark mode, so they are subtly less bright.

```scss
// SCSS

@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #eee;
  }
  pre,
  code {
    background-color: #444;
  }
  img {
    filter: grayscale(20%);
  }
  a {
    color: #fff;
    text-decoration: none;
    border-bottom: 2px $orange-color solid;
    transition: color 1s;

    &:hover {
      color: $orange-color;
    }
  }
  p {
    color: #ddd;
  }
}

```

Here’s how to enable dark mode on [MacOS](https://support.apple.com/en-us/HT208976), [iOS](https://www.macworld.com/article/3405138/how-to-enable-dark-mode-on-iphone-and-ipad.html), and [Android](https://9to5google.com/2018/12/17/android-dark-mode-theme-pie/).

With style updates done, for now, I can concentrate on writing something a bit more technical. Until next time!