teleren/devto huggingface dataset:
Ng-News: Issue 22/03
Tags: angular
Published: 2022-01-25 23:01:20

This is a weekly posting, covering the latest updates from the Angular community.

{% youtube rXCzPnVhIuc %}

## Performance Optimization in Angular with Minko Gechev

Angular's Youtube channel released a new video with Minko Gechev. Minko showed the major performance pitfalls that he has seen in Angular applications.

It can be that non-Angular JavaScript code, like a chart library, interfers with the change detection. Of course this is unnecessary but you have to find a way how to tell Angular.

It can also be that optimization features like change detection strategy `OnPush` don't have a big impact. This could be when you have a poor component composition.

How to fix that, and also how to deal with the Angular DevTools is covered in only 18 minutes.

{% youtube f8sA-i6gkGQ %}

## Alex Rickabaugh answering various questions about Angular

At AngularNation, Alex Rickabaugh, like Minko a member of the Angular core team, answered various questions. For example, he discussed the internal differences between dependency injection and providing components.

A very heavily discussed topic was also the future development of Server-Side Rendering. There we can expect some news later this year.

{% youtube xHtyU1kL3Lc %}

## Miscellaneous

### Cypress 9.3 and PrimeNg 13.1

Both Cypress and PrimeNg had a minor version upgrade. Cypress, for example, adds with `selectFile` a new command to upload files natively.

{% github cypress-io/cypress no-readme %}

{% github primefaces/primeng no-readme %}


### TypeScript Beta 4.6

There is also a beta version for TypeScript 4.6. The major change is that the `super` method in the constructor doesn't have to be the first command. By the way, you can already use TypeScript 4.5 in Angular.

[TypeScript Blog](https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-beta/)
Computer Systems Principles - Cp.1 Intro
Tags: systems, computerscience, c
Published: 2022-01-25 22:57:16

This is the blog helping myself to review the knowledge that I have went over. Hope you all enjoy my summary.

The knowledge is based on **C language**.


---

##Chapter 1: Computer Systems Structure



Before we dive into the deeper learning of computer system, the best way getting a comfortable start is to see the bigger picture of computer system structure. I think it is important for the beginner who just start learning Computer System or Operating System.

Just like a hamburger, which has different layers like piece of bread, vagetables, beef, cheese and so on, computer systems also are dive into different layers. 

Layers in hamburger:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzvcrw92ulp4h80gjye4.png)

Layers in Computer Systems: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8v3oyw5tqaxx9or2txz.png)

As we can see, computer systems could be divided into three big layers, which are: (Up to down)
1.Software Layers
 ```All kinds of applications that we use daily```
2.Operating System Layers
 ```Operating System -- A special application between software and hardware, which is used to transfer user's or applications' "codes" or "instructions" and then letting the hardware understand how to manipulate the menory.```
3.Hardware Layers
 ```Including CPU, disks, registers, RAM and so on.```

Specially, and generally we can divede them into five main components (based on every single component could be dived deeper to study at the following chapters)

1. Input/Output ports. (I/O ports)
 Enable the computer to take information or interations from its environment and dispaly them back to the user in some meaningful way.
 
2. Central processing unit. (CPU)
 Runs or executes instructions and computers data and memory addresses.

3. Random access memory (RAM)
 Stores the data and instructions of running programs. The data and instructions in RAM are typically lost when teh computer system loses power.

4. Secondary storage device (SSD)
 Hard disks or solid state drives (SSD) that can store programs and data even when power is not actively being provided to the computer.

5. Operating System (OS)
 A software layer that lies between the hardware of the computer and the software that a user runs on the computer.



--------------------------


Next chapter, I will go over the <Bit and Byte>, which is the basic knowledge in system, making you think like a computer. Hope you like it and subscribe it :)
Zondeando empleos
Tags: empleos
Published: 2022-01-25 22:30:41

Uno debe de revisar las ofertas laborales periodicamente y dedicarle unos minutos para hacer notas, acerca del salario, las nuevas tendencias en el mercado, etc.

Uno de los puntos importantes es ver que empresas tiene una alta rotación, por que quiere decir que hay algo que anda mal. Cualquiera que haya llevado alguna materia de administración sabe que la rotación de personal es costosa, por lo que la primer impresión es que tiene una pesima politica con la administración de recursos humanos.

Comparando salarios y puestos, nos daremos cuenta si estamos en la media, por encima o debajo. En el caso estar por debajo, haremos lo respectivo y solicitaremos un aumento, en caso de ser negado emprenderemos la partida a otra empresa.

Pero emprender la partida para otra empresa, es fácil solo hay que hacer unos cuantos pasos previos, como es la entrega de todo lo asignado, dispositivos y documentación. En el colectivo imaginario se entrega con dos semanas de anticipación, pero si una empresa te quiere dar de baja no te avisa con 15 días de anticipación solo te da de baja y ya. Por cierto alguna vez me paso que segun en mi contrato decia que tenia que avisar 15 días antes, pero en la ley federal del trabajo no indica nada de eso. Entonces dependera de tu relación con la empresa y la famosa carta de recomendación.

Esta actividad tambíen te hara hacer una retro, en cuanto a conocimiento, habilidades etc.

Regresando al punto inicial, de las empresas debemos de checar el giro, las actividades que realizan, buscar en internet como es el trato a sus empleados, instalaciones. Parece mucho a investigar, pero recuerda que 8 horas diarias minimo estaras sumergido en esa empresa.
Apa itu Variabel?
Tags: javascript, webdev
Published: 2022-01-25 22:20:18

Variabel adalah suatu nama atau label yang diberikan kepada suatu nilai yang akan disimpan. 

Kita bisa membayangkan nilai tersebut sebagai sebuah catatan di Microsoft Word. Ketika akan menyimpan, umumnya kita memberi nama pada file, agar kita dapat dengan mudah mencarinya di lain waktu.

Ini serupa dengan variabel. Kita juga bisa memberikan nama pada sebuah variabel dan menentukan nilai apa yang nantinya akan kita simpan. Nilai pada variabel biasanya kita sebut sebagai **data**.

## Mendeklarasikan variabel

Di dalam JavaScript, kita membuat variabel dengan mendeklarasikannya. Nah cara mendeklarasikan variabel adalah sebagai berikut:

```javascript
const a = "ini adalah data yang akan disimpan";
```

Kata `const` di atas adalah sebuah penanda bahwa data ini tidak akan pernah dan tidak akan bisa berubah.

Jika ingin menyimpan data yang nantinya akan kita rubah, kita dapat menggunakan keyword `let`.

```javascript
let b = "data ini nantinya akan dirubah";
```

## Cara memanggil variabel

Untuk menggunakan atau memanggil sebuah variabel sebenarnya mudah, kita hanya perlu menuliskan nama variabel tersebut. 

Misalnya kita ingin menjumlahkan nilai dari 2 variabel, maka sintaks (struktur kode) yang kita tulis adalah sebagai berikut:

```javascript
const a = 1;
const b = 2;

a + b; // Hasilnya adalah 3
```

## Data apa saja yang bisa disimpan?

Jika kamu menyadari, kita hanya menyimpan data berupa teks ataupun angka. Mungkin ada pertanyaan mengenai kenapa harus data tersebut yang disimpan dan kenapa tidak data yang lain?

Salah satu alasannya adalah karena JavaScript merupakan bahasa pemrograman yang isi di dalamnya berupa tulisan atau kode program. Maka data yang ada juga sudah pasti berupa tulisan.

Jika ingin menyimpan data lain seperti foto dan video, kita bisa menggunakan perantara _link_ seperti berikut:

```javascript
const dataLainnya = "https://images.unsplash.com/photo-1509718443690-d8e2fb3474b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80";
```

Ini akan menampilkan data berupa gambar sesuai dengan link yang diberikan.

## Kesimpulan

Dengan adanya variabel kita bisa menyimpan data yang bermacam-macam jenisnya seperti huruf, angka, atau bahkan logika. 

Pada artikel mendatang kita akan membahas apa saja jenis atau tipe data yang ada dalam JavaScript dan bagaimana cara menggunakannya. _Stay tune!_
What's your favorite Git tool?
Tags: discuss, git, productivity
Published: 2022-01-25 22:02:06

**What's your favorite Git tool/GUI or is the command line all you need?**

I've had enough of SourceTree crashing on me (Mac 😤) so much that it pushed me to write my first #discuss post on dev.to

<figure>![Sourcetree quit unexpectedly](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1vklw9r3id45zi7nmqo.png)
<figcaption>Sourcetree quit unexpectedly for daysss</figcaption></figure>
How to position and resize window that is opened by React
Tags: react, javascript
Published: 2022-01-25 21:52:18

When you start a React App, a browser window is opened to display the application's content. How can I change the position and dimensions of that window before it opens? I have tried window.moveTo(0,0) and window.resize(216, 985) within the componentDidMount method (older version of React) of the App.js file, but neither works. Please let me know if you have any other thoughts that does not require rebuilding the application using an additional framework or library.
Introduction to E2015 Set Objects
Tags: javascript, webdev, node, html
Published: 2022-01-25 20:30:51

## Introduction

Set objects are constructed using `new Set()`.

## Set object

A set is a “set of " unique values. Say you have a simple game and need to track the position of mouse clicks. You’d store every position in a set object. Duplicate values are discarded when an attempt to add the set object is made.

Sample code showing a simple `Set` object usage:

```typescript
function main() {
  
    const gameScreen = document.getElementById('game-screen')
    gameScreen.addEventListener('click' updateAction)

    const cursorPositions = new Set()
    function updateAction(event) {
      let position = {x: e.clientX, y: e.clientY}
      cursorPositions.add(position) // any duplicate values are discarded, which is ideal in this case
    }
    // use unique cursorPositions below
}

while(true) {
  main()
}
```

Duplicate values are discarded when added to a set. This is useful for capturing and storing unique values where duplicate values are not needed.

```typescript
const letters = new Set()
letters.add('A')
letters.add('B')
letters.add('A') // duplicate entry is ignored
console.log(letters) // Set {2} {'A', 'B'} 
```

## Summary
1. The set object provides a way of storing data where duplicate values are not required.

Note: Most languages including JavaScript offer a lot of language features but it’s not a good approach to try learning all these language features at a go. However, knowing they exist is enough as it helps one know where to look when the need arises.
Replacing Else statements for better coding
Tags: tutorial, programming, javascript, beginners
Published: 2022-01-25 20:16:10

How is it better to replace Else statements and how to do it?

Else is a decision that splits code in 2 pieces, opens up for 2 paths. When you add more than 1 decision, either at the same level or further down (nesting), then the paths are multiplied and this type of code is usually harder to understand and maintain. 

Why? Well, to me this is because logic, as conceived and implemented by a developer, is usually different than that of the next person who interacts with it. 

So why not make it easier to understand?

How? Basically 2 recommendations that sum up different approaches. Not exclusive, other practices could be applied to improve.

- Guard clauses
Create statements that exit the current flow of code when required and prevent the rest to be executed.
- Refactoring to smaller pieces of code
Reduce code complexity by creating small functions that are easy to understand.

References: 
- https://www.youtube.com/watch?v=EumXak7TyQ0
- https://www.youtube.com/watch?v=_ougvb8mT7k
Basics of Typescript Built-in Types
Tags: typescript, beginners, javascript
Published: 2022-01-25 20:13:26

Hello fellow Developers, recently I am learning Typescript and I want to share my knowledge and journey along the way.

##Basic Typescript Types

- Boolean
- Number
- String
- Array 
- Enum
- Void
- Null
- Undefined
- Never
- Any

##Type Annotations
Type annotation is a way to describe a variable type while declaration. 
```javascript
let name: string = "Anna";
name = 12; //returns error
```
Even if you don't annotate your variable, typescript infers your variable type on the base of the initial value.
```javascript
let city = "Islamabad"; //city is type string here
city = 12; //returns error
```
And prevents you the assigning any value that doesn't match with the initial value type.

##Union Types
Typescript allows you to assign more than 1 type to a variable which will result in a `union` type.
```javascript
const someVariable: string | number;
someVariable = "This is string"; //works perfectly
someVariable = 10; //works perfectly
```
Here `someVariable` can have a string value or a number value.

##Type Assertions
Type assertions are used when you are getting dynamic value in your variable and then you need to perform some operation on it.
```javascript
let fixedString: string = (<number>num).toFixed(4);
```
Here with `<number>` you are asserting the type of `num` variable as a number. In other words, you are telling your code `num` variable should have a number type.
There is another way to do it.
```javascript
let fixedString: string = (value as number).toFixed(4);
```

##Conclusion
In this blog, you learned about Typescript built-in types. How to Annotate and Assert variables in Typescript and last but not least How to create Union Types in Typescript.

Feel free to connect on [Twitter](https://twitter.com/Aneeqa_Khan25)
Distributed Q&A for developers
Tags: webdev, programming, discuss, news
Published: 2022-01-25 20:04:50

Today I am releasing a new site and I would love to hear your feedback (this is the official release post).

The name of the project is LinkAnswers and it's a different kind of Q&A for developers:

> **Write the answers on your domain and then add a link to it.**
> **Unlike traditional Q&A, we give back to the contributors** 🥰
> https://linkanswers.com

Anyone can post a question, like a normal Q&A, however you can write the answers on your domain and then add a link to it.

Basically it's a Q&A that wants to give something back to contributors.

Personally I am in the top 1% of StackOverflow and despite all the time spent on the site, I get basically nothing from there.

It would be nice to have at least some visitors and organic traffic to your website... 

In this way you can promote yourself, whether you are an agency, freelancer or SaaS provider. 

So...

## What is LinkAnswers?

LinkAnswers is a distributed Q&A for developers.

Unlike a traditional Q&A, you can post the answers on your domain and then add a link to it.

## Why LinkAnswers?

Using LinkAnswers you own the answers that you write and you get more visibility.

Whether you are a freelancer or a company, you deserve a compensation for helping the community. Your website has your branding and you can show that you are a trustworthy authority and promote your services and products. Showing off your expertise on specific topics can be a great way to gain trust and new customers.

Currently the most popular Q&A benefit from your contributions (and make big money), but don't give anything back. It's time to create a more balanced ecosystem.

We also care about creating a more welcoming ecosystem, without downvotes and aggressive moderators.

## How can I reply to a question?

You can simply write a post on your website and then add a link to it on LinkAnswers.

The questions are released under a permissive license (CC BY) and you can copy and adapt them if you want. Otherwise you can simply mention the original question with a link: 

> **Question**: _Example question_

You can post your answers on any domain, like a blog (e.g. `blog.example.com`) or a dedicated domain (e.g. `answers.example.com`).

## Do you like this project?

I know that there's still a lot to do, but the basic website is ready and fully functional.

Please let me know what you think and if you like the idea [sign up now →](https://linkanswers.com/users/sign_up)

**You can also post a question or a link to your answers (on your domain 🎉) right now.**
Where am I now in web development?
Tags: programming, webdev, career
Published: 2022-01-25 19:59:22

So, approximately 3 years ago I posted my first [entry](https://dev.to/handmadegod/javascript-framework-to-jump-from-angularjs-----14ck) which tackled the question of what should I go next on my web developer career. 

At the time, I had finished a mid-size project with my employer, with the opportunity to choose a tech stack, design and develop the architecture of the application. It was an SPA developed with AngularJs and ASP.NET Web API REST endpoints to interface with production services on a shop-floor application. I cannot say it was the best job on the whole dev team, but considering the level of success, it did pretty good.

Anyway, new challenges were arising and it was obvious that a choice had to be made: Angular or React. Why? because that's the way JS web frameworks evolve right? Having more than 10 years using .NET ecosystem of tools and apps, it seems like it is more of a corporate environment that moves slowly, compared to the new JS frameworks surging every few months.

Well then, after all this time the result was that now Angular is my weapon of choice for web development. And there where a few attempts with React (nothing really for "production"). 

Hopefully, these days the Angular community seems to me stronger than ever (that seemed as a weak point before, compare to other options).

I don't think it's necessary to debate wether or not it was a good decision, whatever happens is experience and something to learn. So now the next step is to take this experience and continue the journey. It's still just the beginning.
Why you should launch your first version of your software product within 2 months? 
Tags: product, startup, leadership, ai
Published: 2022-01-25 19:52:20

The reason why I believe that a startup should always prioritize in releasing their product early (In most startups) are

1. While developing the product, the company should focus on the problem and come up with a simple solution that can solve that issue very efficiently.

2. After the release there shall be 2 week sprints to evaluate the market need. 

3. Having traction in the early stages points to the need of your solution. This feeling of creating something a user wants will give you both motivation and income.

4. Having a business plan early is an advantage

5. Fail fast or Succeed. Sometimes it takes more than one idea to solve a problem.

6. Build a solution that people would spend money on.

Add more thoughts in the comments
Installing software with winget & automating installation with PowerShell
Tags: winget, apps, powershell, script
Published: 2022-01-25 19:38:22

Windows released a new command line tool in 2021 for installing software called `winget`. I recently got a new computer at work, so it was a good opportunity to try it out, and my verdict is: *wow, it's really good!*

Using [this PowerShell script](https://gist.github.com/dougwaldron/d510f2d67a922da169aca1aeff7e4c4d), within about 10 minutes I had installed over 30 applications with no interaction needed from me. <small>(I based my script on one originally created [by Chris Ayers](https://gist.github.com/Codebytes/29bf18015f6e93fca9421df73c6e512c))</small>

Here's a quick tutorial on using `winget`:

* Winget comes pre-installed on new computers, but if you don't have it, just install the [App Installer](https://www.microsoft.com/en-us/p/app-installer/9nblggh4nns1) from the Microsoft Store.

* `winget list` shows all applications you currently have installed and labels which ones are available through winget. This is a good way to prepare your own setup script, especially if you're planning to get a new computer.

    ![Screenshot of `winget list` results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnlzz6u5xdkt52e9y00q.png)

* `winget search <name of app>` to find out if an app you want can be installed through winget.

    ![Screenshot of `winget search "google chrome"` results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58yfnwq5f8wygy81ve56.png)

* `winget install` and `winget uninstall` do exactly what you think.

You can install each app separately using those commands. Or if you want to use the script to automate it, here's how to do that: 

1. Edit the [`InstallSoftware.ps1`](https://gist.github.com/dougwaldron/d510f2d67a922da169aca1aeff7e4c4d#file-installsoftware-ps1) file to include the apps you want.
2. Start PowerShell as administrator.
3. If running scripts is blocked (it should be), you can temporarily unblock them by running `Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope Process`
4. Run the script and enjoy!


![Screenshot of PowerShell script installing software](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fja549ezd2wgdk62y5jt.png)
Why I prefer tailwindcss over styled-components?
Tags: react, tailwindcss, css, javascript
Published: 2022-01-25 19:36:48

![tailwindcss vs styled-components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lyeysqzk3x49ie310n3.jpg)
_On the left with styled-components and on the right the same code using tailwindcss._

These are the reasons why I believe using **tailwindcss** is better than using styled-components:

1. **I don't need to name things** especially classnames (`.welcome .mention`) and components (`DivStyled`) every time I want to add styles.
2. **I don't need to search for the styles**. It is colocated to the HTML/JSX so I can the see that the div has a border black of 1px, it's explicit. And if there are too many utility classes, I can just store them in a variable.
3. **I don't need to maintain CSS declarations**. If I remove the element with the classname `.mention`, I will have not forget to remove the styles I declared in `DivStyled`. Here  `.mention` styles are declared below but what if it is declared in the parent element that is in another file?
4. **I don't need to create a design system**, tailwindcss has amazing default settings (spacings, colors, etc.). If I have to use my own custom design system, I'll just have to declare it in `tailwind.config.js` and I'll use as if it's normal (check out this video: https://youtu.be/cZc4Jn5nK3k)
5. **It urges me to use coherent spacings.** I won't do any pixel perfect integration because I'll have to use `text-lg` (18px), `text-xl` (20px), etc. And if I ever need to be precise then I'll use arbitrary styles