Currently browsing author

Arrow Functions: Lexical ‘this’ keyword

Maybe the biggest advantage of using arrow function is that they share the surrounding this keyword, this means unlike normal functions, arrow functions don’t get their own ‘this’ keyword. Again, Arrow functions don’t have ‘this’ keyword, they simply use the ‘this’ keyword of the function they are written in. So we say, they have a lexical ‘this’ variable. Continue reading →

Arrow Functions: basics

Suppose that we have an array, (remember that if want a value that won’t change overtime, we will declare the variable with const) const years = [1990, 1965, 1982, 1937]; ES5We will use map method that accepts a callback and write our code inside that callback. Remember in the map method we have access to current element, index and the array. The value returned will be stored in the ages5 array. The value returned will be stored in the ages5 array. var ages5 = years. Continue reading →

ES6/ ES2015 – Strings in ES6

They are big improvements on how we handle strings in ES6. First thing first, template literals. firstName = 'john'; let lastName = 'Smith'; const yearOfBirth = 1990; function calcAge(year) {  return 2018 - year; } If we want all this data together in ES5 console.log('This is ' + firstName + ' ' + lastName + ', he was born in ' + yearOfBirth + '. Today he is ' + calcAge(yearOfBirth) + ' years old.'); // This is john Smith, he was born in 1990. Today he is 28 years old. Continue reading →

How CSS works behind the scenes: an overview

What happens to the CSS code when we load up a webpage in the browser? Process that happens behind the scenes: The browser starts to load the HTML file.It takes the loaded HTML file and parses it, which means it decodes the code line by line, – From this process, the browser builds the so called Document Object Model (DOM).DOM basically describes the entire web document like a family tree, with parent, children and sibling elements. Continue reading →

JavaScript – Blocks and IFFES

Let’s look at the new way to create IFFES! Since variables declared with let and const are block-scoped which means these variables are defined inside of a block, and from the outside of the block they are not accessible.This is exactly what we want,–> Data Privacy Before ES6, we use IFFES for that, it seems that in ES6, we have a much simpler way to achieve data privacy since all we have to do is to use a block. Continue reading →

APIs (Application Programming Interface)

“An Application Programming Interface (API) is a set of commands, functions, protocols and objects that programmers can use to create software or interact with an external system.It provides developers with standard commands for performing common operations so they do not have to write the code from scratch.” Above is a very broad definition of APIs, let’s break it down to see various parts of and API and how it works in practice. Continue reading →

Let & Const

Let and Const are the two new ways to declare variables which will replace the var declaration that we’ve been using so far. //ES5 var name5 = 'Jane Smith'; var age5 = 23; name5 = 'Jane Miller'; //we can simply mutate the variable console.log(name5); //Jane Miller //ES6 //Const is for constants which means for values that we don't want to change, let is like the old var (whose value can be changed) const name6 = 'Jane Smith'; let age6 = 23; name6 = 'Jane Miller'; console. Continue reading →

The DOM & DOM Manipulation

It’s time to talk about how can we use JavaScript in the browser to make it interact with the web page. Technical term for that is: DOM Manipulation, which simply means use JavaScript to interact with the webpage. What is DOM? DOM stands for Document Object Model.It’s a strucured representation of an HTML document.The DOM is used to connect webpages to scripts like JavaScript.We can say that each HTML element (such as section, a, body, img) can be represented by a box. Continue reading →