teleren/devto huggingface dataset:
Introduction to forms in Angular (Part 1)
Tags: angular, beginners
Published: 2022-10-05 19:50:07

### FormModule

One of the tools we have available to build forms in Angular is using FormModule, this module provides directive that can be used in the view in order to connect the data with the controller. The most common directive to achieve the previous description is ngModel.

### ReactiveFormModule

It is a more powerful module to build forms in Angular. 

In order to connect data from views to controller and vice versa, we can use FormControl class.

Using a FormControl class allows us to subscribe to changes in our form, for example when an input field is populated. Being subscribe to such events enables us to react in different ways in order to process our data.

Additionally, being subscripted to changes in the form data enables us to perform validations and implement observables to extend the behavior of the data flow, for example we can modify the data before is received by the controller or before sending the data to our backend.

```typescript
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
})
export class FooterComponent implements OnInit {
  emailField: FormControl;

  constructor() {
    this.emailField = new FormControl('', [
      Validators.required,
      Validators.minLength(4),
      Validators.maxLength(10),
      Validators.email,
    ]);
  }
  ngOnInit(): void {}
  registerMail() {
    if (this.emailField.valid) {
      console.log('processing subscription');
    }
  }
}
```

```javascript
this.emailField.valueChanges.subscribe();
```

Previous code can be use to listen on changes in the data.
Authentication using Firebase in Angular
Tags: angular, firebase, beginners
Published: 2022-10-05 19:48:08

### Adding firebase variables to our app

```typescript
export const environment = {
  production: false,
  url_api: '',
  firebaseConfig: {
    apiKey: '',
    authDomain: '',
    databaseURL: '',
    projectId: '',
    storageBucket: '',
    messagingSenderId: '',
    appId: '',
  },
};
```

### Importing firebase modules

```typescript
import { AngularFireAuthModule } from '@angular/fire/auth';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { environment } from './../environments/environment';

@NgModule({
//declarations
  imports: [
    //other modules
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule
  ],
  // providers: [],
  // bootstrap: [AppComponent],
})
export class AppModule {}
```

### Adding our fire module to an auth service

```typescript
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  constructor(private fireAuth: AngularFireAuth) {}

  createUser(email: string, password: string) {
    return this.fireAuth.createUserWithEmailAndPassword(email, password);
  }
  login(email: string, password: string) {
    return this.fireAuth.signInWithEmailAndPassword(email, password);
  }
  logout() {
    return this.fireAuth.signOut();
  }
  hasUser() {
    return this.fireAuth.authState;
  }
}

```

### Consuming our service in a login component

```typescript
  login(event: Event) {
    event.preventDefault();
    if (this.form.valid) {
      const value = this.form.value;
      this.authService
        .login(value.email, value.password)
        .then(() => {
          this.router.navigate(['/admin']);
        })
        .catch(() => {
          alert('Invalid credentials');
        });
    }
  }
```

### Bonus

The following commands are useful to deploy our to firebase

```bash
firebase init
ng build --prod
firebase deploy
```

The following lines can be added to firebase.json in order to avoid not found exception in case we want to go to an specific path directly in the browser.

```bash
"hosting": {
  // ...

  // Serves index.html for requests to files or directories that do not exist
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]
}
```
LIFT
Tags: angular, webdev
Published: 2022-10-05 19:41:51

# LIFT

4 principles that can guide our development using Angular

### Locate

We want to find or locate quickly a feature or piece of code in our project.

One way to achieve this is by organizing our code by features.

* app
  * about-us
  * contact-us
  * footer

### Identify

Recognize quickly the role a file has.

* header.directive.ts
* header.pipe.ts
* header.service.ts

### Flat

No more than 3 level of folders

### Try DRY

Try as much as you can Do not repeating yourself
JIT vs AOT
Tags: angular, javascript, beginners
Published: 2022-10-05 19:40:34

Just in time is a compilation technique used by angular in development time, It provides the browser with an Angular compiler so it can understands the code and executes it. This enables the ability of hot reloading, and speed coding up.

Ahead of time is used in production time, it does not provides a compiler for the code because in the building process everything is transformed to js css and html.

AOT is focused on performance, so it gives a very optimized code so that the browser does not spend to much time in parsing and compiles it.

AOT also provides an small size bundle, this is because the compiler is not included in the bundle.

AOT also reduced the requests for static files. For example, notice the following code.

```typescript
@Component({
  selector: 'app-products',
  templateUrl: './products.container.html',
  styleUrls: ['./products.container.scss'],
})
```

when we use JIT compilation, the html and css files are requested via HTTP so that app loading time is faster, this is done like that because basically client and static files server are in the same local machine. On the other hand when we use AOT this files are not included using http request but basically the compiler creates a string version of the files and it includes them in the bundle.

When executing AOT compilation, we have the benefit of getting errors report in case we are not implementing a method in the component definition. This reduces the risk of sending bugs to production.

And it is very nice that AOT also improves the security of our code by applying code obfuscation.

How do we make sure that our code is compiled using AOT ?? By making sure that in our angular.json file we have set the following properties

```typescript
"configurations": {
"production": {
  ...
  "aot": true,
  "buildOptimizer": true,
  ...
  }
}
```

## CORS

In order to avoid the CORS problem, we need to enable a feature in Angular that is going to be enable us performing request from different domains.
Worth to mention that this setting only works for development mode.

In order to achieve the previous behavior we will need to follow the following steps

1. Create a file in the root directory, the name of the file will be proxy.config.json

```json
{
  "/api/*": {
    "target": "https://example",
    "secure": true,
    "logLevel": "debug",
    "changeOrigin": true
  }
}
```

2. we create a new npm command for running the proxy mode

```json
{
  "start:proxy": "ng serve --proxy-config ./proxy.config.json"
}
```
Angular Environments
Published: 2022-10-05 19:36:48

# Environment

Angular has 2 built-in environments, but we can create our own environments.

### Steps to create new environment

Before starting it is recommended to run 

_**ng build  --prod**_

This step is very useful to identify any error in our code in terms of imports of modules or dependency injections. This process uses whatevery we have configured in our angular.json file. it is not recommended to modify configurations related with the built-in environments. If we detect some problem when running the build, we want to fix it before creating any nre environment.

1. Create a new ts file in our environment folder.
2. Open angular.json file and create a new key value pair value in the configurations object. This key will be the name of our new environment.The value of this pair is going to be all our configurations for our new environment.
3. Modify the key _**serve**_ from angular.json we add a new entry with the new of our new environment.
4. we can run the command _**ng serve -c=newEnv**_ or _**ng build -c=newEnv**_ to use our newly created environment file.
💩 Dans l'enfer de la dette technique 😱
Tags: technicadebt, programming, news, hacktoberfest
Published: 2022-10-05 19:27:40

🙋 Et vous, la #technicaldebt , c'est comment ❓

👌 C'est vous qui la gérez 🤗
💩 C'est elle qui décide de votre #stratégie en #urgence 😱

{% youtube If4EaIncsVE %}
Importance of Headings
Tags: a11y, testing, screenreader
Published: 2022-10-05 19:16:12

_Semantic structure is the foundation for accessible markup, as they properly convey information to the user through the accessibility API via screen readers._

Screen readers and other assistive technologies pay attention to the **DOM structure**. The way your content is structured defines how screen reader **users perceive your content**.

Headings have a **default styling**. If you're not happy with it, change the styling with CSS instead of using a different heading that has the style you want. 

When opening a web page, users without visual constraints can immediately absorb much of the information about the page layout without having to read the entire content.

Screen reader users, on the other hand, **must listen to the headings** (if they are well structured) to understand parts of the content. Therefore, it is important to **make the headings concise and informative**.

## Access headings with screen reader

Screen reader users use **keyboard shortcuts** to navigate through the heading structure of a document.

They can **list all headings**, as in a tree view or a flat list, depending on the screen reader, as well as sort the headings alphabetically or even display only headings at a particular level.

Screen readers allow the user to **navigate from one heading to the next**, or only to headings at a particular level.

![List of headings when using VoiceOver on MacOS in Safari.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfji15kp18vjhbtbfzot.png)

I am using VoiceOver on the MacBook Air. I tried it in Safari, Chrome and Firefox, it worked the same everywhere.

Methods| Screen Reader | Browser | Command
--- | --- | --- | ---
List all headings | VoiceOver | Safari | Control + Option + U (to open rotor*), then use upper/lower arrows to select a heading
Only show specific headings in list | VoiceOver | Safari | when in list, press 1-6 for the heading level to be filtered
Navigate from heading to next within page | VoiceOver | Safari | Control + Option + Command + H

_* with left/right key you can switch between lists, like links, forms, headings, etc._

![List only showing Headings Level 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rkohcvw2d11nx3idmqrr.png)

## Best practice

- Heading is accurate and informative
- Heading text is concise and brief
- Headings convey a clear and accurate structural outline of the sections of content of a web page
- Headings do not skip hierarchical levels
- Start the `main` content with an `h1` and only use **one** `h1` on a page
- **Bonus:** Right usage is also good for SEO 😉

### Exception to some of these points could be:

- **Modals/Overlays:** Could have "h1" which shouldn't be a problem as it will be displayed at the top of the main page and only the modal or main page should be available at any one time. 
- **Blog articles:** If you have multiple blog articles on a page, each title may be an "h1".
Where the Hell am I Going? Career Trajectories in Software
Tags: career, beginners, growth
Published: 2022-10-05 19:13:44

---
series: Career Trajectory
---
## Where I have been
I have spent my career helping other engineers whether through growing and leading teams, one on one mentorship, producing internal learning materials, or standing on my soap box with a megaphone.

Hopefully, I can boil things down into a series here on Dev.to that will be helpful to anyone trying to figure out where to start, how to grow, and where they want to be.

## What we'll be discussing
I'll start by presenting our Software Development Matrix. A simplified matrix designed to highlight core skillsets and experience levels.

Then we'll discuss what exists beyond this matrix, and how to break out of it.

This will start with more generalized concepts, resources, and strategies. 
Then each post may become more specific to various career paths and specializations.

### The Matrix has you
There is a lot of nomenclature that is tossed about when we discuss careers in tech. Especially in software development. A lot of terms are used interchangeably, but I will do my best to be specific and consistent.

For example:
- Coding/Coder
- Programming/Programmer
- Developing/Developer
- Engineering/Engineer

Combined with the typical `Junior`, `Mid`, `Senior` level indicators, we can combine these to make probably 80% of all job titles you might find posted.

Instead of Programmer, Engineer, and Developer being different titles, I'll present them as different skillsets that any individual can possess at different levels. _You can be a great programmer, but a terrible engineer._

This creates a matrix of skillsets and skill levels that I believe makes up the core of the software development workforce. It's fundamental that we understand this, understand where we are inside of it, and most importantly how to escape from it.

### T-Shaped People
[Page 46 of Valve's New Employee Handbook](https://cdn.akamai.steamstatic.com/apps/valve/Valve_NewEmployeeHandbook.pdf) describes the idea of T-Shaped people. We'll explore this concept, as it is a cornerstone in my strategy for escaping the matrix.

You can be the absolute best at all the skills within our matrix of software development, but that will not help you escape it.

## Questions for You
I'm going to wrap each of these up with questions for the community. Firstly, for my curiosity but also to guide what areas to approach in this series or where to put in more details.

Drop a comment with your answers.
And I will share mine in the next post.

1. Do you have an undergraduate degree in Computer Science, and do you feel it prepared you for your work?
1. Have you had a job that you felt made you better at what you do? Have you had one that left you feeling like you've gotten worse?
1. How much does your title matter to you? Would you take a better job with a "lesser" title?
Learning About the Ruby
Published: 2022-10-05 19:10:14

Learning about Ruby and HTML separately is one thing but when you have to figure out how to combine it together, it can get pretty dicey. As for today, we have learned how to embed the ruby syntax header into the HTML. 

For example, I remember the time when I learned how to write for rock paper scissors. In this file, it is normally supposed to be scissors.html. Since now we are also embedding  Ruby elements, I had got my first exposure to <% %> elements.  We can see that the syntax inside the <% %> are all Ruby elements otherwise the HTML would not be able to read them. And when we save a file like this, we also add scissors.html.erb as well to indicate we have added the Ruby elements. 

```
<% index = rand(3) %>

<% moves = ["rock", "paper", "scissors"] %>

<% comp_move = moves.at(index) %>

<% comp_move = moves.at(index) %>

<% if comp_move == "rock" %>
  <% outcome = "lost" %>
<% elsif comp_move == "paper" %>
  <% outcome = "won" %>
<% elsif comp_move == "scissors" %>
  <% outcome = "tied" %>
<% end %>

<h2>We played scissors!</h2>

<h2>They played <%= comp_move %>!</h2>

<h2>We <%= outcome %>!</h2>

<a href="https://rps-rcav.matchthetarget.com/">
```
Usability testing
Tags: productivity, testing
Published: 2022-10-05 18:28:18

Usability testing is a testing technique for evaluating how simple and user-friendly a software program is. The basic goals of usability testing are to determine how user-friendly a program is, how flexible it is with controls, and how well it can accomplish its goals. It is often conducted continually, from the early development stage until a product’s release.

objectives: 

1) Check whether testers can fulfill tasks successfully.

2) Monitor their performance, mental state, and to see how successfully software design works.

3) Monitor how much users love using it.

4) Identify any existing problems.

5) Discover solutions.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ow3mz6p5h5568okguvwv.png)
(Image Credit:www.balsamiq.com)

Although usability testing can aid in the creation of the best products, it shouldn't be the only resource for User Experience research. Having a plan, setting user tasks, recruiting testers, and Moderate testing make usability testing more effective.
THE FUTURE OF TECHNOLOGY SERIES: The Change Officer
Tags: ai, blockchain, bigdata, metaverse
Published: 2022-10-05 18:11:43

Brought to you in partnership with The Change Officer, The Future of Technology is an exclusive podcast series for Microsoft Reactor. In this 4-part series, we will delve into the hottest and latest technology that is shaping the future at an increasingly rapid pace. 

**Our primary aim with this series will be to demystify topics such as AI, blockchain, Big Data, and the Metaverse.** This will enable you to see clearly where the opportunities are, what the future holds, and how to take action.

To uncover these burgeoning opportunities and how we can capitalize on them, we are speaking to four remarkable industry experts to get their insider perspectives on the changes unfolding before us. 

If you want the full experience of the show, you can register for each individual session at the links below:

The Metaverse | Amrita Sethi, NFT Artist and Web 3.0 Entrepreneur: https://www.meetup.com/microsoft-reactor-mea/events/288917473/
 
Blockchain Technology | Talal Tabbaa, CEO of CoinMENA: https://www.meetup.com/microsoft-reactor-mea/events/288917491/

Big Data and Analytics | Hadeel Shubair, Regional Cloud Advocate at Microsoft: https://www.meetup.com/microsoft-reactor-mea/events/288917497/

Artificial Intelligence | Sari Hweitat, CEO and Co-Founder of Xina AI: https://www.meetup.com/microsoft-reactor-mea/events/288917519/
Building a Portfolio Website with React and ButterCMS
Tags: react, javascript, programming, webdev
Published: 2022-10-05 18:10:39

In this [tutorial](https://buttercms.com/blog/build-a-portfolio-website-with-react/), you'll learn how to use ButterCMS and React to create one of the most important assets for any developer, your portfolio.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4pk4tecmm2xrpspkt95.png)
Konfigurasi awal pada Neovim di Windows 11
Tags: beginners, tutorial
Published: 2022-10-05 18:06:24

### Persiapan

- Powershell/Windows Terminal/CMD
- Package Manager (dalam kasus ini saya menggunakan Winget)

### Langkah-langkah

- Install menggunakan Winget di Command Line Terminal kamu, gunakan perintah ini:

```
winget install Neovim.Neovim
```

- tambahkan Neovim PATH pada pengaturan Environment Variable. Sebelumnya salin terlebih dahulu alamat direktori Neovim yang sudah terinstall, biasanya ada di lokasi ini:

```
C:\Program Files\Neovim\bin
```
- Setelah menyalin, pergi ke pengaturan Environment Variable lalu klik pada tombol "Environment Variables..." 

![env1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9g8b9qjsg1iqcyzomfd.png)

> *Link untuk Wallpaper yang saya gunakan: https://wallhaven.cc/w/x86583*

- Pilih Path lalu klik Edit

![Env2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pfcmjtv02suzgmlxx9p.png)

- Klik New lalu paste alamat direktori Neovim tadi. Setelah itu, klik OK.

- Restart Command Line Terminal lalu buka kembali, ketik nvim dengan huruf kecil semua.

```
nvim
```
- Berhasil!
![nvim](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmdck05mr8meqmgmi8vk.png)
Hello, we are from Ukraine 🇺🇦
Tags: discuss, beginners, news, startup
Published: 2022-10-05 18:03:39


Our country needs help and we are forced to ask for it from everyone, as we were attacked by another big country under many false pretexts.
With the help of the Ukrainian stock exchange Kuna, we organized a charitable foundation with various goals for Ukraine, both to deter the aggressor, and to help the civilians of the country.
Now we are looking for investors around the world, everyone who is not indifferent to our common problem.
At the moment, our charitable foundation can only accept cryptocurrencies. We are already working on enabling card payments, but unfortunately, there are some problems with this now.
Our fund is new and there may be problems on the site, feel free to report it to support.
Also on the site we sometimes publish news in English. This is not our native language, but we try to make the content as high quality as possible with a translator.

Also, if you have the desire and opportunity - tell about our fund in other sources. It can be on your sites, your acquaintances, in video inserts and any other methods that are available to you. I am not forcing you to do this, it is just a desire that we all come to victory faster and restore peace.

Our website: [aid-ukraine.online](https://aid-ukraine.online/)

Thank you! ❤️
My Time At Flatiron School
Published: 2022-10-05 17:57:22

The past 15 weeks have been a whirlwind. I was, understandably, nervous about starting a bootcamp, but I don't regret it at all. My goal is to dive into each phase of the course and what I learned. While Phase 1 feels like a lifetime ago, I'll start there.

#### Phase 1: JavaScript
Phase 1 was tough simply because it was first. It was completely new to me, they threw a million different things at us, and it moved really fast. We learned how to write functions and manipulate the DOM in two weeks. *Note to self: go back and try that code challenge again.* I was lost for most of it, I felt like I was always behind, and the lectures seemed irrelevant. By the time week 3 rolled around and we had to create our first project, things started to click. It wasn't until phase 2, though, when I felt comfortable calling it "vanilla" JavaScript.

#### Phase 2: React
The moment we were introduced to React, my world turned upside down. I really struggled to understand JS, but now it made way more sense. We learned how to write JSX, update state, and build components. It made such a difference for me during the code challenge and project. During this phase, I really began to appreciate our instructors and their lectures. It finally clicked for me that lectures were one big "putting it all together lab" during this phase. 

#### Phase 3 and 4: Ruby and Ruby on Rails
I'm putting these together because they go together. Similarly to the transition from JS to React, going from Ruby to Rails made a lot of things make sense. In Ruby, we learned about SQL and object relational mapping (ORM), Sinatra, and Active Record. We learned how to make queries and create databases, but it wasn't until we got to Rails that we really took off. With Rails, we were able to do the same stuff as Ruby but faster and more efficiently. Which left room for higher level topics. We learned about user authorization and authentication, RESTful routing, and building a full-stack application with a React frontend and a Rails backend. 

#### Phase 5: Capstone Projects
The phase 4 project was special because it was a) our last group project, and b) our capstone would be very similar in size. Working on this project has been a rollercoaster between "I know exactly what I'm doing" and "what does that mean!?!?!" My cohort has developed a very tight relationship so we have helped each other out. It's been fun watching everyone create something they are proud of. 

As I get ready to present my project, I am filled with nostalgia. I said earlier that phase 1 feels like a lifetime ago. My life before that feels even farther. I am so glad I signed up for this program.