On this part of the journey (Part 3), I’m going to hook up the Login page to the authentication service that was created in Part 1.

1. Create the Create Account Button

Update the login-form.component.spec.ts

A new test will be added to look for the Create Account button.

The new test for login-component.spec.ts is below.

Update login-form.component.html

Now that there’s a failing test, the Create Account button can be added to the login-form.component.html template, and that simple change gets the tests to green.

Changes to login-form.component.html are in bold, below.

If you only want to stash some of your changes, but not all of them, then git stash -p is the tool for you.

Let’s take a look at my Unreliable Weather App as an example. This is the original code:

As an example, let’s say that I wanted to add another weather condition to it’s array, but I found myself adding some code to return the pollen count, and while doing that I saw an opportunity to refactor how the app retrieves a random number. But, wait! I totally derailed myself from my original goal, and I haven’t quite…

Granville T. Woods was an American inventor who has been credited with making “subways in New York City possible [1].” He was born in 1856 and held at least 60 patents before his death in 1910.

Granville T. Woods, pictured in an 1895 issue of The Cosmopolitan. Source: https://commons.wikimedia.org/wiki/File:Granville_T._Woods_c._1895.jpg

Woods was an accomplished electrician and mechanical engineer. At a young age, Woods began working at a railroad machine shop, then as a railroad worker shoveling coal into furnaces. Eventually, he would earn the promotion of Engineer[1] while working on a British steamship called the Ironsides [3]. By the late 1800’s, Woods had filed patents for notable inventions which improved the safety of railway…

Part 2 of this series will use angular material to build a login page.

Angular material comes with an abundance of pre-built components. I’ll be using them to build out a simple login page that looks similar to this:

I’m spinning up a new project using Angular, Firebase, and Angular Material. I’ll be using TDD to develop this web app, and since it’s all greenfield right now, I’m going to document the process.

Getting Started

Angular, Firebase, and Angular Material are great tools to use for rapid application development. This post will focus on getting Angular and Firebase setup.

  1. Spin up a new Angular project ng new budget-tool
  2. Set up a new project in Google Firebase.
    a. Read these instructions on how to do so.
  3. Add Cloud Firestore to the Google Firebase Project.
    a. …

Reflecting on motivation as an indicator of having fulfilling work

Photo by Remy_Loz on Unsplash

One of my goals for 2020 is finding fulfilling work and making sure that work continues to be interesting, so that I don’t get bored with it. If I’m getting bored, I need to move on. I read this quote earlier this week, thanks to Readwise, and it made me re-evaluate what it means to have fulfilling work.

Let’s fix the UI.

In Part 3, the user interface of our app did not reflect the look and feel of the components in our mock-up. We should have text fields with rounded corners, the content should have some padding around its edges, and the greeting should be centered on the page.


All of our tests are passing, but our automated tests don’t tell us how our app looks, but it does tell us that what’s displayed is what we want to be displayed, and it tells us if the app is functioning. We will be using manual testing, our…

In Part 2, we fixed the UI. For Part 3, we will be updating our app to display a greeting which includes a name that’s entered into a text box. The end result will look something like the image below. We will iterate over the UI/X and functionality throughout this series.

Wireframes adapted from Ted Deng’s mobile wireframes.

We’ll be using a few widgets to display a:

  • Textbox — To enter the name to whom the greeting will address
  • Text — To display the greeting

Update the App Bar Title

Let’s update our app bar to match the function of our app. It will now say “Greetings From Outer Space”.

To start…

I’ve had an increasing interest in all things space since the recent announcement of our return to the moon and NASA’s future endeavors to mars. At first, I thought it was a joke, but alas, it was true!

I’m this excited!

Tardigrades on the Moon and Poop

Tardigrades are amazing! They can survive in extreme environments and due to a crashed spacecraft, they’re resting on the moon as part of an effort to send a human archive through space.

Fun Fact: There are approximately 100 bags of poo on the moon that were left behind by Apollo astronauts.

Space Tourism

I’ve jokingly stated that I’d like to go into space before…

geek: an enthusiast of a particular topic or field.

I wanted to share a few things from my favorite topics of interest: Technology, Nasa, Productivity and Science Fiction.


Created using https://fakecaptcha.com

CAPTCHA stands for Completely Automated Public Turing Test to Tell Computers and Humans Apart. It’s original purpose was to distinguish humans from bots on the internet. It would later become reCAPTCHA and would be cleverly used by all of us to help machines digitize the entire New York Times archive¹. It did so by placing two pieces of text next to one another, one in which reCAPTCHA knew how to read, and…

Aysha Williams

Trying to live my best life!

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