Thomas Desmond

Full Stack Developer, Speaker, Educator, & Author.

Typescript: There are no integers! đŸ˜±

Typescript has a few basic types. One of which is the Number type. Number is meant to represent any and all numbers. What this means is the Number type is a floating-point value.

This usually is not a problem but is something you want to be aware of when performing math in Typescript. Coming from the C# .NET world where Integer and Float are two separate types, having only Number as a type can make you stop and think for a second.

I ran into this today doing some multiplication and division. Of course, I had forgotten Typescript Numbers were floating points. I did (505 * 42) / 100 which equals 212.1. Now in my C# mind, I assumed an all integer math equation would return me an integer. My number would be automatically truncated, I would get 212 as an integer.

Nope, this was the wrong assumption. Returned to me was 212.1. And it was causing all sorts of screwy things later on in my calculations. After finding the problem, a simple Math.floor() call saved the day.

But I want to write this post to help me remember. There is no integer type in Typescript only floating-point!

Stubbing location.reload in Angular for Jasmine Tests

Jasmine test logo

Today I ran into a new problem in my Angular application. My Jasmine unit tests were running FOREVER. Every time the tests finished they just kept running again and again. I reached 1505 out of 490 unit tests run. I was very confused! location.reload was the problem!

After finding the exact tests that were the culprit. (Thank you small commits!) It was narrowed down to a location.reload() call in my production Angular component code that was causing the issue.

So let’s jump into how to handle a location.reload() in our production code from our tests. Note: I did not want/need to test my location.reload(), I just wanted to get past it, essentially ignore it.

Step One

First off, we need to move our location.reload() call, from our production code, into its own function. We do this because it makes it MUCH easier for us to stub out a component level function in our test. So here we made a simple reloadPage function.

The reloadPage function in our production code simply calling location.reload()

Step Two

Next up, we go to our tests. I am assuming you already have your tests set up, most importantly getting an instance of your component under test. We can now reassign our reloadPage function to an empty function.

Stubbing out our reloadPage call so location.reload() is not called

In the above code, we are stubbing out or overriding the function reloadPage from our component. In this test, reloadPage no longer calls location.reload(). It will call our empty function instead, thus doing nothing. We have essentially removed the location.reload() call from this test or more appropriately stubbed reloadPage out.

Again Note: In my situation, I did not want/need to test location.reload() with this test. I simply wanted to get past it, essentially ignore it.

After making these changes, the tests ran as expected. No more 1505 out of 490 tests. I hope this helped and if it did leave a comment!

For more interesting JavaScript related posts check out const in JavaScript is weird! The non-immutable const.

Comparing null and undefined in JavaScript

When first learning JavaScript I came across a new value undefined. I was familiar with and understood null because of my .NET background but had never seen undefined. Let’s take a deeper look at null and undefined in JavaScript.

null in JavaScript

According to the JavaScript documentation: “The value null represents the intentional absence of any object value” (Docs). null represents that there is no value, and it is important to not miss the intentional aspect.

A value cannot be null unless it has specifically been assigned null. Let’s look at some code:

Example of null

Above, on line 1 we are setting our value to null. null is powerful and something commonly found in code. There is even a null object design pattern.

undefined in JavaScript

“A variable that has not been assigned a value is of type undefined” (Docs). If we declare a variable but do not assign a value to it, its value is undefined.

Example of undefined

Since we didn’t assign a value to temp on line 1 it is undefined.

“A method or statement also returns undefined if the variable that is being evaluated does not have an assigned value.” So we would see undefined if we access a property on an object that does not exist or does not contain a value.

Example of undefined object property

We don’t need to be scared of undefined it just means the variable has never been assigned or does not exist.

null vs undefined equality gotcha

There is a bit of a gotcha when thinking about equality of null vs undefined. Let’s look at examples:

null vs undefined equality example

In the first strict equal (===) case, we get false returned. This is because both null and undefined evaluate to false BUT they are different object types. null is of type object while undefined is simply of type undefined.

That is why the second case of only loosely equal (==) we get true coming back. It’s important to realize the distinction that null & undefined are different types.

Having come from a .NET background I had not seen undefined before. With a little research and playing around with code, it all came together. I encourage you to open up your console window now and mess around a little with null and undefined!

const in JavaScript is weird! The non-immutable const.

JavaScript logo

Const variables in JavaScript have a behavior that I would not expect. Coming from a .NET/C# background const, behaves quite a bit differently than what I was used to.

Looking at the developer documentation for JavaScript, the declaration of a const “creates a constant whose scope can be either global or local to the block in which it is declared” (docs). That sounds all normal; well because it is so far.

As we read further, we get to this line: “The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable—just that the variable identifier cannot be reassigned.” The VERY important piece here is that the VALUE IS NOT IMMUTABLE.

Immutable? What the heck does immutable mean? Well, if an object is immutable, for that instance the properties cannot be changed. But since const objects are NOT immutable; it means that a const object can have its properties changed within it.

That’s just how it is and we have to work with it but if you come from the C# world and you think of a const never changing, be prepared for a const to be non-immutable in JavaScript.

Valid Example

Looking at a code example, this is a valid usage of const where we change the non-immutable value of an underlying property.

Example of valid usage of const in JavaScript

Invalid Example

Now, it wouldn’t be called const if everything was not constant about our objects. In the docs, we see that “the variable identifier cannot be reassigned”. What this means is that we cannot completely reassign our const reference.

The following code is an example of what we CANNOT do with a const:

Example of a invalid reassign of const

const in JavaScript made me uneasy at first. The ability to change properties within a const was a new concept to me. However, I took the time to learn about it and understand it. I hope that after this const is a little less scary for you as well.

programming on a macbook

Fun Python Beginner Course for First Time Programmers

Python has recently been an interest of mine. I have dabbled with it in the past. I would like to really start incorporating it into my skill set more often. The main standout of why Python is great is how easy and quick it is to get started with and how much open source support there is for it.

I started my search for Python learning material on YouTube. I like watching videos so YouTube was the way to go. And I found this video on the channel Programming with Mosh:

I have been programming for 10+ years now so this video was pretty elementary but it was great for setting a good foundation of the basics. I highly recommend the course for first-timers wanting to get their feet wet with Python. It has great tutorials and small projects that really solidify the learning.

I powered through the first 3 hours watching at a faster speed and skipping a few rudimentary sections. It inspired me to learn more Python. My first steps are using Python for automation. Little tasks that I do every day on my computer will soon be automated by Python.

That’s about it I just wanted to share the great beginner python course for those that are just getting started with their programming adventures

Managing your RxJS Observable subscriptions in Angular with SubSink

Angular Logo

RxJS and Observables are HOT in Angular now. Many of us have started using them and they are not too difficult to pick up and begin using. But there is probably a small piece you are forgetting…Unsubscribing to your subscriptions.

Way too often I open up an Angular Component and inside the ngOnInit() I see a subscription that is never being unsubscribed from. Something like this:

Above we have our userService, and we are subscribing to the GetAllUsers method in our service. But we never assign our call to any variable. This is an easy way to know we are never unsubscribing from this call.

Now you may have many calls like this in your app and it works fine. You don’t notice any ill effects. But this is bad practice. If we subscribe we need to unsubscribe. We should not leave subscriptions laying around. We don’t want to leave tons of open subscriptions. So what should the above code look like?

Above, we created our sub variable to hold onto the subscription. And in the ngOnDestroy lifecycle hook, we unsubscribe. This looks pretty easy. Just a few extra lines of code. But what if we had lots of subscriptions. Having to add many new component level variables can clutter up our file quickly. And we already have a hard time remembering to unsubscribe, is their an easier way?

This is where the package SubSink developed by Ward Bell comes in. Managing subscriptions should not be difficult and SubSink makes it easy. The same code above using SubSink would look like.

There are two easy ways we can use SubSink shown above. In Method 1 we directly add our subscription. While in Method 2 we are using a setter to add the subscription to the sink. Both end up doing the same thing functionally but we can use either syntax.

In the ngOnDestroy, we have one simple this.subscriptions.unsubscribe() call that does all the unsubscribing to all of our subscriptions for us. SubSink makes it much easier to manage our subscriptions and gives us no excuse to not remember to unsubscribe from them.

SubSink makes our lives easier managing the subscriptions for us. Making our code easier and less cluttered is always a big win!

If you are an Angular developer check out my post on Must-have VS Code Extensions for Angular Developers!

Must Have VS Code Extensions for Angular & Typescript

Let’s take a look at the VS Code extension that I use regularly when developing Angular code. I like my extension to make me a more productive developer. Many of these could be helpful outside of Angular development but these are some that I like.

#1 Angular Snippets

This extension is great because it gives you access to many useful Angular, Typescript, and even HTML. I find myself using the HTTP related snippets often. Snippets are great because you no longer need to memorize complex syntax and can now focus on the development.

#2 Material Theme Icons

Material Theme Icons is great because it changes all the icons used throughout VSCode with beautiful icons. It makes it much easier to discern between the different files in your project. Not only does it have icons for the different file types but also folder types. I highly recommend this extension to make your editor look nice and clean.

#3 Bracket Pair Colorizer 2

Bracket Pair Colorizer is one of the first extensions I install when if I come across a machine that does not have it. It changes the colors of all your brackets, parenthesis, etc. It even creates a line that connects each pair to one another. Just make sure to install version 2 because that is the one being actively developed.

#4 Typescript Importer

This one is helpful when working in our Typescript components. It will auto-import definitions for us. So if we start using a new service or a new model in our component on the first use it will automatically bring in the import. Again, this helps us focus on the development work not having to jump around the file importing new things.

#5 Angular Language Service

Angular Language Service is another great Angular extension. This one is developed by the Angular team itself. It helps make VSCode smarter with its auto completes and giving hints about what to do next in your Angular code. This one is a must-have for Angular development.

#6 Code Spell Checker

This is another extension that is helpful for any development done in VS Code. It checks the spelling of your code even for your camelCase variables. It is great at finding common spelling errors that we make in our code. This can be extremely helpful in finding those nasty spelling error bugs. Definitely add this extension to your VS Code if you have not already.

Two Angular 10 projects, same package.json, one project has 281 vulnerabilities the other has 0

The other day I was messing around with Angular and upgraded a project from Angular 8 to Angular 10. I wanted to see the new hotness! Upon upgrading my fairly simple application I was hit with 281 low vulnerabilities reported when I performed an ‘npm install’.

281?!? How could this be? I had zero before. Granted they are low but come on this is way too many. I scoured the internet and had trouble finding someone else who had the same issue as me. I thought to myself it must be because Angular 10 is so new.

So, I took the debugging into my own hands. I created a brand new ‘ng new’ project. Upgraded it to Angular 10, added all the same packages, and what do you know 0 package vulnerabilities. Two Angular 10 projects, the same set of packages, wildly different set of vulnerabilities.

This created a great deal of confusion for me. So I ended up taking the fight to Reddit. I presented my problem hoping the great ether of Reddit would be able to find a solution for me.

And you know what, they did! After a few failed attempts to fix the problem someone suggested deleting my entire node_modules folder and the package-lock.json file. Simple stuff right, I’ve done this before actually on different projects. How could I have forgotten this simple trick.

After deleting the node_modules and the package-lock.json file. I tried ‘npm install’ again and behold 0, zero, goose egg, vulnerabilities. Apparently npm is not the best at cleaning up after itself or taking the very latest packages.

Deleting node_modules and package-lock.json to have them recreated by an ‘npm install’ will not solve everyones problems. But if you are seeing issues revolving around npm not pulling down the very latest versions of packages, this very well may be a good solution for you.

Speaking at Agile + DevOps West 2020 Conference

I have recently accepted a speaking position at Agile + DevOps West 2020. I will be headed to Las Vegas in June 2020 to speak on “The Life of a Mob Programmer”. I will be sharing my thoughts and experiences as a full-time Mob Programmer at Hunter Industries for the past four years.

I am excited to share our development practices with everyone. How mob programming started. The benefits that I have experienced because of it. And why I enjoy mobbing every day.

I do not need or want to convince people mob programming is what they need to do, but rather I do want to encourage people to innovate. Encourage people to try new things and break from a standard ‘Agile’ development practice.

I encourage you to come to the Agile + DevOps West 2020 conference and you will find me speaking about Mob Programming June 11th!

App Module vs Core Module vs Shared Module vs Feature Modules in Angular

Angular Icon

Angular development best practices indicate we should break our applications into modules. Modules in Angular refer to a place where we group like components, services, directives, pipes, etc for our applications.

The easiest to think about would be Feature Modules we simply break these up by feature or domain. But what about the App Module, Core Module, & Shared Module?

What should we put into each of them? What components should live in each of them? Why do we need all of them? Let’s take a look at each of the types of modules and what they are used for.

App Module

Lets first take a look at the App Module in Angular. The App Module can also be called the root module. Every app must contain at least one module and that is the App Module. We launch our applications by bootstrapping the root module.

We want to keep our App Module pretty compact. There should not be a lot of content in the App Module or App Component. We want to encapsulate our application into domain-specific modules, the Core Module, & the Shared Module, which we will look into now.

Core Module

The Core Module is where we want to put our shared singleton services. So the services that we want only one instance of while having them shared among multiple modules should live here.

The Angular injector creates a new instance of a service for each lazily loaded module that it is provided in. We want to keep our singleton services in the core module so only one instance is ever created. We do not want to spread them out in our feature modules.

Another piece of our application that should live in the Core Modules are app-level components. A good example of an app-level component would be the navigation bar. Only the app needs to know about our navigation component.

We do not want to put components used throughout the application inside of the Core Module. We have the Shared Module for that and we will look at that now.

Shared Module

The Shared Module is where we want everything to live that is shared throughout the application. Components, directives, guards, & pipes can all live in the Shared Module.

An example of something commonly found in the shared module would be a loading spinner. If you have any other components that you want to be distributed throughout your application the shared module is where you want to keep them.

It is also common to import and export Angular built modules inside your Shared Module if you need to access them in multiple locations. Because Shared is imported into many of your Feature Modules it’s common to import/export Common Module or Angular Material modules. Import/Export the modules once in Shared Module and now anyone that imports Shared will have access to them.

Feature Modules

Applications commonly have multiple Feature Modules. Depending on the size of your application you may have A LOT of Feature Modules. Breaking things up into domain-specific areas can help in the long run for development.

One of the main reasons to break your features up into different modules is lazy loading. If you want to learn more about lazy loading check out the Angular documentation on Lazy Loading Feature Modules.

Laptop Code

Now you have a better understanding of how to separate your different modules in Angular. For more on modules check out the Angular Introduction to Modules.

« Older posts

© 2020 Thomas Desmond

Theme by Anders NorenUp ↑