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 🚀

WordPress WorkFlow

I’ve been using WordPress for a very long time, this site was built in 2004 and I think it was on version 1.2, and was using WordPress from around mid-2003 on other sites before that.

wordpress-1-2

So a long time.

Much has changed, but WordPress has proved remarkably robust, I just spun up a theme I built around 2005/2006. See the code here (please forgive some of the code, this was 11 years ago. ) and it still works! The Loop is still the same crazy Loop, that I am never sure I fully got, anyway the point being if I had installed a theme from 2005 it would still work today.

2016-11-24-at-12-42

So pretty amazing and points to why WordPress was a good solution 10 years ago and is still a good solution now, we don’t talk about longevity much in web development, but I like to know something I build now has a shot of existing 2, 5, 10, or even 20 years from now.

Sure we now have custom post types, custom taxonomies, rest API and some amazing plugins that turn WordPress into a fully fledged CMS, but at it’s core it’s the same easy to use, easy to develop on and easy to recommend system I first installed all those years ago.

Now my own workflow has changed a bit, whereas back in the day all I needed was a copy of WordPress, Dreamweaver! (Code View & FTP) and maybe Photoshop.

These days it’s a bit more involved, this is what I tend to start most new projects with, on average I reckon the setup is about half a day, give or take:

Code

WordPress plugins

Applications

Anyway, thanks WordPress

1269602956_dr-mccoy-and-captain-kirk-approve

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