As someone who enjoys consuming endless programming related content on YouTube, I recently stumbled upon a video that truly caught my attention. The video is entitled [“Why You Shouldn't Nest Your Code”](https://www.youtube.com/watch?v=CFRhGnuXG-4) by [CodeAesthetic](https://www.youtube.com/@CodeAesthetic). In this article I will summarize what I learned from the video and I will share a few examples related to the topic from my professional career.

### What is code nesting
Code nesting is a common practice when writing code. Every if statement, for loop, switch statement or call back function, adds depth which eventually leads to deeply nested blocks of code.

Here’s an example:
~~~typescript
function processData(data: any[]) {
  for (let i = 0; i < data.length; i++) {
    if (data[i].type === "A") {
      for (let j = 0; j < data[i].values.length; j++) {
        if (data[i].values[j].isValid) {
          for (let k = 0; k < data[i].values[j].details.length; k++) {
            if (data[i].values[j].details[k].isImportant) {
              console.log(data[i].values[j].details[k].info);
            }
          }
        }
      }
    } else if (data[i].type === "B") {
      // do something else
    }
  }
}
~~~
This code has two major problems:

1- It is deeply nested, with three levels of for loops which makes it difficult to read and understand.

2- if the structure of the data array changes, this code may no longer work as expected.

### The drawbacks of code nesting
Nested code is much harder to read and understand. As code grows in complexity, it becomes increasingly difficult to keep track of what's going on which makes easy to miss important details. This can lead to bugs and other issues that are much harder to diagnose and fix.

Also, nested code can be difficult to maintain. As the code base grows, it becomes more challenging to add new features which can lead to longer development times and frustrated coworkers.

### Be a Never Nester
As stated in the video, a never nester is a programmer who only tolerates three levels of depth. Anything beyond is not allowed and calls for refactoring.

Here’s an example of three layers of depth:
~~~typescript
function processData(data: any[])
// 1
{
	if(data.length > 0)
	// 2
	{
		for (let k = 0; k < 3; k++) 
		// 3
		{
			console.log(`i: ${i}, j: ${j}, k: ${k}`);
    }
	}
}
~~~
In order to respect the “Never Nester” philosophy while still writing complex algorithms, there are a few techniques that come in handy, extraction, early return, data structures and external libraries.

#### Extraction
As the name implies, extraction simply means refactoring parts of code into separate functions each with its own concern. 

Example:
~~~typescript 
function processData(data: any[]) {
  data.forEach((item) => {
		if (item.type === "A") {
        item.values.forEach((value) => {
			    if (value.isValid) {
			      console.log(`${value.id}, ${value.name}, ${value.description}`);
			    }
		});
    } else if (item.type === "B") {
      // do something else
    }
  });
}

// The previous deeply nested function can be extracted as such:

function processData(data: any[]) {
  data.forEach((item) => {
		processItem(item);
  });
}

function processItem(item: any) {
    if (item.type === "A") {
      processValues(item.values);
    } else if (item.type === "B") {
      // do something else
    }
}

function processValues(values: any[]) {
  values.forEach((value) => {
    if (value.isValid) {
      console.log(`${value.id}, ${value.name}, ${value.description}`);
    }
  });
}
~~~

#### Early return 
The early return pattern can be used to return from a function as soon as a certain condition is met. This can help avoid deeply nested blocks of code by breaking out of a function early. 

For example:
~~~typescript
function processData(data: any[]) {
  data.forEach((item) => {
		if(item.type === "A") {
			if (item.values.length > 0) {
				item.values.forEach((value) => {
			      if (value.isValid) {
				      console.log(value.detail.info);
			      }
				});
			}
		}
  });
}

// The previous deeply nested function can be refactored using early return as such:

function processData(data: any[]) {
  data.forEach((item) => {
    if (item.type !== "A") {
      return;
    }

		if (item.values.length == 0) {
		  return; 
		}

    item.values.forEach((value) => {
      if (!value.isValid) {
        return;
      }

      console.log(value.detail.info);
    });
  });
}
~~~

#### Data structures
Data structures such as arrays, maps, or sets can be used to store data, and simple loops can be used to iterate through the data, rather than deeply nested blocks of code.

Here’s a very basic example:
~~~typescript
for (let i = 0; i < 5; i++) {
  for (let j = 0; j < 5; j++) {
    for (let k = 0; k < 5; k++) {
      console.log(`k: ${k}`);
    }
  }
}

// instead of nesting loops, the following array can be used:

const data = [0,1,0,1,0,1,0,1];

data.forEach((value) => {
  console.log(value);
});
~~~

#### External libraries
Sometimes the best way to avoid deeply nested code is to not write any code at all, the best way to do this is by using external libraries to efficiently get the results needed. 

Here’s an example:
~~~typescript
const data = [3, 2, 5, 1, 4];

for (let i = 0; i < data.length - 1; i++) {
  for (let j = 0; j < data.length - i - 1; j++) {
    if (data[j] > data[j + 1]) {
      [data[j], data[j + 1]] = [data[j + 1], data[j]];
    }
  }
}

console.log(data);

// this unnecessarily nested block of code does the same as the following

const data = [3, 2, 5, 1, 4];
const sortedData = _.sortBy(data); // https://lodash.com/
console.log(sortedData);
~~~

### Observable Nesting in RXJS
From personal experience, the most frequent use of deep nesting in [Angular](https://angular.io/) occurs when working with observables.

When implementing complex algorithms in [RxJS](https://rxjs.dev/) it is easy to create multiple layers of nested observables and operations, each one dependent on the previous one. This can result in complex and hard-to-understand code.

#### Never nest pipes and subscriptions
When working with observables, it is crucial to avoid nesting pipes and subscriptions. This is a clear indication of flawed observable logic. In most cases, It can easily be corrected by making use of appropriate [RxJS](https://rxjs.dev/) operators or by breaking down the source observable into smaller observables, each with a specific purpose.

Example:
~~~typescript
this.courseService
    .getCourse(lesson.id)
    .pipe(
        switchMap((course) =>
            combineLatest([
                of(course),
                from(
                    this.getAdditionalDetails(course.id)
                ),
                this.progressService.getProgress(
                    course.id,
                    lesson.id
                )
            ]).pipe(
                take(1),
                tap(([course, details, progress]) => {
                    //...do some business logic with the results
                })
            )
        ),
        take(1)
    ).subscribe();

// This Observable can be refactored into the following 

const course$ = this.courseService.getCourse(lesson.id);

const additionalDetails$ = this.course$.pipe(
	switchMap((course) => from(this.getAdditionalDetails(course.id)))
)

const progress$ = this.course$.pipe(
	switchMap((course) => this.progressService.getProgress(course.id,lesson.id))
)

combineLatest([course$, additionalDetails$, progress$]).pipe(
	tap(([course, additionalDetails, progress]) =>  
     //...do some business logic with the results
	)
).subscribe()
~~~
By respecting the maximum depth rule and using the techniques mentioned above, complex RXJS operator chains can be simplified into code that is easy to follow. 

### Takeaway
While nesting code may seem like a convenient solution in the short term, it's important to consider the long-term consequences. I hope that the techniques mentioned in this article and the video help ensure that your code is easy to read, efficient, and maintainable. 

##### Be a Never Nester!

james-harrison-vpOeXr5wmR4-unsplash

I am a Never Nester

[RxJS](https://rxjs.dev/) (Reactive Extensions for JavaScript) is a powerful library that allows developers to handle asynchronous data streams in a functional and efficient way.

In [Angular](https://angular.io/), it is extensively used to handle data streams from various sources, such as user input, HTTP requests, and WebSockets. In this article, I will go over seven rules to follow for effective usage of RxJS in Angular.

#### 1. Understand the basics of RxJS
Before diving into using RxJS in Angular, it's important to have a solid understanding of the basics of RxJS. This includes concepts such as Observables, Subjects, and Operators. Once you understand these concepts, it will be much easier to use RxJS in your Angular application.

[__Observables__](https://rxjs.dev/guide/observable) are the core concept of RxJS. They are a representation of a stream of data that can be emitted over time. An observable can emit multiple values, and can be subscribed to by one or more Observers, who will receive the emitted values. Observables can be created using the RxJS of, from, interval, fromEvent and ajax functions.

[__Subjects__](https://rxjs.dev/guide/subject) are a special type of Observable that can also be used to "push" values into the stream. They are useful for creating custom events or sharing data between multiple components. There are several types of subjects available in RxJS, including BehaviorSubject, ReplaySubject, and AsyncSubject.

[__Operators__](https://rxjs.dev/guide/operators) are functions that can be used to transform and manipulate the data in an observable stream. They are used to [filter](https://rxjs.dev/api/index/function/filter), [map](https://rxjs.dev/api/index/function/map), and [combine](https://rxjs.dev/guide/operators#join-creation-operators) data streams, or to handle errors and complete notifications. They can be chained together using the [pipe](https://rxjs.dev/guide/operators#piping) function, which makes it easy to read and understand the flow of data in your application. Examples of operators are map, filter, tap, concat, merge, switchMap, catchError and retry

#### 2. Use the async pipe
The [async pipe](https://angular.io/api/common/AsyncPipe) is a built-in Angular [pipe](https://angular.io/guide/pipes) that can be used to subscribe to an Observable and automatically unsubscribe when the component is destroyed. This can help prevent memory leaks in your application. The async pipe can also be used with subjects, promises and callback functions as well.

Note: Angular [pipes](https://angular.io/guide/pipes) are not to be confused with the Rxjs [pipe](https://rxjs.dev/guide/operators#piping), they are two different concepts.

~~~typescript
import { Component } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="data$ | async as data; else loading">
      {{ data }}
    </div>
    <ng-template #loading>Loading...</ng-template>
  `
})
export class ExampleComponent {
  data$: Observable<any>;

  constructor() {
    this.data$ = new Observable(observer => {
      setTimeout(() => {
        observer.next('Data Loaded');
      }, 1000);
    });
  }
}
~~~

#### 3. Use the takeUntil operator
The [takeUntil](https://rxjs.dev/api/index/function/takeUntil) operator is a useful operator in RxJS that can be used to unsubscribe from an Observable when a specific event occurs. 

A common pattern is using the takeUntil operator to create a Subject that emits a value when a component is destroyed, and then use it to unsubscribe from an Observable when the component is destroyed.

~~~typescript
import { Component, OnDestroy } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-example',
  template: `{{ data }}`
})
export class ExampleComponent implements OnDestroy {
  data: string;
  private destroy$ = new Subject();

  constructor() {
    const data$ = new Observable(observer => {
      setInterval(() => {
        observer.next('Data updated');
      }, 1000);
    });

    data$.pipe(takeUntil(this.destroy$)).subscribe(data => {
      this.data = data;
    });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}
~~~

This pattern can also be implemented in a base class that can be inherited and reused by all components to cleanup subscriptions.

#### 4. Use the shareReplay operator
The [shareReplay](https://rxjs.dev/api/operators/shareReplay) operator can be used to share a single subscription to an Observable among multiple subscribers. This can help improve the performance of your application by reducing the number of HTTP requests made.

~~~typescript
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { shareReplay, tap } from 'rxjs/operators';

@Component({
  selector: 'app-example',
  template: `
    <div *ngFor="let item of data">
      {{ item }}
    </div>
  `
})
export class ExampleComponent {
  data = [];

  constructor(private http: HttpClient) {
    this.http.get('https://mysimpleapi.com/posts')
    .pipe(
      tap(console.log),
      shareReplay(1)
    )
    .subscribe(data => {
      this.data = data;
    });
  }
}
~~~

#### 5. Use the catchError operator
The [catchError](https://rxjs.dev/api/index/function/catchError) operator can be used to handle errors that occur during the execution of an Observable. This can help you ensure that your application continues to function correctly even when errors occur.

~~~typescript
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

@Component({
  selector: 'app-example',
  template: `{{ data }}`
})
export class ExampleComponent {
  data = '';

  constructor(private http: HttpClient) {
    this.http.get('https://mysimpleapi.com/posts/100')
    .pipe(
      catchError(error => of("Error Occurred"))
    )
    .subscribe(data => {
      this.data = data;
    });
  }
}
~~~~

#### 6. Use the pipe function
The [pipe](https://rxjs.dev/api/index/function/pipe) function can be used to chain multiple operators together, making it easier to read and understand the flow of data in your application. The pipe function takes one or more operators as arguments and returns a new Observable that has the operators applied to it.

~~~typescript
import { Component } from '@angular/core';
import { of } from 'rxjs';
import { map, filter, tap } from 'rxjs/operators';

@Component({
  selector: 'app-example',
  template: `{{ data }}`
})
export class ExampleComponent {
  data = '';

  constructor() {
    of(1, 2, 3, 4, 5)
    .pipe(
      filter(x => x % 2 === 0),
      map(x => x * 2),
      tap(console.log),
    )
    .subscribe(x => this.data += x + ' ');
  }
}
~~~

#### 7. Practice and experimentation
The best way to become proficient with RxJS is through practise and experimentation. Try building small projects or experimenting with different operators to see how they work. This will help you become more comfortable using RxJS in your Angular applications.

Here are a few simple app ideas for anyone looking to get started right away:

__Build a simple CRUD application:__ Create a simple application that allows you to perform basic CRUD operations on a list of items. Use RxJS to handle data streams, and experiment with different operators to see how they can be used to manipulate data.

__Build a real-time chat application:__ Use WebSockets to create a real-time chat application that allows users to send and receive messages in real-time. Use RxJS to handle the WebSocket stream and experiment with different operators to filter and manipulate the data.

__Handle errors with retry:__ Create a service that makes API calls and use the catchError operator to handle errors and the retry operator to retry failed requests. Remember to use shareReplay for the best performance.

#### Takeaway 
RxJS is a powerful but very complicated tool, by understanding its basics, using built-in Angular features like the async pipe, and using operators like takeUntil, shareReplay, and catchError, you can effectively use RxJS in your Angular application to get the best performance and elegantly handle errors.


1 rcewo8BQLzUc fI- O7S w

7 Rules for Effectively Using RxJS in Angular

About one year ago, I came across a YouTube video entitled ["Next.js in 100 Seconds"](https://www.youtube.com/watch?v=Sklc_fQBmcs) by none other than [Jeff Delaney](https://twitter.com/JeffDelaney23), better known as [Fireship](https://twitter.com/fireship_dev). Since then, I've been using [NextJS](https://nextjs.org/) to prototype every side project idea that has come to mind, and I'm sure I've started and abandoned at least a dozen NextJs projects.

One project I didn’t abandon, however, is a student management and tutoring platform. I built it for a language school owned by a relative. With the help of an intern, it took three months to complete. The finished product is hosted on [Vercel](https://vercel.com/) and has a back-end powered by [Firebase](https://firebase.google.com/).

Here’s what I learned from this experience:

#### NextJS Layouts suck
Custom layouts are not supported by default in NextJS 12 and earlier versions, which is a problem. The app we created has three page styles: public-facing pages like the home page and about us; authentication pages for signing in and resetting passwords; and dashboard style pages that contain the application's core.

The official NextJS documentation recommends using a per-page layout based on a [pattern](https://nextjs.org/docs/basic-features/layouts#per-page-layouts) they propose. When I first read this at the start of the project, I found it overly complicated and decided to use the simpler approach of checking the current route and wrapping the parent app component with the respective layout.

In retrospect, both the suggested pattern and my simplified one do the job, but neither is clean nor scalable. My approach requires that every new route be added to the appropriate array on the app page, whereas the official suggested method offloads the layout to each page, despite the fact that it is not the responsibility of each page to define its own layout.

Note: [NextJS](https://beta.nextjs.org/docs/getting-started) 13 is a major update to the framework that addresses this issue. It is currently in beta but is not recommended for production apps.

#### Forms are better in React
This project was my first experience with complex forms in [React](https://reactjs.org/). With a bit of research, I found a powerful library called [React Hook Form](https://react-hook-form.com/). The power of React being an extensible library really shines when combined with powerful third-party libraries like this one. With a simple hook and a few function declarations and custom tags, I was easily able to build a powerful reactive form with field validation.

Without going into too much detail about how this library works, I strongly recommend it to anyone building forms with NextJS or any React based framework for that matter. Furthermore, the [documentation](https://react-hook-form.com/get-started#Quickstart) is fairly clear, with examples of many use cases.

#### Backends are overrated.
We were able to deliver a product of this scale in three months primarily because we chose to use Firebase instead of building our own backend. For those who are unfamiliar, Firebase is a free-to-start backend-as-a-service owned by Google that provides everything needed to build a full-stack application.

We used the following services for our use case:
[__Firebase authentication__:](https://firebase.google.com/products/auth) to manage the creation and verification of student accounts as well as safely storing and resetting passwords
[__Cloud Functions__:](https://firebase.google.com/products/functions) to handle server-less cron jobs related to the business logic of the applications
[__Firestore Database (no-SQL)__:](https://firebase.google.com/products/firestore) to store and manage all the data related to students and the business logic of the platform.

To sum up, I spent three months this year building a full stack web app using NextJS and Firebase, and the three things that stood out to me the most were how layouts are an issue in NextJS, the React Hook Form is a solid alternative to Angular reactive forms, and Firebase makes it difficult to justify building a backend from scratch.

marvin-meyer-SYTO3xs06fU-unsplash

What I learned building a project with NextJS 

As a millennial, I got the witness the technology boom and rise of smart devices first hand. This had a significant impact on my professional career in two ways; first I was always up to date with the latest in computers, phones and tablets; and second, I was very comfortable utilizing technology and making the most of the digital devices I own.

### I Built the right setup

Working from home during the [pandemic](https://en.wikipedia.org/wiki/COVID-19_pandemic) taught me that it's necessary to keep personal and professional time separate. After some experimenting with different working setups over the past couple of years, I finally found one that I’m confortable with.

I purchased a desk large enough to accommodate two computers. On the left, I have my personal computer set up with a mechanical keyboard and gaming mouse, and on the right, I have my work laptop set up with a wireless mouse and keyboard.

This may appear exaggerated, but after reading a couple of self-help [books](https://jamesclear.com/atomic-habits) about developing positive habits, it became clear to me how influential physical space is on our motivation and actions. As a result, something as simple as switching from one side of the desk to the other had a significant positive impact on my overall productivity.

When I [switched](https://medium.com/@MBCube/how-i-switched-to-consulting-20d5786b8aa4) to consulting, I started [this](https://blog.mbcubeconsulting.ca) blog and began working on side projects in addition to client work. To help me focus and further organise and divide the various types of work that I do I created two additional setups: 
- For side project I use a [14" MacBook Pro](https://www.apple.com/ca/shop/buy-mac/macbook-pro/14-inch) connected an [11" iPad Pro](https://www.apple.com/ca/ipad-pro/) with [side car](https://support.apple.com/en-ca/HT210380). This setup is Portable yet mighty and I can work from anywhere (dining table, coffee shop, airport lounge)
- For writing I just use a 11’ iPad Pro with Bluetooth keyboard and an iPad stand. The simplicity and portability of this setup allows me to write anywhere without the distraction of other projects.

![kelly-sikkema-v9FQR4tbIq8-unsplash](//images.ctfassets.net/jird3gt7tktm/41PNJ59Irfnn69UbLxFyfo/b6c04e659f4b51bbb030afd9d4e2d112/kelly-sikkema-v9FQR4tbIq8-unsplash.jpg)

### I Got Organized

Before worrying about getting the most out of my setup, I focused on making my workflow more organized. 

Having onboarded a number of junior software developers onto various projects throughout my career, I noticed that the juniors who were the most organized had a tendency to complete their tasks faster and learn more efficiently. I observed the same pattern with my colleagues; people who were lost in their dozens of open chrome tabs and multiple code solutions, during zoom meetings, generally took longer to complete their tasks.

Although this is merely a personal anecdote, some [studies](https://theproductivityexperts.com/7-reasons-why-being-organized-boosts-productivity/) have shown that being organized helps with productivity; in fact, a 2012 survey discovered that "the annual cost of U.S. job-related inefficiency for full-time employees looking for misplaced items in the office tops $89 billion annually."  I wonder how much it costs to switch back and forth between Chrome tabs to find the right one.

In order to avoid making the same mistake, I developed a few habits to help me organise my work and be more productive:
- Before starting a new task I close every app on the computer with the exception of work communication apps ([Teams](https://teams.microsoft.com), Email etc) and music
- I only work on one task at a time, and only have that one task open on the browser. 
- I only open the code base(s) related directly to the task. 
- I always close any new chrome tab I open (documentation, [stackoverflow](https://stackoverflow.com)) as soon as I’m done with it.

![joshua-aragon-BMnhuwFYr7w-unsplash](//images.ctfassets.net/jird3gt7tktm/1CRYSTA7q7v2GecDPCSByF/9ebcb20536dd7c27a60811dac83827d1/joshua-aragon-BMnhuwFYr7w-unsplash.jpg)

### I leveraged technology
The other day, I was working next to an acquaintance who wasn't aware of the window snap feature on his PC; when I showed it to him, the look on his face made me realize that there are still some people out there who don't take full advantage the technology they own. 

If I can help change this even a little, here are some of the popular productivity features that I use on a daily basis. 

##### Window Snap
Both Windows and Mac have a window snap feature that allows you to maximise screen real estate by running two apps side by side. 
__Windows:__ Simply drag a window to one side of the screen until it displays a [snap](https://support.microsoft.com/en-us/windows/snap-your-windows-885a9b1e-a983-a3b1-16cd-c531795e6241#WindowsVersion=Windows_10) animation, then let go to choose which other app to place on the other side. 
__Mac:__ you can snap apps together by taking them both full screen and dragging one on top of the other to enter [split view](https://support.apple.com/en-ca/HT204948).

##### Multiple Desktops: 
Both Windows and macOS support multiple desktops, each with its own set of open apps in any desired layout. 
__On Windows,__ all of the computer's monitors are considered one desktop, which means that when you switch desktops, the content of both screens changes at the same time. Refer to the official [documentation](https://support.microsoft.com/en-us/windows/multiple-desktops-in-windows-36f52e38-5b4a-557b-2ff9-e1a60c976434) for more information on how to use multiple desktops on Windows. 
__On a Mac,__ each screen is considered its own space, and new ones are added one at a time, and you can navigate between them using trackpad gestures. More information is available on Apple's [website](https://support.apple.com/en-ca/guide/mac-help/mh14112/12.0/mac/12.0).

##### Quick Search: 
Both Windows and macOS have a quick search feature. It is very useful for opening an application or a file or quickly looking something up on the internet without leaving the app you're currently working on. 
__Windows:__ Simply press the `Windows logo key + S` and begin typing your search query to begin receiving [suggestions](https://support.microsoft.com/en-us/windows/search-for-anything-anywhere-b14cc5bf-c92a-1e73-ea18-2845891e6cc8#ID0EDF=Windows_10). 
__Mac:__ This feature is known as [spotlight](https://support.apple.com/en-ca/guide/mac-help/mchlp1008/mac) on macOS and can be accessed by pressing `Command + Space bar`.

__Note:__ For my fellow vscode programmers, I highly recommend this [video](https://www.youtube.com/watch?v=ifTF3ags0XI ), which covers everything I know and much more!

![dennis-brendel-cCRyDcdQYas-unsplash](//images.ctfassets.net/jird3gt7tktm/62FaHH5txVXBSZ4LOHvcjr/3ba3a34ddaaaa365983996ef4f8a60ee/dennis-brendel-cCRyDcdQYas-unsplash.jpg)

### Takeaway 
I may not be the most productive person in the world but I certainly try to get the most out of my potential and the tools I own. I do so by having a comfortable setup, staying organized and making effective use of the tools I own. 
If you’ve read this far, I would love to know what you do to stay productive, especially if you’re working from home like I am? 


carl-heyerdahl-KE0nC8-58MQ-unsplash

My three pillars of effective WFH

Throughout my career as a full stack engineer, I've worked on numerous commercial Angular projects and helped onboard dozens of developers. As a result, I noticed a few bad habits that develop organically, particularly among beginners.

In this article, I will discuss three of the most important pitfalls to avoid. They are: using function calls in NgIf directives, improper use of the RXJS library, and failing to leverage Angular’s fundamentals.

![shahadat-rahman-BfrQnKBulYQ-unsplash](//images.ctfassets.net/jird3gt7tktm/47mQPCXgZivDnm4F8AkkfL/ee195f2253af8d91babdce6e412c709b/shahadat-rahman-BfrQnKBulYQ-unsplash.jpg)

### NgIf
NgIf is a structural directive in Angular that can be used to show or hide dom elements based on some boolean value. The typical mistake to make when using this directive is to use a function call as the boolean expression, especially if the function demands some processing power. 

Without going into too much detail about Angular's inner workings, the problem with this technique is that the function will be called every time change detection runs, which can occur several times in a short period, and this will have a significant impact on 

This [article](https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496) delves deeper into the subject, and I recommend it as additional reading!

To avoid this issue, the recommended approach performing expensive calculations when the underlying data changes, using the appropriate lifecycle hook (OnInit, OnChanges…etc) and storing the results in local variables. 

![forkJoin](//images.ctfassets.net/jird3gt7tktm/4Mb5I575bX9jCjI8x1QylU/3a5d20bde84e63ade22741124a60ebf7/forkJoin.png)

### RxJS
"RxJS a library for composing asynchronous and event-based programs by using observable sequences," according to their website. Every angular project I've worked on has used RxJS in some way, and it's safe to say that it should be included in every modern enterprise [Angular](https://angular.io/guide/rx-library) application.

When utilized correctly, RxJS is a great tool for developing sophisticated reactive apps. The only drawback is the learning curve. It's typically thought to be tough to learn, especially for newcomers inexperienced with functional programming.

In my experience, the most common misuse of the RxJS library is to subscribe to obsevables early and store values in local variables. This not only makes the code more difficult to comprehend, but it also results in a number of asyncronous issues that lead to obscure bugs in production. 

The simplest approach to prevent this is to just use the library's operators to manipulate the data without needing to unwrap it.  I found a [tool](https://rxjs.dev/operator-decision-tree) that makes it easy to decide on which operator to use based on the situation.  Conveniently, It also links to the official documentation on the operator. 

![Screenshot 2022-06-05 at 5.35.52 PM](//images.ctfassets.net/jird3gt7tktm/6N1MKsBb9oTiBKeM8lE0Pc/662d8e2673449ec5ce81216db9c0943d/Screenshot_2022-06-05_at_5.35.52_PM.png)

### Angular Fundamentals
Angular is a framework, therefore it includes all the tools required to build a complete application, unlike react and other Javascript libraries. However, not every application takes advantage of all features.

For instance, Angular supports the division of a complex application into multiple submodules that can be loaded independently when necessary. But some projects continue to eagerly load the entire application, which results in a large JavaScript bundle and slow first page load.

Additionally, Angular offers a comprehensive routing system that manages routing both within and between modules. Unfortunately, some solutions use NgIfs and Boolean flags to show and hide components, instead of creating new routes. The official [documentation](https://angular.io/guide/routing-overview) offers a fantastic place to start to learn all of this. 

Another bad practice I have seen is not implementing Internationalization early in the project development cycle. Nowadays, it is practically required, for any enterprise application to support several languages; nonetheless, some projects still use hard coded English content in the templates.

The problem with delaying Internationalization is that it becomes substantially more time consuming  to implement as the app expands. The official Angular [documentation](https://angular.io/guide/i18n-overview) includes an overview of i18n.

 Last but not least, in a previous [article](https://medium.com/@MBCube/three-important-angular-concepts-that-helped-me-ace-interviews-395df2803e59), I wrote about three important angular concepts that helped me ace interviews and all three are part of the fundamentals of Angular. 

![pexels-pixabay-355948](//images.ctfassets.net/jird3gt7tktm/72Uw0Cu7mZia3lidAVXGIA/504eb5a3e998c89d236ca95e085bcddb/pexels-pixabay-355948.jpg)

### Takeaway

Early in my career, I was fotunate to be onboarded onto an excellent Angular project that followed all the best practices. Since then, I’ve been able to easily recognize and avoid bad practices that other developers might have adopted. Three examples of these bad practices are the mis-use of the RXJS library, putting function calls in NgIfs and not leveraging the full power of the Angular framework. 

angry-g42bb4f8ac 1920

Three Angular mistakes to avoid

Recently while working on a project using [NextJS](https://nextjs.org) and [Firebase](https://firebase.google.com), I ran into a particular problem related new user creation on the firebase platform. I will share more on the project in a future articles.

### The problem
On the web app, administrators must be able to set up user accounts with just an email and a name; the password is generated automatically, and the user is sent a reset password email.

On Firebase, the only way to accomplish this is to use the Auth module's [`createEmailPasswordAccount`](https://firebase.google.com/docs/auth/web/password-auth) method. The issue is that as soon as a user is created, the SDK automatically logs in that user and updates the local `auth` instance.

![elisa-ventur-bmJAXAz6ads-unsplash](//images.ctfassets.net/jird3gt7tktm/4wL0ibfIszN14eGrs061YZ/7eac92fdcd43f9a4893d8a87b0f7ccb7/elisa-ventur-bmJAXAz6ads-unsplash.jpg)

### Possible Solutions 
One solution would be to create an additional instance of the firebase object on the client, use it to create the new account, logout, and then destroy the instance. The issue with this solution is that Firebase does not support multiple instances running concurrently on the same client, and will throw a runtime error.

Another approach would be to use a [cloud function](https://firebase.google.com/docs/functions), specifically a [Cloud Firestore trigger](https://firebase.google.com/docs/functions/firestore-events), to handle the creation of the user account when a document is added to the Firestore. The problem with this solution is that it requires splitting the app into two projects and maintaining both.

### What I did
The solution I came up with is to use an [API route](https://nextjs.org/docs/api-routes/introduction) to handle user creation. The front end component handles all form validation logic and calls the API with the entered credentials. 

The API route validates the request, generates the password and creates the account with a Firebase instance before logging out, clearing the instance, and returning the appropriate response to the component.

As an added security measure, I also supply and validate the Firebase authentication token available on the front end. Additionally, NextJS API routes are same-origin only by default, so there’s no need to worry about external requests.

![pexels-pixabay-355948](//images.ctfassets.net/jird3gt7tktm/72Uw0Cu7mZia3lidAVXGIA/504eb5a3e998c89d236ca95e085bcddb/pexels-pixabay-355948.jpg)

### Why it works 
I was able to mitigate both problems with the other potential solutions thanks to the advatages of using NextJS.

The first advantage is the separation of server and client side instances, which allowed my server side Firebase instance to handle user creation without interfering with the client.

The second advantage is the ability to write server and client code in the same code base, which reduces cost of maintenance and code duplication.

### Conclusion
In summary, the flexibility of nextjs allows you to run multiple instances of firebase in the same app if necessary using server-side API routes.

This can be taken a step further by running the firebase-admin sdk on the server without security risks, because no server side code is shipped to the client and the API routes are protected by NextJS's same-origin only access.


firebase-nextjs

The problem with password-based accounts on Firebase using NextJS

The other day, while talking with my brother about my experience doing angular interviews, a few advanced concepts came up that I thought would be useful to share with a little more details in an article.

Lazy loading, resolvers, and content projection are the three that I found most interesting and worth learning about.

### Lazy-loading
Lazy loading is perhaps the most well-known and widely used of the three, I wanted to include it because it makes a noticeable difference in any angular application when it’s used.

Angular eagerly loads all of the modules included in the app module by default. This means that all the code for all the modules is included in the initial app bundle shipped to the client, regardless of whether the code is used or not.

Lazy loading takes a different approach in that the initial bundle only contains the main module and the requested page; additional modules are loaded only when their respective routes are activated. This results in a significantly faster application and a better user experience. 

Here’s a snippet from the official documentation on lazy loading: 
![IMG 0494](//images.ctfassets.net/jird3gt7tktm/UIeQpXNpeMpE04RbAtQVN/de40d52055df718767235159f4126e34/IMG_0494.jpeg)

### Resolvers
Route resolvers are special services that can be assigned to a route and are responsible for fetching data before the route's component is initialised.

Resolvers are meant to encapsulate data fetching and mapping logic and reduce the risks of getting undefined reference errors in the component. 

The only drawback to using resolvers is the blank white screen displayed during navigation until the resolver completes. This issue is absent when fetching data in the onInit of the component because a loading state can be defined instead. 

For a more in-depth read about resolvers, refer to this [article](https://anymindgroup.com/news/tech-blog/15141/).

Here’s a snippet from the official documentation on resolvers:
![Angular - Resolve](//images.ctfassets.net/jird3gt7tktm/3fLuhUtmlpeZUp0G7U3uiu/ff451fb13f57fb334abf32e6568770f5/Angular_-_Resolve.png)

### Content projection
Third on our list is content projection. This pattern is especially useful for creating reusable components by projecting some custom content directly into the template of a child component using the `<ng-content>` directive. 

It can be viewed as an alternative to manipulating HTML content using   `@Inputs` and `*ngIfs`. It also allows you to project multiple sets of content identified by a select attribute. Content projection is explained in detail in the official angular documentation. 

Here’s a snippet from the official documentation on content projection:
![Angular - Content projection](//images.ctfassets.net/jird3gt7tktm/14aVCfY3GSu8iNgOSPvN0t/17f87ad31484834de9174a36c3ff8090/Angular_-_Content_projection.png)

### Takeaway
Knowing the three advanced angular concepts covered in this post, among others, is a key differentiator between novice and experienced angular developers. Learning about them will undoubtedly benefit you, just as it did for me in a few interviews.


Screenshot 2022-06-05 at 5.35.52 PM

Three important Angular concepts that helped me ace interviews

In a previous [article](https://medium.com/@MBCube/how-i-started-a-company-in-2021-that-hasnt-failed-yet-b42a94c5fda5), I covered the process of becoming incorporated as a software development consultant. I briefly described the steps I took to establish the company.

Now, six months later, it feels like the right time to follow it up with more details. In this article, I will explain in more detail the steps I followed to get incorporated and how the first month has been for me.

![romain-dancre-doplSDELX7E-unsplash](//images.ctfassets.net/jird3gt7tktm/5NfUH9pnMpKjeae3Hx1s3C/1a3c7e3232e6f4a25bc3c1dbb370b27a/romain-dancre-doplSDELX7E-unsplash.jpg)

### I decided to incorporate
Currently, the job market for software development in Canada and the US is very hot. It is quite easy to find new opportunities as a full-time employee or on a contractual basis.

Last year, having switched employers a few times before and being rather burned out with the position I was occupying, I decided it was time to make the leap.

Working on a project with independent consultants early in my career also motivated me to take the plunge. They taught me a lot about the differences between what I did and what they did.

Part of the reason I'm writing this and earlier [articles](https://medium.com/@MBCube) is to inspire and guide anyone thinking about doing something similar.

However, I recommend conducting thorough research ahead of time. Contractual work is inherently uncertain, requiring additional planning and preparation.

### I found my first contract
As I stated in a previous [post](https://medium.com/better-humans/how-i-doubled-my-salary-in-4-years-as-a-software-developer-459ba6e1a274), I kept in touch with a number of recruiters who reached out to me on LinkedIn throuout my career as a software developer. This is when it started to pay off for me. All I had to do was let them know that I was actively looking for a contract.

Soon enough, I was booked for a few interviews, and it was time to demonstrate my talents. Naturally, having conducted [dozens of interviews before](https://medium.com/better-humans/how-i-doubled-my-salary-in-4-years-as-a-software-developer-459ba6e1a274), the process went well, and I received an offer shortly after.

I signed a contract with a recruiting agency rather than directly with the client. I did so to avoid being taxed as a [Personal Service Business](https://www.canada.ca/en/revenue-agency/services/forms-publications/publications/t4012/t2-corporation-income-tax-guide-chapter-4-page-4-t2-return.html). This tax category was created to deter incorporated employees by imposing harsh penalties.

![hunters-race-MYbhN8KaaEc-unsplash](//images.ctfassets.net/jird3gt7tktm/3vJceg8VJRbWLacMdUcQmR/dfa4146ebf2c089e22151221e8a15ed7/hunters-race-MYbhN8KaaEc-unsplash.jpg)

### I consulted with experts
I had no prior experience of owning a business before making the decision to transition to freelance consulting. Therefore, as soon as I finished all the paperwork for the business, I had it verified by an accountant to ensure that everything was done correctly.

For anyone considering doing the same, I recommend consulting an attorney or a [CPA](https://www.cpacanada.ca/) to set up the appropriate forms of business, government tax accounts, and share structure, if necessary.

Furthermore, when operating as a business, it is critical to keep all records up to date and ensure that taxes are collected and remitted to the government on time to avoid penalties. I suggest speaking with an accountant about what needs to be tracked.

In my previous posts, I went over how I created my [corporation](https://medium.com/@MBCube/how-i-started-a-company-in-2021-that-hasnt-failed-yet-b42a94c5fda5) in Quebec and how I structured the [finances of the business](https://medium.com/@MBCube/how-i-manage-my-business-finances-ea88d7681d6d).

### I got to work 
After taking care of all business and accounting matters, it was time to get to work and provide as much value to my clients as possible. To assist with this, I implemented a few productivity-boosting strategies.

I use the appropriate tools for the job. Even if it means using my own hardware and/or software, if the client is okay with it. Any hardware or software licenses used for work are considered business expenses. They pay for themselves in the long run.

I read the documentation. When using a framework or library for the first time, instead of instinctively following the same patterns I’m used to, I look up the official documentation and learn how the framework or library is supposed to be used. This allows me to avoid writing anti-patterns that pile up technical debt later on.

I remain informed about new technologies. I achieve this by reading technology [blogs](https://medium.com/mkdir-awesome/top-10-independent-medium-publications-for-programming-article-80476988b10c) and watching software-related [YouTube](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA) channels. Also, I experiment with new frameworks that interest me or are really popular. As a consultant, I believe it is essential to be familiar with as many technologies as possible.

![kevin-ku-w7ZyuGYNpRQ-unsplash](//images.ctfassets.net/jird3gt7tktm/2ZZ6PhluPUMhZPBnBYJ3u2/a892a65004a36d3b7dfd3f74296ea3bf/kevin-ku-w7ZyuGYNpRQ-unsplash.jpg)

### Conclusion
This blog post chronicled the key steps I took in my career since the day I decided to work as a consultant.

My first step was to commit to the transition. Then I secured a contract and established the company. After that, I worked with a CPA to get my tax files and financials in order, and finally, I got to work providing value to my clients.

If I can leave you with some advice, if you feel like you’re competent in what you do and have enough savings to cover [3-6 months of your basic expenses](https://medium.com/@MBCube/how-i-manage-my-money-e5fa99c745e4), then go for it! The risks are quite low, and who knows? You might find your new life liberating. I know I did!

per-loov-4wOkqiXNP7M-unsplash

How I Switched to Consulting

In my [last](https://blog.mbcubeconsulting.ca/post/1pf1mcsIZTLBz6xXIjJaKp) article, I discussed how I handle my personal finances and how I developed the system I use. This post will be a quick follow-up to that, and it will discuss how I built my consulting company's bank account structure.

### Accounts
[This video](https://www.youtube.com/watch?v=wJB90G-tsgo) showed me that I needed to keep the company's finances separate from my personal ones. As a result, the first thing I did after receiving the papers for the corporation was open a business bank account.

I didn't give much attention to what sort of account to open in terms of fees and transaction limitations; I simply chose the one that best suited my [needs](https://www.bmo.com/main/business/accounts/business-start/) in the beginning.

I also applied for a corporate credit card, but my application was denied since the business was still new. Instead, I dedicated one of my personal credit cards to company spending.

### Structure
To simplify the company's cash flow and ensure that taxes and invoices are always paid on time. I devised a system similar to the one I employ for my personal finances:

![DF4C8581-1394-4889-8409-D52DF34883FF](//images.ctfassets.net/jird3gt7tktm/146dZimihUQxK8HhttPD5z/39807a471d594a6b1feb6912faf678f4/DF4C8581-1394-4889-8409-D52DF34883FF.png)

The structure includes a checking account, a savings account, and a credit card. Client invoices are deposited into the checking account. I then manually transfer the QST/GST portion to the savings account. All business expenses are charged to the credit card and are automatically paid in full before the due date.

I don’t transfer any money to savings for expenses because they are tax deductible.In contrast, I deposit withheld payroll tax and 20% of dividends paid into the savings account.  

This structure enables me to pay all expenses automatically and ensure that I have adequate cash in savings for tax season.

![qb-dashboard-desktop@1x](//images.ctfassets.net/jird3gt7tktm/Ce7FYCxojSsOjjX1Hik7W/6e8f5a2289454c3015e491026bf097d3/qb-dashboard-desktop_1x.jpg)

### Quickbooks 
The structure presented above is powered  by [Quickbooks](https://quickbooks.intuit.com). I use it on a daily basis for a variety of tasks, including:

- Tracking business expenses and storing receipts.
- Creating invoices and tracking QST and GST amounts owed to the government.
- Running payroll and tracking payroll taxes.

These processes, while essential, are generally automated by connecting the bank account and credit card to the platform. The majority of my work consists of matching transactions to expense receipts or invoices.

Furthermore, using Quickbooks to track all company transactions makes my accountant's life a lot easier because I can export different kinds of reports based on what he needs to determine payroll, sales, or income taxes.

### Conclusion
This brief follow-up post summarises how I manage my company's finances. It takes some time to set up, especially initially, but it is definitely worth it in the long run. 

Also, I recommend Quickbooks for anyone starting a small business, particularly contractors. There are other platforms available, but QuickBooks is the one I use and am happy with.

carlos-muza-hpjSkU2UYSU-unsplash

How I Manage My Business Finances

In 2018, when I started my professional career after graduating from university, I had no idea how to properly structure my finances in a productive manner. I had a simple bank account with checking and savings, and I spent money from my checking account as needed, with no tracking or planning. I didn't give it much thought at the time I was living within my means and I figured that was sufficient It wasn't until I started looking into investing that I did more in depth research on how to manage my finances. That's when I came across the reddit page [Personal Finances Canada](https://www.reddit.com/r/PersonalFinanceCanada). After sifting through the posts, I came across [this guide](https://www.reddit.com/r/PersonalFinanceCanada/wiki/money-steps), which is considered a good place to start. Reading it inspired me to rethink the way I handle my finances and that is why took the decision to change the structure of my bank accounts in accordance with the steps in [the guide](https://www.reddit.com/r/PersonalFinanceCanada/wiki/money-steps 
). In this blog post, I'll explain the structure I created, how I reached that point, and the processes I put in place to keep me on track.

### My advantage 

In full disclosure, I'd like to begin by stating that I am aware that I had the privilege of graduating from university debt-free. I was able to do so thanks to financial support from my parents and being part of a [coop curriculum](https://www.concordia.ca/academics/co-op.html) that allowed me to complete paid yearly internships. This made it easier for me to follow the money steps outlined in the Reddit [post](https://www.reddit.com/r/PersonalFinanceCanada/wiki/money-steps). I wasn't concerned with repaying any high-interest debt or student loans. As a result, in the rest of this article, I will document what I did in respect to my situation. I understand that my process may not be viable for all, but I am confident that parts of it may apply to every situation.

![start-today-on-a-typewriter-machine](//images.ctfassets.net/jird3gt7tktm/R9ZvnHX3O502MFj0zMpzo/b1bbaa53f134136de0fbd8e3efc7cff8/start-today-on-a-typewriter-machine.jpg)

### Starting point
My starting point was step 0 of the guide, and that was to "budget and cut expenses" I needed to figure out what my initial estimate would be. To do so, I created an annual budget Google [Sheet](https://docs.google.com/spreadsheets/d/1yoKVjZ4MEEdhIsa_wW-xyWGHkTTq7L_6ua6fPNbXppc/edit#gid=1695479590), went through my bank account and credit card statements, and manually entered every transaction from the previous three months into the sheet's expanses tab. This provided me with an overview of my expenses for that time period, and I averaged everything to arrive at my initial budget. Surprisingly, my actual average monthly expenses were significantly higher than what I had expected. I would not have realised that if I had not taken the time to go through this exercise. Therefore, I decided to reduce my monthly budget to a figure I was comfortable with, without sacrificing the lifestyle I was accustomed to. To help me stick to this budget, I decided to open a [Tangering](https://www.tangerine.ca/en) checking account with the [Left to Spend](https://www.tangerine.ca/en/ways-to-bank/money-management-tools/left-to-spend) feature, which automatically records all expenses and calculates how much of the budget is left. 

### Emergency fund 
As I previously stated, I had some money in the bank, divided between a checking and a savings account. That money was then designated as my emergency fund. According to the guide, an emergency fund should be able to cover three to six months' worth of expenses. In my case, I chose a figure that was five times my monthly budget. This is because, in all likelihood, if I were to lose my job unexpectedly, I could reduce my expenses sufficiently to stretch my emergency fund for at least six months. I put the funds in a high-interest savings account because they needed to be easily accessible at all times.

![brano-heYdDdq0cbE-unsplash](//images.ctfassets.net/jird3gt7tktm/6K0XGB4rtTaQ1MGuy1TnwO/87828c616539e001be633016a748cd9c/brano-heYdDdq0cbE-unsplash.jpg)

### Account structure 
To help me remain disciplined, I opened additional bank accounts to separate my daily expenses from my emergency fund and savings. While searching for the best structure, I came across [this video](https://www.youtube.com/watch?v=wJB90G-tsgo) explaining how entrepreneurs should structure their accounts and decided to model mine after it. What I came up with is illustrated in the chart below:
![Untitled 2](//images.ctfassets.net/jird3gt7tktm/2LhU5yurcqvNi9D1QYlZud/d815b64d48e1dc9f8cff3821bcc2c15d/Untitled_2.png)
To put it another way, the model I thought up included a daily checking account with a credit card, an emergency fund savings account, a general purpose savings account, and investment accounts. The typical flow of funds is as follows: I receive a paycheck from my employer, and a portion of it is deposited into my company-matched RRSP account, up to the percentage matched by the employer ([Step 2](https://www.reddit.com/r/PersonalFinanceCanada/wiki/money-steps)). The remainder is placed into my emergency fund savings account. My budgeted amount is then transferred to my daily checking account. Furthermore, depending on my income at the time, 10%-20% of my paycheck is forwarded from this savings account to investments; this step is automated, so I never forget to put money in my investments account. Finally, any funds in excess of the the emergency fund would be moved to the general purpose savings account. 
This structure was my best attempt at modelling the information from [the video](https://www.youtube.com/watch?v=wJB90G-tsgo ) while respecting the reddit [post](https://www.reddit.com/r/PersonalFinanceCanada/wiki/money-steps )'s insights. Another advantage of this model is that because I separate my income from my allocated budget, if my income rises, my day-to-day spending remains constant, preventing me from falling victim to ["lifestyle creep."](https://www.businessinsider.com/personal-finance/lifestyle-creep) 

### Investments 
To reiterate, my investment process is as automated as possible. This is something I learned from a few investment books I've read, including ["The Intelligent Investor"](https://www.amazon.ca/Intelligent-Investor-Collins-Business-Essentials-ebook/dp/B000FC12C8/ref=sr_1_3?gclid=CjwKCAjwiuuRBhBvEiwAFXKaNAGv8AyFcgqN5RHB6SD9nnB-JKvtD1qKduDr6TIYjSImFt7OD8benhoCJgkQAvD_BwE&hvadid=267364414937&hvdev=c&hvlocphy=1002661&hvnetw=g&hvqmt=e&hvrand=13481976873182099613&hvtargid=kwd-377319613841&hydadcr=16961_10238145&keywords=the+intelligent+investor%27%27&qid=1648090512&sr=8-3) and ["MONEY Master the Game."](https://www.amazon.ca/MONEY-Master-Game-Financial-Freedom/dp/1476757801/ref=sr_1_1?keywords=money+master+the+game&qid=1648090552&sprefix=money+master%2Caps%2C68&sr=8-1) To achieve this, I opted to use a Robo-advisor from the well-known Canadian firm, [Wealthsimple](https://www.wealthsimple.com/en-ca/product/invest?utm_source=google&utm_medium=cpc&keyword=wealthsimple%20invest&matchtype=e&network=g&device=c&gclid=CjwKCAjwiuuRBhBvEiwAFXKaNHBXhI14FhfghwKmehWOBwla2LPyxl1yLqxqQgLGXKSHA05OOgIQhhoCl5gQAvD_BwE). In fact, this is a strategy I highly recommend, especially for those who are just getting started with investing. Wealthsimple has made the setup process as simple as answering a few questions and establishing a bank account for transfers. Further to that, the programme automatically handles the reinvestment of any deposits or dividend payments received.

![joshua-mayo-obJBg2lZjMg-unsplash](//images.ctfassets.net/jird3gt7tktm/64aYBC7AQpqOlP6rq0bSfy/0e9e115e6e14af06d31042a2d6a09fe0/joshua-mayo-obJBg2lZjMg-unsplash.jpg)

### Things change 
I know from personal experience that life is not always easy. Things happen, and they have certainly happened for me since I adopted this structure and began investing. Nonetheless, whenever I felt myself slipping, I made the necessary adjustments to get back on track. In his book ["How to Consciously Design Your Ideal Future"](https://www.amazon.ca/Consciously-Design-Your-Ideal-Future/dp/1530227410) [Benjamin P. Hardy](https://medium.com/@benjaminhardy) compares life to flying a plane, where the winds constantly steer the plane in the wrong direction, requiring constant course correction in order to arrive at the right location. Although the destination of a financial journey varies from person to person, following the right process and developing the right habits will almost certainly show results get you there in the end.

### Conclusion 

I'm still puzzled as to why personal finance isn't taught in schools. I see far too many people who are well educated but completely clueless when it comes to personal finance management. In this article, I did my best to describe how I restructured my finances with the help of [Reddit](https://www.reddit.com) and [YouTube](https://www.youtube.com/), as well as some strategies I use to stay on track. Although I wish I had started taking my finances seriously and investing years ago, I'm glad I started when I did. I hope that by sharing my experience, at least one person reading this is inspired to improve their financial health and begin investing.
As the popular [Chinese proverb](https://www.psychologytoday.com/ca/blog/joy-and-pain/201504/the-best-time-plant-tree-was-20-years-ago-no-matter) says, the best time to plant a tree is twenty years ago, and the second best time is now.


towfiqu-barbhuiya-jpqyfK7GB4w-unsplash

How I Manage My Money

Last year, I came across the popular British YouTuber and productivity expert [Ali Abdaal](https://www.youtube.com/channel/UCoOae5nYA7VqaXzerajD0lg), and after consuming countless hours of his videos, I decided to start this blog to document my career as a software developer and now blog post writer. When looking up how to start a blog, almost every guide recommends using one of the many popular hosting platforms such as [Wix](https://www.wix.com/), [SquareSpace](https://www.squarespace.com/), or [Wordpress](https://wordpress.com/). Being in the industry of web development, I wanted to have full control over the code, features, and content of my blog. Therefore, I decided to go a different, more exciting route. In this blog post, I will share how I created [this blog](https://blog.mbcubeconsulting.ca/) using NextJS and Contentful, what I learned from it, and some of the mistakes I made along the way.

### NextJS
[NextJS](https://nextjs.org/) is a web development framework created by [Vercel](https://vercel.com/) and initially released in 2016. It builds on top of [Facebook](https://www.facebook.com/)’s extremely popular framework, [React](https://reactjs.org/), and adds useful new features. The most important feature of NextJs that makes it ideal for starting a blog is its ability to generate pages on the server when new content is added, which offers great performance without sacrificing [Search Engine Optimization](https://en.wikipedia.org/wiki/Search_engine_optimization). I had my eyes on NextJs for a while before deciding to start the blog, and once I learned about this feature, I decided this was the perfect opportunity. To learn more about the framework, I watched [Fireship.io](https://fireship.io/)’s quick start [video](https://www.youtube.com/watch?v=Sklc_fQBmcs), which does a great job of explaining all the important basics, and got started. 

![1 KDMx1YspSrBcFJG-NDZgDg](//images.ctfassets.net/jird3gt7tktm/6hHFeey9G9Pw75wFeHcKt2/631d0c142529d8a61ca94b77d376da98/1_KDMx1YspSrBcFJG-NDZgDg.png)

### Theme
From my experience working in many different teams on many different projects, as well as a number of personal projects, I learned to never waste time [reinventing the wheel](https://en.wikipedia.org/wiki/Reinventing_the_wheel). After the setup of the framework from the previous step was finished, I started looking for a pre-built blog template that I could use, and I landed on [this one](https://startbootstrap.com/theme/clean-blog) on the Bootstrap themes website. This template is [open-source](https://opensource.com/resources/what-open-source) under the [MIT license](https://opensource.org/licenses/MIT), meaning it’s free to use for any and all purposes for anyone who downloads it. Once I downloaded the source code, I started incorporating it into the NextJs architecture. The hardest part about this step was getting [Bootstrap](https://getbootstrap.com/) to work properly with NextJS, and for that I referred to this well-written [article](https://medium.com/nextjs/how-to-add-bootstrap-in-next-js-de997371fd9c) which illustrates multiple methods of installing it. I went with the first method since, in my opinion, it was the cleanest. In order to speed up my development process, I worked on the division of the theme’s static HTML into NextJS components using the dummy data that is provided in the template itself, without worrying about the content of the blog.

### Contentful
Once I finished implementing the [Bootstrap](https://getbootstrap.com/)  theme into the application, it was time to decide on the source of the data. My first instinct was to go with a document database such as [Firebase](https://firebase.google.com/docs/firestore), but this meant that I would have to spend a lot of time designing and implementing data models into the application. Additionally, adding new blog posts in the future would require creating [JSON](https://www.json.org/json-en.html) documents in the database, which is not very intuitive or exciting. For this reason, I decided to instead use [Contentful](https://www.contentful.com/). For those unfamiliar, Contentful is a content platform that combines an interactive and easy-to-use interface to model and create content with [powerful APIs](https://www.contentful.com/developers/docs/references/content-delivery-api/) to deliver the content to any application that needs it. Unlike Wordpress, where the backend content is tied to the front end code, Contentful provides the freedom to use any one or many front end technologies. Furthermore, Contentful provides a blog post content model that’s added by default.

![og-21](//images.ctfassets.net/jird3gt7tktm/lyfowYq5ZO83mL1Yh0GCT/bfb153daa4f7090d354c8ee7a2703aa2/og-21.png)

### Puting it all together
At this point, I had a few articles added to Contentful; all that was left was to update the NextJS application to retrieve and display the data. Since I had zero knowledge on how to get this done, I headed to the contentful [api documentation](https://www.contentful.com/developers/docs/references/content-delivery-api/) to find a starting point. The documentation was not easy to navigate, so instead I did some research on YouTube and I found [a guide](https://www.youtube.com/watch?v=m9mNsYJbkNg&list=PL4cUxeGkcC9jClk8wl1yJcN3Zlrr8YSA1) that does something very similar. The trickiest part to figure out was how to set up incremental static regeneration. ISR makes my life easier because when I add a new blog post on contentful, NextJS will automatically generate the page for it. As it turns out, all I had to do was to add a "revalidate" flag to the "getStaticProps" as explained in the videos and illustrated in the official NextJS docs.

### Hosting
The last challenge I had to face before going live with the blog was hosting. Naturally, my first instinct was to go with Firebase static hosting. After my first deployment, I quickly realised that static hosting wouldn’t work with ISR without additional tinkering. After a good deal of [research](https://dev.to/rowaxl/what-i-struggled-with-next-js-using-firebase-hosting-and-enable-ssr-4e67) and a couple of attempts, I conceded that this type of hosting won’t cut it and isn’t worth the time investment to get it to work. Instead, I opted to use Vercel's highly compatible and [free-to-start hosting](https://vercel.com/pricing) as an alternative. The reason I went with this is that it’s a fast and hassle-free way to get started. Furthermore, if the blog becomes more commercial in the future, I can easily transition to a [paid plan](https://vercel.com/pricing) or a [self-hosted](https://nextjs.org/docs/deployment) alternative.

![luke-chesser-JKUTrJ4vK00-unsplash](//images.ctfassets.net/jird3gt7tktm/2xh10F9Q5ax4rBWE4ahiz6/894e71bf1ec9320bb02a720e871aafe9/luke-chesser-JKUTrJ4vK00-unsplash.jpg)

### Conclusion
I started [this blog](https://blog.mbcubeconsulting.ca/) to document my journey as a [software consultant](https://mbcubeconsulting.ca/), and part of that journey is this blog itself, so it’s only natural that I write about it. This article explains at a high level how I chose NextJS to build the front end of the blog and Contentful as the back end source for the data, how I put everything together with the help of YouTube and NextJS documentation, and the solution I chose for hosting everything. In an upcoming blog post, I will create a quick start guide for anyone interested in deploying a similar blog. I will share the pre-configured NextJS code and data model for Contentful to make it.

bram-naus-n8Qb1ZAkK88-unsplash

How I started a blog using NextJS and Contentful completely free.

In a previous [article](https://betterhumans.pub/how-i-doubled-my-salary-in-4-years-as-a-software-developer-459ba6e1a274), I mentioned how to get better at coding, I like to do side projects to practice using frameworks different from those I use at work.This is one of those scenarios. While working on a mobile app that uses some data from [Contentful](https://www.contentful.com/), I noticed a lack of documentation on how to get started. In this post, I will go over how to setup [Contentful](https://www.contentful.com/) on a simple cross-platform app using the [Flutter](https://flutter.dev/) framework.

# Contentful

### Data Model
The first step is to [sign-up](https://www.contentful.com/sign-up/) for a contentful account and create a space. Once the space is setup, we create a content model and populate it with some dummy data.

![Screen Shot 2022-02-06 at 7.43.51 PM](//images.ctfassets.net/jird3gt7tktm/5IITPgclaJnyT02L7RwU0n/1f61a482a20a9f19dcf1abeb9f146bf2/Screen_Shot_2022-02-06_at_7.43.51_PM.png)
![Screen Shot 2022-02-06 at 7.53.57 PM](//images.ctfassets.net/jird3gt7tktm/3mpxEjzmIn1hWewTf5cKw1/8c2a95fc23c2e3b4678dd8d0153da650/Screen_Shot_2022-02-06_at_7.53.57_PM.png)

Refer to the [documentation](https://www.contentful.com/developers/docs/) for help with the platform.

### Data Model
The next thing we need to do on the contentful platform is to take note of the API keys. Under the __Settings__ tab we click on __Api keys__ and then select the available __Token Item__ from the list, or we click the __+Add API key__ button to generate one.

![Screen Shot 2022-02-05 at 10.02.18 PM](//images.ctfassets.net/jird3gt7tktm/01Iulevly1jrPZy5KGGDF1/85e1f14ce8984f8a0f4c9e06d5c89907/Screen_Shot_2022-02-05_at_10.02.18_PM.png)

The fields we need are __Space ID__ and __Content Delivery API — access token__.

# Flutter
### Dependency Setup

To set up Flutter, refer to the official documentation. Google has comprehensive guides on everything related to Flutter.
Once that’s done, the first thing we need to do is add a few dependencies to our Flutter project. We will do so by adding the following entries to the pubspec.yaml file:

~~~yaml
dependencies:
  flutter:
    sdk: flutter

  json_annotation: 4.3.0
  contentful: 3.0.5

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  build_runner: 2.1.4
  json_serializable: 6.0.0
~~~

### JSON serialization
Next we will create a new dart class to hold our contentful model. The structure of the model will reflect the response object from the Contentful api.

~~~dart
import 'package:contentful/contentful.dart';
import 'package:json_annotation/json_annotation.dart';

part 'product.g.dart';

@JsonSerializable()
class ProductContent extends Entry<Product> {
  ProductContent({
    required SystemFields sys,
    required Product fields,
  }) : super(sys: sys, fields: fields);

  static ProductContent fromJson(Map<String, dynamic> json) {
    return _$ProductContentFromJson(json);
  }

  Map<String, dynamic> toJson() => _$ProductContentToJson(this);
}

@JsonSerializable()
class Product {
  final String name;
  final String description;
  final int price;

  Product({this.name = '', this.description = '', this.price = 0});

  static Product fromJson(Map<String, dynamic> json) {
    return _$ProductFromJson(json);
  }

  Map<String, dynamic> toJson() => _$ProductToJson(this);
}
~~~

Notice how this file contains annotations from the __json_annotation__ dependency we imported earlier. This will allow us to serialise the response model we receive from the contentful api into a strongly typed dart object that can be used in our code. To read more about json serialisation in Flutter, refer to the following [article](https://medium.com/flutter-community/generate-the-code-to-parse-your-json-in-flutter-c68aa89a81d9).

To generate the __product.g.dart__ file we need to execute the following command:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`flutter packages pub run build_runner build`

### Contentful client

For the sake of this article, we will use a simple repository dart class to configure the HTTP client that will be used to connect to the Contentful API:

~~~dart
import 'package:contentful/client.dart';
import 'package:flutter_application_1/product.dart';

class Repository {
  Client contentful = Client(
    BearerTokenHTTPClient(
      '<access token>',
    ),
    spaceId: '<space id>',
  );

  Future<List<ProductContent>> getProducts() async {
    final collection = await contentful.getEntries<ProductContent>(
      {'content_type': 'product'},
      ProductContent.fromJson,
    );

    return collection.items;
  }
}
~~~

Our repository class uses the __Client__ and __BearerTokenHTTPClient__ classes from the Contentful library to instantiate the client object. For now, we use the client to retrieve the entries of __`content_type:product`__, which we created earlier, from the api.

### Widget

Now that we have the model and repository setup, we can move on to the widget to display that data. To achieve this, we will use the [FutureBuilder](https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html) widget from the flutter library.

In the __main.dart__ file, we will wrap the generated [Scaffold](https://api.flutter.dev/flutter/material/Scaffold-class.html) widget with a [FutureBuilder](https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html) and pass it our __getProducts__. Inside the [Scaffold](https://api.flutter.dev/flutter/material/Scaffold-class.html) we will replace the existing [Column](https://api.flutter.dev/flutter/widgets/Column-class.html) widget to display the result as follows:

~~~dart
// ...
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<ProductContent>>(
        future: Repository().getProducts(),
        builder: (context, snapshot) {
          var products = (snapshot.data != null) ? snapshot.data! : [];

          return Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: products
                    .map<Widget>(
                      (product) => Text(
                        'Product: ' +
                            product.fields!.name +
                            ' Description: ' +
                            product.fields!.description +
                            ' Price: ' +
                            product.fields!.price.toString(),
                      ),
                    )
                    .toList(),
              ),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: const Icon(Icons.add),
            ),
          );
        });
  }
// ...
~~~

### Result 
The last step is to run the app by executing the command:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`flutter run`

and the result should be as follows:

![Screen Shot 2022-02-06 at 7.04.00 PM](//images.ctfassets.net/jird3gt7tktm/5xq1Yblqby5QDUZwSuS7Jc/28c151942b05f617610a0d452e74a856/Screen_Shot_2022-02-06_at_7.04.00_PM.png)

# Conclusion

Flutter is a great framework for making cross-platform apps. There is a lot of documentation on how to get started and build apps relatively quickly.

Unfortunately, when I tried to load some data from Contentful for my project, I had a bit of trouble with it at first, and the official documentation wasn’t enough.

That is why in this article I briefly went over how to configure a contentful space with some dummy data, how to install the required dependencies on a flutter app, and how to code a simple repository to retrieve the dummy data and display it on the flutter app.

In a previous article, I mentioned how to get better at coding, I like to do side projects to practice using frameworks different from those I use at work. This is one of those scenarios...

contentful + flutter

Getting started with Contentful and Flutter

[Consumer Electronics Show (CES)](https://www.ces.tech) is the biggest technology convention of the year. Organized by the [Consumer Technology Association](https://www.cta.tech), it takes place every year in Las Vegas on the first week of January. CES registration opens a few months before and it is open to any corporation affiliated with the technology industry.
For me, CES was a great opportunity to dive into the startup world and experience the power of technology and innovation. At the same time, it was a great place to meet like-minded entrepreneurs and representatives of industry-leading corporations.
In 2022, I attended CES as an industry affiliate representing my own company, [MBCube Consulting Inc](https://mbcubeconsulting.ca). I got the chance to be at the forefront of innovation and connect with many professionals in the technology field and offer my services to a variety of international potential clients.

### Las Vegas
The saying "what happens in Vegas stays in Vegas" really captures the vibe of the city, or at least, that is the vibe I got from the week I spent there. From my first walk down the strip, it was clear to me that the city was all about entertainment. Luxury shopping malls, fancy restaurants, shows, casinos, etc. Everything in sight revolved around having a good time, and I certainly did. The only downside, however, is the cost. My time there was short but very expensive.

![DSC08853](//images.ctfassets.net/jird3gt7tktm/3YJtPTA2UmjPd0a9zzsSfp/ad20bb6f3076dd827af203eb5314b42f/DSC08853.jpg)

### The Convention
The convention was huge and [spread out](https://cdn.ces.tech/ces/media/pdfs/ces-2022-svm_oct20.pdf) across multiple convention centers and a couple of hotels throughout the city. Hotel halls were used as information centers and badge pickup desks. Most of the conference rooms were used for presentations, but some were used for various other services, like the PCR test clinic.
The main space used by CES is the [Las Vegas Convention Center (LVCC)](https://www.lvcva.com). This was where the biggest booths were setup inside the exhibition hall. The parking lot was also used for some booths and food trucks.

### Transportation
CES handled transportation very efficiently. First, there were free shuttle buses that went back and forth between every exhibition center and most of the major hotels on the Vegas strip and the convention centers. Second, there were dedicated taxi and Uber pickup and drop-off spots at the convention. Third, CES offered a discounted fare for the [Vegas Monorail](https://www.lvmonorail.com) that spans most of the Vegas strip. Last but certainly not least, to get from one end of the LVCC to the other, attendees could hop on a Tesla and ride through The Boring Company’s [hyper-loop tunnel](https://www.boringcompany.com/vegas-loop) that goes under the convention center.

![DSC08870](//images.ctfassets.net/jird3gt7tktm/1tlN6SQwHNAnTDqkoRR1wd/b6ec3d56d9b8be69356f63649afc519a/DSC08870.jpg)

### The Booths
On the show floor and all over social media and news outlets, the big guys are the stars of the show. Samsung, Sony, LG, and TCL all have massive booths filled with exciting new products. Sony brought back their [futuristic electric sedan](https://www.sony.com/en/SonyInfo/News/Press/202201/22-002E/) from the year before, accompanied by a sister SUV prototype. TCL had a lot of new TVs, but at the start of the show was a [98-inch QLED TV](https://www.tcl.com/us/en/products/home-theater/xl-collection/98-class-4k-qled-hdr-smart-google-tv-98R754). The Samsung booth was laid out like an on-site store for viewing new TVs, digital frames, and the newly announced Samsung projector. BMW was setup in the parking lot outside the LVCC with a demo of the futuristic, first-of-its-kind [color-changing SUV](https://www.theverge.com/2022/1/5/22867090/bmw-color-changing-paint-electric-car-ces).

In addition to the big booths, CES was also filled with plenty of startups who were there to advertise their products and technology. I had the opportunity to try and speak with a few of them:
- [Tineco](https://us.tineco.com) had some existing and new products to show.
- [Prinker](https://www.prinker.us) had a temporary tattoo device that instantly and safely prints any design directly on the skin.
- [Renpho](https://ca.renpho.com/) had a new set of smart bikes with an experience similar to Paleton.
- [Coway](https://cowaymega.com) had a bunch of new air purifiers on the show floor.
- [Lotte](https://www.lotte.co.jp/english/) had a VR booth where attendees could experience VR shopping and VR k-pop concerts.
- [Domotics](https://intellimedianetworks.com) had a web platform where users could shop for a house in a full VR experience.
I had a chat with people in all of these booths and many others. Everyone was very informative and friendly. It was a great opportunity to connect with all these professionals.

![C0085](//videos.ctfassets.net/jird3gt7tktm/1wpsPkKjKfJgm6oimfudvX/ca78c6d1c5fc384f8fc043c8719a9a5f/C0085.mov)

### Covid
January 22 was the peak of the [Omicron](https://www.who.int/news/item/28-11-2021-update-on-omicron) wave of the COVID-19 pandemic. Naturally, CES was also affected by that, but the organisers did their best to keep the situation [under control](https://www.ces.tech/Logistics/Health-Protocols.aspx). Face masks were required at every part of the convention. Hand sanitizer stations were installed at every entrance and inside the main halls. Additionally, CES provided every attendee with two boxes of at-home COVID test kits and encouraged the attendees to get tested daily before attending the convention. Furthermore, to ease travel stress, CES provided every attendee with a PCR test before travelling back home.

### Business
In each venue of CES, there is an area with private conference rooms and tables and chairs accessible to all attendees. I got the chance to use these areas to catch up on some work and for a couple of meetings with other attendees. The coffee and snacks were refilled throughout the day and were greatly appreciated. I wanted to include this part because I found it well thought out by the organizers.

![DSC08873](//images.ctfassets.net/jird3gt7tktm/TRWqFafgrD4Jfgaos0Sxb/f75160a58e6d13f08c37bb7da781944a/DSC08873.jpg)

### Conclusion 
In conclusion, my experience at CES was memorable, and the pandemic situation certainly made it unique. Las Vegas was very flashy and luxurious, and the hotels and casinos were lively and animated. I got to enjoy all parts of the convention and visit booths of different sizes. The transportation between each of the locations of the conventions was easy and convenient. Although [Omicron](https://www.who.int/news/item/28-11-2021-update-on-omicron) was wreaking havoc, CES did a great job of providing a professional and safe environment. Lastly, I got to meet many people and grow my professional network.

Consumer Electronics Show (CES) is the biggest technology convention of the year. Organized by the Consumer Technology Association, it takes place...

DSC08809

My Experience At CES 2022

Nowadays, the subject of salary is taboo in the corporate world; some companies even go the extra mile and include a clause in their employee contracts prohibiting them from [discussing](https://www.monster.com/career-advice/article/truth-about-discussing-your-salary) their salaries with their peers. Unfortunately, this is only beneficial to these companies because they often use it to pay some employees less than their colleagues who occupy similar positions. I have experienced this first-hand in my career. When I finished university a few years ago, I joined the workforce right away. My starting salary was in the mid-50k range, slightly below new hires at the time, simply because I didn’t negotiate as well as they did. This year — only four years later — I declined a job offer of 110k. Are my skills worth twice as much as they were four years ago? Certainly not!

In this post, I will share the process that got me to where I am today. Hopefully, my experience will help someone get the salary adjustment they deserve. Before proceeding, I want to highlight that, although the steps apply mostly to people in the IT industry, there are some lessons that apply to white collar work in general.

### I put myself out there
In order to increase the number of opportunities coming my way, I put myself out there. The best thing that worked for me was [LinkedIn](https://www.linkedin.com/feed/), but I also made profiles on other platforms such as [Indeed](https://www.indeed.com), [Guru](https://www.guru.com), and [Upwork](https://www.upwork.com). I made sure all my profiles were complete with all my education and experience details. LinkedIn has a rating system that helps; I made sure my profile was rated [“all-star.”](https://www.linkedin.com/pulse/how-achieve-all-star-status-linkedin-anda-lainez/) A detailed account increases visibility on these platforms and thus improves my chances of getting noticed.

### I worked with recruiters
For some reason, recruiters seem to have a bad [reputation](https://www.bvoh.com/why-recruiters-have-a-bad-reputation/) in the IT industry from what I have noticed. In contrast, my experience with them has been enjoyable and effective. I did start to receive a lot of messages on the platforms I was using, but I made sure my replies were clear and respectful. These recruiter interactions then became connections that allowed me to grow my network and improve my visibility. Furthermore, having a large network of recruiters made it much easier to call on them whenever I needed new opportunities.

![pexels-nappy-935977](//images.ctfassets.net/jird3gt7tktm/2LaJSl7dTb0uy1cv1pEcdF/42719aeb7c313df6556944debe7ac6ae/pexels-nappy-935977.jpg)

### I did a ton of interviews
The easiest way to get better at interviews is to do as many as possible. For me, this started at [university](https://www.concordia.ca/academics/co-op.html), where I had to do about 10 to 15 interviews every time I needed to do an internship. Even now, I make sure to do interviews whenever I can fit them into my day with minimal impact on my schedule. Interviews are a great opportunity to learn; you learn by preparing for them and during the interview. The most memorable interviews I’ve done are the ones where I failed miserably. The embarrassment of failing to answer questions in front of others made it so that once I learned the answer afterwards, it stuck with me. To this day, I can recite the difference between a stored procedure and a database trigger, yet I haven’t worked with an SQL database in over five years. Furthermore, the interviews I failed allowed me to hone in on the topics I was weak at and work to improve them if I wanted to.

### I learned more things
I focused on two areas to improve: the first being technical skills related to my work and the second being communication. For the technical aspect, I focused on learning from seniors in the field. I studied their processes and their code first-hand when I had the chance, and I asked them for reading recommendations. This wasn’t just limited to my senior colleagues, but also included people on [YouTube](https://www.youtube.com/fireship) or [LinkedIn](https://www.linkedin.com/search/results/all/?keywords=google%20developers&origin=GLOBAL_SEARCH_HEADER). Additionally, I practiced everything I learned by doing personal projects. This may sound intense, but it really wasn’t. From 30 minutes to one hour per day, I was working on some random idea that popped into my head to apply new concepts that I was excited about. As for the communication aspect, doing a ton of interviews helped with this because I was constantly communicating with recruiters, getting prepped for interviews, doing them and sharing what happened back with the recruiter. Also, I didn’t shy away from asking the recruiters to share any feedback they received from the interviewer about me.

### I received and declined some job offers
As a result of doing what I mentioned previously, I was receiving a few job offers per year. It was a rewarding experience because it proved that my process was working and that I was worth more than just the job I was occupying at the time. In the modern job industry, [job security](https://www.gallup.com/workplace/231587/millennials-job-hopping-generation.aspx) doesn’t hold the same value it did in past generations. Talent is scarce, and those who have advanced technical and interview skills are in high demand. Once I realized this, I wasn’t afraid to negotiate the job offers I was receiving and decline the ones I wasn’t interested in.

![pexels-fauxels-3184465](//images.ctfassets.net/jird3gt7tktm/6mMauiRG8iPKCBb5bxlC7z/b4fce6c06bd194730d9ff85f87a7af88/pexels-fauxels-3184465.jpg)

### I asked for a raise
This step was also a result of the one before. As I got used to receiving offers and releasing my worth outside of my job at the time, I wasn’t shy about negotiating a salary adjustment whenever the chance presented itself. If a yearly review was coming up, I would bring it up then, and if it was the middle of the year, I would just schedule a meeting with my immediate supervisor and ask. When negotiating, a few things that I think I did right and thus recommend are:
* I didn’t ask for a raise, but an adjustment. A raise implies 2%-6%, and an adjustment means more than 10%.

* I didn’t give ultimatums and I didn’t give a [price target](https://www.youtube.com/watch?v=u9BoG1n1948); I asked for a percentage instead.

* I did mention that I looked elsewhere and that I know how much I’m worth on the market, but I never specified the amount.

Every time I negotiated this way, I got what I asked for. What made the negotiation easy was that I was negotiating from a position of power. I knew I had the upper hand because what I was asking for was already within my reach. I just had to not rub it in the face of the person across from me.

### I left when I had to
Timing is important. Sometimes a company is facing budget cuts or other financial struggles that make them unable to give raises at the time. When I was faced with these situations, I had to make the hard decision to leave. It’s not always easy for everyone to just pack up and jump ship, but sometimes I had to in order to advance my career. Before switching jobs for the first time back in 2018, I asked a friend for advice on what I should do and he said, “just grow.” I took these seemingly simple words to heart as a way to live.Every big decision is an opportunity for growth, and only after can we reflect on whether it was the right decision to make and learn from the consequences.

To quote someone much better than me and with whom I resonate, Gary Vaynerchuk describes his decision-making process as follows: [“I make decisions because I want to know what’s going to happen, and then I use that information to help advise what I do next.”](https://medium.com/@garyvee/how-i-decide-what-to-do-3b25c4a27e42) In my career, I have changed companies four times in four years, and I don’t regret any of these decisions because I learned a great deal from each and every one of them.

### Conclusion
Looking back at my career today, I don’t regret any of the decisions I have made; none of the job offers I accepted nor the ones I declined. I put myself out there on [LinkedIn](https://www.linkedin.com/feed/). I went on many interviews. I continuously worked to improve my skillset. I received multiple offers, some of which gave me the confidence to adjust my salary at the time; others I respectfully declined; and a few were worth switching companies for. I managed to increase my salary by 15% every year, and I met a lot of colleagues throughout, some of whom are still my good friends today.

Nevertheless, there is more to career advancement than just money. Some people are comfortable gaining seniority within the same company and climbing the corporate ladder. I just personally decided to follow a different approach. I opted to grow my value independently from the companies I was working for, because ultimately, my goal was to reach the point where I could switch to contractual work. So when are you going to ask for a salary bump?

Nowadays, the subject of salary is taboo in the corporate world; some companies even go the extra mile and include a clause in their employee contracts prohibiting them from...

pexels-alexander-mils-2068975

How I doubled my salary in 4 years as a software developer

Before creating my company, I always thought that the process of incorporating was complicated, and reserved for highly qualified individuals. Fortunately, after watching a few YouTube videos and reading a couple of blog posts, it became clear to me that it’s not the case. In fact, registering a company is a straightforward process that anyone can follow. In this article I will share my experience on how I registered a corporation in Quebec (Canada), what I learned from it, and the mistakes I made along the way. Before I continue, I would like to point out that this article is for general information and entertainment purposes only. It is not legal or financial advice.

### Name reservation
The first step in creating a corporation is to come up with a name and register it. In some places, Quebec for instance, it is possible to register a corporation with just a number. In most other cases you will need to decide on a name, and depending on where you plan to register your business, there are [strict guidelines](https://www.registreentreprises.gouv.qc.ca/en/demarrer/definition-et-regles.aspx) to follow. In my case in [Quebec](https://www.registreentreprises.gouv.qc.ca/en/demarrer/definition-et-regles.aspx), I had to provide a three-part name which consists of, a generic and a specific component, followed by a particle. The name I registered is ‘MBCube Consulting Inc’. To register a name you need to make sure that no one else already owns it. To do so, you need to check in the official registry of your jurisdiction to see if the name is available. In my case, Quebec offers a paid [service](https://www.registreentreprises.gouv.qc.ca/en/sepf/services_ligne/la-constitution-et-la-continuation/S00429.aspx) for verifying and reserving the name.

### Registering the corporation
The process of registering the corporation will vary depending on where you plan to operate. In Canada there are two options: you can either register at the federal or the provincial level. There are a few key differences to keep in mind when deciding where and how to register. I found it easier to register at the provincial level and have the province provide my federal company number. This [article](https://www.thebalancesmb.com/provincial-versus-federal-2948230) covers the difference between provincial and federal registration in more detail. Furthermore, there are [service providers](https://www.incorpdirect.ca/Incorporations/) out there that offer to handle all your incorporation process for you for a fee, or you can consult with a lawyer to do the same thing.

![notebook image](//images.ctfassets.net/jird3gt7tktm/2ugjJvV81PUupNn44kKGEw/5b3418567940fde913502ae3e8235bf0/notebook_image.jpeg)

### The way I did it
In my case, I opted to register everything myself provincially in Quebec. I did so by following the steps provided in this [blog post](https://chalatilegal.ca/en/blog-how-start-a-business-in-quebec/) by a Quebec-based lawyer, and which I will briefly reiterate next:

Step 1: Choose Your Name 
This step was already covered in the name registration section above.

Steps 2 & 3: Prepare Your Articles of Incorporation & Constitute a Corporation
Using [this](https://www.registreentreprises.gouv.qc.ca/en/sepf/services_ligne/la-constitution-et-la-continuation/S00435a.aspx) service, by filling up the form, I could automatically generate and file the articles of incorporation.

Step 4: File Your Initial Declaration
As soon as the previous step was completed, I was redirected to a different form which guided me through the initial declaration.

Step 5: Obtain Your Sales Tax Numbers (GST/QST)
With my provincial company number in hand, I could register with [Revenue Quebec](https://www.revenuquebec.ca/fr/) and apply for my GST/QST tax numbers. Similarly, with the federal number I registered with the [CRA](https://www.canada.ca/en/revenue-agency/services/e-services/e-services-businesses/business-account.html).

Step 6: Create Your Minute Book
I have yet to create the minute book for my company; I consulted with my CPA and he confirmed that since I have only been in business for less than three months, I don’t have to worry about it yet.

I highly recommend reading the whole [post](https://chalatilegal.ca/en/blog-how-start-a-business-in-quebec/), it certainly saved me hours of research!

### Finding a professional
In an ideal world, the correct way to go about incorporating, is to consult with a lawyer to help register the business and an accountant to handle finances. In my case, my business of IT Consulting is fairly simple, so I didn’t feel the need to consult with a lawyer early on. However, I did consult with a CPA as soon as I received all my paperwork. The tax system is very complicated and Uncle Sam is not forgiving regarding taxes, so I didn’t take any chances. 

### Mistakes to avoid
The first mistake I made was when using the name registration and lookup service. I wrote one variation of the name I chose that didn’t follow the three component rule. The submission I made was for two variations ’MBCube Consulting Inc’ and just ‘MBCube’ plain. I thought that since one of the names satisfies the rules it should be enough. It wasn’t, and the lookup fee is not refundable.

The second mistake I made is more specific to the Quebec process of registration. After step 3 in the process above, there is a 48 hour time limit in which the initial declaration needs to be completed. Otherwise, the process is cancelled. Fortunately, in my case the registration fee was refunded to me.

### Conclusion
I wrote this article to share my personal experience with creating a company. In the past, I put too much weight on what it takes to own a business. But what my experience has taught me is that, in Quebec at least, creating and registering a corporation is as easy as creating a Facebook account. It can all be done online, and all it takes is a credit card and a couple of hours. The whole process can be done online and is interactive so the room for error is minimal. Nevertheless, while the process of registering a corporation is easy, it takes more than just a name on paper to generate revenue.

If I can end on one note is that, if an amateur independent consultant like myself managed to register a company and start doing business with minimal effort, anyone can! So what is your registered business name going to be?


Before creating my company, I always thought that the process of incorporating was complicated, and reserved for highly qualified individuals. Fortunately, after watching a few YouTube videos and...

MBCube - Blog