Forem: Richard Manzoli

Extensões do Visual Studio Code para um Front-end

Richard Manzoli — Wed, 13 Sep 2023 01:36:17 +0000

Hoje vim trazer extensões do Visual Studio Code que eu uso e que me ajudam muito no dia a dia, esse post foi inspirado no post Extensões do Visual Studio Code para um SRE da Laryssa Araujo onde ela mostra as ferramentas que ela usa no dia a dia como uma SRE.

Não vou falar sobre todas as extensões que eu tenho instalado aqui, tenho algumas para mexer com Elixir/Phoenix, Docker e etc... vou falar apenas das que eu mais uso e que me ajudam no dia a dia como Front-end.

Auto Rename Tag: Essa extensão é muito útil para quem trabalha com HTML, ela renomeia a tag de abertura e fechamento automaticamente, evitando que você tenha que ficar renomeando as tags manualmente.
Code Spell Checker: Essa extensão é muito útil para corrigir erros de digitação, ela verifica a palavra e mostra se existe algum erro de digitação, exemplo quando escrevemos lenght ao invés de length, que acontece muito comigo.
Brazilian Portuguese - Code Spell Checker: Essa extensão é uma extensão da extensão anterior, ela adiciona um dicionário de palavras em português, para que a extensão anterior possa verificar as palavras em português.
Svg Preview: Essa extensão mostra uma prévia do SVG direto no VSCode, assim você não precisa abrir o arquivo no navegador para ver o svg.
Community Material Theme: Essa extensão é apenas o tema que eu mais gosto, gosto de usar a versão Material Theme Darker.
Material Icon Theme: Essa extensão é apenas o tema de ícones que eu mais gosto.
Import Cost: Essa extensão mostra o tamanho do pacote que você está importando, assim você pode ver se o pacote é muito grande e se vale a pena usar ele.
Git Lens: Essa extensão é bem completa, tem muita coisa, mas para falar a verdade eu uso muito ela para verificar quem fez a última alteração no arquivo direto no VSCode e também conseguir ir direto para o arquivo no GitHub ou Pull Request.
GitHub Copilot: Essa extensão não tem muito que dizer, é o famoso GitHub Copilot, tem me ajudado bastante a criar códigos que são mais repetitivos,e também funciona muito bem para documentação e comentários.
EditorConfig for VS Code: Essa extensão é muito útil para quem trabalha em projetos com várias pessoas, ela ajuda a manter o padrão de código, como por exemplo, indent_style, indent_size, insert_final_newline e etc... criamos um arquivo .editorconfig na raiz do projeto e configuramos o que queremos que seja o padrão.

Minha história de suporte técnico a desenvolvedor front-end

Richard Manzoli — Thu, 24 Aug 2023 13:10:39 +0000

E ai, hoje vim contar um pouco como foi o meu começo como desenvolvedor front-end, como eu comecei a me interessar por programação e como foi a minha primeira oportunidade, espero que gostem.

1 - O Começo

Tudo que começou quando eu estava trabalhando como suporte em uma empresa de T.I, essa empresa prestava serviços como formatação de computadores, configuração de redes, limpeza física de computadores e tudo que um suporte técnico faz, era um trabalho relativamente chato, eu morava em Itaquera, Zona Leste de SP e tinha que atender clientes em Interlagos, Berrini, Paulista, para quem conhece SP, sabe o tempo que é a demora para chegar nesses lugares vindo da Zona Leste.
Após uns dois anos trabalhando como suporte, eu comecei a me interessar por redes e queria seguir como Analista de redes, mas em toda entrevista que eu ia, eu não passava, porque pelo menos na época, precisava de uma faculdade ou de certificação para trabalhar com isso e eu não tinha dinheiro para arcar com isso.

2 - Como me interessei por programação

Até que um dia, fui em um cliente formatar alguns computadores e essa empresa era uma agência que tinha alguns desenvolvedores trabalhando e acabei curtindo o que eu vi, pessoal trabalhando no Macbook, tomando um café, pessoal de chinelo e com tattoo (na época eu tinha tinha tattoo na mão e isso me tratava em algumas entrevista como Analista de redes) e foi ali que percebi que aquilo ali poderia ser algo legal de se fazer, estava bem cansado de ter que ficar indo de cliente a cliente formatando computadores, então comecei a ficar olhando o que eles estavam fazendo nos computadores, comecei a perguntar o que era aquilo e lembro até hoje que um desenvolvedor me falou para estudar HTMl, CSS e Javascript e foi ali que tudo começou.

3 - Como comecei a estudar

Na mesma semana comecei a pesquisar sobre o mundo de programação e vi o que ele tinha me falado sobre HTML, CSS e Javascript, significava "Front-end", então comecei a fazer o que todo mundo fazer, estudar sobre HTML, CSS e Javascript, comecei com o básico, criando HTML sem estilo nenhum, apenas colocando tags e textos como se fosse um jornal, depois fui colocando cores nos textos e fiquei nisso pelo menos uns 3 meses, sem usar Javascript, porque eu não conseguia entender lógica de programação de jeito nenhum, aquilo não entrava na minha cabeça.
Até que ganhei um curso num sorteio do Fernando Daciuk, o nome do curso chama "Curso JavaScript Ninja" ele foi o curso que me fez entender Javascript e lógica de programação, a didática do Daciuk é incrível e devo muito a esse curso e a esse sorteio.

4 - Fase de reprovar em entrevistas (reprovei numas 10)

Após ter ficado quase 1 ano estudando programação em paralelo com meu trabalho como suporte, comecei a mandar currículos para todas as vagas que eu via no InfoJobs e Catho (não conhecia o Linkedin), entrava em site de empresas, pegava o contato da empresa e mandava meu currículo explicando que estava procurando a primeira oportunidade como front-end, algumas pessoas responderam e fui acabei marcando algumas entrevista e acabei indo mal em TODAS, na época o pessoal pedia muito Grunt, Bootstrap, Wordpress, JQuery e eu não sabia nada disso, eu sabia HTML, CSS e um pouco de Javascript, mas foi ai que ter feito entrevista mesmo sem passar, me ajudou muito, porque eu comecei a entender o que o mercado pedia e comecei a estudar essas tecnologias para passar nas próximas.

5 - Primeira oportunidade

Após ter ficado mais uns 6 meses indo em entrevistas, pegando feedback, acabei arrumando meu primeiro emprego como Desenvolvedor PHP, eu nem sabia PHP, mas o pessoal na época queria alguém que tivesse conhecimento em Wordpress e por incrível que pareça, eu consegua mexer um pouco em Wordpress sem saber PHP, dentro dessa empresa eu comecei a realmente entender o que era programação, mexer em plugins com PHP dentro do Wordpress, fluxo de local -> staging -> produção, testes e tudo mais, consegui evoluir bastante nessa primeira oportunidade, comecei a trabalhar com Laravel na época que foi muito bom para o meu aprendizado e entender que nem tudo a gente fazia com na mão, tinha ferramentas para nos auxiliar.
Até que um dia que essa empresa faliu e eu acabei sendo demitido, mas por sorte do destino, a outra empresa que assumiu os projetos da antiga empresa, viu que eu era commiter do código e acabou me contratando, sorte do destino, acredito.

6 - Segunda oportunidade (a que me fez realmente entender o que era programação)

Depois de ter sido contratado graças aos meus commits, essa empresa começou a me pedir para estudar ReactJS, Sass, Webpack e foi ai que realmente eu comecei a estudar me interessar mais por front-end, comecei a criar sites e landing pages usando ReactJS, comecei a realmente entender sobre Javascript (sim, eu sabia mais ReactJS do que javascript), precisava entender mais sobre o que era o this, class, loops e etc...
Foi uma época punk, eu era o único front-end do time, um estagiário/junior que não sabia Javascript, mexendo com ReactJS, fiz muita cagada (desculpa Bianca), mas também aprendi muito na marra mesmo, porque eu não tinha ninguém para me ajudar (o que foi bem ruim), eu tinha que me virar, pesquisar, ler documentação, trabalhar e chegar me casa ja estudando para entender melhor sobre os assuntos.

7 - Final

Isso é só o começo que queria contar, queria mostrar que nem tudo tem um caminho certo, seu primeiro emprego pode ser diferente de onde você quer chegar no futuro e esta tudo bem, mas acho que já ficou bem grande, esse é apenas o começo da minha carreira como desenvolvedor, mas como ficou bem grande, acho que vou parar por aqui e quem sabe escrevo mais um pouco sobre o que aconteceu depois disso, como cheguei a ser senior e etc...

Lidando com erros no Nuxt 2

Richard Manzoli — Wed, 23 Aug 2023 11:12:29 +0000

E aí, hoje estou aqui para falar um pouco sobre como lidar com erros no Nuxt 2, utilizando o layout de erros.

Já se deparou com essa tela de erro quando o usuário acessa uma rota que não existe? 404 Not Found

Podemos lidar com esse tipo de erro e muitos outros usando um layout do Nuxt chamado error.

1 - Criando o layout de erro

Dentro da pasta /layouts, vamos criar um arquivo chamado error.vue com uma estrutura básica para visualizarmos imediatamente a tela de erro. Com isso, teremos acesso a uma página diferente, mais amigável e descritiva para o usuário.

<template>
  <div class="error-container">
    <h1 class="error__code">404</h1>
    <p class="error__message">Oops! Parece que você se perdeu.</p>
    <p class="error__message">
      A página que você está procurando não foi encontrada.
    </p>
    <a class="error__back-link" href="/">Voltar para a página inicial</a>
  </div>
</template>
<style lang="scss">
$font-family: Arial, sans-serif;
$error-color: #e74c3c;
$text-color: #333;
$link-color: #3498db;

body {
  font-family: $font-family;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.error-container {
  text-align: center;

  &__code {
    font-size: 6rem;
    font-weight: bold;
    color: $error-color;
    margin: 0;
  }

  &__message {
    font-size: 1.5rem;
    color: $text-color;
    margin: 10px 0;
  }

  &__back-link {
    color: $link-color;
    text-decoration: none;
  }
}
</style>

2 - Lidando com erros

Uma característica interessante desse layout de erro é que temos uma prop chamada error que é sempre enviada. No primeiro exemplo, fixamos um 404 e textos como exemplo, mas podemos tornar isso dinâmico com essa prop.

Adicionando o script abaixo já conseguimos usar o computed statusCode para definir um titulo e lidar com condicionais para a página e usar no lugar do 404 estático e também ajustar os textos para diferentes erros caso exista.

// Ajustar o template
<template>
  <div class="error-container">
    <div v-if="statusCode === 404">
      <h1 class="error__code">{{ statusCode }}</h1>
      <p class="error__message">Oops! Parece que você se perdeu.</p>
      <p class="error__message">
        A página que você está procurando não foi encontrada.
      </p>
      <a class="error__back-link" href="/">Voltar para a página inicial</a>
    </div>
    <div v-else>
      <h1 class="error__code">{{ statusCode }}</h1>
      <p class="error__message">Oops! Parece que tivemos um problema.</p>
      <p class="error__message">Atualize a página para tentar novamente</p>
    </div>
  </div>
</template>

// Adicionar esse script ao arquivo error.vue
<script>
export default {
  props: {
    error: {
      type: Object
    }
  },
  computed: {
    statusCode() {
      return this.error.statusCode;
    }
  },
  head() {
    return {
      title: this.statusCode
    };
  }
};
</script>

É isso! Com um simples layout de erro, conseguimos lidar com o erro 404 Status Code e com o 500 Status Code.
Podemos melhorar essa página usando componentes para lidar com cada erro ou utilizar computed properties no lugar dos textos em vez de usar condicionais, fica a critério.

Abraços e até a próxima! 🌵