Data binding in Angular is a way to keep your views consistent with the state of your application. You can bind properties and events in your template to your TypeScript component to do things like update the view when you input data, click a button, or trigger any other event. In the below example, data binding is being used to allow the TypeScript component to keep track of the input text, and display it in the view in real time.


Communicating with APIs (application programming interface) is a key part of web development that is necessary for building full stack application. This blog will discuss how to communicate with external APIs using the built in Fetch API in JavaScript. If you are new to JavaScript, this tutorial goes over everything step by step and will help you understand both the code and the concepts behind it.

How to Construct a Fetch Request

We can begin a fetch request with the fetch function and pass it an argument of a URL. Unless otherwise specified, by default this will send what is called a ‘GET’ request to this…


In Part 1 of this entry, we discussed how to set up a boiler plate HTML file and use JavaScript to manipulate the DOM . This blog will be a little shorter and focus on some basic CSS functionality and best practices for styling an application. We will begin by making some minor adjustments to the HTML, but first let’s talk about CSS.

Cascading Style Sheets

CSS or Cascading Style Sheets describe how our HTML elements will be displayed on a web page. We use CSS ‘selectors’ to select specific HTML elements from our DOM and apply styles to them; this could be…


Note: This blog has an accompanying video available at my YouTube channel here: . If you are more of an audio and visual learner, or if you just want to see the code as it is written, check it out here. Thanks!

The main purpose of front end web development is being able to style, control, and manipulate what we see on our device screens. In other words, being able to manipulate the Document Object Model, or DOM. …


One of the most important concepts to understand in Angular is what Observables are, how they work, and how to use them in your code. The Angular website has some extensive documentation on Observables, but in this blog I plan to cover the basics of its usage and what you need to know to begin working with observables. As someone fairly new to Angular, it quickly became apparent that understanding this data flow early would make my life easier.

So what are Observables? At a high level Observables are a means to transmit information or events between the different parts…


Understanding Bubbling, Capturing, and the Target

The Event Flow of Capturing and Bubbling phases

Propagation is another one of those software engineering terms that sounds much more complicated than it actually is. It is, however, a very important concept to understand and can help you debug unexpected issues in your code. Propagation also tends to be appear as a common interview topic for developer positions, so having a solid grasp on the concept is crucial. In this blog, I will walk through what propagation is, the phases an event can have, and some uses of recognizing propagation and how it works.

Event propagation can be defined as

a mechanism that defines how events propagate…


Calc(), Grid, and Flexbox

Last week I had the opportunity to complete a test project as part of a job application. Th requirements allowed me to use any framework I wanted, as long as I used CSS and HTML to style it. This really got me to freshen up on my CSS skills, as I have spent so much time the past few months using libraries like Semantic-Ui React, Material Core, and Bootstrap. It was time to get back into the nuts and bolts of web design.

While completing the test project, a few key concepts really stood out to me as incredibly useful…


Last weekend I had the amazing opportunity to be a part of a hackathon hosted to demonstrate a new full-stack framework. Myself and three friends had from Friday night until Sunday night to build a web application with the framework, with literally no other requirements. As long as we use TriFrame and had something to present Sunday night, we could build whatever we want.

To be clear, this is not always the case with hackathons. You may be required to use a specific language or solve a specific problem. But in this blog, I will be writing about the experience…


There are a number of reasons a developer might want the ability to use speech to interact with a web application. For incorporating use for hearing impaired individuals, to use in games, or maybe to make a website more interactive for its users. Whatever the reason, a plugin called react-speech-recognition makes it easy to use voice commands in your React application.

This blog will outline how to set up this resource in a react application, and a couple of possible uses that may come in handy. …


Socket.io is a tool that enables realtime communication between the server and client. It is a JavaScript library with both a client side for the browser and a server side for Node.js. Today I will teach you how to use Socket.io and Node.js to build a simple messaging application. I will go over every step in depth, but it will be helpful if you already have a basic understanding of manipulating the DOM with vanilla JavaScript, using node as a runtime, and some very basic HTML and CSS.

The Set Up

Let’s begin by initializing our application and downloading our dependencies. First create…

Aidan McBride

I ‘m a Web Developer and a Flatiron coding bootcamp alumni. I currently work in the financial tech industry as a Front End Engineer

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