Models of the World video thumbnail

Models of the World

 

I’m reading the book JavaScript and JQuery by Jon Duckett, and it has given me a new perspective on programs and how they interact with data. In this vlog I expound on that.

Video transcript:

Hey! So I wanted to make a video about this book I’m looking at called JavaScript and JQuery. It’s kind of made a shift in the way I look at programming and how programs interact with computers. I had made some things, I’ve made some objects, functions, put some data in there, and the programs done some things but, the way that it explains it in this book, I think it would be beneficial to everybody. So first of all this is the book I’m looking at, JavaScript and JQuery. So firstly it says computers create models of the world using data. And I like this because it makes you think of programs as a representation of the world as opposed to, you know, a bunch of lines of code lol… And here it shows you a hotel and some cars and it goes on to say, you can think of objects as the hotel, the people, the cars. And when you look at events, this is when we interact with those objects and cause something to happen. Like it says here an event at the hotel would be a reservation being made, or a reservation being cancelled. With the car, if the driver brakes it slows down, accelerate, it speeds up. And it goes on to say with methods, these in a way are the things that we DO with the objects in the world. Like it had a method here for, there’s a method make booking for… increases the value of make bookings property. Cancel booking decreases value of bookings property. With the cars it said there’s a method change speed where it increases or decreases the value of current speed property. So I just thought it was a really interesting way to look at programs as not just lines of code that are making a computer or an application do something. But it’s like, a representation of the world, and the things or the objects IN the world and how we interact with them.

_

Love & Peace,

Danielle

Execution Context and Hoisting In JavaScript

Image of Color Guessing Game App



First Example

The code below is some of the code from the Color Guessing Challenge pictured above.

Some snippets from the code are great examples of Execution Context (The Creation and Execution Phases) and Hoisting.


var gameOver = false;
var squares = document.querySelectorAll(‘.square’);

var newRandomColors = [];

var header = document.querySelector(‘header’);
var colorDisplay = document.querySelector(‘#colorDisplay’);

colorDisplay.textContent = winningColor;

var messageDisplay = document.querySelector(‘#message’);
 
for(var i = 0; i < squares.length; i++) {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var colorString = ‘rgb(‘ + r + ‘, ‘ + g + ‘, ‘ + b + ‘)’;
squares[i].style.backgroundColor = colorString;

newRandomColors.push(colorString);

 
squares[i].addEventListener(‘click’, function(){
var clickedColor = this.style.backgroundColor;
if(clickedColor === winningColor) {
changeColors(clickedColor);
document.body.classList.add(‘winner’);
messageDisplay.textContent = ‘Correct!’;
gameOver = true;
} else if(clickedColor !== winningColor) {
this.style.backgroundColor = ‘#232323’;
messageDisplay.textContent = ‘Try Again’;
}

});
}
 

var winningColor = newRandomColors[Math.floor(Math.random() * newRandomColors.length)];

 
function changeColors(color) {
for(var i = 0; i < squares.length; i++) {
squares[i].style.backgroundColor = winningColor;
}
header.style.backgroundColor = winningColor;
}


If the winningColor variable were defined BEFORE the for loop, then no RGB winningColor would display in the header. That’s because the random colors are added to the newRandomColors array within the for loop. So if you had this line,
 
var winningColor = newRandomColors[Math.floor(Math.random() * newRandomColors.length)];
 
before the for loop, the newRandomColors.length part would be 0, and the newRandomColors array would be empty. Therefore a winning color would not exist, and the squares and header would not change color when you win, nor does the game do anything except still do what it does when you choose an incorrect square.
 
This illustrates that before the code is executed, the Execution Context during the Creation phase will create memory space for variable declarations, not their definitions, and for function statements. Then due to Hoisting, when the code is executed during the Execution Context Execution phase, the code will have access to these values from the very first line of code, even if the location (Lexical Environment) the values are physically written in the code is all the way at the bottom.


Second Example

This version of the code is a little more organized, now using a function to pick the winning color, instead of the winningColor variable:


var gameOver = false;
var squares = document.querySelectorAll(‘.square’);
var newRandomColors = [];
var header = document.querySelector(‘header’);
var colorDisplay = document.querySelector(‘#colorDisplay’);
var messageDisplay = document.querySelector(‘#message’);
 
for(var i = 0; i < squares.length; i++) {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var colorString = ‘rgb(‘ + r + ‘, ‘ + g + ‘, ‘ + b + ‘)’;
squares[i].style.backgroundColor = colorString;
newRandomColors.push(colorString);
 
squares[i].addEventListener(‘click’, function(){
var clickedColor = this.style.backgroundColor;
if(clickedColor === winningColor) {
changeColors(clickedColor);
document.body.classList.add(‘winner’);
messageDisplay.textContent = ‘Correct!’;
gameOver = true;
} else if(clickedColor !== winningColor) {
this.style.backgroundColor = ‘#232323’;
messageDisplay.textContent = ‘Try Again’;
}

});
}
 

var winningColor = pickColor();

colorDisplay.textContent = winningColor;

 
function changeColors(color) {
for(var i = 0; i < squares.length; i++) {
squares[i].style.backgroundColor = winningColor;
}
header.style.backgroundColor = winningColor;
}
 

function pickColor() {
var randomIndex = Math.floor(Math.random() * newRandomColors.length);
return newRandomColors[randomIndex];
}



The winningColor variable is still placed after the for loop, and now the execution of the pickColor function also placed after the for loop in this example, for the same reasons the winningColor variable was in the first example. And the execution of the function pickColor would not work when the code is executed, were it not for the Hoisting of its function statement. Because of this, pickColor() can be written before its function statement, and the function will still be executed.


Conclusion

So that about sums it up for these examples of Execution Context (Creation and Execution Phases) and Hoisting. And this also was an unintentional example of Lexical Environments. Let me know your thoughts. And of course if you have any suggestions feel free to share those too.
 
Love & Peace,
 
Danielle

Image of JavaScript passing by reference

Pass By Value vs. By Reference In JavaScript


So I’m building a little app in JavaScript and a piece of the code that I thought was simple, didn’t want to cooperate. I proceed to dig into WHY this was happening and came across one of those features of JavaScript that I felt could use a little explanation here.

JavaScript values are passed by value, not by reference.

This is one of those features of JavaScript you don’t see getting too much attention.

For example if you have an input and you then select it like so:

var input = document.querySelector(‘input’);

Plus:

var finalScore = 7;

var finalScoreDisplay = document.querySelector(‘#finalScoreDisplay’);

Then you do:

var userFinalScore = input.value;
var userFinalNumber = Number(userFinalScore);

And you also have:

input.addEventListener(‘change’, function(){
finalScore = userFinalNumber;
finalScoreDisplay.textContent = finalScore;
});

Weird things start happening when you start putting DOM (Document Object Model) representations of HTML elements, while accessing their properties, and then trying to put that into variables. They don’t seem to work anymore. It’s as if the value gets overwritten, AND/OR the variable’s not actually getting assigned the value. Or at least the value you intended to assign it.

This would be because the variable is getting assigned a reference to the location of the object, as a value. As opposed to the variable getting assigned the value of the object’s property itself.

Interesting.

By the way if you see something else going on here I might like to know about, let me know! Comment, email, smoke signal, it’s all fine. I’d appreciate it.

And now, back to coding.

Love & Peace,

Danielle

React.js logo

React.js! Let’s Talk About It…

I first got familiar with the concepts of React.js about 5 months ago. I loved the idea of Single Page Apps and how reactive (pun totally intended) the page elements and application were to the user, without reloading the page. And to have a better understanding of React, I set aside some time to work with the DOM (Document Object Model) more, as well as JavaScript. And on top of that I worked on Data Structures, and vanilla JavaScript in the DOM  and boom. It’s like my understanding of DOM manipulation was “clicking” way more just by working with the DOM on a more complex level with React.

Plus having worked to really understand the concepts of using React, it seemed to make DOM manipulation much simpler than before when just working with the DOM without React.js. And at the same time, with a much better understanding of the DOM, my understanding of React has increased. I React.js and especially now that Facebook has changed it AND React Native to the MIT License, I’m really looking forward to creating amazing things with React 🙂

Love & Peace,

Danielle

MongoDB vs MySQL thumbnail image

MongoDB vs. MySQL

First of all I love the flexibility you have with a non-relational database, in terms of being able to have a varying data set. Though it’s great to be able to have a schema for the data so it can still have a predictable structure. With MySQL, the data sets are tabular which is great for comparing, but with MongoDB the data sets are “collections” which are basically syntactically like JavaScript objects, actually BSON (Binary JSON), which of course is a plus! I’m already familiar with SQL commands so I was able to connect the MongoDB CRUD concepts with MySQL, though the commands are different and more like JavaScript as well. It’s fun comparing and contrasting. I’ll keep experimenting.

Love & Peace,

Danielle

Node.js logo

Post Requests with Express

I’ve been looking forward to getting to doing manual Post Routes and Requests for some time now. It’s interesting to see things like variables and arrays being passed around as objects on the server-side via Express on Node.js. And parsing the req.body into a JavaScript object to capture and show the request data. I’m also experimenting with Reddit Route Parameters by duplicating subreddit route params, defining a pattern in a route, and making a dynamic webpage with those parameters.

Love & Peace,

Danielle

ES6

ES6

I was a fan of For Loops and the way they make everything explicit in terms of what exactly it’s doing, and how you can get to exact solutions to specific problems. But I’ve been studying ES6 and that’s when forEach came along. I’ve been converted. This method on the array prototype is helping me get acquainted with abstraction. And after working with it for a bit I’m actually starting to like it. I’m also finding the map and filter methods, const/let and arrow functions very helpful as well. This is great preparation for React.js.

Love & Peace,

Danielle

Template Engines - EJS and Node.js video thumbnail

Template Engines – EJS and Node.js

(video re-post)

 

Video transcript:

Love & Peace! What’s up y’all it’s Danielle, we’re talking about tech, coding, coding tutorials, vlogging, blogging, and self-development books so make sure you Subscribe and Like. And today’s topic is… Template Engines. So I’ve been working with template engines on the backend with Node.js and JavaScript of course. And I’ve come to find I’m seeing a lot of similarities between this and PHP. I was working with PHP earlier this year, and making dynamic web apps using things like header files, and footer files and things like that. Seeing how it all comes together with minimal repeated code, which is obviously infinitely easier to maintain. So now I’m seeing similarities between that and template engines on the backend with JavaScript and Node.js. And you know, now that I think about it they’re both server-side languages. PHP being a server-side language, and JavaScript with Node.js, it has those server-side capabilities. So I’m definitely making the connections and seeing the similarities between the two. So with JavaScript basically doing those same things, plus with JavaScript it’s able to do it with basically good old, client-side, vanilla JavaScript. So that’s awesome, and that’s it for now. So again Subscribe, Like, you know get more tech, programming tutorials, vlogs, blogs, self-development books and that’s it for now. Talk to you later, love and peace.

Love & Peace,

Danielle

JSLint comic

Debugging With a Linter

So I’m getting into debugging and I’ve come across tools called linters. It’s proving to be a great way to save time, catch JavaScript errors and prevent bugs.  And the one by Douglas Crockford called JSLint, is a perfect extension of his personality. Very straight-forward, and raises the bar. You can try it here. And if you want to try a less strict alternative, give JSHint a try.

Love & Peace,

Danielle

JavaScript Functions Are Objects

(video re-posted)

 

Video transcript:

What’s up it’s Danielle, I’m hanging out in the library. I like to get a good book from time to time but today’s topic, vlog, blog, is Functions Are Objects. Functions are objects? I just found this out so I’m like wait a minute, I feel like JavaScript lied to me lol because all this time… But I should be more specific. In JavaScript, Functions are First-Class Objects. So I’m gonna have a good time, I’m gonna play around with this. And this should be the key with Functional Programming. You know, passing around functions to functions and really kind of playing with it, sort of like a set of Legos. And this should be key to unlocking JavaScript’s potential.

 

So right now I’m working with IIFE’s (Immediately-Invoked Function Expressions), the ‘this’ keyword, Closures, Hoisting, call(), apply(), bind(), of course Object-Oriented Programming, the ‘new’ keyword and Prototypal Inheritance. And I’m also gaining an understanding of Function Constructors. And while I’m doing that, I’m really kind of studying all these things in the Underscore.js library. It’s actually pretty good for studying Functional Programming. They comment everything, and everything’s really well explained. So if you haven’t seen it check it out. And that’s today’s video, that’s it for today. Again Subscribe, Like, you get plenty of tech, vlogs, self-development, reviewing and reading books. Check it out, stay tune, talk to you later.

P.S. It’s interesting the clever ways a lot of these concepts are used in the Underscore.js library.

 

Love & Peace,

Danielle