
O Cursor IA é uma das ferramentas mais revolucionárias para desenvolvedores nos últimos anos. Combinando a potência de um editor de código moderno com inteligência artificial avançada, ele está transformando a forma como escrevemos código. Neste guia, vamos explorar os conceitos básicos e como utilizá-lo de maneira eficiente.

### O que é o Cursor IA?

O Cursor IA é um editor de código baseado no VS Code que integra modelos de linguagem avançados (como GPT-4) diretamente no ambiente de desenvolvimento. Isso significa que você pode conversar com a IA sobre seu código, solicitar explicações, refatorações e até mesmo gerar código novo, tudo isso sem sair do editor.

### Principais Características

- **Chat Integrado**: Conversa direta com a IA sobre seu código
- **Geração de Código**: Criação automática de funções, classes e componentes
- **Refatoração Inteligente**: Melhoria automática do código existente
- **Debugging Assistido**: Ajuda na identificação e correção de bugs
- **Documentação Automática**: Geração de comentários e documentação

### Primeiros Passos

#### 1. Instalação

O Cursor IA está disponível para Windows, macOS e Linux. Você pode baixá-lo diretamente do [site oficial](https://cursor.sh/).

```bash
# Após o download, instale normalmente como qualquer aplicação
# O Cursor IA é baseado no VS Code, então a interface será familiar
```

#### 2. Configuração Inicial

Após a instalação, você precisará configurar algumas preferências básicas:

```json
{
  "editor.fontSize": 14,
  "editor.fontFamily": "JetBrains Mono, Consolas, monospace",
  "editor.tabSize": 2,
  "editor.insertSpaces": true
}
```

### Utilizando o Chat com IA

#### Comandos Básicos

O Cursor IA possui comandos específicos que facilitam a interação:

- **Ctrl + K**: Abre o chat com IA
- **Ctrl + L**: Seleciona a linha atual para discussão
- **Ctrl + Shift + L**: Seleciona múltiplas linhas
- **Cmd/Ctrl + I**: Gera código inline

#### Exemplo Prático

Vamos supor que você queira criar uma função para validar email. Com o Cursor IA, você pode simplesmente perguntar:

```
"Me ajude a criar uma função para validar email em JavaScript"
```

E a IA irá gerar algo como:

```javascript
function validateEmail(email) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

// Exemplo de uso
console.log(validateEmail("usuario@exemplo.com")); // true
console.log(validateEmail("email-invalido")); // false
```

### Recursos Avançados

#### 1. Geração de Testes

O Cursor IA pode gerar testes automaticamente para seu código:

```javascript
// Para a função de validação de email acima, você pode pedir:
"Gere testes unitários para esta função"

// E receberá algo como:
describe('validateEmail', () => {
  test('deve retornar true para emails válidos', () => {
    expect(validateEmail('teste@exemplo.com')).toBe(true);
    expect(validateEmail('usuario123@gmail.com')).toBe(true);
  });

  test('deve retornar false para emails inválidos', () => {
    expect(validateEmail('email-invalido')).toBe(false);
    expect(validateEmail('@dominio.com')).toBe(false);
    expect(validateEmail('usuario@')).toBe(false);
  });
});
```

#### 2. Refatoração Inteligente

Você pode pedir para a IA refatorar código existente:

```
"Refatore esta função para ser mais legível e eficiente"
```

#### 3. Debugging Assistido

Quando encontrar um erro, você pode selecionar o código problemático e perguntar:

```
"Por que este código está gerando erro?"
```

### Dicas de Uso Eficiente

#### 1. Seja Específico

Quanto mais específico você for nas suas perguntas, melhores serão as respostas:

```
❌ "Me ajude com este código"
✅ "Como posso otimizar esta função de busca para melhorar a performance?"
```

#### 2. Use Contexto

Sempre forneça contexto sobre o que você está tentando fazer:

```
"Estou criando uma API REST em Node.js e preciso de uma função para validar CPF"
```

#### 3. Peça Explicações

Não hesite em pedir explicações sobre o código gerado:

```
"Pode explicar como esta função funciona?"
```

### Limitações e Considerações

#### 1. Revisão Sempre Necessária

O código gerado pela IA deve sempre ser revisado. A IA pode cometer erros ou gerar código que não atende exatamente às suas necessidades.

#### 2. Segurança

Nunca compartilhe informações sensíveis (como chaves de API, senhas) no chat com a IA.

#### 3. Dependência

Use a IA como ferramenta de produtividade, não como substituto para aprender programação.

### Integração com Git

O Cursor IA também pode ajudar com commits e mensagens do Git:

```
"Gere uma mensagem de commit para estas mudanças"
```

### Conclusão

O Cursor IA é uma ferramenta poderosa que pode aumentar significativamente sua produtividade como desenvolvedor. A chave para o sucesso é aprender a fazer as perguntas certas e sempre revisar o código gerado.

Lembre-se: a IA é uma ferramenta, não um substituto para o conhecimento e experiência. Use-a para acelerar seu trabalho, mas continue aprendendo e entendendo os conceitos fundamentais da programação.

### Próximos Passos

- Experimente diferentes tipos de perguntas
- Explore os recursos de debugging
- Teste a geração de documentação
- Pratique refatoração de código existente

O Cursor IA está em constante evolução, então mantenha-se atualizado com as novas funcionalidades e melhorias que são lançadas regularmente.



O FastAPI é um dos frameworks mais modernos e rápidos para desenvolvimento de APIs em Python. Combinando alta performance, tipagem automática e documentação automática, ele se tornou uma escolha popular entre desenvolvedores. Neste guia, vamos explorar como configurar o ambiente e criar seu primeiro endpoint.

### O que é o FastAPI?

O FastAPI é um framework web moderno para Python baseado em type hints padrão do Python 3.6+. Ele foi construído sobre Starlette e Pydantic, oferecendo:

- **Performance**: Uma das APIs mais rápidas disponíveis, comparável ao NodeJS e Go
- **Documentação Automática**: Gera automaticamente documentação interativa (Swagger/OpenAPI)
- **Validação Automática**: Validação de dados baseada em type hints
- **Editor Support**: Excelente suporte em editores como VS Code e PyCharm

### Configuração do Ambiente

#### 1. Pré-requisitos

Antes de começar, certifique-se de ter Python 3.7+ instalado:

```bash
python --version
# Python 3.8.0 ou superior
```

#### 2. Criando um Ambiente Virtual

É uma boa prática usar ambientes virtuais para isolar as dependências:

```bash
# Criar o ambiente virtual
python -m venv fastapi-env

# Ativar o ambiente (Windows)
fastapi-env\Scripts\activate

# Ativar o ambiente (Linux/Mac)
source fastapi-env/bin/activate
```

#### 3. Instalando o FastAPI

Com o ambiente virtual ativado, instale o FastAPI e o servidor ASGI:

```bash
pip install fastapi uvicorn
```

#### 4. Verificando a Instalação

Crie um arquivo `main.py` para testar:

```python
from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"Hello": "World"}
```

Execute o servidor:

```bash
uvicorn main:app --reload
```

Acesse `http://localhost:8000` e você verá: `{"Hello": "World"}`

### Criando o Primeiro Endpoint

#### 1. Estrutura Básica

Vamos criar uma API simples para gerenciar uma lista de tarefas:

```python
from fastapi import FastAPI
from pydantic import BaseModel
from typing import List, Optional

app = FastAPI(title="API de Tarefas", version="1.0.0")

# Modelo de dados
class Tarefa(BaseModel):
    id: Optional[int] = None
    titulo: str
    descricao: Optional[str] = None
    concluida: bool = False

# Lista em memória para armazenar as tarefas
tarefas = []
contador_id = 1
```

#### 2. Endpoint GET - Listar Tarefas

```python
@app.get("/tarefas", response_model=List[Tarefa])
def listar_tarefas():
    """
    Retorna todas as tarefas cadastradas
    """
    return tarefas
```

#### 3. Endpoint POST - Criar Tarefa

```python
@app.post("/tarefas", response_model=Tarefa)
def criar_tarefa(tarefa: Tarefa):
    """
    Cria uma nova tarefa
    """
    global contador_id
    
    tarefa.id = contador_id
    contador_id += 1
    
    tarefas.append(tarefa)
    return tarefa
```

#### 4. Endpoint GET - Buscar Tarefa por ID

```python
@app.get("/tarefas/{tarefa_id}", response_model=Tarefa)
def buscar_tarefa(tarefa_id: int):
    """
    Busca uma tarefa específica pelo ID
    """
    for tarefa in tarefas:
        if tarefa.id == tarefa_id:
            return tarefa
    
    return {"error": "Tarefa não encontrada"}
```

#### 5. Endpoint PUT - Atualizar Tarefa

```python
@app.put("/tarefas/{tarefa_id}", response_model=Tarefa)
def atualizar_tarefa(tarefa_id: int, tarefa_atualizada: Tarefa):
    """
    Atualiza uma tarefa existente
    """
    for i, tarefa in enumerate(tarefas):
        if tarefa.id == tarefa_id:
            tarefa_atualizada.id = tarefa_id
            tarefas[i] = tarefa_atualizada
            return tarefa_atualizada
    
    return {"error": "Tarefa não encontrada"}
```

#### 6. Endpoint DELETE - Remover Tarefa

```python
@app.delete("/tarefas/{tarefa_id}")
def remover_tarefa(tarefa_id: int):
    """
    Remove uma tarefa pelo ID
    """
    for i, tarefa in enumerate(tarefas):
        if tarefa.id == tarefa_id:
            tarefas.pop(i)
            return {"message": "Tarefa removida com sucesso"}
    
    return {"error": "Tarefa não encontrada"}
```

### Código Completo

Aqui está o arquivo `main.py` completo:

```python
from fastapi import FastAPI
from pydantic import BaseModel
from typing import List, Optional

app = FastAPI(title="API de Tarefas", version="1.0.0")

# Modelo de dados
class Tarefa(BaseModel):
    id: Optional[int] = None
    titulo: str
    descricao: Optional[str] = None
    concluida: bool = False

# Lista em memória para armazenar as tarefas
tarefas = []
contador_id = 1

@app.get("/")
def read_root():
    return {"message": "API de Tarefas - FastAPI"}

@app.get("/tarefas", response_model=List[Tarefa])
def listar_tarefas():
    """
    Retorna todas as tarefas cadastradas
    """
    return tarefas

@app.post("/tarefas", response_model=Tarefa)
def criar_tarefa(tarefa: Tarefa):
    """
    Cria uma nova tarefa
    """
    global contador_id
    
    tarefa.id = contador_id
    contador_id += 1
    
    tarefas.append(tarefa)
    return tarefa

@app.get("/tarefas/{tarefa_id}", response_model=Tarefa)
def buscar_tarefa(tarefa_id: int):
    """
    Busca uma tarefa específica pelo ID
    """
    for tarefa in tarefas:
        if tarefa.id == tarefa_id:
            return tarefa
    
    return {"error": "Tarefa não encontrada"}

@app.put("/tarefas/{tarefa_id}", response_model=Tarefa)
def atualizar_tarefa(tarefa_id: int, tarefa_atualizada: Tarefa):
    """
    Atualiza uma tarefa existente
    """
    for i, tarefa in enumerate(tarefas):
        if tarefa.id == tarefa_id:
            tarefa_atualizada.id = tarefa_id
            tarefas[i] = tarefa_atualizada
            return tarefa_atualizada
    
    return {"error": "Tarefa não encontrada"}

@app.delete("/tarefas/{tarefa_id}")
def remover_tarefa(tarefa_id: int):
    """
    Remove uma tarefa pelo ID
    """
    for i, tarefa in enumerate(tarefas):
        if tarefa.id == tarefa_id:
            tarefas.pop(i)
            return {"message": "Tarefa removida com sucesso"}
    
    return {"error": "Tarefa não encontrada"}
```

### Testando a API

#### 1. Executar o Servidor

```bash
uvicorn main:app --reload
```

#### 2. Acessar a Documentação

O FastAPI gera automaticamente documentação interativa:

- **Swagger UI**: `http://localhost:8000/docs`
- **ReDoc**: `http://localhost:8000/redoc`

#### 3. Exemplos de Uso

**Criar uma tarefa:**
```bash
curl -X POST "http://localhost:8000/tarefas" \
     -H "Content-Type: application/json" \
     -d '{"titulo": "Estudar FastAPI", "descricao": "Aprender os conceitos básicos"}'
```

**Listar tarefas:**
```bash
curl "http://localhost:8000/tarefas"
```

**Buscar tarefa específica:**
```bash
curl "http://localhost:8000/tarefas/1"
```

### Vantagens do FastAPI

1. **Performance**: Extremamente rápido, comparável ao NodeJS
2. **Type Safety**: Validação automática de tipos
3. **Documentação Automática**: Swagger/OpenAPI gerado automaticamente
4. **Async/Await**: Suporte nativo para operações assíncronas
5. **Editor Support**: Excelente autocomplete e validação em tempo real

### Próximos Passos

- Implementar autenticação e autorização
- Conectar com banco de dados (SQLAlchemy)
- Adicionar validações customizadas
- Implementar testes automatizados
- Configurar CORS para frontend
- Deploy em produção

### Conclusão

O FastAPI oferece uma experiência de desenvolvimento moderna e eficiente. Com sua documentação automática, validação de tipos e alta performance, é uma excelente escolha para APIs Python.

A combinação de simplicidade e poder torna o FastAPI ideal tanto para projetos pequenos quanto para aplicações em larga escala. A documentação automática é especialmente útil para equipes de desenvolvimento e integração com frontend.

Experimente criar seus próprios endpoints e explore as funcionalidades avançadas do framework!



Hey, guys!

Vim mostrar pra vocês, neste tutorial de hoje, como criar uma conexão com Docker e o PG Admin da maneira mais fácil que há com o Docker.

Primeiro, você precisa ter o Docker instalado e rodando na sua máquina

E por último, criar um arquivo `docker-compose.yml` na raiz do seu projeto e colar o código abaixo nele:

```yml
version: '3.8'
services:
    db:
        container_name: postgres_database_container
        image: postgres
        restart: always
        environment:
            POSTGRES_USER: docker
            POSTGRES_PASSWORD: docker
            POSTGRES_DB: docker_db
        ports:
            - '5432:5432'
    pgadmin:
        container_name: postgres_pgadmin4_container
        image: dpage/pgadmin4
        restart: always
        environment:
            PGADMIN_DEFAULT_EMAIL: admin@admin.com
            PGADMIN_DEFAULT_PASSWORD: docker
        ports:
            - '5050:80'
```

É um arquivo .yml bem simples. Não se esqueça de rodar o `docker-compose up` parar dar `start` nos seus containers.

Sua aplicação estará rodando em `localhost:5050`.

Super simples, é isso, guys. Até a próxima!



Fala, pessoal, belê?!

Vim deixar uma colinha de como trabalhar com Docker e Laravel, utilizando o [Laradock](https://laradock.io/). Nesse exemplo, estarei utilizando o Postgres e o Nginx.

#### Passo 1

Criar um novo projeto Laravel e entrar nele

#### Passo 2

Clone o repositório do [Laradock](https://github.com/laradock/laradock) dentro da raiz do teu repositório.

#### Passo 3

Acesse a pasta `laradock`, dentro do seu projeto. Em seguida, você pode copiar todo o conteúdo do arquivo `env.example` para um novo arquivo `.env`

#### Passo 4

Agora, abra o TEU arquivo `.env`, o na raiz do teu projeto (não o do Laradock) e substitua as seguintes variáveis de ambiente:

```env

DB_CONNECTION=pgsql
DB_HOST=postgres
DB_PORT=5432
DB_DATABASE=default
DB_USERNAME=default
DB_PASSWORD=secret
```

Na verdade, essas variáveis estão no `.env` do Laradock, então você precisa deixar exatamente igual, para não houver erros de conexão.

#### Passo 5

Execute o seguinte comando

```bash
$ sudo docker-compose up -d nginx postgres
```

Para rodar as migrations e acessar o terminal pelo teu projeto:

```bash
$ sudo docker-compose exec workspace bash
```

Agora, você terá acesso ao terminal do projeto, você precisa rodar `composer install` e `php artisan migrate` ou comandos do PHP de sua preferência.

[Link da fonte (e também ele deve receber os créditos por isso rsrs)](https://medium.com/@arikardnoir/dockerize-sua-aplica%C3%A7%C3%A3o-laravel-postgres-usando-o-laradock-f228cc426638)

## Extra

Para acessar via terminal o database, use o seguinte comando:

```bash
docker exec -ti NAME_OF_CONTAINER psql -U YOUR_POSTGRES_USERNAME
```



Fala, pessoal! Saudações!

Aqui tentarei explicar para vocês como dar um `start` no desenvolvimento de um Bot para Discord utilizando TypeScript. Deixei separado algumas anotações sobre nosso projeto:

-   Utilizaremos a [API do Discord para javascript](https://discord.js.org/#/) para desenvolver nosso BOT.
-   Utilizaremos TypeScript
-   Utilizaremos o TypeORM para armazenar nossos dados (será abordado mais pra frente)
-   Também deixaremos ele com internacionalização (vamos estruturar isso mais a frente também)

Lógico, este conteúdo irá conter somente a criação do bot, pretendo colocar a estruturação e conexão com database usando TypeORM em outros artigos.

Se você nunca teve contato com criação de Bots para Discord, sugiro dar uma olhada no [guia oficial da API do Discord.js](https://discordjs.guide/), nele contém algumas informações importantes acerca de vários tópicos que interessantes na hora de desenvolver. Caso você se aventure a fundo no desenvolvimento, pode ter este guia como base para futuros problemas (que sempre aparecem).

### Vamos lá

Muito provavelmente vocês já possuem uma conta no [Discord](discord.com/). Caso não tenham, recomendo criar, será necessário para darmos prosseguimento.

Próximo passo: [Acessar o site do portal de Desenvolvedores do Discord](https://discord.com/developers/applications) com sua conta do Discord (caso ainda não esteja logado) e clicar no botão `new application` (ou `nova aplicação`), no canto superior direito da sua tela.

![imagem_1](https://raw.githubusercontent.com/rodrigodiasnoronha/rdn/master/public/images/criando-bot-discord-part-1/imagem_1.PNG)

Será solicitado o nome da sua aplicação (não o nome do BOT em si), é como se fosse o nome do seu projeto, preencha e coloque de acordo com o que queira.

Você será redirecionado para a tela `dashboard` do seu projeto, não configure nada, apenas clique em `Bot` no menu lateral.

![imagem_2](https://raw.githubusercontent.com/rodrigodiasnoronha/rdn/master/public/images/criando-bot-discord-part-1/imagem_2.PNG)

Clique em `add bot`;

Pronto. Você criou um Bot. Nesta nova tela que abriu, você pode configurar a imagem dele e o nome dele, para caso queira mudar mais a frente.

Recomendo copiarem o `token` abaixo do campo de `username`. Vamos usa-lo mais a frente.

![imagem_3](https://raw.githubusercontent.com/rodrigodiasnoronha/rdn/master/public/images/criando-bot-discord-part-1/imagem_3.PNG)

### Adicionando o BOT em um servidor.

Sim, este passo é importante. Geralmente, quando você desenvolve um BOT, você testa se esta tudo ok em um servidor de desenvolvimento. Eu recomendo você criar um novo servidor no Discord.

Em seguida, na nossa tela de gerenciamento do BOT, clique em `OAuth2` no menu lateral, desça a página até as seguintes opções.

![imagem_4](https://raw.githubusercontent.com/rodrigodiasnoronha/rdn/master/public/images/criando-bot-discord-part-1/imagem_4.PNG)

Selecione a opção `BOT` e copie o link abaixo dela.

Mas perai, repare no link que você copiou, ele possui uma parte `permissions=0`. Isso é referente as permissões do BOT dentro do servidor. O valor `0` quer dizer que o BOT não tem nenhuma permissão especial, logo ele não conseguiria banir um membro, por exemplo. Nós não queremos isso, se você descer um pouco mais a página, verá que tem um outro campo com várias opções, selecione a opção `Administrador`. Assim que você selecionar, verá que o `permissions=0` mudou para `permissions=8`. Isso quer dizer que a permissão do seu BOT será de `administrador` em qualquer servidor que ele for adicionado.

Você pode usar essas configurações e ver qual agrada mais o propósito do seu BOT. Eu gosto de colocar `administrador` para evitar que os usuários do bot reclamem que o bot não está funcionando, pois está sem permissão de enviar mensagens, ou qualquer problema relacionado.

Enfim, vamos prosseguir.

### Iniciando o projeto

Bem, se você está aqui, provavelmente já tem o [Node](https://nodejs.org/en/) instalado e alguma editor de código, tipo o [VSCode](https://code.visualstudio.com/), o editor de código da Microsoft.

Vamos criar um diretório e acessar ele

```bash
  $ mkdir discord-bot && cd discord-bot
```

Agora, as dependências do nosso projeto. Precisaremos instalar o TypeScript, a lib do Discord.js e o dotenv, para usarmos variáveis de ambiente no nosso projeto e o ts-node-dev, para usarmos não precisarmos ficar parando e executando a aplicação a cada mudança no código. Eis o código de instalação abaixo:

```bash
  $ npm i discord.js dotenv && npm i typescript -D
```

ou, caso você use o `yarn`

```bash
  $ yarn add discord.js dotenv && yarn add typescript -D
```

Tá, mãos ao código, vamos seguir alguns passos:

Vamos criar um arquivo `.env` na raiz do projeto. Vamos criar uma váriavel chamada `BOT_TOKEN` e adicionar o token do BOT que você copiou.

```env
BOT_TOKEN=cole_seu_token_aqui
```

Criar uma pasta `src` e criar um arquivo chamado `index.ts` dentro.

Nosso arquivo `src/index.ts` será o arquivo de entrada de nosso BOT, então o passo vai ser o seguinte: vamos criar uma classe que será responsável por dar um `start` no nosso bot.

```ts
// src/index.ts

import 'dotenv/config'; // faz a gente ser capaz de usar as váriaveis de ambiente.
import { Client } from 'discord.js';

class Bot {
    token = process.env.BOT_TOKEN as string; // token do bot
    client = new Client(); // instância do client do nosso BOT

    // este método inicia o bot
    async start() {
        await this.client.login(this.token); // inicia o client do BOT (inicia o BOT)
    }
}

const bot = new Bot();
bot.start();
```

Bom, esta classe tem a única responsabilidade de iniciar o nosso BOT, ela possui as propriedades `client` e `token` pois são essenciais para iniciarmos nosso BOT.

Em nosso arquivo `package.json`, vamos adicionar a linha um comando para iniciar o nosso BOT. Lembre-se de adiciona-lo dentro da propriedade `scripts`

```json
{
    "dev": "ts-node-dev src/index.ts"
}
```

Feito isso, abra um terminal no diretório do projeto e execute o comando abaixo:

```bash
  $ npm run dev
```

ou

```bash
  $ yarn dev
```

Abra o navegador em que seu BOT esta e voalá, ele estará online.

No próximo tutorial irei mostrar como adicionar um comando nele, mesmo que seja simples. Vou pensar em um comando bacana. Logo em seguida, iremos deixar uma estrutura bem bacana também, para que a gente tenha uma fácil manutenção no nosso BOT.

Até a próxima!



Navegando pelos profundos mares da internet, em uma busca incansável pelo que vier na telha, eis que encontro uma repositório um tanto quanto útil.

Trata-se de algumas das boas práticas do Clean Code abordadas em JavaScript, muito útil para quem constrói aplicações comerciais ou open source.
Se quiser dar uma olhada, [eis o link](https://github.com/ryanmcdermott/clean-code-javascript#variables)



It definitely took me way too long to get code blocks correctly highlighted on my blog. Next.js seems to have less tutorials out there in general, especially for specific use cases like these. I hope to fix that, at least a little bit, with my own blog. As I experience issues and overcome each challenge, my plan is to write up a post about it. Here's #1!

### Quick Background

As a starting point, I want to outline the architecture of my website. As Next.js goes, I have page components in the /pages directory. Blog posts are generated dynamically via the `/pages/blog/[slug].tsx` page, where the getInitialProps function pulls content from the .md files located in the /posts folder.

### Before Highlight.js

For a visual, below is what the BlogPostTemplate component looked like before I did anything fancy. I will only include the relevant code to keep it short, but feel free to view the entire file in the repo.

```jsx
<article className="mb-10 markdown">
    <header>
        <h1 className="text-5xl">{frontmatter.title}</h1>
    </header>
    <div className="mb-5 my-auto text-sm font-semibold text-neutral-400">{reformatDate(frontmatter.date)}</div>
    <div>
        <ReactMarkdown source={markdownBody} />
    </div>
</article>
```

Notice that this code simply applies a title, date, and the contents of the .md file. By default, inline code and code blocks were not nicely styled, and of course I wasn't satisfied with that. Luckily, react-markdown takes an optional parameter called renderers where we can provide a custom style to HTML tags of our choosing. This is where it got confusing - I had to dive into the source code to figure out what exactly I needed to pass to it.

```jsx
import Highlight from 'react-highlight';
import '../../node_modules/highlight.js/styles/nord.css';
```

After a lot of trial and error, I realized I needed to create a custom component to pass to renderers. I'm sure there are other ways to do this, but this made the most sense to me, and it worked quite nicely.



Basicamente

Este bloco de código funciona somente no Node, você precisa formatar o html para renderizar corretamente os blocos de código.

Ele utilizar os estilos do PrismJS, logo você também precisa importar o CSS deles no teu front.

```jsx
import remark from 'remark';
import html from 'remark-html';
import prism from 'remark-prism';

export default async function markdownToHtml(markdown) {
    const result = await remark().use(html).use(prism).process(markdown);
    return result.toString();
}
```



Quebras em producão.

Não é nada amigável para os seus usuários que seja mostrada uma mensagem de erro com vários códigos que eles (provavelmente) não entendam, certo? Pois isso acontece quando sua aplicação React quebra, e eis que a equipe do ReactJS trouxe uma funcionalidade na lib que resolve essa questão: os Error Boundaries.

### O que são?

Na realidade, um Error Boundary nada mais é do que um componente React, que monitoria os erros de seus componentes filhos. Ou seja, ele é capaz de capturar erros da aplicação e fazer um devido tratamento, como enviar um log para o servidor, etc.

### Tá, mas por quê?

Bem, não é nada atraente mostrar erros de crash da sua aplicação, seja no console.log ou no na própria página. Com base nisso, você pode optar por renderizar outro componente, contendo alguma mensagem de erro e evitar, assim, de que seus usuários vejam o que houve por debaixo dos panos.

### Prática

Bem, acredito que deu pra entender o porquê de se utilizar nas suas aplicações. Então partimos para a prática.

Estou criando um projeto React (com next), você pode criar com o CRA normalmente, isso não faz diferença.

```bash

$ npx create-next-app error-boundaries
```

Ou

```bash
$ npx create-react-app error-boundaries
```

Agora, criaremos o componente que encapsulará nossa aplicação e ficará ouvindo erros. Eu criei o boundary.js e coloque o código abaixo nele

```jsx
import React, { Component } from 'react';

class ErrorBoundary extends Component {
    render() {
        return <React.Fragment>{this.props.children}</React.Fragment>;
    }
}

export default ErrorBoundary;
```

Um componente normal, que encapsulará nossa aplicação, mas o React possui um método específico para este componente ficar ouvindo os `crashes`, que seria o método `componentDidCatch`. Este método recebe o error e as informações do erro. No caso você poderia fazer alguma tratamento deste erro ou simplesmente renderizar algum componente que evite o erro na tela do usuário. Seria algo assim, no caso:

```jsx
import React, { Component } from 'react';

class ErrorBoundary extends Component {
    constructor(props) {
        super(props);

        this.state = {
            error: false,
        };
    }

    componentDidCatch(error, errorInfo) {
        this.setState({ error: true });
    }

    render() {
        if (this.state.error) {
            return (
                <div>
                    <h2>Ocorreu um erro. Atualize a página e tente novamente</h2>
                </div>
            );
        }

        return <React.Fragment>{this.props.children}</React.Fragment>;
    }
}

export default ErrorBoundary;
```

Feito, isso fará a mensagem de erro ser imprimida ao invés de seus filhos com o erro serem mostrados.

Mas lembre-se de encapsular sua aplicação dentro dessa classe. Segue abaixo:

```jsx
import React from 'react';

const Global = (props) => {
    const { Component, pageProps } = props;

    return (
        <ErrorBoundary>
            <Component {...pageProps} />
        </ErrorBoundary>
    );
};

export default Global;
```



Boa tarde, leitor!

Estou deixando abaixo uma cola de como estilizar o HTML do Nextjs, para consulta quando eu (ou você) esquecer de como configurar.

Até porque, senhores, não tem como decorar todo código que se faz e se vê por aí!

PS: É o arquivo `_document.tsx`, no diretório `pages`. Por questão de recomendação da equipe do NextJS, é recomendado criar este componente em formato de classe.

```tsx
import Document, { Html, Head, Main, NextScript } from 'next/document';

/**
 *
 * É carregado somente uma vez na aplicação
 *
 * Retorna o HTML da página (importando a tag  HTML, Head, Main e NextScript) de dentro do Next/document
 *
 * recomendao colocar links globais do head aqui
 *
 */

export default class MyDocument extends Document {
    render() {
        return (
            <Html>
                <Head>
                    <link rel="shortcut icon" href="favicon.png" type="image/png" />

                    <link rel="preconnect" href="https://fonts.gstatic.com" />
                    <link
                        href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&display=swap"
                        rel="stylesheet"
                    />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}
```

Até a próxima!



Olá, pessoal.

Este post é mais uma dica do que um tutorial.

Acabei me deparando de repente com uma lib do React Native que me chamou bastante atenção, que é a React Native Rename.

Com ela é bem simples nomear e renomear seu aplicativo, com um simples comando no terminal e, boom... Acabou. Então vamos lá.

### Renomeando aplicativo.

Basta rodar o seguinte comando no terminal:

```bash
    $ npx react-native-rename <novoNome>
```

Se tudo ocorrer perfeitamente, aparecerá a mensagem abaixo e tanto seu app Android quando IOS terão sido renomeados.

Para projetos criados com a própria CLI do React Native, acredito que automatizar esse processo de renomeação já dá um upzinho legal no desenvolvimento das aplicações.

Lembro que é legal você apagar todo o cache se você rodou a aplicação anteriormente e, como diz o print acima, rodar o comando pod install caso esteja usando um dispositivo IOS.

Queria só deixar essa dica, pessoal. Obrigado por lerem. Até uma próxima.

### PS: Leia

Parece que em versões recentes do RN esta lib não está funcionando, ela acaba apagando alguns arquivos que garantem a execução do aplicativo no Android e IOS. Ela não recebe atualização há 1 ano, então era de se esperar...


rdnblog

Compartilhe conhecimento

Últimas postagens