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 of an application. Observables help you pass data asynchronously and are great for calling on an API or service when getting a response could take an unknown amount of time. …


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 or travel through the DOM tree to arrive at its target and what happens to it afterward.¹ …


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 if not necessary to web design. Some of these concepts I knew, and some I had to learn or become more familiar with. In this blog I am going to discuss and give examples of some of the mosts useful CSS tools that helped me to build out my project. …


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 of myself and my teammates and mentioning a few things we did right and a few things we did wrong. …


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 a package.json …


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 data as an object, even strings, numbers, and classes, allowing us to manipulate data and call methods on classes. We will begin by diving into the concepts of OOP, starting with encapsulation, to give a much clearer understanding on what OOP is and how we use it. …


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 application is to continue to work in the folder we had built from the previous blog. If you have not read it, I recommend starting here.


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 going to walk through from the beginning of setting up a Mailgun account, to building the Node application, to submitting your email. You may follow this blog better if you have experience with Node.js and/or Express, but I will break everything down step by step. …


Image for post
Image for post

Python is a high-level back end programming language designed to be easy to read and use. According to Statista, 44.1% of the world's programmers in 2020 use Python, making it the fourth most common programming language. Needless to say, learning even just the basics of python could be a useful addition to any software engineer's repertoire.

In this blog, I will walk you through creating your first python web application using the Flask library. This run-through is based on Mac OS and may vary slightly if you are using a different operating system. We will also be using Visual Studio Code, and a few plugins to make things easier. …

About

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