From 6b742c459266b18e2b375b35205ce8a6c02f0452 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Thu, 6 Jun 2024 08:05:12 -0400 Subject: Initial commit --- build/obvious-js-injection-fallback/index.html | 64 ++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 build/obvious-js-injection-fallback/index.html (limited to 'build/obvious-js-injection-fallback') diff --git a/build/obvious-js-injection-fallback/index.html b/build/obvious-js-injection-fallback/index.html new file mode 100644 index 0000000..79fb611 --- /dev/null +++ b/build/obvious-js-injection-fallback/index.html @@ -0,0 +1,64 @@ + + + + + + + Obvious Javascript 'Injection' Fallback + + + + + + +
+

Obvious Javascript 'Injection' Fallback

+

2020-12-04

+

Sometimes websites and web apps might require content to be "injected" via Javascript. I should mention that I am strongly against this practice - but often this kind of thing is out of one's hands. So, the least I can do is setup these "injections" to have proper fallbacks for users who disable JS. You would be surprised how many developers build empty HTML elements with the assumption they will be filled via Javascript.

+

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:

+

HTML

+

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>
+
+

Javascript

+

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")[0].innerHTML=totalTally;
+
+

The Problem

+

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?

+

HTML (updated)

+
<main>
+    <h2 class="total-tally">200,000+</h2>
+</main>
+
+

You might be reading this and saying to yourself, "Wow! Thanks Captain Obvious!" and that's a fair reaction. This is an obvious demo on purpose. If even one single reader learns to avoid leaving empty HTML tags that are solely dependent on Javascript injection, then I'd say this demo was a huge success.

+

Rule of thumb: don't make assumption about your users. Play it safe.

+ \ No newline at end of file -- cgit v1.2.3-54-g00ecf