What is a closure in JavaScript? Let’s first briefly discuss scope to build a foundation. There are two scopes in JavaScript. There is local scope and global scope. Local scope refers to variables declared inside a function only being available within that function. Local scope may also be referred to as function scope since they’re only accessible inside said function. Global scope refers to variables that are assigned outside a function that become available to any function, making it global. Look down below for example.

function localScope() {
 const localScopeExample = “This variable can only be accessed inside this function!”
}…

CSS modules in its simplest definition, is a different approach to applying CSS to elements in your application. Generally, one would go about assigning a class or an id to an element and then going to your CSS file and then assigning certain attributes to it. CSS modules allow you to write everything in a JavaScript file. Look down below for an example of plain HTML vs. applying CSS modules.

Plain HTML

<h1 class=” example”>Plain HTML</h1>

index.js

.example {
 color: red
}styles.css

styles.css

CSS Modules

import styles from ‘./styles.css’element.innerHTML = `<h1 class=”${styles.example}”>
  Plain HTML
 </h1>`

index.js

.example {…

What is hoisting, you ask? If you’re new to JavaScript, this may be a confusing topic for you as it has been for me initially! Luckily, I’m here to help. To give you a brief explanation at first, it refers to how variable and function declarations are “moved to the top” in the context of the scope they’re in. The reason for the quotation marks are because it’s not in a literal sense as if the code literally changes place. So if it’s not in a literal sense, what sense is it? It refers to how the JavaScript compiler reads…

What is CSS Grid? Remember my last post about CSS flexbox? Well, similar to flexbox, CSS grid is a tool used for laying out several elements in applications. As the name suggests, it provides a grid-based layout. What makes CSS grid different from flexbox, is that the CSS grid has rows and columns, making it two dimensional.

What is Flexbox? Think of it as a method for layouts for elements in your web application. So what makes it different from just assigning a specific class or id to an element and applying CSS to it? While that does work, it has its own limitations and it would result in more work than necessary and ultimately, WET (Write Every Time, or We Enjoy Typing) code.

So what can Flexbox do? Flexbox allows for one to essentially layout or align specific elements or items in a container. For example, look at the image below.

What is MVC? First things first, it stands for Model View Controller. It refers to an architecture for creating web applications. In simpler terms, it’s used to help build frameworks for applications. Please keep in note, MVC is not specific to Ruby on Rails and I’ll be speaking about it in the context of Rails. Each one has its own separate responsibilities. One way that helped me understand the MVC framework is the restaurant analogy. Keep the image below in mind while I explain each one in detail!

Who or what is this in JavaScript? It depends on how you’re using it but first let’s talk about what it is. this is a keyword in JavaScript. Think of this as a keyword to refer to the object in context. What does that mean? Think about this sentence. John is going to buy coffee because he ran out of coffee at home. Think about the use of the pronoun he. You could technically write “John is going out to buy coffee because John ran out of coffee at home.” …

You’ve probably came across the term ECMAScript 6 or ECMAScript 2015 or ES6 for short. As the name suggests, ES6 is the sixth version of the ECMA script programming language and was released in 2015. To make a long story short, it refers a new set of syntax used in JavaScript and all the new functions made available. So what makes ES6 different from the other previous versions? Let’s go over some of the new features!

Declaring Variables

In ES6, there are now two new ways to declare variables! Before ES6, you were limited to using var. Now with ES6…