How to Implement States and Lifecycle Methods in Your Web Applications with React

Class Based Components in React

Basic understanding of event listeners in React

Adding Event Listeners to React Components

Each component in React has a lifecycle that goes through three main phases Mounting, Updating, and Unmounting.

LifeCycle Methods in React

React has two types of components: Class-based and Functional-based. This post will show you how to implement Functional-Based Components in React.

Functional-Based Components in React

Hooks are a way to write reusable code, instead of more classic techniques like inheritance. Come take a look at the most commonly used hooks in React.

Getting Started with Hooks in React

Covers topics like hoisting, functions, and scope.

Functions in JavaScript

How to add, edit and updates new items to a database in Ruby on Rails.

Add, edit, and update articles in the database

Showing article items from a table generated in Ruby on Rails using a route and a view. We also look at how to show a listing page of the various articles in our database.

Showing Articles from a table in Rails

Covers the basics of Rails, adding new routes, creating databases and their CRUD operations.

Introduction to Rails

Basic understanding of creating modules, requiring modules, and using bcrypt to hash passwords. Also includes a mixin to add a `.create_hash_digest` method to classes.

Getting to know classes, modules and mixins

Introduction to creating methods and some common array/hash methods.

Methods, Arrays and Hashes in Ruby

First Ruby Projects

Introduction to how strings work in Ruby. Includes examples of string interpolation, concatenation, methods and getting user input.

Introduction to strings, numbers and operators in Ruby

Outlines the steps to deploy a module written in TypeScript to the NPM registry.

How to deploy a TypeScript NPM Module

Large list of popular Katas to practice different programming patterns.

Kata - Practice Problems

We'll learn about HTML and CSS and how the Box Model works.

Working with the Browser

Introduction to the basics of HTML, specifically why it exists and what it does. Will cover common HTML tags and attributes.

Intro to HTML

Objects - Basics of JavaScript

Arrays - Basics of JavaScript

Palindromes are words that are the same backwards and forwards. Here are a few examples that determine if a given string is a palindrome.

Palindromes - JavaScript Algorithms

Creating a Queue from a Stack

Binary Heaps & Priority Queues in JavaScript

Heaps and Priority Queues

Returning a chunk of data with a given size

Chunked Arrays - JavaScript Algorithms

In a circular or linked list which loops, we do not have a tail. The 'last' node in the list will point to a node in the list. This algorithm will detect if this has occurred.

Detecting Linked List Loops

Console log a step shape with N levels using the "#" character.

Printing Steps - JavaScript Algorithms

FizzBuzz is a classic programming problem. The goal is to print the numbers from 1 to n. For multiples of three print "Fizz" instead of the number and for the multiples of five print "Buzz". For numbers which are multiples of both three and five print "FizzBuzz".

FizzBuzz - JavaScript Algorithms

Anagrams are words that contain the same letters, but in a different order.

Anagrams - JavaScript Algorithms

Capitalize First Letter - JavaScript Algorithms

Printing a series of "#" characters in the shape of a pyramid.

Printing a Pyramid Pattern - JavaScript Algorithms

Singly Linked List is a popular interview topic. This is a simple implementation of a singly linked list will show you the ropes of how to implement a singly linked list.

Singly Linked List

All about stacks and queues. Covers uses, methods and implementations.

Stacks and Queues

Generators

How can we visit every node one time? There are many ways to print out the nodes of a tree.

Traversing Binary Search Trees

Terminology, implementation and common methods of trees and binary search trees.

Trees and Binary Search Trees

Guide on flashing QMK keyboards. This is a guide for macOS users.

QMK and VIA RGB Guide macOS

Weave receives two queues as arguments and combines the contents of each into new, third queue.

Weaving Two Queues Together - JavaScript Data Structures

Generating and printing the 'n-th' entry in the Fibonacci sequence.

Fibonacci Sequence - JavaScript Algorithms

Matrix Spiral Algorithm - JavaScript Algorithms

Queues - JavaScript Data Structures

How to add ESBuild into a react app. Creating a custom plugin to handle bundling modules with Webpack.

Understanding ESBuild and Integrating Plugins

Using `esbuild-wasm` NPM module to compile code within a browser.

Understanding ESBuild

Understanding modules and webpack. Cover the basic difference between common JS and ES6 modules.

Modules and Webpack Integration

Using Unpkg for Dynamic Dependencies

Overview of Redux and how to use it. Includes basics of actions, reducers, and store.

Getting Started with Redux

Access DOM elements directly by using the ref system.

Accessing the DOM with Refs

Simple guide on how props are used to display and pass information to a component.

Passing Props to a Component

Understanding what is state, passing state as props, and destructuring state.

State in React

"this" has always been confusing for many JavaScript developers, but this post will hopefully shed some light on it. 

Understanding 'this' in JavaScript

General overview of classes in JavaScript.

Classes in JavaScript

Instead of "prop drilling" to pass around data, we can use react context API to pass around data

React Context API

So many people have asked me about JSX vs HTML. I will try to answer them here.

JSX vs HTML

Outlines the commands and steps to get a basic TypeScript app up and running.

Basic Template for TypeScript App

Making code reusable in TypeScript by using generics.

Generics In TypeScript

How to create code reuse in TypeScript by using interfaces and classes.

Interfaces in TypeScript

Understanding the class keyword and how it works in TypeScript.

Functionality with Classes

Learn what tuples are in TS and how to use them.

Tuples

How does TypeScript infer types? Here we will look at how both annotations and inferences are used in TypeScript. We look at how to apply them to functions and objects.

TypeScript Type Annotations and Inferences of Functions and Objects

The blog template supports posts in nested sub-folders. This can be used to group posts of similar content e.g. a multi-part course. This post is itself an example of a nested route!

All Posts

Class Based Components in React

Adding Event Listeners to React Components

LifeCycle Methods in React

Functional-Based Components in React

Getting Started with Hooks in React