Image for post
Image for post

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


Image for post
Image for post

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

Image for post
Image for post
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

Image for post
Image for post

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…


Image for post
Image for post

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…


Image for post
Image for post

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


Image for post
Image for post

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…


Image for post
Image for post

On the road to becoming a software engineer, the building blocks of programming are detrimental to your success. Understanding the concepts of Object Oriented Programming, or OOP, will help you gain a deeper understanding of the code you read and write. In this blog I will be reviewing the four core concepts of OOP, encapsulation, abstraction, inheritance, and polymorphism. There are many Object Oriented languages, but I will be using the Ruby language in this blog.

What Is Object Oriented Programming?

OOP is a way to organize programs around objects instead of functions allowing for reusable, scalable, and efficient code. Ruby treats every bit of…


Image for post
Image for post

In Part 1, we wrote a file that allowed us to send a data object as an email to an address of our choice using Mailgun. This time, we will be using Express to build out a backend server and an HTML form to customize our email and send it from the browser to our server. If you have experience with Node.js and Express, you will find this process much easier. However, I will give you all the tools you need to build a functioning email form and describe the process step by step.

Setting Up Our App

The easiest way to build this…


Image for post
Image for post

Working on a project for a client, I recently ran into an issue. She wanted her users to be able to fill out a form on her website and have it send her an email without any redirects. Expecting there to be some sort of quick HTML/JavaScript way to solve this, I set out to work. I quickly found out my presumptions about the solution were wrong.

After some hours of learning a bit about Mailgun and Nodemailer, and more about Node and Express, I was able to solve this issue and create a simple functioning email form. I am…

Aidan McBride

I am a Front End Web Developer and Flatiron Academy alumni looking for new opportunities in New Jersey, New York, or Pennsylvania Area.

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