Working with Automatic Counters in CSS

John Ojanti Itebu — Sun, 29 Apr 2018 19:34:37 +0000

If you ever wanted to add an automatic counting component into your HTML/CSS/JS interface, you'd probably use a (heavily styled) numbered list or javascript counter which will be inserted/updated in the DOM. There are a few issues with those options.

Although the first may fit in simple scenarios, it becomes less suitable in more complex cases like when you want the counters to show at parts of the interface distant from each other or you want to create complex styling with multiple elements around your counters. It's very selective.
The second option should simply be "avoided" because it's general regarded as best practice to use CSS for as many design and rendering operations instead of the Javascript (JS) equivalent. The reason is CSS operations are better in performance compared to JS equivalents. CSS doesn't take as much memory and overhead as JS for rendering.

So back to business. How can we create an automatic counter/counting component in our HTML/CSS/JS work.

CSS has an inbuilt counting mechanism that works just like using variables as counters in most programming languages.

We will need the following CSS properties to setup and use counters in our interface.

counter-reset - Creates a new counter variable or resets an existing counter variable
counter-increment - Increments a counter value
content - This refers to the usual CSS content which will be used to contain our generated counter and any other information when ready
counter() or counters() function - Inserts the value of any counter variable created above It's call to an element.

Lets use a basic example to know how it works.

If you notice, the word number occurs in every use. We can move that into the content rule and build it up there like

Now lets treat an example using 2 counters used at any point within the DOM and reset. It keeps track of the incremental value.

Now lets treat something a bit more advanced and practical. Here is an example from w3 schools that illustrates a real life scenario where you may consider using CSS counters.

Now to my favourite part. How useful is this in design. You can use css counters to create nice components like this one I created.

Any experienced (or growing) UI architect knows It's best practice to keep an interface's markup code as clean as possible. Using CSS counters in the case above makes more sense because;

You don't have to include the figures in your HTML markup and keep track of them manually
You don't have to figure out how to MEGA style ordered lists
And you don't have to use Javascript to insert and update the figures (messy messy messy)

If you are a designer, Im sure you can see the possibilities.

PS:

If you are concerned about compatibility, IE8 supports this. You just have to specify a !DOCTYPE.
I'm not exactly sure why but only one counter can be created/reset per element. You cant do this:

.animal_story{
    counter-reset: cat_number;
    counter-reset: dog_number;
}

Follow me on Twitter

Build a lightweight Internet Detect Feature with VanillaJS

John Ojanti Itebu — Fri, 06 Apr 2018 20:30:54 +0000

View live demo Here.
Complete Code on Github Here.
Originally Posted on my blog.

I recently worked on an application which was primarily being used by customers in certain areas of West Africa. While Beta testing the app, we received several complaints of it not working properly. After further investigation we noticed most of the issues raised were due to failed or bad internet connectivity. Smooth operation of the software largely depended on stable internet.

So prior to building more robust features like autosave or temporary storage, I was tasked with implementing a light weight internet detect feature that would check for internet connectivity and notify the user when its bad/restored and the consequences of both. The major requirements' were;

It must be light weight and implemented quickly
It shouldn't be ugly because of 1 (no javascript alerts lol)
It should have minimal to no dependencies (beyond basic/regular requirements for a web application)

I decided to use VanillaJS which will execute firstly once any view of the app runs. I would ping a file on a remote server and check for the response HTTP status. If it wasn’t successful i.e HTTP status code >= 200 & < 304. reference here, then I notify the user and offer some advice while still checking. If eventually the internet connectivity is restored, the application would notify the user of this.

Here is the core function:

var wasInternetConnectionBad = '';      //used to show restored internet notification only once
var internetCheckActions = function() {
    var xhr = new XMLHttpRequest();
    var file = "/img/nKekEaz4i6jeRtvxZRnY.jpg";     // the remote file to check for. You should replace this with yours
    var randomNum = Math.round(Math.random() * 10000);      //initiating a random value to  revv the file

    xhr.open('HEAD', file + "?rand=" + randomNum, true);
    xhr.send();

    xhr.addEventListener("readystatechange", processRequest, false);

    function processRequest(e) {
        if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 304) {
                if (wasInternetConnectionBad == "1") {
                    //  Internet connection is GOOD. Do what ever you like here
                }
                wasInternetConnectionBad = '';      //Clear flag
            } else {
                //  Internet connection is BAD. Do what ever you like here
                wasInternetConnectionBad = '1';
            }
        }
    }
}

I decided to invoke the function when the DOM content loads and every subsequent 5 seconds. You can change this as you feel


// Invoke when DOM content has loaded
document.addEventListener('DOMContentLoaded', function () {
    internetCheckActions();
});

//& every subsequent 5 seconds
var checkInternetConnection = function() {
    setInterval(function () {
        internetCheckActions();
    }, 5000);
}
checkInternetConnection();

The code above is basically what you need. You can end here or continue to see the more complete solution.

The next step was to figure out how to notify the user of the state of things in nice way. This is where I normally just call a fancy Jquery notification plugin but we cant do that. So I built a very light weight and extensible notification widget. The cool thing is it can be used in other utility functions.

First lets create the HTML markup for the notification. Ideally this should be inserted as the first child of the BODY tag and sibling of what ever hosting element is decided should be the page content.

<img src="https://cdnjs.cloudflare.com/ajax/libs/slippry/1.4.0/images/sy-loader.gif" width="1" height="1"
     style="position:absolute; z-index:-2;"> <!-- Attepmting to preload an animated loader image which will be used later. NOTE, different browser behave differently  -->
<div class="rawNotificationArea" id="rawNotificationArea">
    <div class="notification_message"></div>
</div>

Then add this CSS snippet inline, in the head tag to style our notification widget

<style>
    .rawNotificationArea {
        position: fixed;
        top: 2px;
        left: 0;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        display: none;
        z-index: 99999999;
    }

    .rawNotificationArea .notification_message {
        max-width: 50%;
        border: solid thin #888888;
        color: #333;
        background-color: #DCDCDC;
        text-align: center;
        padding: 5px 15px;
        border-radius: 4px;
        box-shadow: 2px 3px 20px rgba(0, 0, 0, 0.17);
        display: inline-block;
        text-align: center;
        font-size: 14px;
        letter-spacing: 1px;
    }

    .rawNotificationArea .notification_message.warning {
        background-color: #fcf8e3;
        border-color: #faf2cc;
        color: #8a6d3b;
    }

    .rawNotificationArea .notification_message.success {
        background-color: #dff0d8;
        border-color: #d0e9c6;
        color: #3c763d;
    }

    .rawNotificationArea .notification_message.info {
        background-color: #d9edf7;
        border-color: #bcdff1;
        color: #31708f;
    }

    .rawNotificationArea .notification_message.danger, .rawNotificationArea .notification_message.error {
        background-color: #f2dede;
        border-color: #ebcccc;
        color: #a94442;
    }
</style>

And the JS for widget.

// Notification Widget
var nativeNotification = {
    fadeEl: function() {
        return (document.getElementById('content_body'));
    },
    messageHolder: function() {
        return (document.getElementById('rawNotificationArea'));
    },
    contentFade: function() {
        this.fadeEl().style.opacity = "0.5";
    },
    contentUnfade: function() {
        this.fadeEl().style.opacity = "1.0";
    },
    notify: function(message, tone) {
        this.messageHolder().innerHTML = '<span class="notification_message ' + tone + '">' + message + '</span>';
        this.messageHolder().style.display = "block";
    },
    unotify: function() {
        while (this.messageHolder().firstChild) {
            this.messageHolder().removeChild(this.messageHolder().firstChild);
        }
    },
    timedUnotify: function(time) {
        setTimeout(function() {
            nativeNotification.unotify();
        }, time);
    }
};

So using this in our core function, we will finally have something like this


//Detect internet status amd motify user
var wasInternetConnectionBad = '';      //used to show restored internet notification only once
var internetCheckActions = function() {
    var xhr = new XMLHttpRequest();
    var file = "/img/nKekEaz4i6jeRtvxZRnY.jpg"; // the remote file to check for. You should replace this with yours
    var randomNum = Math.round(Math.random() * 10000); //initiating a random value to  revv the file

    xhr.open('HEAD', file + "?rand=" + randomNum, true);
    xhr.send();

    xhr.addEventListener("readystatechange", processRequest, false);

    function processRequest(e) {
        if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 304) {
                if (wasInternetConnectionBad == "1") {
                    nativeNotification.contentUnfade();
                    nativeNotification.notify("Your internet connection has been restored", 'info');
                    nativeNotification.timedUnotify(5000);
                }
                wasInternetConnectionBad = '';
            } else {
                nativeNotification.contentFade();
                nativeNotification.notify("We've detected a problem with your internet connection.\n Some functions may not work as expected<div><strong>Retrying <img src='https://cdnjs.cloudflare.com/ajax/libs/slippry/1.4.0/images/sy-loader.gif' width='20' height='20'></strong></div>", 'warning');
                wasInternetConnectionBad = '1';
            }
        }
    }
}

View live demo Here.
Complete Code on Github Here.

P.S

This was a quick fix. Im looking forward to interesting ways people can improve this or even better, more efficient solutions
Possible pending improvements' include *- Building this out into an easy to use JS plugin *- Experiment others ways of revving the file being used to used to check for connectivity. Currently the file is being revved using a querystring. See more on this here
Not sure on this but I assume method being used here (i.e pinging a file using the web client to make repeated calls to a static file) is indempotent .. Im also looking forward to interesting conversations on this

DEV Community: John Ojanti Itebu

Working with Automatic Counters in CSS

Build a lightweight Internet Detect Feature with VanillaJS