Forem: re4388

Let's practice Insert Sort (Javascript)

re4388 — Sat, 06 Aug 2022 01:10:52 +0000

Show me the code

let data = [8, 6, 10, 5, 3, 9, 2, 7, 4, 1]

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

    return arr


}
console.log(InsertSort(data))//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

key Idea

The tricky part of this algorithm:

Define a currentIdx variable, which is the index the latter will be compared to.
The second nested for-loop will have the j index and compare to the currentIdx.
Since currentIdx is already assigned to the current Index, i, so the j will be j-1, the previous one, we want to compare.
We compare two number side by side. This is part of how this algoritem works.
Finally, when the condition match (meaning the arr[currentIdx] < arr[j]), we swap and we need to dynamically rebind currentIdx to j. This is the essential part of this algorithm, which is going to find the previous index spot and swap (or "insert") them.
Tip: Try to google "insert sort animation" and have a visual idea of how the algorithm goes.

Git small tip: one way to handle conflict if you only need is the latest remote code.

re4388 — Tue, 02 Aug 2022 08:16:17 +0000

This trick I use time by time, and I want to share it with you.

Sometimes when I review someone’s code, the code got updated remotely. So I git pull, and I just found out there are a lot of conflicts, and it’s really hard to resolve these conflicts.

I don’t want to resolve those conflicts, and I just want the latest code! What can you do?

Maybe the easiest but also time-consuming way is to git clone the new repo again. I know the new repo will have the latest one and then I can switch to that branch.

And below is another way I learned and way quicker:
Since the problem is about the branch, so we can just remove the branch!

Firstly, we can just commit all changes whatsoever (regardless of the conflict, just clean up the git staging, and revert all changes).
Then we switch to master, and then remove this broken local branch. Finally, I can git pull again and switch back and get the latest update from that branch!

See the below snippet:

# just git commit all stuff whatsoever
git add .
git commit -m 'temp'

# go master
git checkout master 

# find the branch in case you want to copy paste the branch (beanch name could be lengthy)
git branch

# delete it
git branch -D branchName_1_2_3


# pull the latest one and check out to that brancg again, problem solved!
git pull 
git branch branchName_1_2_3

Let me know if you have other thoughts on this!
Thanks for reading!

Can you answer this simple JS async interview question?

re4388 — Mon, 01 Aug 2022 12:39:48 +0000

See the blow question:

const promise = new Promise((resolve, reject) => {
    console.log(1);
    resolve(5);
    console.log(2);
}).then(val => {
    console.log(val);
});

promise.then(() => {
    console.log(3);
});

console.log(4);

setTimeout(function () {
    console.log(6);
});

What will log out in order?

wait.

wait..

wait...

Okay.. here you are :)

Answer:

See this gist for answer

Explain:

We only need to remeber the prioirty is like this:
sync code -> micro tasks -> macro task

See this https://javascript.info/event-loop if you want to know why

First of all, What are the synchronous code runs in order?
1, 2, 4

Don't be fooled if you think the 1 and 2 inside the new Promise block is async code, these two console.log are sync code.

When we new up a new Promise, we immediately call those and only the resolve callback (and reject callback) are async.

Secondly, what are the mico tasks runs in order? 5, 3

Both of them are promise micro tasks and we know those belong to micro task

Finally, what's the macro task? 6

And that's the order!

const promise = new Promise((resolve, reject) => {
    console.log(1);   // <-- sync code 1
    resolve(5);
    console.log(2);   // <-- sync code 2
}).then(val => {
    console.log(val); // <-- micro code 1, log 5
});

promise.then(() => {
    console.log(3);   // <-- micro code 2
});

console.log(4);       // <-- sync code 3

setTimeout(function () {
    console.log(6);   // <-- macro code
});

That's it for today :)

This maybe all you need to know to use Google Keep efficenty!

re4388 — Sun, 31 Jul 2022 06:17:28 +0000

use ? to find the shortcut you want to use.
Remember that you can pin stuff to help you focus

think about something you want to see every time you open the note)
When you are in the browser, you can always use note.new to go to the Keep and open the new todo for you to type in!

Bonus: use ctrl+l to go to the address bar in chrome)
use hash # to manage your note by adding # at the bottom of the note

You can just create the tag first.
If you have another dimension that wants to categorize your notes, use color!

You then can use the below link to go to notes of the color.
https://keep.google.com/u/0/#search/color%3Dred

see the pattern? if you want to go to the yellow page, change the last 3 characters to yellow, like this: https://keep.google.com/u/0/#search/color%3Dyellow

Finally, if you are a more video learning person, check the below vid and I learn all from it!
The Author also has some very good tricks on other topics, I think it's worth checking those out :)
https://www.youtube.com/watch?v=-jCyuBLLcvs

Use Rxjs takeUntil to unsubscribe

re4388 — Fri, 19 Mar 2021 11:58:32 +0000

Why do we need to Unsubscribe?

The subscription will keep reference the component instance even after the component is destroyed if you DO NOT unsubscribe in some cases.

So, you have a piece of memory that is not be garbage collected (Memory leak).

Not Good. The app will slow down if we do a lot of this kind of thing.

Angular will help us to unsubscribe?

Yes, as I know, these are cases:

AsyncPipe
HTTP service
timer observable

Let me know if you know more cases :)

So, we need to unsubscribe on other cases

1. The more straightforward way:

You make a subscription, and you shall unsubscribe it.



export class MyClass implements OnInit, OnDestroy {
  private subscription: Subscription;
  timer$: Observable<number>;

  ngOnInit() {
    this.subscription = this.timer$.subscribe(t => console.log(t);
    )
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Pro? Easy to understand.
Con? You or others who work on the same code base might forget to unsubscribe.

2. The `takeUntil` way



export class MyClass implements OnInit, OnDestroy {

  private readonly unsubscribe$: Subject<void> = new Subject();

  timer$!: Observable<number>;

ngOnInit() {

    this.timer$

      .pipe(takeUntil(this.unsubscribe$))

      .subscribe((t) => console.log(t));

  }

ngOnDestroy() {

    this.unsubscribe$.next();

    this.unsubscribe$.complete();

  }

}

What `takeUntil` do?

I think this picture said it all!

z ball is like the above "Subject"

when z . next, ⇒ takeUntil will "Stop" the source Observable

As a result, the subscription method will "complete" when the unsubscribe$ subject emits

and when the unsubscribe$ subject emit? => When the component is going to destroy since ngOnDestroy will invoke before it's going to destroy

Pro?

The code inside ngOnDestroy is not going to touch again
when you subscribe, the declarative code make it explicit you made the unsubscription

Con?
I just think this logic is more complicated to understand. It required some knowledge to read code.

Actually, there's more ways to unsubscribe, and the reason I only introduce these two is because that the first one is the more simple-to-get one, and the second one the the one I had been seeing a lot in my working code base 😂

Let me know if you have questions. If you think I am not elaborate enough, feel free to see below links that I gathered for you :)