As per previous post 👇I am starting with JavaScript: Understanding the Weird Parts it’s really good so far, it goes right back to the beginning with fundamental concepts behind Javascript. Which I never really engaged with until jQuery and only really then just chained loads of stuff together until I got the result I wanted (usually peppered with various jQuery(document).ready(function($) {}); and randomly adding closing brackets to get code working). So it’s been perfect for me to really understand what’s happening on the hood. I am about 40% through now and so far we’ve been looking at things like Execution Context, Functions, Variables, Objects, Object Literals and Arrays. And as much as I recognised the code structures I don’t think I ever really learnt what they were from the ground up, more from the top down (copy/pasting code examples) so have never felt comfortable writing this from the ground up. It’s also confusing (JavaScript not the course), everything is everything else — operators are functions are objects are functions are code. 1 + ‘hello’ is fine, and true == “true” is false and if something is !undefined it’s true. Gah.
So first takeaway is really that, my usual practice would be to search Stack Overflow find a solution and tweak it to my own issue. Which is fine, and I will probably carry on doing that till the heat death of the universe. BUT….but, with that approach it’s always that, adapting something to another need that might not always be appropriate or maybe even overkill.
Which leads onto my second takeaway, my over reliance on frameworks. jQuery is amazing and made writing javascript for the fractured web (Netscape anyone?) possible and without it I doubt Javascript’s dominance would be anywhere near where it is today…but it’s become a bit of a oversized clutch for me. Include it on every project even if said project needs only one or two functions, one of the most common one’s I include is the below:
jQuery('a[rel*=external]').click( function() {
window.open(this.href);
return false;
});Like why do I even need jQuery, it’s vanilla JS! But I wouldn’t question it, jQuery inclusion was a given. Even only scratching the surface of this course has lead me to question what I actually need for each project. And as a timely reminder I saw this a few days ago.
So on my most recent project I didn’t include jQuery. I only needed two functions, setCookie() and toggleSearch(). That’s it 2KB. Versus 87KB (v.3.3.1). For basically the same thing. Now saying that those two functions did take me some time, even as simple as they were (mostly down to trial and error, also managed to accidentally enqueue the JS file at the top of the page). Anyway here is what is probably my first (intentional) vanilla JS function sans framework.
function toggleSearch() {
var searchbtn = document.getElementById('search-button');
var searchForm = document.getElementById('search-form');
searchbtn.addEventListener('click', function (event) {
searchForm.classList.toggle('active');
}, false);
}
toggleSearch();It’s no work of art 👨🎨… but it’s quite a philosophical shift for me. Onward.