Definition

Create Variables

We can make custom properties with values that can be used in other declarations. These property names are prefixed with –, and used in the var( ) function. 

1. Define a root rule
2. Put your variables inside of the root

(At the top of your CSS file)
:root {
	--first-color: hsl(175, 49%, 42%);
}

Different Types of Variables

1. A regular variable has two dashes 
   • --second-color: #ffff8c;
2. A custom variable has @ sign
   • @custom-media --min (width <= 600px);

Using Variables

// Using regular variables
#header {
	background-color: var(--first-color);
	color: var(--second-color);
}
// Using custom variables
@media (--min){
	display: block;
}

Create and Use a Custom Selector

...
	@custom-selector :--headings h1, h2, h3, h4, h5, h6;
}
:--headings {
	margin: 0 0 1rem;
	color: var(--first-color);
}

Create a more complicated variable

--my-button: {
	display: inline-block;
	padding: 6px;
	background-color: var(--first-color);
	...
}
.nav .my-button {
	@apply --my-button;
	@media (--min) {
		display: block;
	}
}

Note

This is one of the most useful features in CSS, but still new and experimental technology. Browser compatibility is pretty good, except for IE. You need the post CSS plug-in to make CSS variables work in IE. 

Reference

Do you know how to use CSS variables? [LINK]
Custom properties: CSS variables [LINK]

Definition

calc( ) is a feature that lets you perform mathematical calculations when you specifying CSS property values.

Example

width: calc(100% - 50px);

Features

1. Mix and match the units: you can subtract a pixel size from the percentage size 
2. Nest calc( ): you can nest calculations inside other calculations, and use it with CSS variables
   
3. Good browser compatibility: even down to IE 9

Example of nested calc()

.foo {
	--widthA: 100px;
	--widthB: calc(var(--widthA) / 2);
	--widthC: calc(var(--widthB) / 2);
	width: var(--widthC);

Note

The + and – operators must be surrounded by whitespace.
* and / operators do not require whitespace, but adding it for consistency is recommended.

Reference

How do you use calc() in CSS? [LINK]

calc() MDN web docs [LINK]

]]>

Definition The calc() CSS function lets you perform calculations in your CSS property values. It can be used anywhere <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. ]]>

Definition Promises are JavaScript objects that describe what is supposed to happen when an asynchronous operation takes place. They provide certain guarantees and structure to help callbacks and make a time-based operation easy to use. If you want to know about callback function, check out my previous post. [LINK] There are some problems with callbacks because results of callbacks rely on a condition of the network. Therefore, callbacks often suffer from clarity and a lack of guarantees. So, we need promises to guarantee an execution. Here are important features for promises, which are resolve( ), reject( ), and then statement. With resolve( ), we specify what will happen when all our requests will work. And reject( ), we specify what we want to execute when our request doesn’t work. then statement is a special method that will execute when the promise is work correctly. Let’s take a look at the following example.

var isHeeyaMotivated = true;
// Promise
var isHeeyaAchievetheGoal = new Promise {
function (resolve, reject) {
    if (isHeeyaMotivated) {
        var goal = {
            task: 'Graphicdesign',
            topic: 'mainscreen'
    };
    resolve(goal);
    } else {
        var reason = new Error('heeya is not happy.');
    reject(reason);
    }
  }
);
// call the promise
var askHeeya = function() {
    isHeeyaAhievetheGoal.
        .then(function (fulfilled) {
            console.log(fulfilled);
        })
        .catch(function (error) {
            console.log(error.message);
        });
}
askHeeya();

So, this is how promises work. When we want to do something after something happens, we create a promise. Once the promise resolves, it is going to do whatever we specify in the then statement. We can also make a chain of promises.

var reportHunya = function(goal) {
    return new Promise(
        function (resolve, reject) {
            var message = 'Hi Hunya, I have achieved ' + goal.task + ' for' + goal.topic
            resolve(message);
        }
   );
};

If something happens to the promise and it does not execute, the chain promise will not be executed. It is always better to be specific to what happens when the promise is fulfilled, and what happens if it is rejected. Reference What is the relationship between promises and callbacks? Mastering Web developer Interview Code – Ray Villalobos, Lynda.com [LINK] ]]>

Definition Recursion is a programming concept, which happens when a function calls itself. It is used in a mathematical problem solving and a logical solution.

function sayHeeya() {
      console.log("Hi heeya");
      sayHeeya();
}
sayHeeya();

This function is calling itself, and it is a dangerous as it is calling itself indefinitely. Therefore, we need to define the exiting condition, which we call a ‘base case’. Every recursive function needs to have it to exit a function properly when a condition is met.

function sayHeeya(count) {
if (count == 0){
   return;
}
console.log("Hi heeya");
   sayHeeya(count - 1);
}
sayHeeya(10);

Each one of the functions copies will have a new set of internal variables called a stack. Now without a base case JavaScript will continue to ask for new variables until it either runs out of memory or the browser runs into an internal limit. Now when the computer runs out of memory that’s called a stack overflow. (Villalobos)

Recursion is very useful when the current call relies on the result of the previous call.

function twoToThePowerOf(number) {
	if (number == 0) {
		return 1;
	} else {
		return 2 * twoToThePowerOf(number - 1);
	}
}
console.log(twoToThePowerOf(2));

2 ^ 5 = 2 * (2 ^ 4)
      =  2 * 2 * (2 ^ 3)
      =  2 * 2 * 2 * (2 ^ 2)
      =  2 * 2 * 2 * 2 * (2 ^ 1)
      =  2 * 2 * 2 * 2 * 2 * (2 ^ 0)
      =  2 * 2 * 2 * 2 * 2 * 1

Now, let’s take a look at the typical interview question for recursion. Calculating Fibonacci number. [What is the Fibonacci number?]

function fibonacci(number) {
	if (number == 0 || number == 1) {
		return 1;
	} else {
		return fibonacci(number - 1) + fibonacci(number - 2);
	}
}
console.log(fibonacci(9));
// 55

Reference When would you use recursion? Mastering Web developer Interview Code – Ray Villalobos, Lynda.com LINK]]>