aboutsummaryrefslogtreecommitdiff
path: root/_posts/2020-12-04-obvious-js-injection-fallback.md
diff options
context:
space:
mode:
authorBradley Taunt <bt@btxx.org>2024-07-02 14:28:49 -0400
committerBradley Taunt <bt@btxx.org>2024-07-02 14:28:49 -0400
commitdc6db80fa72286704849ef61ee0e5ccb5841cb09 (patch)
tree9235d796229d49211c27a07b9d18585d503baa94 /_posts/2020-12-04-obvious-js-injection-fallback.md
parent088c87bcb58be576308da503d4f11a68843c5013 (diff)
Conversion to barf for testing purposes
Diffstat (limited to '_posts/2020-12-04-obvious-js-injection-fallback.md')
-rw-r--r--_posts/2020-12-04-obvious-js-injection-fallback.md51
1 files changed, 0 insertions, 51 deletions
diff --git a/_posts/2020-12-04-obvious-js-injection-fallback.md b/_posts/2020-12-04-obvious-js-injection-fallback.md
deleted file mode 100644
index 149dc4e..0000000
--- a/_posts/2020-12-04-obvious-js-injection-fallback.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-layout: post
-title: "Obvious Javascript 'Injection' Fallback"
-date: 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.