DEV Community: Christian Toledo

Testando componentes React assíncronos

Christian Toledo — Sun, 14 Jul 2024 19:06:08 +0000

Quando decidimos escrever testes para nossos componentes no frontend, é uma boa prática, e até uma forma de facilitar nossa escrita de testes, separar o que é lógica do que é apresentação. Dessa forma, podemos ter testes separados para cada uma das responsabilidades.

Porém, em alguns casos, um componente não é apenas responsável pela apresentação dos dados, mas também pela busca desses dados.

A partir da versão 13 do Next.js, com o uso do diretório app, todos os componentes criados são server components, o que significa que a renderização ocorre do lado do servidor. Isso abre várias possibilidades, como por exemplo, fazer chamadas de API assíncronas na definição do componente, aguardar a resposta e utilizar os dados dessa resposta na renderização do componente.

Como exemplo, podemos definir nosso componente como uma função assíncrona:

async function MyAsyncComponent() { 
    const data = await fetchData(); 
    return <div data-testid="painted-content">{data}</div>; 
}

Em um componente marcado como async, podemos utilizar o await para aguardar. Não precisamos, nem devemos, utilizar hooks como useState ou useEffect.

Escrevendo o nosso teste da seguinte forma, com a sintaxe familiar da React Testing Library, ele falhará:

describe('Test My Async Component', () => {
    it('should render the component', () => {
        render(<MyAsyncComponent />)
        const sut = screen.getByTestId('painted-content')
        expect(sut.textContent).toBe('async content')
    })
})

O erro retornado é algo como Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead., ou seja, o componente não está retornando um elemento JSX para ser renderizado.

Como resolver esse problema?

Partindo do princípio de que um componente nada mais é do que uma função assíncrona que recebe parâmetros para renderizar seu conteúdo, podemos escrever nosso teste da seguinte forma:

describe('Test My Async Component', () => {
    it('should render the component', async () => {
        const jsx = await MyAsyncComponent()
        render(jsx)
        const sut = screen.getByTestId('painted-content')
        expect(sut.textContent).toBe('async content')
    })
})

O que fizemos no exemplo acima foi transformar nosso teste anterior em um teste assíncrono, aguardando a função do componente resolver, armazenando seu JSX em uma constante, e passando essa constante com JSX para o método render. Ao inspecionar o tipo do retorno do nosso componente, temos o tipo JSX.Element, exatamente o mesmo tipo de dado que a função render aceita. Dessa forma, o teste agora roda e passa com sucesso.

Refatorando

É bem provável que você vá renderizar o componente em diversos casos de testes. Para isso, podemos abstrair para uma função própria:

async function renderComponent() {
    const jsx = await MyAsyncComponent()
    return render(jsx)
}

describe('Test My Async Component', () => {
    it('should render the component', async () => {
        await renderComponent()
        const sut = screen.getByTestId('painted-content')
        expect(sut.textContent).toBe('async content')
    })
})

Dessa forma, evitamos reescrever em todos os casos de teste a chamada assíncrona do nosso componente e a renderização do JSX. Porém, podemos ir além. Em uma aplicação real, é comum termos diversos componentes assíncronos que precisam ser testados. Inclusive, alguns deles, diferente dos nossos exemplos até aqui, podem receber props. Para isso, podemos utilizar os genéricos do TypeScript para facilitar ainda mais a renderização:

async function renderAsync<T>(
    asyncComponent: (props: T) => Promise<JSX.Element>,
    props: T = {} as T
) {
    const jsx = await asyncComponent(props);
    render(jsx);
}

Utilização:

describe('Test My Async Component', () => {
    it('should render the component without params', async () => {
        await renderAsync(MyAsyncComponent)
        const sut = screen.getByTestId('painted-content')
        expect(sut.textContent).toBe('async content')
    })
})

describe('Test My Async Component with props', () => {
    it('should render the component with params', async () => {
        const props = { params: 'with my example param' }
        await renderAsync(MyAsyncComponentWithProps, props)
        const sut = screen.getByTestId('painted-content')
        expect(sut.textContent).toBe('async content with my example param')
    })
})

Conclusão

Ao escrever testes para componentes assíncronos no frontend, é essencial compreender a diferença entre componentes de apresentação e componentes que também lidam com a lógica de busca de dados. Com a introdução dos server components no Next.js 13, novas oportunidades surgem para otimizar a renderização no servidor e simplificar o manuseio de dados assíncronos.

Ao transformar nossos testes em assíncronos e refatorar a lógica de renderização, conseguimos garantir que nossos componentes sejam testados de forma eficaz e eficiente. Além disso, utilizando genéricos do TypeScript, podemos criar funções de renderização reutilizáveis que tornam nossos testes mais limpos e mantêm nosso código mais organizado.

Com essas práticas, podemos melhorar a confiabilidade e a mantenibilidade dos testes em nossos projetos de frontend, garantindo que nossos componentes funcionem conforme esperado em diferentes cenários.

Referências

https://www.marcusoft.net/2022/11/nextjs-testing-async-react-components.html

publicado também em: https://christiantld.vercel.app

Boas práticas de Code Review para bons programadores

Christian Toledo — Sat, 19 Feb 2022 23:33:46 +0000

O Code Review deve ser um processo natural dentro do fluxo de desenvolvimento. Esse processo ajuda a identificar bugs e má implementações antes da fase de teste e validação.

O resultado é uma base de código mais estável e de maior qualidade. Outro benefício de realizar code review de um parceiro é reforçar as relações pessoais e o senso de trabalho em equipe. O processo de revisão permite também uma distribuição do conhecimento técnico e compreensão dos processos entre o time.

Boas práticas na hora de revisar o código

O primeiro aspecto de um bom code review é se atentar ao lado humano antes do código. Abaixo segue uma lista de condutas para se atentar quando revisar o código de outra pessoa:

Revisor

Como revisor, você deve pensar como outra pessoa.
Ao apontar sugestões, tente formular frases a partir de um ponto de vista mais pessoal

ex: "Eu sugiro que...", "Eu acho...", "Para mim, esse ponto..."
Sempre, SEMPRE a revisão é sobre o código, nunca sobre o autor.

ex: ❌ "Você está fazendo uma implementação errada ..."
✅ " O código está fazendo uma implementação errada..."
Faça perguntas de pontos que não ficaram claros, ou ofereça sugestões através de perguntas. Por meio das respostas, podemos entender melhor a decisão para certo ponto do código.
Faça comentários através Observações, Impactos e Requisições

ex: Observação "Essa implementação é repetida em outro contexto, poderia ser reutilizada"
Impacto "Essa implementação torna a compreensão do real objetivo do método não tão claro para mim"
Request " Para esse cenário eu sugiro usar X padrão de projeto, por N motivos"
Entenda que existem diferentes soluções para o mesmo problema.
Distinguir entre boas práticas e gosto pessoal
Faça elogios ao código quando necessário, mesmo que precise de algum ajuste.
Se pergunte sempre se sua afirmação é verdadeira, se é necessária e se é gentil.
Valorize o esforço que o autor teve em escrever o código

Autor

Como autor, você deve ter humildade para ouvir sobre o seu trabalho
É normal acontecer falhas, ou ter implementações melhores, ou esquecermos de algum detalhe
Lembre-se que um código escrito em 10 horas é revisado em 10 minutos
Não leve as críticas para o lado pessoal, você não é o seu código
Você e o revisor estão no mesmo time
Somos sempre enviesados pelo nosso próprio código. Esteja aberto a opiniões externas

Código

Ao revisar um código é bom ter um checklist do que precisa ser avaliado. Conferir todos aspectos do código de uma vez pode ser exaustivo e propenso a falhas. É bom atentar-se a um tópico e validar todo conteúdo sob aquela ótica.

[ ] Eu entendo o que o código faz?
[ ] O código preenche todos os requisitos de implementação?
[ ] O código faz o que eu espero que ele faça?
Usando templates para Pull Requests, fica fácil analisar o que aquela PR deve resolver
A descrição da PR/commit está de acordo com o que o código executa?
Atenção a sintaxe, não tem nenhum code smells ?
Atenção se foi feito um tratamento de exceções
Atenção ao uso correto dos design patterns e a over-engineering

Detalhes e referências:

Configurando um projeto Vue 3 + Vite + Typescript + Eslint + Tailwind

Christian Toledo — Thu, 04 Feb 2021 19:20:21 +0000

Nos últimos meses tenho utilizado o Vue como meu framework principal de trabalho, e mais recentemente comecei a migração do Vue 2 para o Vue 3. Para iniciar meus projetos com Vue 3 tenho utilizado o Vite, uma ferramenta de desenvolvimento build free, isso significa na prática que não ocorre pré-build em desenvolvimento, oferecendo ao server os módulos javascript nativos. Entre as vantagens de se utilizar o Vite estão no ganho na velocidade de criação e hot module replacement do projeto.

Neste guia irei mostrar como faço para configurar meus projetos, e além das ferramentas do título, irei incluir também Prettier, Husky e Tailwind. Lembrando que essa não é a única, muito menos a forma mais correta, apenas a forma em que eu faço minhas configurações. Espero que esse guia te ajude.

Inciando a aplicação com Vite

Abra o terminal na pasta em que deseja criar o projeto e digite o comando abaixo. lembrando que após @vitejs/app e onde você escolhe o nome do seu projeto.

#NPM
  npm init @vitejs/app my-project

#YARN
  yarn create @vitejs/app my-project

Ao rodar o comando acima no terminal, podemos conferir que o vite nos da opções de presets para nossa aplicação

? Select a template: …
▸ vanilla
  vue
  vue-ts
  react
  react-ts
  preact
  preact-ts
  lit-element
  lit-element-ts

Como podemos ver, o Vite uma ferramenta que independe do framework. Para o nosso caso vamos escolher a opção vue-ts.

Pronto ao selecionar a opção, rapidamente o nosso projeto é criado. Agora navegamos para dentro da pasta do projeto e instalamos as dependências.

  cd my-project
#NPM
  npm install 
  npm run dev 

#YARN
  yarn
  yarn dev

Pronto, o projeto por padrão está rodando na porta 3000.

O projeto criado segue a seguinte estrutura de pastas.

├── node_modules
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.ts
├── tsconfig.json
└── vite.config.ts

Se você utiliza vscode, pode seguir os passos abaixo.

Abra src/main.ts
Abra o input de comando (ctrl + shift + P) do VSCode
Procure e rode "Select TypeScript version" -> "Use workspace version"

Configurando Typescript

O Vue 3 por padrão já reconhece o Typescript, e o Vite já criou o arquivo main.ts. O que precisamos fazer e adicionar na tag <script> dos arquivos .vue o parametro lang="ts" e pronto, nosso projeto já entende Typescript.

No arquivo tsconfig.json podemos fazer a seguinte modificação

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "importHelpers": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "isolatedModules": true,
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "baseUrl": ".",
    "lib": ["esnext", "dom",
      "dom.iterable",
      "scripthost"],
    "types": ["vite/client"],
    "plugins": [{ "name": "@vuedx/typescript-plugin-vue" }]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": [
    "node_modules"
  ]
}

ESLint

#NPM
npm i -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript

#YARN
yarn add -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript

Após a instalação devemos criar um arquivo .eslintrc.json na raiz do projeto e inserir as seguintes configurações.

{
  "root": true,
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2021
  },
  "plugins": [],
  "rules": {}
}

Nesse arquivo você pode adicionar os plugins e as regras de sua preferência.

Podemos adicionar o seguinte script ao nosso package.json

"scripts": {
  "lint:script": "eslint --ext .ts,vue --ignore-path .gitignore ."
}

Assim podemos rodar o script com a flag --fix para correção dos arquivos do projeto. Essa correção também pode ser feita através das configurações do VSCode para formatar ao salvar

Prettier

Adicionamos o Prettier para formatar nosso projeto.

#NPM
npm i -D prettier eslint-plugin-prettier @vue/eslint-config-prettier

#YARN
yarn add -D prettier eslint-plugin-prettier @vue/eslint-config-prettier

Ao instalar as dependências, criamos um arquivo .prettierrc e inserimos as seguintes configurações. Aqui você pode adiocionar as regras da sua preferência.

{
  "singleQuote": true,
  "semi": false,
  "vueIndentScriptAndStyle": true
}

No arquivo .eslintrc.json devemos adicionar mais duas extensões para evitar regras duplicadas que podem se sobrescrever

{
  "extends": [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "prettier",
    "prettier/vue",
  ]
}

Husky

Utilizamos o Husky para realizar ações antes de um commit, podemos formatar, rodar testes, e rodar outros scripts. Aqui vamos configurar apenas o linting.

#NPM
npm i -D husky lint-staged

#YARN
yarn add -D husky lint-staged

Adicionamos ao package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,vue}": "eslint --fix"
  }
}

Tailwind

O Tailwind é uma alternativa a frameworks CSS.

#NPM
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

#YARN
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

Em seguida iniciamos o Tailwind rodando o comando abaixo. Será criado um arquivo tailwind.config.js e um arquivo postcss.config.js

No arquivo tailwind.config.js podemos configurar o purge para o Tailwind remover os estilos não utilizado quando fizermos a build para produção.

  module.exports = {
   purge: [],
   purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Adicionando o Tailwind ao CSS

Dentro da nossa pasta src criamos um arquivo index.css, nele adicionamos o Tailwind da seguinte maneira

@tailwind base;
@tailwind components;
@tailwind utilities;

Agora no arquivo main.ts precisamos importar esse css e pronto, nosso tailwind está adicionado ao nosso projeto

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

Se estiver com o projeto rodando, pare e rode novamente. Graças ao Vite, esse processo deve ser bem rápido

Você pode encontrar mais sobre o Tailwind aqui

Extra: EditorConfig

O EditorConfig é um formato de arquivo que contém regras de configuração do editor de texto e padronização de código. Em alguns editores esse arquivo é lido automaticamente e aplica as configurações. É ideal em casos onde existe uma equipe de desenvolvimento e se deseja que todos estejam com a mesma configuração no editor de texto ou IDE de sua preferência. No site do EditorConfig você pode conferir se há necessidade de instalar o plugin ou se o seu editor já possui suporte nativo a esse formato de arquivo

Crie um arquivo .editorconfig e adicione as regras de sua preferência. O arquivo final deve ser algo parecido com a configuração abaixo.

root = true

[*]
end_of_line = lf
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

Conclusão

A criação de um projeto Vue utilizando Vite é uma alternativa ao vue-cli, que utiliza o Webpack como bundler. Optando pelo uso do Vite nós ganhamos performance durante o desenvolvimento, mas abrimos mão das configurações que o vue-cli já faz para nós, como a integração com ESLint. Até o momento eu não conheço uma forma de configuração com Vite que não seja manual, por isso escrevi esse guia. Acredito que boa parte dos projeto utilizam pelo menos algumas dessas configurações, e caso necessário, seguindo a lógica deste guia, você pode incluir as suas próprias configurações, como por exemplo testes com Jest.

Lembrando que essas são as configurações que eu utilizo ao iniciar um novo projeto. É importante você conhecer o seu projeto e com o tempo entender quais configurações funcionam para você. Essa publicação é apenas um guia com o objetivo de facilitar o inicio do desenvolvimento. Outro ponto a se observar é que a tecnologia evolui em um ritmo acelerado, então é importante ter em mente que as configurações podem alterar com o passar do tempo.

Configurando um projeto React com Typescript

Christian Toledo — Tue, 02 Jun 2020 14:33:41 +0000

Hoje em dia o React representa uma grande fatia do desenvolvimento frontend, contendo diversas ferramentas no seu ecossistema que melhoram a experiência de desenvolvimento. Quando utilizamos o Typescript com React ganhamos a vantagem de definir bem os tipos dos nossos componentes sem o uso do PropTypes. Além disso nos beneficiamos do principio de fail fast, que nos permite identificar e evitar erros, e melhorar a qualidade do código.

Quando iniciamos um projeto React existem certas configurações como Babel e Webpack que são desejadas no projeto e podem ser configuradas manualmente. Porém, caso o seu projeto não tenha configurações bem específicas, a melhor forma de iniciar um novo projeto é utilizar um boiler plate, como por exemplo o "Create React App" , que atenderá a maioria dos casos.

Iniciando a aplicação com create-react-app

Para utilizar a ferramenta é necessário ter instalado o Node na versão 8.10 ou superior. Utilizaremos o package runner npx. Para criar o projeto, rode no seu terminal os comandos:

npx create-react-app my-app --template typescript
cd my-app
npm start

Quando criamos um novo projeto, a CLI utiliza o Yarn para instalar as dependência. Caso deseje utilizar npm basta adicionar a seguinte flag no comando: —use-npm.

Além de configurar o Babel e o Webpack, o comando também cria a seguinte estrutura de pastas:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.tsx
    ├── App.test.tsx 
    ├── index.css
    ├── index.tsx
    ├── logo.svg
    ├── react-app-env.d.ts
    ├── serviceWorker.ts
    └── setupTests.ts

Caso deseje, podemos simplificar essa estrutura deletando alguns arquivos e as suas correspondentes importações.

my-app
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── index.html
│   └── robots.txt
└── src
    ├── App.tsx
    ├── index.tsx
    ├── react-app-env.d.ts
    └── setupTests.ts

Adicionando ESLint

Iniciamos adicionando o ESLint como dependência de desenvolvimento:

 yarn add eslint -D

O próximo comando é para iniciar o ESLint

yarn eslint --init

No terminal a dependência faz algumas perguntas de configuração. Aqui irei colocar as minhas configurações. Você é livre para escolher outras e testar a que mais se encaixa ao seu projeto.

? How would you like to use ESLint?
> To check syntax, find problems, and enforce code style
? What type of modules does your project use?
> JavaScript modules (import/export)
? Which framework does your project use?
> React
? Does your project use TypeScript?
> y
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to in
vert selection)
> Browser
? How would you like to define a style for your project?
> Use a popular style guide
? Which style guide do you want to follow?
> Airbnb
? What format do you want your config file to be in?
> JSON
? The style guide "airbnb" requires eslint@^5.16.0 || ^6.8.0. You are currently us
ing eslint@7.1.0. Do you want to downgrade?
> y
? Would you like to install them now with npm?
> n

Ao não selecionar a instalação com npm, o comando irá finalizar, mas antes ele gerou alguns comandos no console, que podemos copiar e rodar com yarn, fazendo as modificações necessárias nas versões das dependências

yarn add eslint-plugin-react@^7.19.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 eslint-plugin-import@^2.20.1 eslint-plugin-jsx-a11y@^6.2.3 eslint-plugin-react-hooks@^2.5.0 @typescript-eslint/parser@latest -D

Adicionando Prettier

Para adicionar o Prettier e seus plugins devemos rodar no terminal o seguinte comando

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

Com a dependência instalada, criaremos um arquivo prettier.config.js que irá conter as informações de configuração do Prettier.

module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  allowParens: 'avoid',
};

Essas configurações forçam o padrão de aspas simples, vírgula no final dos objetos e evita parenteses em arrow functions com apenas um parâmetro.

Configurando ESLint e Prettier

Primeiramente criamos um arquivo .eslintignore , que inclui os arquivos onde o ESLint não irá visualizar.

**/*.js
node_modules
build

Agora movemos para o arquivo .eslintrc.json onde iremos alterar algumas regras.

Em extends iremos adicionar as dependências que instalamos

"extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],

Depois iremos adicionar os plugins

"plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],

O próximo passo é editar as regras que o ESLint irá avaliar. Entre as regras temos a permissão de código JSX dentro de arquivos .tsx e permissão de importação de arquivos .ts e .tsx sem declarar explicitamente a extensão. Você pode consultar mais regras no link, e pode alterar durante o desenvolvimento. Porém, cuidado com muitas modificações para não criar inconsistências no código.

"rules": {
    "prettier/prettier": "error",
    "react/jsx-one-expression-per-line": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".tsx"]
      }
    ],
    "import/prefer-default-export": "off",
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      {
        "allowExpressions": true
      }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ]
  },

Para resolver as importações com Typescript primeiro devemos adicionar a dependência abaixo:

yarn add eslint-import-resolver-typescript -D

E por fim, para resolver as importações com Typescript adicionamos a seguinte configuração.

"settings": {
    "import/resolver": {
      "typescript": {}
    }
  }

O resultado final da configuração do arquivo você pode conferir nesse link

Adicionando EditorConfig

Crie um arquivo .editorconfig e adicione as regras de sua preferência. O arquivo final deve ser algo parecido com a configuração abaixo.

root = true

[*]
end_of_line = lf
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

Extra: Configurando VSCode

Caso você utilize VSCode como o seu editor de texto, existem duas configurações que são importantes adicionar no seu arquivo settings.json para que o editor possa realizar a formatação automática dos arquivos ao salvar.

"[typescript]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },typescript
"[typescriptreact]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },

Conclusão

O processo de configuração do React com Typescript se beneficia de boilerplates como o Create React App, onde configurações como Babel e Webpack já vem pré configuradas para nós. Na grande maioria dos projetos essas configurações são necessárias. Para padronização do código devemos configurar nossa ferramenta de linting para entender os arquivos e importações Typescript, configurar o Prettier para aplicar a formatação no código e caso o projeto seja compartilhado entre um time de desenvolvedores é interessante configurar o EditorConfig.

Olá, mundo!

Christian Toledo — Fri, 29 May 2020 15:44:21 +0000

Ter um local onde eu pudesse escrever sobre as coisas que eu estudo, minhas experiências com programação e assuntos técnicos sempre foi um desejo que eu tive, mas demorei a colocar em prática. Demorei porque queria controlar cada processo da criação da plataforma, idealizava como iria construir um blog, quais tecnologias utilizaria, quais padrões implementaria no backend, como seria o frontend, qual CMS utilizaria. Enfim, vários detalhes para pensar que acabaram tornando o projeto pessoal complexo e difícil de encaixar na agenda do dia a dia.

Certo dia estava criando minha conta no DEV, plataforma que utilizo para consumir textos diários sobre tecnologia escrito por outros desenvolvedores do mundo, e me deparei nas configurações com a integração com um serviço chamado Stackbit, uma plataforma que oferece um sistema de criação de blog automatizado a partir de diversos templates.

Para criar uma pagina no Stackbit é bastante simples, primeiro escolhemos um template dentre as opções ou importamos nosso próprio template. Em seguida escolhemos um gerador de site estático entre Gatsby, Jekyll ou Hugo. O próximo passo é escolher um CMS, que possui diversas opções, com destaque o Netlify CMS, Contentful, o próprio Git, e claro o DEV. Para finalizar damos um nome para o repositório conectamos a nossa conta do Github, onde o código será armazenado. Ao criar o repositório, automaticamente é feito um deploy da aplicação no Netlify. Então basta clonar o repositório localmente e começar a editar o conteúdo.

No meu caso, a customização se deu na estilização, onde alterei a paleta de cores no arquivos Sass e adicionei algumas animações. A navegação no blog também foi editada, inserindo uma página Sobre Mim, onde adicionei seções com Hard Skills e Soft Skills. No mais, o template gerado é bem completo e atendeu bem as minhas necessidades. Todas as alterações "commitadas" são refletidas no site em produção, graças ao serviço automático de integração contínua do Netlify.

Com todo esse processo pude concluir que nem sempre precisamos reinventar a roda. Podemos e devemos utilizar as ferramentas que temos disponíveis para darmos vida a nossas ideias. É claro que é importante conhecer o processo, mas nem sempre temos tempo ou a habilidade para colocar em prática, por isso devemos abstrair algumas etapas. Podemos usar essa estratégia para tirar a ideia do papel, e se desejado for, refatorar o projeto para dar cada vez mais um toque pessoal.

Estou bem feliz com o resultado, acho que o blog tem a minha cara e isso me dá motivação para preenche-lo com posts e mais posts. Quero trazer desde assunto mais técnicos relacionados à desenvolvimento, até reflexões sobre estilo de vida, carreira e o universo de tecnologia em geral. Para mim, escrever é organizar as ideias, sintetizar o pensamento e espalhar um pouco de nós por aí, por isso farei deste blog um hábito. Espero que você tenha gostado do que leu até aqui e que nos encontremos novamente nos próximos posts.

Capa do post extraída desse vídeo: https://youtu.be/AMShoQ_qdc0