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.
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.
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
At the beginning of the project, follow these steps to clone the repo from github to your computer.
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.
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.
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.
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:
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.
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 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…
Software Developer from Toronto, Canada