teleren/devto huggingface dataset:
Weekly Challenge 127
Tags: perl, theweeklychallenge
Published: 2021-08-29 06:03:53

[Challenge](https://theweeklychallenge.org/blog/perl-weekly-challenge-127/), [My solutions](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-127/sgreen)

## TASK #1 › Disjoint Sets

### Task

You are given two sets with unique integers. Write a script to figure out if they are disjoint.

The two sets are disjoint if they don’t have any common members.

### My solution

Not much to see here. I turn the first array into a hash (where the key is the inputs), and then use the any function from List::Util to see if any members of the second array are found in the hash.

### Examples

```
$ ./ch-1.pl "(1, 2, 5, 3, 4)" "(4, 6, 7, 8, 9)"
0

$ ./ch-1.pl "(1, 3, 5, 7, 9)" "(0, 2, 4, 6, 8)"
1
```

## TASK #2 › Conflict Intervals

### Task

You are given a list of intervals.

Write a script to find out if the current interval conflicts with any of the previous intervals.

### My solution

This is also a relatively straight forward task. We know that an interval conflicts with a previous one if the first number is less than or equal to the last number of a previous interval, and the end is greater than or equal to the first number of a previous interval.

I have two arrays. The first is `@sets` which stores the previous intervals as we see them, and `@match` which stores the intervals that conflict. I then print the values in the second array.

### Examples

```
$ ./ch-2.pl "[ (1,4), (3,5), (6,8), (12, 13), (3,20) ]"
[ (3,5), (3,20) ]

$ ./ch-2.pl "[ (3,4), (5,7), (6,9), (10, 12), (13,15) ]"
[ (6,9) ]
```
Improving Angular Application Performance - using TrackBy
Tags: angular, webdev
Published: 2021-08-29 07:04:58

Hi all, in this post, I will talk about how can you can improve the performance of the Angular application using trackBy in which you are using ngFor directive for displaying data and upon some user action we need to change some part of data.

When we just use ngFor directive where we need to change data it will cause the complete list to rerender and might affect application performance. So at that time, we should use trackBy implementation to make angular aware which among the data is old and which is the new addition.

We will see this with an example, full demo code can be referred to at [GitHub](https://github.com/nikhild64/trackby-example) and [Stackblitz](https://stackblitz.com/edit/trackby-example).

I this demo we have a list which we show via ngFor and a button with which we will add another item to the list.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w87f68napdvo9mrtt3gm.png)
And corresponding code is

```html
<div>
  <ul>
    <li *ngFor="let item of items; "> {{item.name}} </li>
  </ul>
</div>

<input type="button" value="Add Angular" (click)="addItem()">
```

```typescript
export class AppComponent {
  title = 'trackby-example';
  items: Item[] = [
    { id: 1, name: 'HTML' },
    { id: 2, name: 'CSS' },
    { id: 3, name: 'JavaScript' },
  ];
  addItem() {
    this.items = [
      { id: 1, name: 'HTML' },
      { id: 2, name: 'CSS' },
      { id: 3, name: 'JavaScript' },
      { id: 4, name: 'Angular' },
    ];
  }
}

```
so now if you open the chrome developer tool and focus on list items while clicking on Add button you will see, the whole list is rerendered on the screen(which can be seen when in dev tools we see highlighted rows that get rerendered as in the below image)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gw7wk8ypdgdovv9lnln9.png)
Now let us implement the trackBy function for this and see the difference.
The html code will changes will be
```html
 <li *ngFor="let item of items;trackBy:trackBy "> {{item.name}} </li>
```
and the code for this function in typescript will be
````typescript
trackBy(index: number, item: Item) {
    return item.id;
  }
```
So if you see here we are returning id in the trackBy function, which is something unique to the object in the array which helps Angular understand the uniqueness of each object in our case.
If you now relaunch the application and do the same activity you will be able to see that only a new object line is added without rerendering the old objects.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7qizx4hefxen0zwxcon.png)

Hope you were able to understand the concept of using trackBy and how it can help improve performance.
If you liked it please share it with your friends or if any suggestions reach me out on [Twitter](https://twitter.com/nikhild64) or comment below.
Till next time Happy Learning!

{% stackblitz trackby-example view=preview %}