Year: 2019

So this is not exactly weekly now, and isn’t likely to be, project work and life means can’t always spend ages learning. But nearly got to the end of Vanilla JavaScript Pocket Guides and it’s excellent, really like the course tutor’s approach Chris Ferdinandi. He also has an excellent newsletter with really handy tips and a superb helper library and reference section. It covers a lot of groups as my first course. But I feel I need to run through this a few times to really get the fundamentals.

Functions are methods are functions! At last!! One of the things I always got confused with JS was the inoperability of the terms, so confusing. But sort of getting that everything is an object and just going with it has helped me.

At the end of each course there is a little project to work along with, which has been fun. We built a little lazy loader, a little JSON parser, and a extendable plugin using the Constructor pattern (always with a capital letter!). Overall I am really getting the way things should be structured, and the Constructor pattern seems to be really powerful. So for example:

<script>
	//Because the plugin uses a constructor pattern, capitalise the plugin name, too, for consistency.
    var TableOfContents = (function () {

        'use strict';

    	// To improve the performance of your plugin, you should only include things that are unique to each instance in the constructor, and move everything that can be shared across instances outside of it. 
    			
        // Public Variables
    			
        // Default settings - same of every instance
    	var defaults = {
    	
    	}
    			
    	// Public Methods
    	var getID = function (elem) {

    	};


    	// Setup the constructor - uppercase first letter - 
        var Constructor = function () {
    					
    		//
    		// Variables
    		//
    		var publicAPIs = {};
    		var headings, toc, settings;

    		// All the rest of the code...

    		//
    		// Return the Public APIs
    		//

    		return publicAPIs;	

        };

        // Return the constructor
        return Constructor;

    })();

    // Run the script and initiate with the new operator
    var toc = new TableOfContents();
    toc.init();

    //instantiating a second table of contents
    var secondaryTOC = new TableOfContents(); 						
    secondaryTOC.init({ 
		target: '#secondary-toc' 
	});
</script>

And finally I am starting to get scope. Starting.

Overall it’s been great, but a lot of theory (with practical applications), and we at the end of the course we touched on state, routing and reactivity, so a nice primer for my overall aim of moving towards something like React.

I am starting to use some of this in real world projects but it’s really slow going, as I hit barriers and don’t know how to get around/over/smash through them outside of a nicely ring-fenced tutorial. But my next course is going to be 30 day coding challenge as I feel I need to really dive into actual use-cases now.

I finished my first course! JavaScript: Understanding the Weird Parts Actually think I am starting to get this 🙂

This week I learned about Function constructors (and the ‘new’ keyword), Prototypal inheritance, Method chaining, Libraries (specifically jQuery). It was pretty hardcore, I have to keep googling Prototypal inheritance and have struggled to get my head around it, also the two prototypes have totally spun me out, why use the same word!

I *think* I sort of get it, an objects prototype is like a template for the object (and another object) [so many objects], which we can then create new objects from that inherit those properties and methods.

I find the word soup a bit of a problem generally with learning (I’ve failed most coding tests I’ve done), I am starting to realise I am much more of a practical / visual learner, using the specific terms just jumbles my head.

var dogwonder = new Website( // );

We also had a few lectures on jQuery which was really interesting, looking at the unminified code and seeing how it actually works with what we learned so far was fascinating. And also understanding why jQuery is so important, it fixes and has refined so many things and has been perfected over many years so you know that there are certain functions that work across a huge range of devices and browsers. Also there is a library in jQuery! Sizzle! Which does most of the class selection stuff, who knew?! We even wrote a mini-framework call ‘greetr’. See the pen here.

g.greet().setLang('es').greet(true).log();

Now onto my next course! Vanilla JavaScript Pocket Guides

So this week I learnt mostly about closures, execution contexts, callbacks and functional programming. Returning functions from my functions, giving my functions functions, accessing function variables outside the function. All in all it was a bit of a recursive captain my captain moment. I am really starting to see the raw power of JS. 

BRRAAARWRRRMRMRMMRMRMM!!! 

Also how libraries like underscore.js can help us supercharge our code and give us functions and helper sprinkles. Although part of my journey was about going back to fundamentals before launching into react so it’s interesting to how quickly I am back to dependencies. Like yeah I get it why build out a ton of helpers which I might get wrong when I can type 

 .each([1, 2, 3], alert);

All for a payload of 6.5kb in minified code. 

But as mentioned in the course, all of underscore.js is available as annotated source code so we can understand what’s going on at a fundamental level and indeed learn along with it. 

My head is hurting this week and some of the concepts we learned were quite overwhelming. But already when looking at my own code I seem to be reading it clearer understanding the structure better rather than a string of letters and punctuation. 

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.