Credit: redux.js.org

In this article, I’m going to cover my understanding of the basic concepts of Redux.

What is Redux?

Redux is a JavaScript library used for state management for your application. It’s a very common library used in React and you’ve probably heard of it before. Why is state management important? Well, state can be used for conditional rendering or just rendering in general. For example, if you wanted to make an application that counted the number of times a button was clicked, you could store the number of times it was clicked and have that number rendered.

The reason why…


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…


What does it mean to be responsive? Let’s first, think about the times you’ve visited a website on different devices. For example, a desktop monitor, laptop or a phone. In all those cases, you might’ve noticed that the formatting was different for each device. In regards to all things web design/development, it’s about creating a website that formats accordingly to the device’s screen size. Because people can visit your app or website from so many devices, we have to take into that account and make sure our content is responsive to said devices. Look at the image below for example.

Jonathan Wong

Flatiron School Alumni & Software Engineer https://jonathanwong110.github.io/JonathanWongPortfolio/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store