JS Weeknotes 1.2

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

JS Weeknotes 1.1

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. 

JS Weeknotes 1.0

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.

Retoolin’

2019 is my 20th year of web development. Well, in 1999 I started updating a corporate website’s sales page via MS Frontpage Express 🤓 live on the server 👻. And at that point that was basically web development right?

Throughout my career, I have been self taught, and have had to learn continuously to keep apace with modern techniques. Non tabular standards based HTML. CSS 2 and 3. Responsive web design. jQuery. PHP (WordPress). Grunt/Gulp/Node. As well as many dead and dying frameworks and platforms.

But over the last couple of years I’ve been aware of one part of my skillset has been lacking. Namely modern Javascript frameworks in the form of React, VUE, Angular. Generally speaking I’ve not really needed much in the past as regards JS, this website has two functions, toggle the search form and set a cookie (for the cookie notice). Some websites use a lot more, but it’s often that sort of thing and I’ve been able to get away with a moderate if not very efficient knowledge of jQuery. Often my approach to writing JavaScript is akin to French philosophy, verbose, dense and often self-referential. It works, but I am always aware it could be better. And it always bugs me how long it takes sometimes to do something that seems simple in my head. I also am intrigued as to the general discussions around React CSS-in-JS, modules and overall methodology (test-driven development, node, deployment).

So for 2019 I am going to embark on learning JavaScript more thoroughly, building up to React (I know VUE and Angular have many benefits but React seems to be edging it for me). I originally decided though to learn ES6 first, as I wanted to understand better the fundamentals rather than dive straight into a framework with little understanding of what’s going on under the hood. Saying that, when I started the ES6 course (ES6 for everyone – Wes Bos) I was a little out of my depth straight away so decided to take it back a step and start with JavaScript fundamentals (JavaScript: Understanding the Weird Parts).

Anyway, I aim to update this site as to my progress, hopefully weekly, or there about. I don’t expect this to be easy but if we don’t continue to learn we don’t grow 🚀

2019 2017 2016 2014 2013 2012 2011 2010 2009 2008 2007 2006 2005 2004