I apologize for the link bait. I feel bad doing it. But at least you know I'm not a slimy SEO person and there is something useful in this article. ;)
Yesterday I blogged a simple little POC (Proof of Concept) that demonstrated adding a class to a random list element. As I said in the post yesterday, this was rather trivial code, but I wanted to share it because of the use of LocalStorage.
About an hour or so after I posted it, something began to bug me. I opened up the template and looked at the Network requests in Chrome dev tools.
Just in case it isn't obvious, let me break it down for you. My HTML document was a bit over 1.5K. The jQuery library, compressed, was 33K. To be fair, my HTML was limited to what was required for the demo, but even if I increased the size of my document ten fold, it would still be less than the size of the jQuery library.
Don't get me wrong. I love jQuery. I love what it has done for my development, my career, and my skin care. (Um, ok.) That being said, you don't need jQuery as much as you think. Consider what my demo did:
- Run a function when the DOM was loaded.
- Find some DOM items via CSS selectors.
- Remove a class from one thing, add it to another.
That's it. Surely I could do that without an entire library, right? First, I switched to listening for the DOMContentLoaded event.
document.addEventListener("DOMContentLoaded", init, false);
function init() {
For finding DOM items, I made use of querySelector and querySelectorAll.
//get all the LIs
var menuItems = document.querySelectorAll("ul#menu li");
For adding and removing classes, I made use of the classList property.
document.querySelector("ul#menu li:nth-child("+(selected+1)+")").classList.add("selected");
After these changes, the size of my application was pretty much next to nothing.
Here is the complete template. Any questions?
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
li.selected { background-color: red; }
</style>
</head>
<body>
<ul id="menu">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li class="selected">Item four</li>
<li>Item five</li>
</ul>
<script>
document.addEventListener("DOMContentLoaded", init, false);
function init() {
//remove the selected class from the li that has it
document.querySelector("li.selected").classList.remove("selected");
//get all the LIs
var menuItems = document.querySelectorAll("ul#menu li");
//How many do we have?
var numItems = menuItems.length;
//Did we have a previous one?
if(window.sessionStorage && window.sessionStorage.getItem("selected")) {
previous = Number(window.sessionStorage.getItem("selected"));
} else {
previous = -1;
}
//Pick one by random
var selected = Math.floor(Math.random()*numItems);
while(selected === previous && numItems > 1) {
selected = Math.floor(Math.random()*numItems);
}
if(window.sessionStorage) window.sessionStorage.setItem("selected", selected);
//And set it
document.querySelector("ul#menu li:nth-child("+(selected+1)+")").classList.add("selected");
}
</script>
</body>
</html>
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}