DEV Community: Tato Petry

[Angular] Testing Native Browser Objects

Tato Petry — Thu, 25 Jul 2024 02:53:45 +0000

The Problem

Imagine you're building an Angular application and need to redirect the user to an external site, like the website of the American grunge band Pearl Jam. A common way to do this is by manipulating the window object. For example, you might have a function that changes the window.location.href to redirect the user:

redirectToPearlJam() {
  window.location.href = 'https://pearljam.com';
}

Now, how do we test this?

Testing the Redirect Function

Testing code that manipulates the window object can be tricky since window is a global browser API. But don't worry, there are solutions! Here are some tips to do this in a straightforward way.

1. Using Jasmine Spy

The first solution is to use Jasmine spies to monitor and intercept calls to window.location.href. Here’s how to do it:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your-component';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should redirect to Pearl Jam website', () => {
    spyOn(window, 'open');
    component.redirectToPearlJam();
    expect(window.open).toHaveBeenCalledWith('https://pearljam.com');
  });
});

2. Mocking Window Object

Another way is to create a mock of the window object to use in tests. We can do this by injecting window into the component:

export function windowFactory() {
  return window;
}

@NgModule({
  providers: [
    { provide: 'Window', useFactory: windowFactory }
  ]
})
export class AppModule { }

And in the component, we use the injected object:

import { Inject, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class YourService {
  constructor(@Inject('Window') private window: Window) {}

  redirectToPearlJam() {
    this.window.location.href = 'https://pearljam.com';
  }
}

In the test, we can create a mock of window:

import { TestBed } from '@angular/core/testing';
import { YourService } from './your-service';

describe('YourService', () => {
  let service: YourService;
  let mockWindow: { location: { href: string } };

  beforeEach(() => {
    mockWindow = { location: { href: '' } };

    TestBed.configureTestingModule({
      providers: [
        YourService,
        { provide: 'Window', useValue: mockWindow }
      ]
    });

    service = TestBed.inject(YourService);
  });

  it('should redirect to Pearl Jam website', () => {
    service.redirectToPearlJam();
    expect(mockWindow.location.href).toEqual('https://pearljam.com');
  });
});

3. Assigning Mock to Component Variable

Another approach is to create a variable inside the component that holds the window object. In the tests, we can assign a mock to this variable. Here's how to do it:

In the component, add a variable for window:

export class YourComponent {
  private window: Window;

  constructor() {
    this.window = window;
  }

  redirectToPearlJam() {
    this.window.location.href = 'https://pearljam.com';
  }
}

In the test, we replace the component’s window variable with a mock:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your-component';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;
  let mockWindow: { location: { href: string } };

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    mockWindow = { location: { href: '' } };
    component['window'] = mockWindow;  // Assign the mock here
    fixture.detectChanges();
  });

  it('should redirect to Pearl Jam website', () => {
    component.redirectToPearlJam();
    expect(mockWindow.location.href).toEqual('https://pearljam.com');
  });
});

Conclusion

Testing code that interacts with the window object in Angular might seem complicated, but with these strategies, it becomes much easier. Using Jasmine spies, creating a mock of window, or using a component variable for the window object are effective approaches that will help you keep your tests clean and functional.

[Angular] Probando Objetos Nativos del Navegador

Tato Petry — Thu, 25 Jul 2024 02:47:48 +0000

El Problema

Imaginá que estás creando una aplicación Angular y necesitás redireccionar al usuario a un sitio externo, como el sitio de la banda de grunge estadounidense Pearl Jam. Una forma común de hacer esto es manipulando el objeto window. Por ejemplo, podemos tener una función que cambia el window.location.href para redireccionar al usuario:

redirectToPearlJam() {
  window.location.href = 'https://pearljam.com';
}

Ahora, ¿cómo probamos esto?

Probando la Función de Redireccionamiento

Probar código que manipula el objeto window puede ser complicado, ya que window es una API global del navegador. Pero tranquilo, ¡que hay solución! Aquí van algunos tips para hacerlo de una forma sencilla.

1. Usando Jasmine Spy

La primera solución es usar los spies de Jasmine para monitorear e interceptar llamadas a window.location.href. Veamos cómo hacer esto:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your-component';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should redirect to Pearl Jam website', () => {
    spyOn(window, 'open');
    component.redirectToPearlJam();
    expect(window.open).toHaveBeenCalledWith('https://pearljam.com');
  });
});

2. Mocking Window Object

Otra forma es crear un mock del objeto window para usar en las pruebas. Podemos hacer esto inyectando window en el componente:

export function windowFactory() {
  return window;
}

@NgModule({
  providers: [
    { provide: 'Window', useFactory: windowFactory }
  ]
})
export class AppModule { }

Y en el componente, vamos a usar el objeto inyectado:

import { Inject, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class YourService {
  constructor(@Inject('Window') private window: Window) {}

  redirectToPearlJam() {
    this.window.location.href = 'https://pearljam.com';
  }
}

En la prueba, podemos crear un mock de window:

import { TestBed } from '@angular/core/testing';
import { YourService } from './your-service';

describe('YourService', () => {
  let service: YourService;
  let mockWindow: { location: { href: string } };

  beforeEach(() => {
    mockWindow = { location: { href: '' } };

    TestBed.configureTestingModule({
      providers: [
        YourService,
        { provide: 'Window', useValue: mockWindow }
      ]
    });

    service = TestBed.inject(YourService);
  });

  it('should redirect to Pearl Jam website', () => {
    service.redirectToPearlJam();
    expect(mockWindow.location.href).toEqual('https://pearljam.com');
  });
});

3. Asignando Mock a la Variable del Componente

Otra estrategia es crear una variable dentro del componente que guarda el objeto window. En las pruebas, podemos asignar un mock a esta variable. Así es como se hace:

En el componente, agregá una variable para window:

export class YourComponent {
  private window: Window;

  constructor() {
    this.window = window;
  }

  redirectToPearlJam() {
    this.window.location.href = 'https://pearljam.com';
  }
}

En la prueba, sustituimos la variable window del componente por un mock:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your-component';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;
  let mockWindow: { location: { href: string } };

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    mockWindow = { location: { href: '' } };
    component['window'] = mockWindow;  // Asignamos el mock aquí
    fixture.detectChanges();
  });

  it('should redirect to Pearl Jam website', () => {
    component.redirectToPearlJam();
    expect(mockWindow.location.href).toEqual('https://pearljam.com');
  });
});

Conclusión

Probar código que interactúa con el objeto window en Angular puede parecer complicado, pero con estas estrategias, se vuelve mucho más fácil. Usar spies de Jasmine, crear un mock de window o usar una variable en el componente para el objeto window son enfoques eficaces que te ayudarán a mantener tus pruebas limpias y funcionales.

[Angular] Testando Objetos Nativos do Navegador

Tato Petry — Thu, 25 Jul 2024 02:44:52 +0000

O Problema

Imagine que você está criando uma aplicação Angular e precisa redirecionar o usuário para um site externo, como o site da banda de grunge americana Pearl Jam. Uma forma comum de fazer isso é manipulando o objeto window. Por exemplo, podemos ter uma função que muda o window.location.href para redirecionar o usuário:

redirectToPearlJam() {
  window.location.href = 'https://pearljam.com';
}

Agora, como a gente testa isso?

Testando a Função de Redirecionamento

Testar código que manipula o objeto window pode ser complicado, pois o window é uma API global do navegador. Mas calma, que tem solução! Aqui vão algumas dicas para fazer isso de uma forma tranquila.

1. Usando Jasmine Spy

A primeira solução é usar os spies do Jasmine para monitorar e interceptar chamadas ao window.location.href. Veja como fazer isso:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your-component';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should redirect to Pearl Jam website', () => {
    spyOn(window, 'open');
    component.redirectToPearlJam();
    expect(window.open).toHaveBeenCalledWith('https://pearljam.com');
  });
});

2. Mocking Window Object

Outra forma é criar um mock do objeto window para usar nos testes. Podemos fazer isso injetando o window no componente:

export function windowFactory() {
  return window;
}

@NgModule({
  providers: [
    { provide: 'Window', useFactory: windowFactory }
  ]
})
export class AppModule { }

E no componente, vamos usar o objeto injetado:

import { Inject, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class YourService {
  constructor(@Inject('Window') private window: Window) {}

  redirectToPearlJam() {
    this.window.location.href = 'https://pearljam.com';
  }
}

No teste, podemos criar um mock do window:

import { TestBed } from '@angular/core/testing';
import { YourService } from './your-service';

describe('YourService', () => {
  let service: YourService;
  let mockWindow: { location: { href: string } };

  beforeEach(() => {
    mockWindow = { location: { href: '' } };

    TestBed.configureTestingModule({
      providers: [
        YourService,
        { provide: 'Window', useValue: mockWindow }
      ]
    });

    service = TestBed.inject(YourService);
  });

  it('should redirect to Pearl Jam website', () => {
    service.redirectToPearlJam();
    expect(mockWindow.location.href).toEqual('https://pearljam.com');
  });
});

3. Atribuindo Mock à Variável do Componente

Outra abordagem é criar uma variável dentro do componente que guarda o objeto window. Nos testes, podemos atribuir um mock a essa variável. Aqui está como fazer isso:

No componente, adicione uma variável para o window:

export class YourComponent {
  private window: Window;

  constructor() {
    this.window = window;
  }

  redirectToPearlJam() {
    this.window.location.href = 'https://pearljam.com';
  }
}

No teste, substituímos a variável window do componente por um mock:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your-component';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;
  let mockWindow: { location: { href: string } };

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    mockWindow = { location: { href: '' } };
    component['window'] = mockWindow;  // Atribuímos o mock aqui
    fixture.detectChanges();
  });

  it('should redirect to Pearl Jam website', () => {
    component.redirectToPearlJam();
    expect(mockWindow.location.href).toEqual('https://pearljam.com');
  });
});

Conclusão

Testar código que interage com o objeto window no Angular pode parecer complicado, mas com essas estratégias, fica bem mais fácil. Usar spies do Jasmine, criar um mock do window ou usar uma variável no componente para o objeto window são abordagens eficazes que vão te ajudar a manter seus testes limpos e funcionais.

[Angular][pt] Desinscrições no Angular: Quando e por quê usar?

Tato Petry — Fri, 05 Jul 2024 14:10:41 +0000

Introdução

Nos meus 6 anos trabalhando com Angular, uma pergunta recorrente que vejo aparecer, mesmo de devs com menos experiência, é: "Eu preciso me desinscrever aqui?"

A resposta é: sim, na maioria dos casos. Mas nem sempre é tão simples assim. Neste artigo, quero entender quando e como usar as desinscrições no Angular.

O que é desinscrição e por que é importante?

Em resumo, desinscrever-se de um observable significa parar de receber notificações dele. Isso é crucial para evitar vazamentos de memória e garantir que seu aplicativo Angular funcione de forma eficiente.

Imagine que você se inscreve para receber uma revista semanal com ofertas de um supermercado local. Essa revista é muito útil enquanto você mora perto do mercado, pois te mantém atualizado com as melhores promoções. Porém, se você se muda para outra cidade onde esse mercado não existe, continuar recebendo essa revista se torna desnecessário e só lota sua caixa de correio com conteúdo que você não vai usar. Nesse caso, é melhor cancelar a inscrição para evitar receber informações irrelevantes.

No Angular, os observables funcionam de maneira semelhante. Quando você se inscreve em um observable, você está basicamente pedindo para receber notificações sempre que algo novo acontecer. Se você não precisa mais dessas notificações, é importante se desinscrever para evitar que o observable continue enviando notificações desnecessárias, o que pode levar a vazamentos de memória.

Quando me desinscrever?

Sempre que você não precisar mais das notificações do observable. Por exemplo, se você está buscando dados para uma tela e, em seguida, navega para outra tela, não precisa mais das notificações do observable da tela anterior.
Quando o componente que está criando a inscrição for destruído. Isso geralmente acontece automaticamente quando você navega para outra tela, mas é importante verificar se há casos em que isso não acontece e, se necessário, desinscrever-se manualmente no ngOnDestroy do componente.

Como me desinscrever?

Existem diversas maneiras de se desinscrever de um observable no Angular. Aqui estão alguns dos métodos mais comuns:

1. Usando o método `unsubscribe()`

Esse é o método mais básico e direto. Você pode armazenar a referência à inscrição em uma variável e chamá-la quando não precisar mais das notificações.

const subscription = myObservable.subscribe(data => {
  console.log(data);
});

// ... algum tempo depois ...

subscription.unsubscribe();

2. Usando o operador `takeUntil()`

Esse operador permite que você se desinscreva de um observable quando outro observable for concluído. Isso é útil em situações em que você deseja se desinscrever de um observable principal quando um observable secundário for concluído.

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

const subject = new Subject();

const subscription = myObservable.pipe(
  takeUntil(subject)
).subscribe(data => {
  console.log(data);
});

// ... algum tempo depois ...

subject.next();

3. Usando bibliotecas de terceiros

Existem diversas bibliotecas de terceiros que podem te ajudar a gerenciar desinscrições de forma mais fácil. Uma biblioteca popular é o ngx-unsubscribe.

Desinscrição automática com bibliotecas nativas do Angular

Algumas bibliotecas nativas do Angular já fazem a desinscrição automaticamente. É o caso do HttpClientModule e do Router. Isso significa que você não precisa se preocupar em se desinscrever das solicitações HTTP ou das alterações de rota.

HttpClientModule

O HttpClientModule desinscreve automaticamente das solicitações HTTP quando a requisição é concluída ou quando o componente que fez a requisição é destruído.

Router

O Router desinscreve automaticamente das alterações de rota quando a navegação é concluída ou quando o componente que está escutando as alterações de rota é destruído.

O async Pipe

O async pipe é uma maneira conveniente de lidar com observables no template do Angular. Ele automaticamente se inscreve no observable e se desinscreve quando o componente é destruído. Isso ajuda a evitar vazamentos de memória sem precisar escrever código de desinscrição manual.

Exemplo de uso do `async` pipe:

<div *ngIf="authService.isLoggedIn$ | async as isLoggedIn">
  <p *ngIf="isLoggedIn">Você está logado!</p>
  <p *ngIf="!isLoggedIn">Você não está logado.</p>
</div>

Neste exemplo, isLoggedIn$ é um observable exposto pelo serviço AuthService. O async pipe se inscreve nesse observable e atualiza automaticamente o template com base no seu valor atual.

E os observables do Reactive Forms?

No caso dos observables do Reactive Forms, a desinscrição geralmente não é necessária. Isso porque esses observables são gerenciados internamente pelo Angular e são desinscritos automaticamente quando o componente é destruído.

Exemplo Prático: Usando `valueChanges` e Desinscrição em um Componente de Login

Vamos ver um exemplo prático de como usar a desinscrição em um componente de login simples. No nosso exemplo, vamos usar o operador takeUntil para nos desinscrever quando o componente for destruído e também monitorar as mudanças de valor dos campos de entrada.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { AuthService } from '../auth.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit, OnDestroy {
  loginForm: FormGroup;
  private unsubscribeSubject = new Subject<void>();

  constructor(private authService: AuthService, private router: Router) { }

  ngOnInit(): void {
    this.loginForm = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.email]),
      password: new FormControl('', [Validators.required])
    });

    // Monitorar mudanças de valor usando valueChanges
    this.loginForm.valueChanges
      .pipe(takeUntil(this.unsubscribeSubject))
      .subscribe(changes => {
        console.log('Form value changed:', changes);
      });
  }

  ngOnDestroy(): void {
    this.unsubscribeSubject.next();
    this.unsubscribeSubject.complete();
  }

  onSubmit(): void {
    const { email, password } = this.loginForm.value;

    this.authService.login(email, password)
      .pipe(
        takeUntil(this.unsubscribeSubject) // Desinscreve quando o unsubscribeSubject for emitido
      )
      .subscribe(
        () => {
          // Login efetuado com sucesso
          this.router.navigate(['/']);
        },
        (error) => {
          // Erro no login
          console.error(error);
        }
      );
  }
}

Neste exemplo, além de usar o operador takeUntil para desinscrever-se do observable de login quando o componente for destruído, também monitoramos as mudanças de valor do formulário usando valueChanges. Isso garante que as mudanças de valor sejam registradas enquanto o componente está ativo e paradas quando o componente é destruído.

Resumo

Neste artigo, vimos que as desinscrições são cruciais para evitar vazamentos de memória e garantir que seu aplicativo Angular funcione de forma eficiente. Abordamos os seguintes tópicos:

O que é desinscrição e por que é importante?
Quando me desinscrever?
Como me desinscrever?
Desinscrição automática com bibliotecas nativas do Angular
O async Pipe
E os observables do Reactive Forms?
Exemplo prático: Usando valueChanges e Desinscrição em um Componente de Login

Espero que este artigo tenha te ajudado a entender melhor o conceito de desinscrições no Angular e como aplicá-lo em seus projetos.

Dicas Extras:

Sempre que você criar uma inscrição em um observable, pense em como você vai se desinscrever dela.
Utilize ferramentas como o Angular DevTools para inspecionar as inscrições em seus componentes e identificar possíveis vazamentos de memória.
Adote bibliotecas de terceiros como o ngx-unsubscribe para facilitar o gerenciamento de desinscrições em seus projetos.

Lembre-se: desinscrever-se é uma prática essencial para o desenvolvimento de aplicativos Angular robustos e eficientes.

Guia de estudos Desenvolvedor front-end

Tato Petry — Wed, 18 Aug 2021 20:17:27 +0000

O que é desenvolvimento front-end?

Desenvolvimento front-end corresponde a todo desenvolvimento voltado a camada de cliente da aplicação, ou seja a camada de interface que interage diretamente com o usuário.

Para que serve o front-end?

O front-end serve principalmente para facilitar a interação de usuários com aplicações, construindo interfaces que facilitem ao usuário a manipulação das aplicações.

Imagina se ainda hoje usássemos sistemas operacionais comumente o MSDOS que obrigariam os usuários comuns a aprender e decorar comandos para poder utilizar suas aplicações? O windows e sua interface gráfica cheia de janelas intuitivas é um bom exemplo da importância do front-end principalmente para a popularização da informática como conhecemos hoje.

Ok, mas o que preciso saber pra me tornar um desenvolvedor front-end?

Hoje em dia as tecnologias mais utilizadas para desenvolvimento front-end são as tecnologias web(HTML, CSS, Javascript), principalmente por serem utilizadas em desenvolvimento para as mais diversas plataformas, podemos criar sistemas que rodem desde desktop até apps mobile usando essas tecnologias e por isso são hoje as mais buscadas no mercado.

Mas eu nunca fui bom de matemática, será que eu consigo programar?

As pessoas ainda associam programar com um conhecimento muito avançado de matemática, ou acham que são incapazes de aprender pelos mais diversos motivos, isso é uma grande mentira qualquer pessoa disposta pode aprender e se tornar um bom profissional na área.

Isso quer dizer que é fácil? Não! É uma área que exige muito estudo, exige atualização constante, exige muita dedicação e que tem muito conteúdo a se aprender.

Se essas características não são um problema pra você, apesar de não ser um profissão fácil é uma profissão que tem bons salários(principalmente pra padrões de brasil) e atualmente em 2021 cada vez se tornam mais necessários profissionais de tecnologia.

Mas então o que eu preciso estudar? Por onde começo? Aonde eu foco?

Um dos grandes problemas, principalmente pra quem começa a estudar por conta e não saber aonde focar os estudos já que tem muito material, muito conteúdo disperso e fica bem complicado de se guiar sem ter uma noção da área, exatamente por isso a existência desse guia.

1 - Git Github

Git é uma ferramenta de versionamento de código bastamente utilizada na área de TI, Github é um site que abriga codigos git e oferece diversas ferramentas de trabalho pra facilitar a vida principalmente de equipes de desenvolvedores.

Aqui um ponto polêmico, geralmente as pessoas não recomendariam começar pelo git mas se você já tem algum conhecimento de informática e tem uma certa facilidade eu recomendo, pois vai te ajudar muito no desenvolvimento dos seus estudos nas demais tecnologias, você vai poder guardar seus códigos no github utilizando ele como "nuvem" e conforme avança nos seus estudos nas demais tecnologias vai colocando seus conhecimentos no git em prática.(Lembrando que nessa área a prática é muito importante).

Lembrando que entender o git não é tão trivial então se estiver com dificuldade não deixe isso ser um impeditivo no seu desenvolvimento, pule o git e pode partir pra HTML e CSS tranquilamente.

Recomendações cursos gratuitos

Guanabara tem uma ótima didática pra iniciantes na área recomendo principalmente para aqueles com menos conhecimento em informática e tecnologia.

Curso gratuito de git do curso em video professor Gustavo guanabara
Rafaella Ballerini tem uma abordagem mais prática e direta, recomendo para aquelas pessoas que já tem um pouco mais de familiaridade com a tecnologia.

O QUE É GIT E GITHUB? - definição e conceitos importantes 1/2

COMO USAR GIT E GITHUB NA PRÁTICA! - desde o primeiro commit até o pull request! 2/2

2- HTML & CSS

HTML, CSS e javascript são a base da web, eu gosto da analogia de corpo humano pra explicar os 3, imaginemos que o html é o esqueleto que estrutura o corpo e dá sustentação, o CSS são os musculos e a pele que dão a aparência ao corpo e javascript é o que da vida, controla os comportamentos, faz movimentos... etc.

Nesse caso vamos focar em HTML e CSS pq não são examente linguaguens de programação e são diretamente ligadas em si.

Html é o que chamamos de linguagem de marcação, que consiste em tags para marcar semanticamente um documento através de tags e CSS é uma linguagem de estilo que vai transformar aquele documento em algo mais visual.

Pq iniciar com HTML & CSS e deixar o javascript de lado primeiramente? Pq são paradigmas diferentes e mesmo só com HTML e CSS já conseguimos construir sites estáticos e ver a evolução do nosso trabalho. Inclusive podemos publicar facilmente sites dessa forma no github, só pesquisar no google sobre "GH-PAGES", inclusive nunca tenha medo de pesquisar no google uma das skills importantes de um desenvolvedor e saber pesquisar no google, principalmente em inglês.

Recomendações cursos gratuitos

Um curso bem legal do Chief of Design aborda pontos bem interessantes tem uma boa didática.
Curso gratuito de html & css do Chief of design
Mais um do Curso em video com o professor Gustavo Guanabara, se não entrar pelo link eu recomendo o novo curso(existe um mais antigo no curso em video), esse do link é mais atualizado.

Curso gratuito de HTML & CSS do curso em video professor Gustavo guanabara
Aqui um curso um pouco diferente e em inglês, esse consiste em prática, chama-se FreeCodeCamp, infelizmente só tem em inglês mas eu recomendo muito fazer a trilha de Responsive Web Design deles, além de praticar bastante tem bons desafios no final que podem servir de portfólio no futuro. (Um truque aqui pra quem tem dificuldade no inglês, use o translate do google pra facilitar entendimento dos enunciados, se por acaso traduzir a página, lembre-se de tirar a tradução na hora de escrever e submeter o código)

Free code camp trilha "Responsive Web Design Certification"

3- Javascript

Aqui chegamos na linguagem de programação, a principal ferramenta de um desenvolvedor frontend e por isso essa é a parte do nosso programa de estudos que devemos olhar com mais carinho, não ter uma boa base de javascript pode te trazer boas dores de cabeça no futuro, principalmente para aqueles que querem pular essa etapa e ir direto para os frameworks.

A dica aqui é praticar, procure exercícios de lógica e pratique bastante principalmente a manipulação de arrays e objetos.

Recomendações cursos gratuitos

Curso curto do canal node studio, tem uma diática bacana e explica muito bem

Curso de Javascript
Mais um do Curso em video com o professor Gustavo Guanabara, se não entrar pelo link eu recomendo o novo curso(existe um mais antigo no curso em video), esse do link é mais atualizado.

Curso gratuito de HTML & CSS do curso em video professor Gustavo guanabara
Aqui um curso um pouco diferente e em inglês, esse consiste em prática chama-se FreeCodeCamp, infelizmente só tem em inglês mas eu recomendo muito fazer a trilha de Responsive Web Design deles, além de praticar bastante tem bons desafios no final que podem servir de portfólio no futuro. (Um truque aqui pra quem tem dificuldade no inglês, use o translate do google pra facilitar entendimento dos enunciados, se por acaso traduzir a página, lembre-se de tirar a tradução na hora de escrever e submeter o código)

Free code cap trilha "JavaScript Algorithms and Data Structures"

4- Frameworks

O mercado front-end hoje em sua imensa maioria trabalha com frameworks javascript, entendo que aqui o conhecimento sobre as principais ferramentes do trabalho frontend já esteja consolidado e no momento para de fato se inserir no mercado seu objetivo seja aprender a usar uma das ferramentas que facilitam o desenvolvimento, chamadas de framework.
Existem diversas ferramentas pra isso, mas hoje(2021) as mais populares e mais queridinhas do mercado são com certeza Angular, react e vue.
Essa é uma escolha que precisa ser pessoal de cada um, então aconselho que pesquise sobre e escolha a que mais se identifique ou até a que te de melhores chances de ser empregado, lembrando que se sua base de JS for boa você consegue aprender qualquer uma delas com certa facilidade, depois só é nescessário se aprofundar, pra conhecer a fundo as "libs" e ferramentas mais usadas de cada framework.

Recomendações cursos gratuitos

Curso de angular da Loiane Gronner, um curso enorme e muito completo e que entra a fundo em diversos aspectos do framework, inclusive começa em uma versão do framework e termina em outra. Recomendo muito, um dos melhores materiais que já vi sobre o framework e gratuito.

Curso Angular
Para react eu infelizmente não consegui um curso estruturado do inicio ao fim que realmente gostei do framework mas deixo o canal da rocketSeat, que sempre tem bons materiais sobre e sempre solta bootcamps, inclusive bem nivelados para quem quer aprender esse framework. Deixo tambem o link pra trilha de Front end development libraries da freeCodeCamp que abrange react.

Canal RocketSeat

Free code cap trilha "Front End Development Libraries"
Um excelente curso e vue3 do Matheus Battisti, tem uma excelente didática e domina bastante o framework.

Curso de Vue 3

5- Mãos a Obra

Agora que já tem bastante conhecimento consolidado é hora de por os conhecimentos em prática e criar seu portfólio, criar projetos que te coloquem em uma situação de desenvolvimento real de criar um produto, cometer diversos erros e aprender com eles, pois isso é uma das coisas que vai te fazer um bom desenvolvedor.

Como eu sei que esse é o momento que muita gente trava sem ter ideia do que fazer, vou deixar esse link pro repo do Felipe Fialho com desafios reais de front end, que algumas empresas pedem.

Front-end Challenges

Outro desafio é criar uma página pra listar dados consumidos de uma api, temos diversas apis públicas que podem ser usadas pra esse fim, deixo aqui algumas sugestões.

Pokeapi: Não pode faltar uma api de pokemon

AdvicesSlip: Retorna conselhos geniais...

FunTranslations: Traduz textos para linguas exóticas

rickandmortyapi: pra quem curte rick & morty

chucknorris: Api de piadas do chucknorris

Pesquisando pela internet da pra achar muitos outros exemplos de acordo com o que preferir.

Se você chegou aqui, cumpriu esse plano de estudos com certeza já tem capacidade de andar com as próprias pernas e se desenvolver sozinho a partir daqui, espero ter ajudado de alguma forma e que seus objetivos tenham sido alcançados.

Angular Reactive Forms Custom Validators[Português]

Tato Petry — Mon, 15 Mar 2021 10:43:34 +0000

Quando trabalhamos com reactive forms, temos a disposição diversos validators já existentes que vão nos auxiliar na maioria dos nossos casos de uso, mas em diversos momentos necessitamos de validadores customizados, por conta disso esse artigo é para ajudar as pessoas na construção de validadores customizados para suas aplicações.

Os validadores são funções que recebem um form control, verificam se o mesmo corresponde a determinada condição, caso a condição para o form ser válido esteja correta ele retorna um nulo, caso contrário ele retorna um objeto com a chave representando o tipo de validação e um valor true.

Um exemplo de uma função de validação, simples que faz a validação de telefone:

 phoneNumberValidator(control: AbstractControl): { [s: string]: boolean } {
   const phone = control.value;
   if (phone) {
     if (phone.length == 10 || phone.length == 11) {
       return null;
     } else {
       return { phoneNumberValidator: true };
     }
   }
 }

Aplicando o validador:

 createForm() {
   this.form = new FormGroup({
       'phone': new FormControl(null, [phoneNumberValidator.bind(this)])   
});

Esse é um caso simples de um validador extremamente comum em vários formulários, mas imaginem um caso em que eu tenho 2 campos de data em um formulário, data inicial e data final e eu preciso validar se a data final não pode ser anterior a final, como fazer esse validator se eu preciso dos 2 campos para a função?
Nesse caso podemos usar o validator no próprio FormGroup já que a função recebe um AbstractControl como parâmetro.

Um exemplo de como ficaria a função de validação:

dateOrderCustomValidator(control: AbstractControl) {
   const startDate =  control.value['startDate'];
   const endDate =  control.value['endDate'];
   if (startDate && endDate) {
     if (startDate >= endDate) {
         return { orderDateInvalid: true };
       } else {
         return null;
       }
     } else {
       return null;
     }
 }

Aplicando o validador:

createForm() {

   this.form = new FormGroup({ 

     'startDate': new FormControl(null),
     'endDate': new FormControl(null)

   }, [this.utilsService.dateOrderCustomValidator.bind(this)]);

 }

Acredito que com esses dois exemplos fique um pouco mais claro, como criar validadores customizados para suas aplicações, os erros podem ser acessados no objeto do formcontrol através da chave errors usando a chave que foi atribuída ao objeto de resposta como identificador.

Exemplo:

<div *ngIf="form.get('phone').errors.phoneNumberValidator">
 Número de telefone inválido
</div>

Essa é uma maneira simples e rápida para construir e usar validators custom dentro do angular com reactive forms, podemos usar também a interface ValidatorFn como fica especificado na doc do angular aqui.

Outra sacada interessante para quando se trabalha com validadores customizado é ter um serviço próprio para as funções de validação assim sempre que necessitar de um validador que já foi criado, é só injetar aquele serviço e fazer uso da função de validação.

DEV Community: Tato Petry

[Angular] Testing Native Browser Objects

The Problem

Testing the Redirect Function

1. Using Jasmine Spy

2. Mocking Window Object

3. Assigning Mock to Component Variable

Conclusion

[Angular] Probando Objetos Nativos del Navegador

El Problema

Probando la Función de Redireccionamiento

1. Usando Jasmine Spy

2. Mocking Window Object

3. Asignando Mock a la Variable del Componente

Conclusión

[Angular] Testando Objetos Nativos do Navegador

O Problema

Testando a Função de Redirecionamento

1. Usando Jasmine Spy

2. Mocking Window Object

3. Atribuindo Mock à Variável do Componente

Conclusão

[Angular][pt] Desinscrições no Angular: Quando e por quê usar?

Introdução

O que é desinscrição e por que é importante?

Quando me desinscrever?

Como me desinscrever?

1. Usando o método unsubscribe()

2. Usando o operador takeUntil()

3. Usando bibliotecas de terceiros

Desinscrição automática com bibliotecas nativas do Angular

HttpClientModule

Router

O async Pipe

Exemplo de uso do async pipe:

E os observables do Reactive Forms?

Exemplo Prático: Usando valueChanges e Desinscrição em um Componente de Login

Resumo

Dicas Extras:

Guia de estudos Desenvolvedor front-end

O que é desenvolvimento front-end?

Para que serve o front-end?

Ok, mas o que preciso saber pra me tornar um desenvolvedor front-end?

Mas eu nunca fui bom de matemática, será que eu consigo programar?

Mas então o que eu preciso estudar? Por onde começo? Aonde eu foco?

1 - Git Github

2- HTML & CSS

3- Javascript

4- Frameworks

5- Mãos a Obra

Angular Reactive Forms Custom Validators[Português]

1. Usando o método `unsubscribe()`

2. Usando o operador `takeUntil()`

Exemplo de uso do `async` pipe:

Exemplo Prático: Usando `valueChanges` e Desinscrição em um Componente de Login