<h2>Visão Geral</h2>
JavaScript é uma linguagem de programação de alto nível e de múltiplos paradigmas (Orientação a Objetos, Funcional, Imperativo e Protótipos) que permite criar aplicações interativas para a web. Foi criada em 1995 por Brendan Eich enquanto trabalhava na Netscape e, desde então, se tornou uma das linguagens de programação mais populares do mundo.
Uma das características mais distintas do JavaScript é sua tipagem dinâmica, o que significa que não é necessário definir o tipo de dados que serão utilizados em uma variável, pois o próprio JavaScript irá inferir o tipo em tempo de execução.
O JavaScript pode ser usado em diversas áreas da web, como na criação de efeitos visuais, interatividade em sites e aplicativos, extensões para navegadores, jogos e aplicativos para celular. Além disso, é amplamente utilizado em aplicações web complexas, como Single Page Applications (SPAs), que permitem a criação de interfaces de usuário mais dinâmicas e responsivas.
Além de seu uso na web, o JavaScript também pode ser executado fora do navegador, como em servidores através do Node.js. Isso permite que o JavaScript seja utilizado em outras áreas, como no desenvolvimento de aplicações de rede e sistemas distribuídos.
Alguns exemplos de aplicações que utilizam JavaScript incluem a criação de jogos como o Angry Birds, extensões de funcionalidades de navegadores através de plugins como o AdBlock e a criação de aplicações web como o Google Docs e o Facebook.
Em resumo, o JavaScript é uma linguagem de programação versátil e amplamente utilizada que permite criar aplicações interativas e dinâmicas na web e em outras áreas da computação.
<h2>A Engine do JavaScript</h2>
A Engine do JavaScript é o software responsável por interpretar e executar o código JavaScript em um navegador ou em um servidor. Ela é composta por vários componentes, incluindo o Analisador Léxico, o Analisador Sintático, o Compilador e o Interpretador.
O Analisador Léxico é responsável por dividir o código em pequenos pedaços chamados "tokens". Esses tokens são palavras-chave ou símbolos que ajudam a definir o significado do código. Cada token funciona como uma peça de um quebra-cabeça que ajuda a construir o significado do código. Por exemplo, se o código contém a palavra-chave <code>if</code>, o analisador léxico irá separá-la em um token <code>if</code> que indica que uma condição está sendo verificada.
O Analisador Sintático é responsável por verificar se a estrutura do código está correta, ou seja, se as palavras-chave, símbolos e expressões estão sendo utilizados de acordo com as regras da linguagem. Ele garante que o código esteja sintaticamente correto antes de ser executado. Por exemplo, se o código contém um bloco de código que começa com uma chave <code>{</code>, o analisador sintático irá verificar se há uma chave <code>}</code> correspondente no final do bloco.
O Compilador é responsável por transformar o código fonte em código de máquina. Ele faz isso através de uma série de etapas, como análise léxica, análise sintática, otimização de código e geração do código de máquina. Essa transformação é necessária porque o computador não entende o código fonte escrito em uma linguagem de programação.
O Interpretador é responsável por executar o código fonte diretamente, sem a necessidade de compilar primeiro. Ele "interpreta" o código linha por linha, executando as instruções conforme elas aparecem. O interpretador é mais lento do que o compilador, mas permite que o código seja executado sem precisar passar por um processo de compilação.
A Engine do JavaScript também inclui recursos adicionais, como o Gerenciador de Memória, o Garbage Collector, o Memory Heap e o Call Stack.
O Gerenciador de Memória é responsável por alocar e desalocar memória para objetos e variáveis. Ele rastreia a memória disponível no computador e a aloca de acordo com as necessidades do programa. Quando um objeto ou variável é criado, o Gerenciador de Memória aloca espaço para armazenar seus dados. Quando esse objeto ou variável não é mais necessário, o Gerenciador de Memória libera a memória para que possa ser usada por outras partes do programa.
O Garbage Collector (Coletor de Lixo) é responsável por coletar objetos que não estão mais sendo utilizados pelo programa e liberar a memória que eles ocupam. Ele rastreia os objetos criados pelo programa e, quando um objeto não é mais referenciado por outras partes do programa, ele libera a memória usada por esse objeto. O Garbage Collector garante que a memória seja usada de maneira eficiente, evitando que o programa fique sem memória disponível.
O Memory Heap é onde a alocação de memória acontece durante a execução da aplicação. Quando um objeto ou variável é criado, o Gerenciador de Memória aloca um espaço de memória no Memory Heap para armazená-lo.
O Call Stack é uma estrutura de dados que rastreia as chamadas de função do programa. Quando uma função é chamada, ela é adicionada ao topo da Pilha de Chamadas. O programa executa a função no topo da pilha e, quando a função é concluída, ela é removida da pilha.
Por exemplo:
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">function multiply(x, y) {
 return x * y;
}

function printSquare(x) {
 let s = multiply(x, x);
 console.log(s);
}

printSquare(5);
</code></pre></div>
Quando a Engine começa a executar esse código, a Call Stack estará vazia. Os passos para execução são os seguintes:
<ol>
<li>A função printSquare é chamada e adicionada ao topo da Call Stack.</li>
<li>Dentro da função printSquare, a função multiply é chamada e adicionada ao topo da Call Stack.</li>
<li>A função multiply retorna o resultado, que é armazenado na variável s.</li>
<li>A função multiply é removida da Call Stack.</li>
<li>A função printSquare exibe o valor de s no console.</li>
<li>A função printSquare é removida da Call Stack.</li>
</ol>
Dessa forma, a execução do código é concluída sem problemas.
<h3>Stack Overflow</h3>
É importante ter cuidado ao lidar com funções recursivas no JavaScript, pois se uma função for chamada recursivamente muitas vezes sem uma condição de parada adequada, pode ocorrer um erro chamado "Stack Overflow" (Estouro da Pilha). Isso acontece quando a pilha de chamadas fica cheia e não há mais espaço para adicionar novas chamadas de função.
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">function foo() {
 foo();
}

foo(); // Output: Uncaught RangeError: Maximum call stack size exceeded
</code></pre></div>
Nesse exemplo, a função foo é chamada recursivamente sem uma condição de parada. Como resultado, a pilha de chamadas ficará cada vez maior até que ocorra um estouro da pilha e um erro seja lançado.
Para evitar o Stack Overflow, é necessário definir uma condição de parada adequada em funções recursivas, para que a recursão seja interrompida em algum momento.
<h2>Concorrência e o Event Loop</h2>
Embora o JavaScript seja uma linguagem de programação single-threaded, o que significa que executa um comando por vez em uma única sequência, muitas tarefas em JavaScript são assíncronas, como fazer requisições HTTP, ler arquivos ou esperar por eventos de usuário. Nesses casos, o Event Loop é responsável por gerenciar essas tarefas assíncronas.
O Event Loop garante a execução eficiente do código assíncrono. Ele consiste em um loop contínuo que verifica se existem tarefas assíncronas na fila de tarefas, também conhecida como "task queue", aguardando para serem executadas. Quando uma tarefa assíncrona é concluída, o Event Loop coloca a função de callback associada à tarefa na pilha de execução para ser executada.
Callbacks são funções que são passadas como argumentos para outras funções. No contexto de operações assíncronas, os callbacks são usados para lidar com o resultado dessas operações. Quando uma operação assíncrona é concluída, o callback correspondente é colocado na pilha de execução pelo Event Loop e executado.
Por exemplo, vamos considerar uma requisição assíncrona para buscar dados de um servidor. Nesse caso, é possível fornecer um callback que será chamado quando a resposta do servidor chegar. Esse callback pode processar os dados recebidos e atualizar a interface do usuário, por exemplo.
<hr>
JavaScript é uma linguagem de programação poderosa e versátil, amplamente utilizada para criar aplicações interativas na web. Compreender os conceitos básicos da Engine do JavaScript, como a divisão do código em tokens, a análise sintática, a compilação e a interpretação, bem como os recursos de gerenciamento de memória e a pilha de chamadas, é fundamental para escrever código eficiente e evitar erros comuns. Além disso, é importante ter cuidado ao lidar com funções recursivas para evitar o Stack Overflow.

## Visão Geral

JavaScript é uma linguagem de programação de alto nível e de múltiplos paradigmas (Orientação a Objetos, Funcional, Imperativo e Protótipos) que permite criar aplicações interativas para a web. Foi criada em 1995 por Brendan Eich enquanto trabalhava na Netscape e, desde então, se tornou uma das linguagens de programação mais populares do mundo.

Uma das características mais distintas do JavaScript é sua tipagem dinâmica, o que significa que não é necessário definir o tipo de dados que serão utilizados em uma variável, pois o próprio JavaScript irá inferir o tipo em tempo de execução.

O JavaScript pode ser usado em diversas áreas da web, como na criação de efeitos visuais, interatividade em sites e aplicativos, extensões para navegadores, jogos e aplicativos para celular. Além disso, é amplamente utilizado em aplicações web complexas, como Single Page Applications (SPAs), que permitem a criação de interfaces de usuário mais dinâmicas e responsivas.

Além de seu uso na web, o JavaScript também pode ser executado fora do navegador, como em servidores através do Node.js. Isso permite que o JavaScript seja utilizado em outras áreas, como no desenvolvimento de aplicações de rede e sistemas distribuídos.

Alguns exemplos de aplicações que utilizam JavaScript incluem a criação de jogos como o Angry Birds, extensões de funcionalidades de navegadores através de plugins como o AdBlock e a criação de aplicações web como o Google Docs e o Facebook.

Em resumo, o JavaScript é uma linguagem de programação versátil e amplamente utilizada que permite criar aplicações interativas e dinâmicas na web e em outras áreas da computação.

## A Engine do JavaScript

A Engine do JavaScript é o software responsável por interpretar e executar o código JavaScript em um navegador ou em um servidor. Ela é composta por vários componentes, incluindo o Analisador Léxico, o Analisador Sintático, o Compilador e o Interpretador.

O **Analisador Léxico** é responsável por dividir o código em pequenos pedaços chamados "tokens". Esses tokens são palavras-chave ou símbolos que ajudam a definir o significado do código. Cada token funciona como uma peça de um quebra-cabeça que ajuda a construir o significado do código. Por exemplo, se o código contém a palavra-chave `if`, o analisador léxico irá separá-la em um token `if` que indica que uma condição está sendo verificada.

O **Analisador Sintático** é responsável por verificar se a estrutura do código está correta, ou seja, se as palavras-chave, símbolos e expressões estão sendo utilizados de acordo com as regras da linguagem. Ele garante que o código esteja sintaticamente correto antes de ser executado. Por exemplo, se o código contém um bloco de código que começa com uma chave `{`, o analisador sintático irá verificar se há uma chave `}` correspondente no final do bloco.

O **Compilador** é responsável por transformar o código fonte em código de máquina. Ele faz isso através de uma série de etapas, como análise léxica, análise sintática, otimização de código e geração do código de máquina. Essa transformação é necessária porque o computador não entende o código fonte escrito em uma linguagem de programação.

O **Interpretador** é responsável por executar o código fonte diretamente, sem a necessidade de compilar primeiro. Ele "interpreta" o código linha por linha, executando as instruções conforme elas aparecem. O interpretador é mais lento do que o compilador, mas permite que o código seja executado sem precisar passar por um processo de compilação.

A Engine do JavaScript também inclui recursos adicionais, como o Gerenciador de Memória, o Garbage Collector, o Memory Heap e o Call Stack.

O **Gerenciador de Memória** é responsável por alocar e desalocar memória para objetos e variáveis. Ele rastreia a memória disponível no computador e a aloca de acordo com as necessidades do programa. Quando um objeto ou variável é criado, o Gerenciador de Memória aloca espaço para armazenar seus dados. Quando esse objeto ou variável não é mais necessário, o Gerenciador de Memória libera a memória para que possa ser usada por outras partes do programa.

O **Garbage Collector** (Coletor de Lixo) é responsável por coletar objetos que não estão mais sendo utilizados pelo programa e liberar a memória que eles ocupam. Ele rastreia os objetos criados pelo programa e, quando um objeto não é mais referenciado por outras partes do programa, ele libera a memória usada por esse objeto. O Garbage Collector garante que a memória seja usada de maneira eficiente, evitando que o programa fique sem memória disponível.

O **Memory Heap** é onde a alocação de memória acontece durante a execução da aplicação. Quando um objeto ou variável é criado, o Gerenciador de Memória aloca um espaço de memória no Memory Heap para armazená-lo.

O **Call Stack** é uma estrutura de dados que rastreia as chamadas de função do programa. Quando uma função é chamada, ela é adicionada ao topo da Pilha de Chamadas. O programa executa a função no topo da pilha e, quando a função é concluída, ela é removida da pilha.

Por exemplo:

```javascript
function multiply(x, y) {
  return x * y;
}

function printSquare(x) {
  let s = multiply(x, x);
  console.log(s);
}

printSquare(5);
```

Quando a Engine começa a executar esse código, a Call Stack estará vazia. Os passos para execução são os seguintes:

1. A função printSquare é chamada e adicionada ao topo da Call Stack.
2. Dentro da função printSquare, a função multiply é chamada e adicionada ao topo da Call Stack.
3. A função multiply retorna o resultado, que é armazenado na variável s.
4. A função multiply é removida da Call Stack.
5. A função printSquare exibe o valor de s no console.
6. A função printSquare é removida da Call Stack.

Dessa forma, a execução do código é concluída sem problemas.

### Stack Overflow

É importante ter cuidado ao lidar com funções recursivas no JavaScript, pois se uma função for chamada recursivamente muitas vezes sem uma condição de parada adequada, pode ocorrer um erro chamado "Stack Overflow" (Estouro da Pilha). Isso acontece quando a pilha de chamadas fica cheia e não há mais espaço para adicionar novas chamadas de função.

```javascript
function foo() {
  foo();
}

foo(); // Output: Uncaught RangeError: Maximum call stack size exceeded
```

Nesse exemplo, a função foo é chamada recursivamente sem uma condição de parada. Como resultado, a pilha de chamadas ficará cada vez maior até que ocorra um estouro da pilha e um erro seja lançado.

Para evitar o Stack Overflow, é necessário definir uma condição de parada adequada em funções recursivas, para que a recursão seja interrompida em algum momento.

## Concorrência e o Event Loop

Embora o JavaScript seja uma linguagem de programação single-threaded, o que significa que executa um comando por vez em uma única sequência, muitas tarefas em JavaScript são assíncronas, como fazer requisições HTTP, ler arquivos ou esperar por eventos de usuário. Nesses casos, o Event Loop é responsável por gerenciar essas tarefas assíncronas.

O Event Loop garante a execução eficiente do código assíncrono. Ele consiste em um loop contínuo que verifica se existem tarefas assíncronas na fila de tarefas, também conhecida como "task queue", aguardando para serem executadas. Quando uma tarefa assíncrona é concluída, o Event Loop coloca a função de callback associada à tarefa na pilha de execução para ser executada.

Callbacks são funções que são passadas como argumentos para outras funções. No contexto de operações assíncronas, os callbacks são usados para lidar com o resultado dessas operações. Quando uma operação assíncrona é concluída, o callback correspondente é colocado na pilha de execução pelo Event Loop e executado.

Por exemplo, vamos considerar uma requisição assíncrona para buscar dados de um servidor. Nesse caso, é possível fornecer um callback que será chamado quando a resposta do servidor chegar. Esse callback pode processar os dados recebidos e atualizar a interface do usuário, por exemplo.

---

JavaScript é uma linguagem de programação poderosa e versátil, amplamente utilizada para criar aplicações interativas na web. Compreender os conceitos básicos da Engine do JavaScript, como a divisão do código em tokens, a análise sintática, a compilação e a interpretação, bem como os recursos de gerenciamento de memória e a pilha de chamadas, é fundamental para escrever código eficiente e evitar erros comuns. Além disso, é importante ter cuidado ao lidar com funções recursivas para evitar o Stack Overflow.

Visão Geral   JavaScript é uma linguagem de programação de alto nível e de múltiplos...

Entendendo a Engine, Runtime e Call Stack do JavaScript

Criar um site pessoal nunca foi algo que esteve no topo da minha lista de prioridades, mas com o tempo, percebi que essa experiência poderia me ajudar a desenvolver minhas habilidades e me conectar com pessoas que compartilham dos mesmos interesses.
Neste post, gostaria de compartilhar com vocês a minha trajetória e tudo o que aprendi ao longo do caminho.
<blockquote>
Antes que eu me esqueça, gostaria de convidá-los a acessar o meu <a href="https://joeldorosarioo.dev">site</a>.
</blockquote>
<h2>Por que comecei a escrever?</h2>
Quando aprendo algo novo, eu quero escrever sobre isso. E ao escrever, eu acabo fixando ainda mais aquele aprendizado. Então, o ato de escrever se torna uma etapa importante no meu processo.
Mas a síndrome do impostor fez um ótimo trabalho me segurando.
<blockquote>
Existem vários posts excelentes sobre o mesmo tópico que eu quero escrever. Será que alguém irá ler o meu post? O que as pessoas pensarão sobre ele? E se não despertar o interesse de ninguém além de mim?
</blockquote>
Esses pensamentos ficaram na minha cabeça por um longo tempo, o que me fez adiar alguns projetos e ideias.
Após refletir bastante, decidi expor minhas ideias e compartilhar minhas anotações. Essa decisão foi inspirada pelo conceito de <a href="https://www.swyx.io/learn-in-public">Learn In Public</a>, que prega a ideia de que compartilhar seu processo de aprendizado, mesmo que não seja perfeito ou completo, é uma ótima forma de aprender mais e se conectar com outras pessoas. O objetivo é tornar o processo de aprendizagem mais transparente e colaborativo, ao invés de mantê-lo escondido.
<h3>Tecnologias</h3>
<ul>
<li>TypeScript e Next.js</li>
</ul>
Não tento esconder o fato de que amo o Next.js, já que é tão simples de usar. Por isso, pareceu natural iniciar meu projeto utilizando TypeScript e <a href="https://nextjs.org">Next.js</a>, uma vez que essas tecnologias se complementam.
Além disso, a possibilidade de fazer o deploy de forma simples e gratuita na Vercel foi um grande atrativo.
<ul>
<li>Tailwind CSS</li>
</ul>
Ultimamente, tenho visto muito conteúdo sobre o <a href="https://tailwindcss.com">Tailwind CSS</a>. Assim, seguindo a ideia de utilizar meu portfólio como um laboratório, decidi utilizá-lo para conhecer e aprender uma nova tecnologia.
<ul>
<li>Remark</li>
</ul>
O <a href="https://github.com/remarkjs/remark">Remark</a> é um analisador de Markdown e seus plugins, como o remark-html, convertem o Markdown retornado pela API do Dev.to em HTML. Outros plugins que uso permitem recursos como destaque de código, compatibilidade com o Markdown do GitHub e remoção de metadados do HTML exibido.
<h3>Usando o Dev.to como um CMS</h3>
Há alguns meses, comecei a postar no Dev.to e me apaixonei pela plataforma, pelo editor e pela capacidade de redigir e publicar um artigo, tornando-o disponível para milhares de usuários do Dev.to.
Durante a criação do meu portfólio, decidi que queria exibir esses artigos no meu próprio site. Depois de pesquisar diferentes maneiras de fazer isso, concluí que usar a <a href="https://developers.forem.com/api">API do Dev.to</a> para criar a seção de blog do meu site seria a solução perfeita.
Decidi que os artigos só apareceriam no meu site se eu adicionasse um URL canônico ao artigo no Dev.to - o que significa que meu site seria visto como a fonte do artigo, mesmo que ele tenha sido escrito originalmente no Dev.to.
Para isso, criei a seguinte lista de requisitos:
<ol>
<li>
Utilizar a API do Dev.to para buscar todos os meus artigos e exibi-los no meu site.
</li>
<li>
Buscar e renderizar cada artigo no tempo de construção para garantir que o site seja rápido e tenha um bom SEO para as páginas dinâmicas. O uso de páginas dinâmicas tornaria o carregamento do site mais lento, pois consultaria a API Dev.to no lado do cliente.
</li>
<li>
Definir uma URL canônica para cada artigo no Dev.to e utilizar a mesma URL para o artigo no meu site. Eu gostaria de continuar a usar o editor do Dev.to para escrever e gerenciar meus artigos, portanto, eles só devem aparecer em meu site após a adição de uma URL canônica.
</li>
</ol>
<blockquote>
No momento, estou escrevendo algo mais detalhado que descreve com mais detalhes como meu site utiliza o Dev.to como um CMS, fique atento (e me siga no Dev.to para ser notificado quando eu o lançar)!
</blockquote>
<h3>Domínio</h3>
Eu não tinha a mínima ideia de como adquirir um domínio personalizado, mas sabia que era possível. Então, fiz o que todo desenvolvedor faz de melhor: pesquisei no Google e descobri que é bem fácil!
Aqui estão os passos básicos que segui para comprar o meu primeiro domínio:
<ol>
<li>
Acessei o site do <a href="https://domains.google">Google Domains</a>.
</li>
<li>
Verifiquei se o nome que eu queria usar estava disponível. Felizmente, estava e adicionei-o ao carrinho de compras.
</li>
<li>
Por fim, segui as etapas para finalizar a compra, inserindo as informações de pagamento.
</li>
</ol>
<h3>Deploy na Vercel</h3>
A <a href="https://vercel.com">Vercel</a> é uma plataforma de hospedagem na nuvem que possibilita aos desenvolvedores publicarem seus projetos na Internet de maneira rápida e fácil. Em resumo, ela oferece diversos recursos para otimizar a velocidade e o desempenho do seu projeto, e para realizar o deploy, basta seguir os passos abaixo:
<ol>
<li>
Crie uma conta gratuita na Vercel e faça login.
</li>
<li>
Clique no botão "Importar Projeto" na página inicial da Vercel.
</li>
<li>
Escolha a opção "Importar Git Repository".
</li>
<li>
Escolha o repositório do seu projeto no GitHub, GitLab ou Bitbucket, ou faça o upload de um arquivo ZIP do seu projeto.
</li>
<li>
Escolha as configurações de build do seu projeto, como a linguagem de programação e a versão do ambiente.
</li>
<li>
Espere até que a Vercel conclua o processo de construção do seu projeto.
</li>
<li>
Escolha um nome para o seu projeto na Vercel, clique em "Deploy" e aguarde até que o Deploy seja concluído, depois, é só verificar se o seu projeto está funcionando corretamente visitando o URL fornecido pela Vercel.
</li>
</ol>
Passo a passo para adicionar um domínio personalizado ao seu projeto na Vercel:
<ol>
<li>
Faça login no painel de controle do seu registrador de domínios e localize as configurações de DNS.
</li>
<li>
Adicione um novo registro DNS do tipo "CNAME" ou "ALIAS" para apontar o seu nome de domínio personalizado para o endereço do seu projeto na Vercel.
</li>
<li>
Vá para a página de configurações do projeto na Vercel e clique na guia "Domínios".
</li>
<li>
Adicione o seu nome de domínio personalizado na seção "Adicionar domínio".
</li>
<li>
Siga as instruções fornecidas pela Vercel para verificar a propriedade do seu domínio e configurar as configurações de DNS corretas.
</li>
<li>
Aguarde até que as mudanças nas configurações de DNS sejam propagadas (pode levar algumas horas) e verifique se o seu projeto está funcionando corretamente no seu nome de domínio personalizado.
</li>
</ol>
Seu projeto agora está publicado e configurado com seu domínio personalizado, pronto para ser acessado por qualquer pessoa.
<hr>
Lembre-se de que criar um portfólio não é apenas sobre design e tecnologia, mas também sobre destacar suas habilidades e experiências profissionais, podendo ser uma ferramenta valiosa para avançar na carreira de programador.

Criar um site pessoal nunca foi algo que esteve no topo da minha lista de prioridades, mas com o tempo, percebi que essa experiência poderia me ajudar a desenvolver minhas habilidades e me conectar com pessoas que compartilham dos mesmos interesses.

Neste post, gostaria de compartilhar com vocês a minha trajetória e tudo o que aprendi ao longo do caminho.

> Antes que eu me esqueça, gostaria de convidá-los a acessar o meu [site](https://joeldorosarioo.dev).

## Por que comecei a escrever?

Quando aprendo algo novo, eu quero escrever sobre isso. E ao escrever, eu acabo fixando ainda mais aquele aprendizado. Então, o ato de escrever se torna uma etapa importante no meu processo.

Mas a síndrome do impostor fez um ótimo trabalho me segurando.

> Existem vários posts excelentes sobre o mesmo tópico que eu quero escrever. Será que alguém irá ler o meu post? O que as pessoas pensarão sobre ele? E se não despertar o interesse de ninguém além de mim?

Esses pensamentos ficaram na minha cabeça por um longo tempo, o que me fez adiar alguns projetos e ideias.

Após refletir bastante, decidi expor minhas ideias e compartilhar minhas anotações. Essa decisão foi inspirada pelo conceito de [Learn In Public](https://www.swyx.io/learn-in-public), que prega a ideia de que compartilhar seu processo de aprendizado, mesmo que não seja perfeito ou completo, é uma ótima forma de aprender mais e se conectar com outras pessoas. O objetivo é tornar o processo de aprendizagem mais transparente e colaborativo, ao invés de mantê-lo escondido.

### Tecnologias

- TypeScript e Next.js

Não tento esconder o fato de que amo o Next.js, já que é tão simples de usar. Por isso, pareceu natural iniciar meu projeto utilizando TypeScript e [Next.js](https://nextjs.org), uma vez que essas tecnologias se complementam.

Além disso, a possibilidade de fazer o deploy de forma simples e gratuita na Vercel foi um grande atrativo.

- Tailwind CSS

Ultimamente, tenho visto muito conteúdo sobre o [Tailwind CSS](https://tailwindcss.com). Assim, seguindo a ideia de utilizar meu portfólio como um laboratório, decidi utilizá-lo para conhecer e aprender uma nova tecnologia.

- Remark

O [Remark](https://github.com/remarkjs/remark) é um analisador de Markdown e seus plugins, como o remark-html, convertem o Markdown retornado pela API do Dev.to em HTML. Outros plugins que uso permitem recursos como destaque de código, compatibilidade com o Markdown do GitHub e remoção de metadados do HTML exibido.

### Usando o Dev.to como um CMS

Há alguns meses, comecei a postar no Dev.to e me apaixonei pela plataforma, pelo editor e pela capacidade de redigir e publicar um artigo, tornando-o disponível para milhares de usuários do Dev.to.

Durante a criação do meu portfólio, decidi que queria exibir esses artigos no meu próprio site. Depois de pesquisar diferentes maneiras de fazer isso, concluí que usar a [API do Dev.to](https://developers.forem.com/api) para criar a seção de blog do meu site seria a solução perfeita.

Decidi que os artigos só apareceriam no meu site se eu adicionasse um URL canônico ao artigo no Dev.to - o que significa que meu site seria visto como a fonte do artigo, mesmo que ele tenha sido escrito originalmente no Dev.to.

Para isso, criei a seguinte lista de requisitos:

1. **Utilizar a API do Dev.to** para buscar todos os meus artigos e exibi-los no meu site.

2. **Buscar e renderizar cada artigo no tempo de construção** para garantir que o site seja rápido e tenha um bom SEO para as páginas dinâmicas. O uso de páginas dinâmicas tornaria o carregamento do site mais lento, pois consultaria a API Dev.to no lado do cliente.

3. **Definir uma URL canônica** para cada artigo no Dev.to e utilizar a mesma URL para o artigo no meu site. Eu gostaria de continuar a usar o editor do Dev.to para escrever e gerenciar meus artigos, portanto, eles só devem aparecer em meu site após a adição de uma URL canônica.

> No momento, estou escrevendo algo mais detalhado que descreve com mais detalhes como meu site utiliza o Dev.to como um CMS, fique atento (e me siga no Dev.to para ser notificado quando eu o lançar)!

### Domínio

Eu não tinha a mínima ideia de como adquirir um domínio personalizado, mas sabia que era possível. Então, fiz o que todo desenvolvedor faz de melhor: pesquisei no Google e descobri que é bem fácil!

Aqui estão os passos básicos que segui para comprar o meu primeiro domínio:

1. Acessei o site do [Google Domains](https://domains.google).

2. Verifiquei se o nome que eu queria usar estava disponível. Felizmente, estava e adicionei-o ao carrinho de compras.

3. Por fim, segui as etapas para finalizar a compra, inserindo as informações de pagamento.

### Deploy na Vercel

A [Vercel](https://vercel.com) é uma plataforma de hospedagem na nuvem que possibilita aos desenvolvedores publicarem seus projetos na Internet de maneira rápida e fácil. Em resumo, ela oferece diversos recursos para otimizar a velocidade e o desempenho do seu projeto, e para realizar o deploy, basta seguir os passos abaixo:

1. Crie uma conta gratuita na Vercel e faça login.

2. Clique no botão "Importar Projeto" na página inicial da Vercel.

3. Escolha a opção "Importar Git Repository".

4. Escolha o repositório do seu projeto no GitHub, GitLab ou Bitbucket, ou faça o upload de um arquivo ZIP do seu projeto.

5. Escolha as configurações de build do seu projeto, como a linguagem de programação e a versão do ambiente.

6. Espere até que a Vercel conclua o processo de construção do seu projeto.

7. Escolha um nome para o seu projeto na Vercel, clique em "Deploy" e aguarde até que o _Deploy_ seja concluído, depois, é só verificar se o seu projeto está funcionando corretamente visitando o URL fornecido pela Vercel.

Passo a passo para adicionar um domínio personalizado ao seu projeto na Vercel:

1. Faça login no painel de controle do seu registrador de domínios e localize as configurações de DNS.

2. Adicione um novo registro DNS do tipo "CNAME" ou "ALIAS" para apontar o seu nome de domínio personalizado para o endereço do seu projeto na Vercel.

3. Vá para a página de configurações do projeto na Vercel e clique na guia "Domínios".

4. Adicione o seu nome de domínio personalizado na seção "Adicionar domínio".

6. Siga as instruções fornecidas pela Vercel para verificar a propriedade do seu domínio e configurar as configurações de DNS corretas.

7. Aguarde até que as mudanças nas configurações de DNS sejam propagadas (pode levar algumas horas) e verifique se o seu projeto está funcionando corretamente no seu nome de domínio personalizado.

Seu projeto agora está publicado e configurado com seu domínio personalizado, pronto para ser acessado por qualquer pessoa.

---

Lembre-se de que criar um portfólio não é apenas sobre design e tecnologia, mas também sobre destacar suas habilidades e experiências profissionais, podendo ser uma ferramenta valiosa para avançar na carreira de programador.

Criar um site pessoal nunca foi algo que esteve no topo da minha lista de prioridades, mas com o...

O que me motivou a criar um site pessoal e o que aprendi ao longo do caminho

Quando estamos desenvolvendo aplicações web, é comum lidarmos com ações do usuário que podem gerar muitos eventos em um curto período de tempo. Por exemplo, o usuário pode clicar repetidamente em um botão ou rolar rapidamente a página. Esses eventos podem levar a uma sobrecarga do sistema, pois cada evento pode desencadear um processamento complexo. É aqui que entram as técnicas de Debouncing e Throttling no JavaScript para melhorar a performance e evitar que o sistema seja sobrecarregado.
<h1>Debouncing:</h1>
Debouncing é uma técnica utilizada para garantir que um evento só seja acionado após um determinado tempo de inatividade do usuário. Isso é útil quando o evento é acionado várias vezes em rápida sucessão, como ao digitar no campo de busca. A técnica de debouncing funciona configurando um temporizador para aguardar um período específico antes de executar a ação. Se um novo evento for acionado durante esse tempo, o temporizador será reiniciado e o período de espera começará novamente.
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">function debounce(func, delay) {
 let timer;

 return function() {
 const context = this;
 const args = arguments;

 clearTimeout(timer);
 timer = setTimeout(() => func.apply(context, args), delay);
 }
}

function search() {
 // Código para realizar a busca
}

const searchDebounced = debounce(search, 500);
document.querySelector('# searchInput').addEventListener('keyup', searchDebounced);
</code></pre></div>
No exemplo acima, a função debounce recebe duas variáveis, uma função e um número representando o período de espera em milissegundos. Ela retorna uma nova função que usará o temporizador para esperar o período de tempo especificado antes de executar a função de busca. Quando o usuário digita algo no campo de busca, a função debounce é chamada e configura um temporizador. Se o usuário digitar mais coisas antes que o temporizador expire, ele é reiniciado. Quando o temporizador finalmente expirar, a função de busca é executada.
<h1>Throttling:</h1>
Throttling é uma técnica semelhante ao debouncing, mas em vez de aguardar um período de inatividade do usuário, ela executa o evento a cada período de tempo definido. Isso é útil quando o evento precisa ser acionado com frequência, mas não em excesso, como ao rolar a página.
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">function throttle(func, delay) {
 let lastCall = 0;

 return function() {
 const now = new Date().getTime();

 if (now - lastCall &#x3C; delay) {
 return;
 }

 lastCall = now;
 func.apply(this, arguments);
 }
}

function logScrollPosition() {
 console.log(window.scrollY);
}

const throttledLog = throttle(logScrollPosition, 500);
window.addEventListener('scroll', throttledLog);
</code></pre></div>
No exemplo acima, a função throttle também recebe duas variáveis, uma função e um número representando o período de tempo em milissegundos. Ela retorna uma nova função que verifica a hora da última chamada à função. Se o tempo decorrido desde a última chamada for menor do que o período de tempo especificado, a função de rolagem é ignorada. Se for maior, a função de rolagem é executada e o tempo da última chamada é atualizado.
<h1>Comparação entre Debouncing e Throttling:</h1>
Tanto o debouncing quanto o throttling são técnicas que ajudam a melhorar a performance do sistema, evitando sobrecargas desnecessárias. No entanto, cada uma é adequada para um tipo diferente de evento.
O debouncing é mais útil para eventos que podem ser acionados várias vezes em rápida sucessão, como digitar em um campo de busca. Ele aguarda um período de inatividade do usuário antes de executar a ação, evitando que a ação seja executada várias vezes em sequência. Isso ajuda a reduzir a sobrecarga do sistema, já que a ação só será executada uma vez, após um período de espera.
Por outro lado, o throttling é mais adequado para eventos que precisam ser acionados com frequência, mas não em excesso. Por exemplo, ao rolar uma página, o evento de rolagem é acionado várias vezes em rápida sucessão. Com o throttling, o evento é executado a cada período de tempo definido, evitando que a ação seja executada em excesso e reduzindo a sobrecarga do sistema.
Ao usar essas técnicas em seu código JavaScript, você pode garantir que seu aplicativo seja mais responsivo e eficiente, proporcionando uma melhor experiência do usuário.

Quando estamos desenvolvendo aplicações web, é comum lidarmos com ações do usuário que podem gerar muitos eventos em um curto período de tempo. Por exemplo, o usuário pode clicar repetidamente em um botão ou rolar rapidamente a página. Esses eventos podem levar a uma sobrecarga do sistema, pois cada evento pode desencadear um processamento complexo. É aqui que entram as técnicas de Debouncing e Throttling no JavaScript para melhorar a performance e evitar que o sistema seja sobrecarregado.

# Debouncing:

Debouncing é uma técnica utilizada para garantir que um evento só seja acionado após um determinado tempo de inatividade do usuário. Isso é útil quando o evento é acionado várias vezes em rápida sucessão, como ao digitar no campo de busca. A técnica de debouncing funciona configurando um temporizador para aguardar um período específico antes de executar a ação. Se um novo evento for acionado durante esse tempo, o temporizador será reiniciado e o período de espera começará novamente.

```javascript
function debounce(func, delay) {
 let timer;

 return function() {
 const context = this;
 const args = arguments;

 clearTimeout(timer);
 timer = setTimeout(() => func.apply(context, args), delay);
 }
}

function search() {
 // Código para realizar a busca
}

const searchDebounced = debounce(search, 500);
document.querySelector('# searchInput').addEventListener('keyup', searchDebounced);
```

No exemplo acima, a função debounce recebe duas variáveis, uma função e um número representando o período de espera em milissegundos. Ela retorna uma nova função que usará o temporizador para esperar o período de tempo especificado antes de executar a função de busca. Quando o usuário digita algo no campo de busca, a função debounce é chamada e configura um temporizador. Se o usuário digitar mais coisas antes que o temporizador expire, ele é reiniciado. Quando o temporizador finalmente expirar, a função de busca é executada.

# Throttling:

Throttling é uma técnica semelhante ao debouncing, mas em vez de aguardar um período de inatividade do usuário, ela executa o evento a cada período de tempo definido. Isso é útil quando o evento precisa ser acionado com frequência, mas não em excesso, como ao rolar a página.

```javascript
function throttle(func, delay) {
 let lastCall = 0;

 return function() {
 const now = new Date().getTime();

 if (now - lastCall < delay) {
 return;
 }

 lastCall = now;
 func.apply(this, arguments);
 }
}

function logScrollPosition() {
 console.log(window.scrollY);
}

const throttledLog = throttle(logScrollPosition, 500);
window.addEventListener('scroll', throttledLog);
```

No exemplo acima, a função throttle também recebe duas variáveis, uma função e um número representando o período de tempo em milissegundos. Ela retorna uma nova função que verifica a hora da última chamada à função. Se o tempo decorrido desde a última chamada for menor do que o período de tempo especificado, a função de rolagem é ignorada. Se for maior, a função de rolagem é executada e o tempo da última chamada é atualizado.

# Comparação entre Debouncing e Throttling:

Tanto o debouncing quanto o throttling são técnicas que ajudam a melhorar a performance do sistema, evitando sobrecargas desnecessárias. No entanto, cada uma é adequada para um tipo diferente de evento.

O debouncing é mais útil para eventos que podem ser acionados várias vezes em rápida sucessão, como digitar em um campo de busca. Ele aguarda um período de inatividade do usuário antes de executar a ação, evitando que a ação seja executada várias vezes em sequência. Isso ajuda a reduzir a sobrecarga do sistema, já que a ação só será executada uma vez, após um período de espera.

Por outro lado, o throttling é mais adequado para eventos que precisam ser acionados com frequência, mas não em excesso. Por exemplo, ao rolar uma página, o evento de rolagem é acionado várias vezes em rápida sucessão. Com o throttling, o evento é executado a cada período de tempo definido, evitando que a ação seja executada em excesso e reduzindo a sobrecarga do sistema.

Ao usar essas técnicas em seu código JavaScript, você pode garantir que seu aplicativo seja mais responsivo e eficiente, proporcionando uma melhor experiência do usuário.

Quando estamos desenvolvendo aplicações web, é comum lidarmos com ações do usuário que podem gerar...

Como Debouncing e Throttling podem ajudar a evitar sobrecargas

## O que é Array em JavaScript?

Um Array (também conhecido como matriz) armazena uma coleção de elementos, que podem ser de diferentes tipos de dados, tais como números, strings, booleans e objetos. Os elementos dentro de um array são acessados através de um índice, que começa em 0 para o primeiro elemento do array.

Embora seja possível armazenar diferentes tipos de dados em um único array no JavaScript, é recomendado que usemos apenas um tipo de dado por array. Isso ajuda a manter a organização dos dados e torna mais fácil a manipulação dos elementos dentro do array.

Podemos declarar arrays de duas maneiras diferentes.

- new Array

```js
const fruits = new Array("Apple", "Banana");
```

- Literal Notation

```javascript
const fruits = ["Apple", "Banana"];
```

## Métodos de Array

Agora, vamos entender os métodos de um array dentro do JavaScript e como usá-los.

- Map()

O método `.map()` permite executar uma função de callback para cada elemento dentro do array.

```javascript
const list = [1, 2, 3, 4, 5];
list.map((item) => item * 2); // Output: [2, 4, 6, 8, 10]
```

- Filter()

O método `.filter()` retorna uma cópia superficial com todos os elementos que passaram no teste implementado pela função fornecida.

```javascript
const list = [1, 2, 3, 4, 5];
list.filter((item) => item % 2 === 0); // Output: [2, 4]
```

- Push()

Adiciona um novo ou mais elementos ao final do array e retorna o novo comprimento.

```javascript
const list = [1, 2, 3, 4, 5];
list.push(6); // Output: 6
console.log(list); // Output: [1, 2, 3, 4, 5, 6]
```

- Pop()

Remove o último elemento do array e retorna esse elemento.

```javascript
const list = [1, 2, 3, 4, 5];
list.pop(); // Output: 5
console.log(list); // Output: [1, 2, 3, 4]
```

- Unshift()

Adiciona um novo ou mais elementos ao inicio do array e retorna o novo comprimento.

```javascript
const list = [1, 2, 3, 4, 5];
list.unshift(0); // Output: 6
console.log(list); // Output: [0, 1, 2, 3, 4, 5]
```

- Shift()

Remove o primeiro elemento do array e retorna esse elemento.

```javascript
const list = [1, 2, 3, 4, 5];
list.shift(); // Output: 1
console.log(list); // Output: [2, 3, 4, 5]
```

- Splice()

O método `.splice()` é um método de uso geral para alterar o conteúdo de uma array removendo, substituindo ou adicionando elementos em posições especificadas da array.

```javascript
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits); // Output: ['Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango']
```

- Slice()

O método `.slice()` retorna uma cópia superficial com todos os elementos selecionados. Este método recebe dois argumentos, o índice inicial e o índice final da seleção. O índice final é opcional, e se não for especificado, o método seleciona todos os elementos a partir do índice inicial até o final do array.

```javascript
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.slice(1)); // Output: ["Orange", "Apple", "Mango"]
console.log(fruits.slice(1, 3)); // Output: ["Orange", "Apple"]
```

- IndexOf()

O método `.indexOf()` retorna o índice de um determinado elemento ou retorna -1 se este elemento não estiver presente no array.

```javascript
const list = [1, 2, 3, 4, 5];
list.indexOf(3); // Output: 2
list.indexOf(6); // Output: -1
```

- Reduce()

O método `.reduce()` executa uma função de callback para cada elemento do array, retornando o resultado final do cálculo de todos os elementos.

```javascript
const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item); // Output: 15
```

- Includes()

Retorna _true_ se o elemento fornecido estiver presente no array.

```javascript
const list = [1, 2, 3, 4, 5];
list.includes(3); // Output: true
list.includes(6); // Output: false
```

- Sort()

O método `.sort()` ordena os elementos do array. A ordem padrão é crescente, construída na conversão dos elementos em strings e, em seguida, comparando suas sequências de valores de unidades de código UTF-16.

```javascript
const array = ['D', 'B', 'A', 'C'];
array.sort(); // Output: ['A', 'B', 'C', 'D']

const list = [4, 1, 3, 2, 10];
list.sort(); // Output: [1, 10, 2, 3, 4]
list.sort((a, b) => a - b); // Output: [1, 2, 3, 4, 10]
```

- Reverse()

Inverte a ordem dos elementos.

```javascript
const list = [1, 2, 3, 4, 5];
list.reverse();
console.log(list) // Output: [5, 4, 3, 2, 1]
```

- Find()

Retorna o primeiro elemento do array que satisfaz a função de teste fornecida. Se nenhum valor satisfizer a função de teste, _undefined_ será retornado.

```javascript
const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // Output: 3
list.find((el) => el === 6); // Output: undefined
```

- FindIndex()

O método `.findIndex()` retorna o índice de um determinado elemento ou retorna -1 se este elemento não estiver presente no array.

A principal diferença entre `.indexOf()` e `findIndex` são os parâmetros dessas funções:

- `.indexOf()` espera um valor como primeiro parâmetro. Isso o torna uma boa escolha para encontrar o índice em arrays de tipos primitivos, como strings, numbers, ou booleans.

- `.findIndex()` espera uma função de callback como primeiro parâmetro. Isso faz com quê este método seja uma boa escolha para buscar o índice em arrays de tipos não primitivos (por exemplo, objetos) ou se sua condição de localização for mais complexa do que apenas um valor.

```javascript
const list = [5, 12, 8, 130, 44];
list.findIndex((element) => element > 13); // Output: 3

const array = [{ id: 12 }, { id: 34 }, { id: 78 }, { id: 88 }];

array.findIndex((element) => element.id === 78); // Output: 2
```

- Join()

Une todos os elementos de um array em uma string.

```javascript
const list = [1, 2, 3, 4, 5];
list.join(', '); // Output: "1, 2, 3, 4, 5"
```

- Some()

Retorna _true_ se pelo menos um elemento do array passar no teste implementado pela função fornecida.

```javascript
const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // Output: true
list.some((el) => el === 6); // Output: false
```

- Every()

Retorna _true_ se todos os elementos do array passarem no teste implementado pela função fornecida.

```javascript
const list = [1, 2, 3, 4, 5];
list.every((el) => el === 3); // Output: false

const list = [2, 4, 6, 8, 10];
list.every((el) => el % 2 === 0); // Output: true
```

- At()

Retorna o elemento no índice especificado.

```javascript
const list = [5, 12, 8, 130, 44];

let index = 2;
console.log(`Using an index of ${ index } the item returned is ${ list.at(index) }.`); // Output: "Using an index of 2 the item returned is 8"

index = -2;
console.log(`Using an index of ${ index } item returned is ${ list.at(index) }.`); // Output: "Using an index of -2 item returned is 130"
```

- Flat()

Retorna um novo array com todos os elementos do sub-array concatenados nele recursivamente até a profundidade especificada.

```javascript
const list = [1, 2, [3, 4, [5, 6]]];
list.flat(Infinity); // Output: [1, 2, 3, 4, 5, 6]
```

Em resumo, um array em JavaScript é uma coleção de elementos acessados por índices que podem ser de diferentes tipos de dados. Embora seja possível armazenar diferentes tipos de dados em um único array, é recomendado usar apenas um tipo de dado para manter a organização dos dados. Existem vários métodos disponíveis em JavaScript para manipular arrays, como `map()`, `filter()`, `push()`, `pop()`, `unshift()`, `shift()`, `splice()`, `slice()`, `indexOf()`, `reduce()`, `includes()` e `sort()`. Cada método executa uma operação específica em um array e ajuda a tornar a manipulação de dados mais fácil e eficiente.

O que é Array em JavaScript?   Um Array (também conhecido como matriz) armazena uma coleção...

Conhecendo os métodos de Arrays no JavaScript

O controle de fluxo se refere à forma como o código é executado, levando em consideração condições ou eventos específicos. Esse recurso permite que o desenvolvedor controle a execução do código de acordo com diferentes condições.
Existem três tipos principais de controle de fluxo no JavaScript:
<h2>Estruturas de Decisão:</h2>
As estruturas de decisão permitem que o desenvolvedor execute diferentes blocos de código com base em uma condição. Existem duas estruturas de decisão principais no JavaScript: a declaração if e a declaração switch. A instrução if executa um bloco de código se a condição especificada for verdadeira. Já a declaração switch executa diferentes blocos de código com base em diferentes valores.
<ul>
<li>if...else:</li>
</ul>
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">const age = 18;

if (age >= 18) {
 console.log("you are of legal age.");
} else {
 console.log("you are a minor.");
}
</code></pre></div>
<ul>
<li>switch:</li>
</ul>
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">const color = 'green';

switch (color) {
 case 'red':
 console.log('the color is red.');
 break;
 case 'blue':
 console.log('the color is blue.');
 break;
 case 'green':
 console.log('the color is green.');
 break;
 default:
 console.log('the color is unknown.');
 break;
}
</code></pre></div>
<h2>Estruturas de Loop:</h2>
As estruturas de loop permitem que o desenvolvedor execute um bloco de código várias vezes com base em uma condição específica. Existem três estruturas de loop principais no JavaScript: a declaração for, a declaração while e a declaração do-while. A instrução for executa um bloco de código várias vezes com base em uma condição específica. A instrução while executa um bloco de código enquanto a condição especificada for verdadeira. A instrução do-while executa um bloco de código pelo menos uma vez e, em seguida, continua a executá-lo enquanto a condição especificada for verdadeira.
<ul>
<li>for:</li>
</ul>
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">for (let i = 0; i &#x3C; 5; i++) {
 console.log(i);
}
</code></pre></div>
<ul>
<li>while:</li>
</ul>
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">let i = 0;

while (i &#x3C; 5) {
 console.log(i);
 i++;
}
</code></pre></div>
<ul>
<li>do...while:</li>
</ul>
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">let i = 0;

do {
 console.log(i);
 i++;
} while (i &#x3C; 5);
</code></pre></div>
<h2>Estruturas de Controle de Exceção:</h2>
Por fim, as estruturas de controle de exceção permitem que o desenvolvedor manipule erros no código. Existem dois tipos principais de estruturas de controle de exceção em JavaScript: a declaração try-catch e a declaração throw. A instrução try-catch tenta executar um bloco de código e, se ocorrer um erro, captura o erro e executa um bloco de código diferente. A instrução throw é usada para gerar um erro manualmente.
<ul>
<li>try-catch + throw:</li>
</ul>
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">function divide(a, b) {
 if (b === 0) {
 throw new Error('cannot divide by zero.');
 }

 return a / b;
}

try {
 const result = divide(10, 0);
 console.log(result);
} catch (error) {
 console.log(error.message);
}
</code></pre></div>
Em resumo, o controle de fluxo é uma ferramenta fundamental para o desenvolvimento de software em JavaScript. Por meio de estruturas de decisão, loop e controle de exceção, os desenvolvedores podem controlar a execução do código de acordo com diferentes condições, tornando o código mais eficiente e fácil de manter. É importante que os desenvolvedores tenham um bom conhecimento dessas estruturas para escrever código limpo e eficiente.

O controle de fluxo se refere à forma como o código é executado, levando em consideração condições ou eventos específicos. Esse recurso permite que o desenvolvedor controle a execução do código de acordo com diferentes condições.

Existem três tipos principais de controle de fluxo no JavaScript:

## Estruturas de Decisão:

As estruturas de decisão permitem que o desenvolvedor execute diferentes blocos de código com base em uma condição. Existem duas estruturas de decisão principais no JavaScript: a declaração _if_ e a declaração _switch_. A instrução _if_ executa um bloco de código se a condição especificada for verdadeira. Já a declaração _switch_ executa diferentes blocos de código com base em diferentes valores.

- _if...else_:

```javascript
const age = 18;

if (age >= 18) {
 console.log("you are of legal age.");
} else {
 console.log("you are a minor.");
}
```

- _switch_:

```javascript
const color = 'green';

switch (color) {
 case 'red':
 console.log('the color is red.');
 break;
 case 'blue':
 console.log('the color is blue.');
 break;
 case 'green':
 console.log('the color is green.');
 break;
 default:
 console.log('the color is unknown.');
 break;
}
```

## Estruturas de Loop:

As estruturas de loop permitem que o desenvolvedor execute um bloco de código várias vezes com base em uma condição específica. Existem três estruturas de loop principais no JavaScript: a declaração _for_, a declaração _while_ e a declaração _do-while_. A instrução _for_ executa um bloco de código várias vezes com base em uma condição específica. A instrução _while_ executa um bloco de código enquanto a condição especificada for verdadeira. A instrução _do-while_ executa um bloco de código pelo menos uma vez e, em seguida, continua a executá-lo enquanto a condição especificada for verdadeira.

- _for_:

```javascript
for (let i = 0; i < 5; i++) {
 console.log(i);
}
```

- _while_:

```javascript
let i = 0;

while (i < 5) {
 console.log(i);
 i++;
}
```

- _do...while_:

```javascript
let i = 0;

do {
 console.log(i);
 i++;
} while (i < 5);
```

## Estruturas de Controle de Exceção:

Por fim, as estruturas de controle de exceção permitem que o desenvolvedor manipule erros no código. Existem dois tipos principais de estruturas de controle de exceção em JavaScript: a declaração _try-catch_ e a declaração _throw_. A instrução _try-catch_ tenta executar um bloco de código e, se ocorrer um erro, captura o erro e executa um bloco de código diferente. A instrução _throw_ é usada para gerar um erro manualmente.

- _try-catch_ + _throw_:

```javascript
function divide(a, b) {
 if (b === 0) {
 throw new Error('cannot divide by zero.');
 }

 return a / b;
}

try {
 const result = divide(10, 0);
 console.log(result);
} catch (error) {
 console.log(error.message);
}
```

Em resumo, o controle de fluxo é uma ferramenta fundamental para o desenvolvimento de software em JavaScript. Por meio de estruturas de decisão, loop e controle de exceção, os desenvolvedores podem controlar a execução do código de acordo com diferentes condições, tornando o código mais eficiente e fácil de manter. É importante que os desenvolvedores tenham um bom conhecimento dessas estruturas para escrever código limpo e eficiente.

O controle de fluxo se refere à forma como o código é executado, levando em consideração condições ou...

Uma visão geral das estruturas de decisão, loop e controle de exceção

Hoisting é um comportamento do JavaScript que muitos desenvolvedores iniciantes têm dificuldade de entender. É um conceito que tem relação com a forma como as declarações de variáveis e funções são interpretadas pela engine do JavaScript. Neste artigo, vamos discutir o que é hoisting, como ele funciona e suas implicações no JavaScript.
<h2>O que é Hoisting?</h2>
Hoisting é o processo que ocorre no JavaScript onde o interpretador "eleva" todas as declarações de variáveis e funções para o topo do escopo atual antes da execução do código. No entanto, é importante entender que as declarações de variáveis e funções não são fisicamente movidas para o topo do código, mas sim colocadas na memória durante a fase de compilação, permanecendo exatamente onde você as digitou.
Em outras palavras, quando você executa um código JavaScript, o interpretador primeiro analisa todo o código para procurar por declarações de variáveis e funções. Ele então reserva espaço na memória para essas declarações, tornando-as disponíveis antes mesmo de serem declaradas no código. Isso significa que você pode chamar uma função ou variável antes de serem declaradas, pois o interpretador já as carregou na memória.
Vejamos um exemplo simples:
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">console.log(x); // undefined
var x = 5;
</code></pre></div>
Neste exemplo, a variável <code>x</code> é declarada depois que ela é usada, mas mesmo assim não recebemos um erro. Isso ocorre porque o interpretador do JavaScript move a declaração da variável para o topo do escopo atual durante a fase de compilação, o que significa que a variável já está definida quando o código é executado. No entanto, o valor da variável ainda não foi atribuido, e é por isso que o <code>console.log(x)</code> retorna <code>undefined</code>.
<h2>Variáveis em Hoisting</h2>
Quando se trata de variáveis, o hoisting afeta as declarações de variáveis feitas com a palavra-chave var. A palavra-chave var é a mais antiga e foi usada para declarar variáveis no JavaScript antes do ECMAScript 2015. As variáveis declaradas como var possuem escopo global ou de função e são içadas (hoisted).
Isso significa que a declaração da variável é movida para o topo do escopo atual antes da execução do código. No entanto, apenas a declaração é movida para o topo, não a atribuição do valor. Como resultado, se uma variável for utilizada antes de ser declarada e inicializada, seu valor será <code>undefined</code>.
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">console.log(name); // Output: undefined
var name = 'Joel';
console.log(name); // Output: 'Joel'
</code></pre></div>
Por outro lado, a palavra-chave let, introduzida no ECMAScript 2015, possui comportamento semelhante ao var quanto ao hoisting, mas com escopo de bloco. Isso significa que as variáveis declaradas como let só são visíveis dentro do bloco em que foram declaradas. Além disso, as variáveis declaradas como let não podem ser redeclaradas no mesmo escopo.
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">console.log(name); // Uncaught ReferenceError: name is not defined
let name = 'Joel';
console.log(name); // Output: 'Joel'
</code></pre></div>
Já a palavra-chave const, também introduzida no ECMAScript 2015, possui escopo de bloco como let, mas não permite reatribuição de valor. Uma vez que uma variável é inicializada como const, seu valor não pode ser modificado. É possível, no entanto, modificar as propriedades ou elementos do objeto ou array.
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">const name = 'Joel';
name = 'Maria'; // Uncaught TypeError: Assignment to constant variable.

// Embora não possamos reatribuir a constante "person", podemos modificar a propriedade "age" do objeto que ela referencia.

const person = { name: 'Joel', age: 23 };
person.age = 31;

console.log(person); // Output: { name: 'Joel', age: 31 }

// Mesmo que a variável "numbers" seja uma constante, podemos modificar o conteúdo do array usando métodos como push().

const numbers = [1, 2, 3];
numbers.push(4);

console.log(numbers); // Output: [1, 2, 3, 4]
</code></pre></div>
<h2>Funções em Hoisting</h2>
O hoisting afeta as funções da mesma maneira que afeta as variáveis no JavaScript. Durante o processo de compilação do código, todas as declarações de funções são movidas para o topo do escopo atual antes da execução do código, permitindo que elas sejam usadas antes mesmo de serem declaradas. No entanto, apenas a declaração da função é movida para o topo, não a atribuição de valor, o que significa que não é possível chamar uma função anônima antes de sua declaração.
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">sayHello(); // Output: 'Hello!'

function sayHello () {
 console.log('Hello!');
}

sayHi(); // Uncaught TypeError: sayHi is not a function

let sayHi = function () {
 console.log('Hi!');
}
</code></pre></div>
Neste exemplo, uma função anônima é atribuída à variável <code>sayHi</code> com a palavra-chave let. No entanto, como a atribuição de valor não é içada, a tentativa de chamar a função sayHi() antes de sua declaração resulta em um <code>TypeError</code>.
Portanto, é importante entender a diferença entre as palavras-chave var, let e const e como o hoisting afeta cada uma delas, bem como as funções em JavaScript, para escrever um código mais seguro e evitar erros de referência. Além disso, é recomendado declarar todas as variáveis e funções antes de sua utilização, para evitar confusão e facilitar a leitura e manutenção do código.

Hoisting é um comportamento do JavaScript que muitos desenvolvedores iniciantes têm dificuldade de entender. É um conceito que tem relação com a forma como as declarações de variáveis e funções são interpretadas pela _engine_ do JavaScript. Neste artigo, vamos discutir o que é hoisting, como ele funciona e suas implicações no JavaScript.

## O que é Hoisting?

Hoisting é o processo que ocorre no JavaScript onde o interpretador "eleva" todas as **declarações** de variáveis e funções para o topo do escopo atual antes da execução do código. No entanto, é importante entender que as declarações de variáveis e funções não são fisicamente movidas para o topo do código, mas sim colocadas na memória durante a fase de compilação, permanecendo exatamente onde você as digitou.

Em outras palavras, quando você executa um código JavaScript, o interpretador primeiro analisa todo o código para procurar por declarações de variáveis e funções. Ele então reserva espaço na memória para essas declarações, tornando-as disponíveis antes mesmo de serem declaradas no código. Isso significa que você pode chamar uma função ou variável antes de serem declaradas, pois o interpretador já as carregou na memória.

Vejamos um exemplo simples:

```javascript
console.log(x); // undefined
var x = 5;
```

Neste exemplo, a variável `x` é declarada depois que ela é usada, mas mesmo assim não recebemos um erro. Isso ocorre porque o interpretador do JavaScript move a declaração da variável para o topo do escopo atual durante a fase de compilação, o que significa que a variável já está definida quando o código é executado. No entanto, o valor da variável ainda não foi atribuido, e é por isso que o `console.log(x)` retorna `undefined`.

## Variáveis em Hoisting

Quando se trata de variáveis, o hoisting afeta as declarações de variáveis feitas com a palavra-chave _var_. A palavra-chave _var_ é a mais antiga e foi usada para declarar variáveis no JavaScript antes do ECMAScript 2015. As variáveis declaradas como _var_ possuem escopo global ou de função e são içadas (hoisted).

Isso significa que a declaração da variável é movida para o topo do escopo atual antes da execução do código. No entanto, apenas a declaração é movida para o topo, não a atribuição do valor. Como resultado, se uma variável for utilizada antes de ser declarada e inicializada, seu valor será `undefined`.

```javascript
console.log(name); // Output: undefined
var name = 'Joel';
console.log(name); // Output: 'Joel'
```

Por outro lado, a palavra-chave _let_, introduzida no ECMAScript 2015, possui comportamento semelhante ao _var_ quanto ao hoisting, mas com escopo de bloco. Isso significa que as variáveis declaradas como _let_ só são visíveis dentro do bloco em que foram declaradas. Além disso, as variáveis declaradas como _let_ não podem ser redeclaradas no mesmo escopo.

```javascript
console.log(name); // Uncaught ReferenceError: name is not defined
let name = 'Joel';
console.log(name); // Output: 'Joel'
```

Já a palavra-chave _const_, também introduzida no ECMAScript 2015, possui escopo de bloco como _let_, mas não permite reatribuição de valor. Uma vez que uma variável é inicializada como _const_, seu valor não pode ser modificado. É possível, no entanto, modificar as propriedades ou elementos do objeto ou array.

```javascript
const name = 'Joel';
name = 'Maria'; // Uncaught TypeError: Assignment to constant variable.

// Embora não possamos reatribuir a constante "person", podemos modificar a propriedade "age" do objeto que ela referencia.

const person = { name: 'Joel', age: 23 };
person.age = 31;

console.log(person); // Output: { name: 'Joel', age: 31 }

// Mesmo que a variável "numbers" seja uma constante, podemos modificar o conteúdo do array usando métodos como push().

const numbers = [1, 2, 3];
numbers.push(4);

console.log(numbers); // Output: [1, 2, 3, 4]
```

## Funções em Hoisting

O hoisting afeta as funções da mesma maneira que afeta as variáveis no JavaScript. Durante o processo de compilação do código, todas as declarações de funções são movidas para o topo do escopo atual antes da execução do código, permitindo que elas sejam usadas antes mesmo de serem declaradas. No entanto, apenas a declaração da função é movida para o topo, não a atribuição de valor, o que significa que não é possível chamar uma função anônima antes de sua declaração.

```javascript
sayHello(); // Output: 'Hello!'

function sayHello () {
  console.log('Hello!');
}

sayHi(); // Uncaught TypeError: sayHi is not a function

let sayHi = function () {
  console.log('Hi!');
}
```

Neste exemplo, uma função anônima é atribuída à variável `sayHi` com a palavra-chave _let_. No entanto, como a atribuição de valor não é içada, a tentativa de chamar a função _sayHi()_ antes de sua declaração resulta em um `TypeError`.

Portanto, é importante entender a diferença entre as palavras-chave _var_, _let_ e _const_ e como o hoisting afeta cada uma delas, bem como as funções em JavaScript, para escrever um código mais seguro e evitar erros de referência. Além disso, é recomendado declarar todas as variáveis e funções antes de sua utilização, para evitar confusão e facilitar a leitura e manutenção do código.

Hoisting é um comportamento do JavaScript que muitos desenvolvedores iniciantes têm dificuldade de...

Hoisting: Como evitar erros comuns de referência em JavaScript

Se você está procurando por uma solução completa e integrada para oferecer uma experiência digital de alta qualidade, o Liferay pode ser a solução ideal para atender às suas necessidades.
O Liferay é uma plataforma de código aberto que oferece uma série de recursos e ferramentas para o gerenciamento de conteúdo, colaboração, personalização e integração em um único ecossistema.
Desde a sua criação em 2002, o Liferay tem ajudado as empresas a criar portais web, intranets e sites colaborativos personalizados, integrados e eficientes. Com uma ampla gama de recursos e funcionalidades, o Liferay oferece uma solução escalável e flexível para atender às necessidades de diferentes organizações, melhorando a experiência do usuário e aumentando a eficiência dos negócios.
<h2>Os Principais Recursos do Liferay</h2>
O Liferay oferece uma ampla variedade de funcionalidades e recursos para atender às necessidades de desenvolvimento de portais, intranets e sites colaborativos. Entre eles, podemos destacar:
Gerenciamento de Conteúdo: O Liferay oferece um sistema de gerenciamento de conteúdo flexível que permite aos usuários criar, gerenciar e publicar conteúdo facilmente. Com esse sistema, é possível criar artigos, notícias, eventos, documentos e muito mais.
Colaboração: O Liferay oferece recursos de colaboração, como fóruns de discussão, wikis e blogs, que ajudam a melhorar a comunicação e a produtividade da equipe.
Personalização: O Liferay permite personalizar a experiência do usuário com base em suas preferências, histórico de navegação e outras informações, ajudando a melhorar a relevância e o engajamento do conteúdo.
E-Commerce: O Liferay possui recursos de comércio eletrônico integrados que permitem criar e gerenciar lojas online, catálogos de produtos e processos de compra e pagamento.
<h2>Arquitetura do Liferay</h2>
O Liferay é construído sobre uma arquitetura modular e escalável que permite aos desenvolvedores criar e integrar aplicativos com facilidade. A arquitetura do Liferay inclui:
Estrutura de Aplicativos: O Liferay é baseado em portlets, que são pequenos aplicativos web que podem ser implantados e gerenciados de forma independente dentro do portal.
Modelo de Desenvolvimento: O Liferay suporta diferentes modelos de desenvolvimento, incluindo portlets JSR-286, plugins e temas.
Padrões de Codificação: O Liferay segue os padrões de codificação recomendados pela comunidade Java, incluindo JSP, servlets e JPA.
<h2>Desenvolvimento de aplicativos com Liferay</h2>
O Liferay oferece várias ferramentas e recursos que ajudam os desenvolvedores a criar aplicativos para o portal. Algumas das principais ferramentas e recursos incluem:
Portlet Development Kit (PDK): O PDK é uma ferramenta que ajuda os desenvolvedores a criar e implantar portlets com facilidade. Ele inclui modelos, plug-ins e ferramentas de compilação que ajudam a acelerar o processo de desenvolvimento.
Plugins SDK: O Plugins SDK é uma coleção de ferramentas e recursos que ajudam os desenvolvedores a criar plugins e extensões para o Liferay. Ele inclui uma variedade de modelos, bibliotecas, ferramentas de compilação e exemplos de código para ajudar os desenvolvedores a começar rapidamente.
Liferay Developer Studio: O Liferay Developer Studio é um ambiente de desenvolvimento integrado (IDE) baseado no Eclipse que ajuda os desenvolvedores a criar e depurar aplicativos para o Liferay. Ele inclui uma série de recursos, como editores de código, depuradores, gerenciadores de plug-ins e suporte a Git.
IntelliJ IDEA: O Liferay IntelliJ Plugin oferece recursos e ferramentas para criar, implantar e testar aplicativos Liferay diretamente do IntelliJ IDEA, sem precisar alternar entre diferentes ferramentas ou ambientes de desenvolvimento. Com o plugin, é possível acessar as APIs do Liferay, gerenciar portlets e temas, além de integrar o ambiente de desenvolvimento com o servidor de aplicativos Liferay. Essa integração entre o IntelliJ IDEA e o Liferay torna o desenvolvimento de aplicativos para a plataforma mais fácil, rápido e produtivo para os desenvolvedores. Além disso, os recursos do Liferay Developer Studio também estão disponíveis para os usuários do IntelliJ IDEA que utilizam o Liferay IntelliJ Plugin.
Além dessas ferramentas, o Liferay também suporta uma variedade de linguagens de programação, incluindo Java, JavaScript, HTML, CSS e outras, permitindo que os desenvolvedores usem as linguagens com as quais estão mais familiarizados.
Outro recurso importante para o desenvolvimento de aplicativos no Liferay é a comunidade de desenvolvedores e usuários. A comunidade oferece suporte técnico, recursos de documentação, exemplos de código e fóruns de discussão onde os desenvolvedores podem compartilhar ideias e solucionar problemas.
Com essas ferramentas e recursos, o Liferay oferece um ambiente de desenvolvimento robusto e flexível para ajudar as empresas a criar aplicativos personalizados e estender a funcionalidade do portal para atender às suas necessidades específicas.

Se você está procurando por uma solução completa e integrada para oferecer uma experiência digital de alta qualidade, o Liferay pode ser a solução ideal para atender às suas necessidades.

O Liferay é uma plataforma de código aberto que oferece uma série de recursos e ferramentas para o gerenciamento de conteúdo, colaboração, personalização e integração em um único ecossistema.

Desde a sua criação em 2002, o Liferay tem ajudado as empresas a criar portais web, intranets e sites colaborativos personalizados, integrados e eficientes. Com uma ampla gama de recursos e funcionalidades, o Liferay oferece uma solução escalável e flexível para atender às necessidades de diferentes organizações, melhorando a experiência do usuário e aumentando a eficiência dos negócios.

## Os Principais Recursos do Liferay

O Liferay oferece uma ampla variedade de funcionalidades e recursos para atender às necessidades de desenvolvimento de portais, intranets e sites colaborativos. Entre eles, podemos destacar:

**Gerenciamento de Conteúdo:** O Liferay oferece um sistema de gerenciamento de conteúdo flexível que permite aos usuários criar, gerenciar e publicar conteúdo facilmente. Com esse sistema, é possível criar artigos, notícias, eventos, documentos e muito mais.


**Colaboração:** O Liferay oferece recursos de colaboração, como fóruns de discussão, wikis e blogs, que ajudam a melhorar a comunicação e a produtividade da equipe.

**Personalização:** O Liferay permite personalizar a experiência do usuário com base em suas preferências, histórico de navegação e outras informações, ajudando a melhorar a relevância e o engajamento do conteúdo.

**E-Commerce:** O Liferay possui recursos de comércio eletrônico integrados que permitem criar e gerenciar lojas online, catálogos de produtos e processos de compra e pagamento.

## Arquitetura do Liferay

O Liferay é construído sobre uma arquitetura modular e escalável que permite aos desenvolvedores criar e integrar aplicativos com facilidade. A arquitetura do Liferay inclui:

**Estrutura de Aplicativos:** O Liferay é baseado em portlets, que são pequenos aplicativos web que podem ser implantados e gerenciados de forma independente dentro do portal.

**Modelo de Desenvolvimento:** O Liferay suporta diferentes modelos de desenvolvimento, incluindo portlets JSR-286, plugins e temas.

**Padrões de Codificação:** O Liferay segue os padrões de codificação recomendados pela comunidade Java, incluindo JSP, servlets e JPA.

## Desenvolvimento de aplicativos com Liferay

O Liferay oferece várias ferramentas e recursos que ajudam os desenvolvedores a criar aplicativos para o portal. Algumas das principais ferramentas e recursos incluem:

**Portlet Development Kit (PDK):** O PDK é uma ferramenta que ajuda os desenvolvedores a criar e implantar portlets com facilidade. Ele inclui modelos, plug-ins e ferramentas de compilação que ajudam a acelerar o processo de desenvolvimento.

**Plugins SDK:** O Plugins SDK é uma coleção de ferramentas e recursos que ajudam os desenvolvedores a criar plugins e extensões para o Liferay. Ele inclui uma variedade de modelos, bibliotecas, ferramentas de compilação e exemplos de código para ajudar os desenvolvedores a começar rapidamente.

**Liferay Developer Studio:** O Liferay Developer Studio é um ambiente de desenvolvimento integrado (IDE) baseado no Eclipse que ajuda os desenvolvedores a criar e depurar aplicativos para o Liferay. Ele inclui uma série de recursos, como editores de código, depuradores, gerenciadores de plug-ins e suporte a Git.

**IntelliJ IDEA:** O Liferay IntelliJ Plugin oferece recursos e ferramentas para criar, implantar e testar aplicativos Liferay diretamente do IntelliJ IDEA, sem precisar alternar entre diferentes ferramentas ou ambientes de desenvolvimento. Com o plugin, é possível acessar as APIs do Liferay, gerenciar portlets e temas, além de integrar o ambiente de desenvolvimento com o servidor de aplicativos Liferay. Essa integração entre o IntelliJ IDEA e o Liferay torna o desenvolvimento de aplicativos para a plataforma mais fácil, rápido e produtivo para os desenvolvedores. Além disso, os recursos do Liferay Developer Studio também estão disponíveis para os usuários do IntelliJ IDEA que utilizam o Liferay IntelliJ Plugin.

Além dessas ferramentas, o Liferay também suporta uma variedade de linguagens de programação, incluindo Java, JavaScript, HTML, CSS e outras, permitindo que os desenvolvedores usem as linguagens com as quais estão mais familiarizados.

Outro recurso importante para o desenvolvimento de aplicativos no Liferay é a comunidade de desenvolvedores e usuários. A comunidade oferece suporte técnico, recursos de documentação, exemplos de código e fóruns de discussão onde os desenvolvedores podem compartilhar ideias e solucionar problemas.

Com essas ferramentas e recursos, o Liferay oferece um ambiente de desenvolvimento robusto e flexível para ajudar as empresas a criar aplicativos personalizados e estender a funcionalidade do portal para atender às suas necessidades específicas.

Se você está procurando por uma solução completa e integrada para oferecer uma experiência digital de...

Front-End Developer and Designer.

Entendendo a Engine, Runtime e Call Stack do JavaScript

O que me motivou a criar um site pessoal e o que aprendi ao longo do caminho

Como Debouncing e Throttling podem ajudar a evitar sobrecargas

Education

Work