
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.



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)



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!



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();
}
```



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
```



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!



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;
```



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