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.