Image for post
Image for post
photo by Ricardo Gomez Angel

More and more software companies and agencies with large codebases are using TypeScript in their front-ends because although it requires a learning curve for developers and some extra code, it reduces bugs and improves maintainability significantly. I started using TypeScript this year and I thought I’d share what I’ve learned so far about what differentiates TypeScript from JavaScript, as well as the major features that I use regularly in the TouchBistro frontend codebase.

TypeScript is used for static type checking in JavaScript. It is a superset of JavaScript, meaning it is built on JavaScript, but includes extra methods and features…


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.

Image for post
Image for post
Diagram of Redux Flow

Redux Flow

Store

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


Image for post
Image for post

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.


Image for post
Image for post

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. …


Image for post
Image for post

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…


Illustration of woman coding webpage on her computer
Illustration of woman coding webpage on her computer

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. …


Image for post
Image for post

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…


Image for post
Image for post

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. …


Image for post
Image for post

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. …


.block__element — modifier (B.E.M.) is a class naming system that, if used effectively, makes you code more consistent, organized and easy to read.

For BEM, it is best practice to use kebab case rather than camel case. Kebab case makes your code less confusing, especially when you include any JS later.

Blocks

Blocks are pieces of code that are going to be reused and don’t depend on other components. It is the highest level of any individual component and it’s written with no other syntax:

<div class=“post” >

Some examples of blocks on a web page would be a navigation bar…

Liz Faria

Software Developer from Toronto, Canada

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