December 04, 2020
Our Hypothetical Project
Let’s pretend that we have a total tally that pulls in the number of current users using our fake SaaS app. We would do something like this:
Here we create an empty
h2 tag that will update with the current number of users via js:
<main> <h2 class="total-tally"></h2> </main>
You’ll have to use your imagination here and assume that the
totalTally variable pulls in the numbers dynamically via API:
var totalTally = "273,677" /* This would pull something dynamically in prod */ document.getElementsByClassName("total-tally").innerHTML=totalTally;
The big issue we have now occurs when a user visits this page without JS enabled. The
h2 tag will remain empty and they won’t see anything. I know this seems like a very avoidable issue, but you would be surprised how often it actually happens on the web.
The (overly simple) Solution
The easiest way to avoid these types of empty tags - add static content. I know - mind blowing, right?
<main> <h2 class="total-tally">200,000+</h2> </main>
Rule of thumb: don’t make assumption about your users. Play it safe.
As always, I'd love to read your feedback in my public inbox!