In this article, I am to provide a succinct explanation of what Redux is and how to connect Redux to a React app using examples.

Redux is a state management library. This means it takes state management out of a React application completely and keeps it in one separate place called the store. The store acts as a single source of state; it eliminates the need to pass props from parent to children components and keeps state mutations of data predictable.

Redux Flow

Store

The data and UI state of a react app is contained in a single read-only JavaScript (JS) object called…

After building an application from scratch with four team members, I learned a lot about Gitflow and want to share a technical how-to based on how we managed our code as a team with Git.

Some Terminology

Repo: repository — contains all of your project’s files and stores each file’s revision history

Remote: on the git server

Local: on your computer

Cloning the Remote Repository to Your Computer

At the beginning of the project, follow these steps to clone the repo from github to your computer.

1. On the right hand-side of the main repo page on Github, click the clone button and copy the link.

Websites are hosted by web browsers and each browser has a JavaScript Runtime Environment. In the environment, browser objects with properties and methods, such as AJAX, and the DOM tree, and other APIs, such as setTimeout, that are not actually part of JavaScript are made available. Each browser has a different JavaScript engine that parses code. For instance Chrome uses V8 and Firefox uses SpiderMonkey.

JavaScript Engine: Compilation Phase

Before executing code, the JS engine compiles or analyzes the code. …

Since I wrote this article on ES6 and Functional Programming a year ago, I was accepted into the Bridge development program and learned some more ES6 facts and features I want to share! In the last article I covered template literals, let and const, and arrow functions, so give it a read if you want to learn more about those features. In the following article, I will talk more about what ES6 is, and explain other ES6 features. specifically, destructuring, spread, rest and classes, using my dog Ranger to illustrate examples.

What is ES6?

ES6 is short for ECMAScript 6. ECMAScript is the…

The following terms are some of the most common acronyms and jargon spoken everyday by web developers. I’ve written this article with the goal of explaining these complicated web development concepts in a simple way.

HTML

Hypertext markup language is standardized code that defines the structure of a website. It is a text-based system that organizes content and defines how the content flow and layout will be presented through semantic elements like ordered lists, links, headers and footers. HTML elements are indicated by tags, like <a></a>. Tags also can embed other languages like JavaScript and link to CSS scripts. …

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability — Henry & McGee, W3C.

As a front-end developer, I am committed to learning about web accessibility because I want to ensure my web applications are usable for as many people as possible, regardless of ability, context, or situation.

Aside from caring about other people (and my future self), and increasing audience reach, it’s straight-up lawful…

Last weekend, I went Bridge.io’s Destiny’s Child themed workshop on Functional Programming and new features in ES6. Here’s what we covered:

Function Anatomy

A return statement should be in almost all our functions — it is the result of a function. If we don’t include “return” in the body of our function, the console is going to throw us an “undefined”.

An argument is the specific value we pass into a function, and a parameter is a placeholder. We only define a parameter once, but we can call a function with many different arguments. …

Sass stylesheets can make your code more DRY because they eliminate the need to rewrite core styles across multiple selectors that share those properties. With effective use of variables, partials, extend and mixins, SASS can make your file sizes smaller, and decrease risks of error in code.

1. variables

To store any CSS value that you want to reuse throughout your code, put an $ symbol in front of a variable name. Variables are awesome because they ensure consistency of styles like color and typography across projects. …