Tech Tutorial: Learn to Program with JavaScript – Episode 03 Output to Browser and Examine

Continuing with the Chrome Developer Tools, in this video, we examine the browser’s output.


Personal Recommendation (unpaid)
Programming and software development are awesome! Being that you are learning along with me, there is an excellent chance you can make this a career. Based on my own life experience, let me suggest to you that you go get a Computer Science degree from Neumont College of Computer Science and kick your life into hyper-drive.

visit: https://www.neumont.edu/

Tech Tutorial: Learn to Program with JavaScript – Episode 02 Chrome Developer Tools

When learning JavaScript in the browser, it is important to learn about and know how to use as many helpful tools as possible. The Chrome Developer Tools are probably the most important tools you can learn to use as a JavaScript developer as they speed up development, testing, and the debugging of your code.

In this video, we walk through the most commonly used developer tools provided by the Chrome browser.

--------------------------------

Personal Recommendation (unpaid)
Programming and software development are awesome! Being that you are learning along with me, there is an excellent chance you can make this a career. Based on my own life experience, let me suggest to you that you go get a Computer Science degree from Neumont College of Computer Science and kick your life into hyper-drive.

visit: https://www.neumont.edu/

Tech Tutorial: Learn to Program with JavaScript – Episode 01 Website File Structure

JavaScript was originally created as a scripting languages for web browsers, allowing developers to make HTMl documents more dynamic and useful for their users. 

Before we jump into how JavaScript can be used in HTML documents, we first need to better understand the folder and file structure of websites and web applications. In this video, we walk through the most common folder and file structure used when creating websites from scratch.

--------------------------------

Personal Recommendation (unpaid)
Programming and software development are awesome! Being that you are learning along with me, there is an excellent chance you can make this a career. Based on my own life experience, let me suggest to you that you go get a Computer Science degree from Neumont College of Computer Science and kick your life into hyper-drive.

visit: https://www.neumont.edu/

Securing Express APIs: Using the DotEnv library to keep secrets safe (What-Why-Where-How)

This video is a live coding tutorial held during one of my full-stack web development courses. It is part of a full series on Securing Express API applications. In this video we run through the process of setting up a .env file to be read by the DotEnv NPM package, adding a .gitignore file to the project so that the .env will not be added to git repositories, and adding a config module responsible for reading the environment variables. The concepts surrounding each of the steps above are covered in great detail in order to make sure that my students understand the why behind the process rather than just doing.

Please keep in mind that this is a live coding session and therefore the quality is not necessarily of production value.

JavaScript: Design Patterns 08 – Abstract Factory Pattern

Abstract Factory Pattern

This is an enhancement of the Factory Pattern, in that it operates in basically
the same way, the factory creates objects based on the passed in arguments.
The difference lies in that additional abstraction is added to the factory.

The added abstraction

The purpose of the traditional factory pattern is to remove, from the codebase,
the redundant object creation code by encapsulating it within a reusable object
the factory.

The abstract factory pattern takes this a step further by removing from the
factory its knowledge of the objects it is creating, making the factory extremely
generic. Due to this level of abstraction, it becomes important that the objects
the factory will be building are first registered with the factory prior to the
factory being used. The registration of objects can be done:

  • Internally to the factory in the init function
  • Dynamically through factory configuration passed to the factory by the caller
  • Through a registration function on the factory to which constructor functions are
    passed by the caller

How the registration occurs is totally up to the needs of the system.

Script: Supplemental for Example Below
// Constructor functions that will be used inside of the Lizard Factory
function Lizard(args) {
this.kind = args.kind;
this.moves = args.moves;
}
Lizard.prototype.bites = function() {
console.log(`${this.kind} just bit me really hard as it ${this.moves} away.`);
};
Lizard.prototype.says = function() {
console.log(`I am a ${this.kind}.`);
};

function Chameleon(args) {
Lizard.call(this, { kind: 'Chameleon', moves: args.moves });
this.name = args.name;
this.color = 'green'
}
Chameleon.prototype = Object.create(Lizard.prototype);
Chameleon.prototype.changeColor = function(color){
this.color = color;
console.log(`${this.kind} just changed color to ${this.color}, you no see me!`);
}

function Dragon(args) {
Lizard.call(this, { kind: 'Dragon', moves: args.moves });
this.name = args.name;
}
Dragon.prototype = Object.create(Lizard.prototype);
Dragon.prototype.fireBreath = function(){
console.log(`${this.kind} breath, you are now on fire.`);
}
Script: Abstract Factory Example
// Abstract and more generic animal factory
let AnimalFactory = function(){
// Object to hold registered types with associated constructor functions
this.types = {};

// object creation function becomes more generic
this.create = function(type, args){
return new this.types[type](args);
};

// type + constructor registration method
this.register = function(type, builder){
this.types[type] = builder;
};
}

// in this example, we register the types that can be created by the factory
// externally using the register method of the factory
let factory = new AnimalFactory();
factory.register('lizard', Lizard);
factory.register('chameleon', Chameleon);
factory.register('dragon', Dragon);

let baseLizard = factory.create('lizard', { kind: 'lizard', moves: 'speedy little demon' });
console.log(baseLizard);

let myChameleon = factory.create('chameleon', { name: 'Freddy', moves: 'very very slow' });
console.log(myChameleon);
myChameleon.changeColor('red');
let myDragon = factory.create('dragon', { name: 'Freddy', moves: 'very very slow' });
console.log(myDragon);
myDragon.fireBreath();

JavaScript: Design Patterns 07 – Factory Pattern

Factory Pattern

Short Def: Used to encapsulate the creation logic for a related family of
objects.

Long Def: Used commonly to simplify object creation in systems where numerous similar objects are
dynamically created based on a few differing properties. The pattern takes redundant
object creation code that might be scattered throughout a system and wraps that
code in a single object in a reusable form that can be used across the system.

Another key attribute of this pattern is that the factory encapsulates the logic
needed to create objects of different types based on the arguments provided. This
removes the need for the caller to be concerned with specifying the object type
needed and it therefore relies on the factory to provide what it needs.

Script: Supplemental for Example Below
// Constructor functions that will be used inside of the Lizard Factory
function Lizard(kind, moves) {
this.kind = kind;
this.moves = moves;
}

Lizard.prototype.bites = function() {
console.log(`${this.kind} just bit me really hard as it ${this.moves} away.`);
};

Lizard.prototype.says = function() {
console.log(`I am a ${this.kind}.`);
};

function Chameleon(name, moves) {
Lizard.call(this, 'Chameleon', moves);
this.name = name;
this.color = 'green'
}

Chameleon.prototype = Object.create(Lizard.prototype);

Chameleon.prototype.changeColor = function(color){
this.color = color;
console.log(`${this.kind} just changed color to ${this.color}, you no see me!`);
};

function Dragon(name, moves) {
Lizard.call(this, 'Dragon', moves);
this.name = name;
}

Dragon.prototype = Object.create(Lizard.prototype);

Dragon.prototype.fireBreath = function(){
console.log(`${this.kind} breath, you are now on fire.`);
};

Script: Factory Example
// Lizard Factory: setup to select the appropriate object type to create
// based on a keyword passed in followed by an arguments array that is
// passed to the appropriate object constructor function.
let LizardFactory = function(){
this.create = function(type, args){
switch(type){
case 'chameleon':
return new Chameleon(...args);
case 'dragon':
return new Dragon(...args);
default:
return new Lizard(...args);
break;
}
};
};

let factory = new LizardFactory();

let baseLizard = factory.create(null, ['base lizard', 'speedy little demon']);
console.log(baseLizard);

let myChameleon = factory.create('chameleon', ['Freddy', 'very very slow']);
myChameleon.changeColor('red');
console.log(myChameleon);

let myDragon = factory.create('dragon', ['Freddy', 'very very slow']);
myDragon.fireBreath();
console.log(myDragon);