Thomas Desmond

Full Stack Developer, Speaker, Educator, & Author.

Experience Backpacking the Trans Catalina Trail Avalon to Two Harbors

It’s another camping post! In September I got to hike along the Trans Catalina Trail with some great friends. Here is a recount of our wondrous adventure.

View of Avalon city from above on Catalina Island. Taken by Elias Shankaji @eliasshankaji

Day One (Avalon to Hermit Gulch)

For our first day, we needed to get to Catalina Island before we could take on the Trans Catalina Trail (TCT). There are a couple of boat options, but we left the port at Dana Point because it was the closest for us coming from San Diego. A little over an hour boat ride on the Catalina Express and we were disembarking in Avalon, Catalina’s biggest city. The latest census puts just over 3,700 people living in Avalon, which is actually more than I expected.

Our first stop after getting off the boat was the Catalina Conservancy building. They have the best map at $4 for anyone taking on the Trans Catalina Trail (TCT). If you have a nice printer, you may print it out from here: Catalina Island TCT Map.

It’s fairly common for backpackers to head for Black Jack Campground their first day. But some of us had never experienced Avalon, so we settled on staying in Hermit Gulch Campground our first night. Hermit Gulch is the closest campground to Avalon at 1.5-miles out from downtown. So we headed to Hermit Gulch to drop our bags so we could head back into town and explore Avalon.

Once back in town, we headed to Lovers Cove. It was recommended to us as a magnificent spot to snorkel. And the recommendation was right! We saw so many fish. So many garibaldi fish!

After a little more Avalon exploring, it was time to head back to camp. We picked up some food and beer and went back to Hermit Gulch. Our first day out camping, exploring the ‘wilderness’ was a success. We were ready to take on the long day to Black Jack Campground tomorrow.

Day Two (Hermit Gulch to Black Jack Campground)

Gregory backpack packed up for first day of hiking on the Trans Catalina Trail
Packing up for our first hiking day on the trail

We woke up slowly and packed up for our first proper day on the trail. My bag felt heavier than ever (5 days of food will do that to ya).

The hike out of Hermit Gulch starts with a steep 1.7-mile uphill trek. Luckily, after a hearty breakfast and a good night’s rest, this wasn’t too difficult. After that initial steep uphill, we had some fairly easy rolling hills for the next few miles.

We were treated with beautiful views of both the east and west side of Catalina. Slowly we were getting further and further from Avalon and deeper into the Catalina hills.

After a pleasant lunch at a park seeming in the middle of nowhere, we headed out to what would be a fairly hard patch of the trail. Two rather significant declines then immediately inclines. These kicked our butts! The saving grace was the cooling ocean breeze, but damn the inclines were steep. Steeper than this morning.

Those inclines tired us out, but we made it to Black Jack Campground! A nice open campground nestled up in the hills of Catalina.

After some well-deserved laziness, we set up camp and explored around Black Jack Campground. Soon came sunset. James and I hiked up the hill near the campground to get a good view. The sunset was a major highlight of the trip! A must do if you find yourself at Black Jack Campground.

Beautiful sunset from Black Jack Campground on Catalina Island
One of the best sunsets from Black Jack Campground

We enjoyed our time at camp, and shortly after sundown I headed into my tent. We had another long day of hiking tomorrow but looking forward to being back on the trail.

Day Three (Black Jack to Little Harbor Campground)

Breakfast burrito and beer from Catalina Airport in the Sky
Catalina Airport in the Sky breakfast burrito

On day three, we were headed to Little Harbor Campground. The hike ahead of us was a little down and up to the airport, then a solid 5 miles of downhill to get back to sea level and Little Harbor.

The airport is worth stopping at. We skipped breakfast at the camp and got ourselves some amazing breakfast burritos at the airport. The airport has a small restaurant and a general store there. After our scrumptious burrito, we headed down the hill.

One highlight of today was the enormous pack of bison we ran into. While hiking the trail we came upon at least 40 Bison grazing and lounging. We had to blaze our own trail to get around them. It can be very intimidating having 40 two thousand pound animals staring you down as you walk by.

Herd of bison on Catalina Island near the airport in the sky.
A big herd of Bison!

Today brought on some of the best views so far on the Trans Catalina Trail. We got amazing full panoramic views of the western side. Our Little Harbor destination was in sight, but still a long way away. We continued our trek down the hills.

Western view from the Trans Catalina Trail looking towards Little Harbor campground
Western view toward Little Harbor Campground

We made it to Little Harbor, and this is one of my most favorite campsites ever. I will definitely come back here. After dumping our pack at camp, we went straight to the water. We ripped off our dirty, dusty boots and put our tired feet in the surf. The cold water rushing over our feet felt incredible! We stood there quietly, soaking up the sun and letting the icy waves cool our tired feet.

James had the great idea to cook our dinner on the bluff that evening. We enjoyed the best dinner view in all of southern California. And we were then treated to one of the best sunsets as well.

Beautiful California sunset from the bluff at Little Harbor Campground
Beautiful sunset from the bluff at Little Harbor Campground
Enjoying the sunset from Little Harbor Campground
James enjoying the sunset from Little Harbor Campground

Little Harbor was an amazing location. It a perfect place to get away, have some seclusion, and enjoy the Pacific Ocean!

Day Four (Little Harbor to Two Harbors Campground)

The hike from Little Harbor to Two Harbors Campground was technically the shortest distance day of our hiking trip. However, after two long days of hiking we were pretty beat up, our knees especially. We were met with a strong incline in the morning starting out followed with a steep decline down into Two Harbors.

Again, I cannot emphasize too much the incredible views offered by the Trans Catalina Trail. We were treated with long coastline views along the Catalina West coast.

Long coastline view of the west side of Catalina Island, hiking towards Two Harbors.

With our knees hurting and legs feeling like jello, we descended into Two Harbors. Two Harbors is a tiny ‘town’ on the North-East side of Catalina Island. It has one restaurant and one well-stocked market. Immediately upon arriving in Two Harbors, we made a beer run to the market so we could relax for a moment before setting up camp.

View from Campsite 28 at Two Harbors Catalina Island campground
View from Campsite 28 at Two Harbors Catalina Island

Camp took a little longer to set up, couldn’t have been because of the drinks. Once camp was set up, all we wanted to do was sit by the ocean. Again we wanted to rest our weary feet in the cool ocean water.

One other glorious thing about being in a more established ‘town’ meant that we could get firewood. Tonight was our first night where we could relax around a fire. Our trip was not over yet, but we shared stories about what we had enjoyed the most so far while on Catalina Island.

Day 5 (Eating and Relaxing at Two Harbors)

We had planned to spend two nights in Two Harbors. Mostly because we could not get a reservation at Pearson’s Landing. Our thought was that we would go for a day hike today. That did not happen…we were lazy and it was GREAT!

None of us strayed too far from Two Harbors. We went to the market for food a couple of times. The restaurant for a meal at least once. Kodi did some fishing and did bring back 10 small fish that we ended up frying up that evening.

broughtjoke of the day was that we were having a second breakfast, second lunch, and second dinner. We were EATING all day. At one point, I fell asleep on the beach soaking up the rays. I’m thrilled we made this the laziest day ever.

Laying on the beach of Two Harbors on Catalina Island
James lazily laying on the beach, taking the day off!

Day 6 (Back to the mainland)

Catalina Island had treated us well. We may not have been ready to go home yet, but we knew we had to.

Our jet boat that would take us from Two Harbors back to Avalon was delayed for a little. So, of course, we picked up a bottle of wine and enjoyed that on the beach. Our boat showed up soon though and took us back to Avalon. Avalon isn’t too big, but it felt a little strange suddenly being surrounded by so many people. I was still used to the open trail with almost no one in sight.

We had a few hours to relax in Avalon before our boat ride back to Dana Point. Unfortunately, the Casino was not open, but we could walk around it and enjoy the architecture. We learned that the Casino on Catalina Island was never actually a Casino as we know them. The name comes from the Italian word Casino, which means gathering place. So no gambling actually ever happened here.

Lovers Cove near Avalon on Catalina Island a great spot for snorkeling
Lovers Cove near Avalon on Catalina Island (Great Snorkeling)

With the rest of our free time, we ate. We ate so much the day before why stop that streak and eat some more! Our Catalina Express ship soon arrived, and we hopped on for our hour ride back to Dana Point.

We left Catalina Island feeling great and wanting more. I’ll definitely be making more trips out to the island. There is still more to explore and enjoy on the cool little island in the Pacific.

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!

« Older posts

© 2021 Thomas Desmond

Theme by Anders NorenUp ↑