Meme of white owl with caption Oh Really.

Margin Wants To Play Too

 
I built a mock social media profile converting a Photoshop Design to a functional HTML5 & CSS3 webpage:

 

 

 

Social Network Profile

 

 

 

You can see the live page here and check out the code on my GitHub.

While I was doing this project some of the elements and columns did not do as expected, and I realized that some elements kept moving out of place. And after a process of elimination I uncovered that this was only happening when I applied margin to certain elements.

It never really struck me why box-sizing: border-box is called border-box until I tried to use it to adjust the sizes of some elements. I had assumed that sense margin is a part of the box model that that would go right along and get adjusted to. Did that happen? Not so much…

It turned out that box-sizing: border-box limits the width and height of the content, padding and border of an element. But if for example, you’re trying to limit and split elements evenly within a container, but you have margin on them…

 

 

 

 

 

 

 

 

 

 

It seems that’s why it’s called border-box, not margin-box. The elements on your page are going to be doing their own thing.

To give an example I tried using margin in the code below with box-sizing: border-box active on all elements.

 

 

#top-area .profile-info .user-details h3 {
color: #000;
font-size: 24px;
font-weight: 300;
margin-top: 40px;

margin-bottom: 10px;

}

#top-area .profile-info .user-details a {
display: inline-block;
color: #000;
font-size: 12px;
text-transform: uppercase;
background: rgba(255, 255, 255, .7);
padding: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-left: 5px;
width: 45%;
margin-right: 5px;
text-align: center;
transition: background .4s ease-in-out;
}

 

 

 

So instead I changed it to:

 

#top-area .profile-info .user-details h3 {
color: #000;
font-size: 24px;
font-weight: 300;

padding: 10px;

margin-top: 40px;

/* margin-bottom: 10px; Not apart of box-sizing */

}

#top-area .profile-info .user-details a {
display: inline-block;
color: #000;
font-size: 12px;
text-transform: uppercase;
background: rgba(255, 255, 255, .7);
padding: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-left: 5px;
width: 45%;
margin-right: 5px;
text-align: center;
transition: background .4s ease-in-out;
}

Here I simply swapped the margin for padding. In a different situation with rows or columns I could also add a class to the last container in a row and remove its margin. Sense there would be no next item in a row, no margin is needed to be between anything, after the last row/column.
In addition, with columns I’ve found I could do something like “width: calc(50% – 10px);” on each column, similar to Bootstrap.

It should be interesting configuring more work-arounds for this. Especially for more complex issues. But it should be fun getting margin back in on the party. If you have any suggestions or work-arounds feel free to let me know. I’d love to hear about it.
 
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

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