DEV Community: Bruno A.

Node is dead! All you need to know

Bruno A. — Tue, 19 May 2020 13:07:12 +0000

Of course, he is not dead!

Stop following the hype and focus on technology or language that pays or will pay your salary.

How do you react when receiving feedback?

Bruno A. — Sun, 21 Jul 2019 20:38:47 +0000

[en-US]
When someone gives you feedback whether positive or negative, how do you react to it?

Do you understand that this is part of the process of personal and professional growth or depends on who gives the feedback?

[pt-BR]
Quando alguém lhe dá um feedback positivo ou negativo, como você reage a isso?

Você entende que isso faz parte do processo de crescimento pessoal e profissional ou depende de quem dá o feedback?

Configurando caminhos absolutos no React para Web sem ejetar [pt-BR]

Bruno A. — Sun, 21 Jul 2019 06:29:52 +0000

📢 English Version:
https://dev.to/heybrunoandrade/configuring-absolute-paths-in-react-for-web-without-ejecting-en-us-52h6

Depois de ter feito um artigo mostrando como realizar a configuração de caminhos absolutos no React Native, agora venho mostrar como realizar essa configuração no React para Web.

Enquanto a equipe do React não implementa isso no CRA, vamos configurar com as nossas próprias mãos e sem ejetar. Continue lendo e verá a mágica acontecer.

Uma pequena introdução ☕

Por que não ejetar o projeto?

Bom, o motivo disso é que você estará quebrando as "garantias" do CRA. Mas calma, pego projetos o tempo todo que foram ejetados e eles estão até hoje funcionando perfeitamente em produção, o único problema de ejetar, é que as configurações serão minhas e tenho que dá suporte a elas.

"Coisas podem quebrar" - Dan Abramov

Mas felizmente, utilizando ferramentas como o craco, podemos voltar facilmente para as configurações padrões do CRA caso as coisas deem erradas. E isso é incrível!

Já que vamos mexer somente no alias, você não tem muito com o que se preocupar, o craco irá injetar as novas configurações que fizermos no arquivo craco.config.js dentro das configurações padrões do CRA.

Caso você não saiba, o intuito de configurar caminhos absolutos em um projeto feito com Reactjs, é para facilitar a importação de arquivos. Para isso podemos utilizar um símbolo para representar um diretório root dos nossos códigos. Veja um exemplo abaixo:


Use isto 😍
import Form from '@/components/Form'

E Evite isto 😤
import Form from '../../../../../components/Form'

Dizem que é praticando que se aprende 🏊

☝ Então vamos lá, abra o seu terminal e instale as dependências necessárias:

# yarn
yarn add @craco/craco

# npm
npm i @craco/craco

✌ Após realizar a instalação do craco, precisaremos renomear algumas linhas de comando do package.json.

Substitua o "react-scripts" por "craco".

{
  "scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
}

Isso fará com que os scripts do CRA seja executado pelo craco o qual irá realizar injeções das configurações que estarão no arquivo craco.config.js.

🛠 Crie o arquivo no diretório raiz do projeto chamado: craco.config.js e inclua as configurações abaixo:

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/')
    }
  },
  jest: {
    configure: {
      moduleNameMapper: {
        '^@(.*)$': '<rootDir>/src$1'
      }
    }
  }
};

Uma pitada de VueJS, por favor! 🍲

Estou utilizando o alias "@" para imitar o Vuejs. Você pode utilizar o alias que achar interessante, tais como "~" ou "#", por exemplo.

Meu VSCode não está entendendo nada 😢

Ao fazer isso iremos nos deparar com o primeiro problema, o autocomplete. Já estamos acostumados a ter autocomplete quando vamos importar os arquivos utilizando caminhos relativos.

Esse erro acontece porque o VSCode não entende que o "@" é a pasta "src" do nosso projeto. Para ativarmos o autocomplete precisaremos configurar o VSCode para que ele entenda. E para isso precisaremos criar um arquivo chamado jsconfig.json no diretório raiz do projeto.

Saiba mais sobre o jsconfig.json.

Inclua as seguintes propriedades dentro do arquivo:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

Incrível!

Agora está funcionando perfeitamente, utilize o comando: npm start para executar o seu projeto.

Uma ferramenta que gosta de reclamar o tempo todo! 😡

Se você estiver utilizando o eslint, irá perceber que ele irá reclamar em todas as importações que você realizar utilizando "@".

Graças a Deus, existe uma forma de acalmar o eslint utilizando o eslint-import-alias.

☝ Primeiramente adicione as bibliotecas abaixo como dependências de desenvolvimento, pelo amor de Deus! 😰

# yarn
yarn add eslint-plugin-import eslint-import-resolver-alias -D

# npm
npm i eslint-plugin-import eslint-import-resolver-alias -D

✌ No seu arquivo .eslintrc.json inclua as seguintes propriedades:

  "settings": {
    "import/resolver": {
      "alias": {
        "map": [["@", "./src"]]
      }
    }
  }

Perguntas que parecem idiotas mas não são 😳💬

Posso utilizar esta técnica em projetos que vão para produção?

Resposta: Sim, você pode utilizar sem problema nenhum!

Posso usar no React Native?

Resposta: Não, a configuração no React Native é diferente, mostro como fazer neste artigo:
Configurando Caminhos absolutos no React Native.

Meus arquivos de testes podem dar erro?

Resposta: Se você tiver seguido corretamente o passo a passo, provavelmente não. Se você mudou o símbolo que vai utilizar como alias, certifique-se de que tenha colocado isso também na configuração do jest lá no arquivo craco.config.js na propriedade moduleNameMapper.

Por que não está utilizando o Babel plugin root import?

Resposta: Diferentemente do Babel plugin root import, importamos somente uma biblioteca que resolve o problema, além de ser simples de utilizar. Outra coisa que andou me incomodando é que não está dando suporte ao CRA 3.0, por isso a utilização do Craco.

Imagine se tudo na vida funcionasse perfeitamente 🦄

Assim como qualquer lib, é possível que se encontre bugs no @craco, caso encontre por favor abra uma issue no projeto oficial para que a comunidade melhore a biblioteca e torne-a funcional para todos.

Mas calma, use-a sem medo para realização desse tutorial.

É hora de dar tchau 😩

Estava gostando tanto de passar esse tempo com você 😢. Caso queira saber o que ando aprontando por ai, me siga no Github Github.

Ajude sua rede de amigos desenvolvedores a pararem de sofrer com importações relativas compartilhando este artigo!

Um grande abraço e até a próxima!

Configuring absolute paths in React for Web without ejecting [en-US]

Bruno A. — Sun, 21 Jul 2019 06:29:06 +0000

After you've done an article showing how to set up absolute paths in React Native, now I've been showing you how to do this in React for Web.

While the React team does not implement this in the CRA, we'll set up with our own hands and without ejecting. Keep reading and you will see the magic happening.

A small introduction ☕

Why not eject the project?

Well, the reason for that is you're breaking CRA's “guarantees”. But calm, I've seen several projects that have been ejected and they are still working perfectly in production, the only problem is to eject, the settings will be mine and I have to support them.

"Stuff can break" - Dan Abramov

But fortunately, using tools like craco, we can easily go back to the CRA default settings if things go wrong. And this is incredible!

Since we will only touch alias, you do not have much to worry about, the craco will inject the new settings we make in the craco.config.js file within the CRA default settings.

In case you do not know, the intention to configure absolute paths in a project made with Reactjs, is to facilitate the import of files. For this we can use a symbol to represent a root directory of our codes. See an example below:




Use this 😍
import Form from '@/components/Form'

E Avoid this 😤
import Form from '../../../../../components/Form'

They say that it is practicing that you learne 🏊

☝ So come on, open your terminal and install the necessary dependencies:



# yarn
yarn add @craco/craco

# npm
npm i @craco/craco

✌ After performing the craco installation, we will need to rename some package.json command lines.

Replace the "react-scripts" with "craco".



{
  "scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
}

This will cause the CRA scripts to be executed by craco which will make injections of the settings that will be in the craco.config.js file.

🛠 Create the file in the project root directory called: craco.config.js and add the following settings:



const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/')
    }
  },
  jest: {
    configure: {
      moduleNameMapper: {
        '^@(.*)$': '<rootDir>/src$1'
      }
    }
  }
};

A pinch of VueJS, please! 🍲

I'm using alias "@" copying as Vuejs uses. You can use alias that you find interesting, such as "~" or "#", for example.

My VSCode is not understanding anything 😢

When doing this we will come across the first problem, the autocomplete. We are already accustomed to having autocomplete when we are going to import the files using relative paths.

This error happens because VSCode does not understand that the "@" is the "src" folder of our project. To enable autocomplete we will need to configure the VSCode so that it understands. And for this we need to create a file called jsconfig.json in the project root directory.

Learn more about jsconfig.json.

Include the following properties within the file:



{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

Amazing!

Now it works perfectly, use the command: npm start to run your project.

A tool that likes to complain all the time! 😡

If you are using eslint, you will notice that it will complain on all imports that you perform using "@".

Thank God, there is a way to calm eslint using eslint-import-alias.

☝ First add the libraries below as development dependencies, for God's sake! 😰



# yarn
yarn add eslint-plugin-import eslint-import-resolver-alias -D

# npm
npm i eslint-plugin-import eslint-import-resolver-alias -D

✌ In your .eslintrc.json file include the following properties:



"settings": {

    "import/resolver": {

      "alias": {

        "map": [["@", "./src"]]

      }

    }

  }

Questions that look stupid but are not 😳💬

Can I use this technique in projects that go to production?

Answer: Yes, you can use it without any problem!

Can I use it in React Native?

Answer: No, the setting in React Native is different, I show you how to do this article:
Configuring Absolute Paths in React Native.

Can my test files fail?

Answer: If you have followed step by step correctly, it probably will not give you an error. If you have changed the symbol that you are going to use as alias, make sure you have also placed this in the jest configuration there in the craco.config.js file in the moduleNameMapper property.

Why are not you using the Babel plugin root import?

Answer: Unlike the Babel plugin root import, we only import a library that solves the problem, as well as being simple to use. Another thing that has been bothering me is that it is not supporting CRA 3.0, so the use of Craco.

Imagine if everything in life worked perfectly 🦄

Like any lib, you may find bugs in @craco, if found please open a issue in the official project for the community to improve the library and make it functional for everyone.

But cool, use it fearlessly for this tutorial.

It's time to say goodbye 😩

I'm really enjoying spending this time with you. If you want to know what I'm up to, follow me on Github bybruno.

Help your developer friends to stop suffering with relative imports by sharing this article!

A big hug and until next time!

Configuring Absolute Paths in React Native [en-US]

Bruno A. — Fri, 19 Jul 2019 10:26:39 +0000

One of the things I miss about React / React Native is the absolute path. It is very common to use relative paths to import files.

The problem is when the project grows and the folders are deeply nested, I believe you may have already seen or already done so:

../../../.../../../../Utils/Breadcrumbs.js

../../../../../Components/Form/TextField.js

Now imagine that the Utils folder has changed directory. 😢

To resolve this issue, use a library called Babel Plugin Root Import. With a list that can be used to encode the root of our application, which is a "src" folder. 😍

It is practicing that you learn

☝ Add the library to your project.

    babylu@Project: ~$ yarn add babel-plugin-root-import -D

    ou

    babylu@Project: ~$  npm install babel-plugin-root-import -D

✌ After installation, set up the babel.config.js file that is located in the root directory.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'babel-plugin-root-import',
      {
        rootPathPrefix: '@',
        rootPathSuffix: 'src'
      }
    ]
  ],
  env: {
    production: {
      plugins: [
        'babel-plugin-root-import',
        {
          rootPathPrefix: '@',
          rootPathSuffix: 'src'
        }
      ]
    }
  }
};

With everything set up, it is now possible to import your files using "@" as a prefix. Here's an example below:

@/Components/Form

@/Pages/Auth/SignIn

A pinch of VueJS please 🍲

I am using the "@" copying the Vuejs. Use the prefix that you find interesting. It can be the '~' or '#' for example.

Excuse me, could you show me the Way? 🚶

Using this technique we will have our first problem, the absence of autocomplete. This is because VSCode still does not understand that the "@" refers to the "src" folder of our project. To solve this we will create in the root directory a configuration file that VSCode understands, called jsconfig.json.

Inside it include the settings below:

{
  "compilerOptions": {
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules"]
}

Learn more about the jsconfig.json file:
https://code.visualstudio.com/docs/languages/jsconfig

Agora sim! 😎

A tool that likes to complain! 😡

If you are using eslint in your project, you will receive many complaints about the imports you make using the prefix '@'.

Luckily, there is a library that lets you tell eslint that everything is okay.

Add:

    babylu@Project: ~$ yarn add eslint-import-resolver-babel-plugin-root-import -D

    ou

    babylu@Project: ~$ npm install eslint-import-resolver-babel-plugin-root-import -D

In the eslint configuration file include the following properties.

  "settings": {
    "import/resolver": {
      "babel-plugin-root-import": {}
    }
  }

Questions that look stupid but are not 🤔

Can I use this for applications going to production?

Answer: Yes, if you have followed the steps correctly you will see that we configured for production in babel.config.js

Can I use React for web?

Answer: To use the babel plugin root import for Web, you need to perform some other settings

But not everything in life is flowers 🔴

You may encounter bugs in the library. If you find it please report it in the official babel plugin root import repository and help the community create a better library.

https://github.com/entwicklerstube/babel-plugin-root-import/issues

Follow me on twitter @heybrunoandrade

Help me translate this article into other languages.
If you have received an error in the translation please make the repository to make a correction. I'll be very grateful.
Access Repository

Configurando caminhos absolutos no React Native [pt-BR]

Bruno A. — Fri, 19 Jul 2019 09:54:28 +0000

📢 English Version:
https://dev.to/heybrunoandrade/configuring-absolute-paths-in-react-native-en-us-2m5k

Uma das coisas que sinto falta no React/React Native são os caminhos absolutos. É muito comum usarmos caminhos relativos para realizar importações de arquivos.

O problema é quando o projeto cresce e as pastas ficam profundamente aninhadas, acredito que você já possa ter visto ou já fez isso:

../../../.../../../../Utils/Breadcrumbs.js

../../../../../Components/Form/TextField.js

Agora imagine que a pasta Utils mudou de diretório. 😢

Para resolvermos esse problema, utilize uma biblioteca chamada Babel Plugin Root Import. Com essa biblioteca podemos utilizar caracteres coringas para apontar o diretório root de nossa aplicação, que geralmente é a pasta “src”. 😍

É praticando que se aprende

☝ Adicione a biblioteca em seu projeto.

    babylu@Project: ~$ yarn add babel-plugin-root-import -D

    ou

    babylu@Project: ~$  npm install babel-plugin-root-import -D

✌ Após a instalação, configure o arquivo babel.config.js que está localizado no diretório raiz.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'babel-plugin-root-import',
      {
        rootPathPrefix: '@',
        rootPathSuffix: 'src'
      }
    ]
  ],
  env: {
    production: {
      plugins: [
        'babel-plugin-root-import',
        {
          rootPathPrefix: '@',
          rootPathSuffix: 'src'
        }
      ]
    }
  }
};

Com tudo configurado, já é possível realizar as importações dos seus arquivos utilizando “@” como prefixo. Segue um exemplo abaixo:

@/Components/Form

@/Pages/Auth/SignIn

Uma pitada de VueJS por favor 🍲

Estou utilizando o “@” para imitar o Vuejs. Utilize o prefixo que você achar interessante. Pode ser o ‘~’ ou ‘#’ por exemplo.

Com licença, você poderia me mostrar o Caminho? 🚶

Utilizando esta técnica teremos o nosso primeiro problema, a ausência do autocomplete. Isso acontece porque o VSCode ainda não entende que o “@” faz referência a pasta “src” do nosso projeto. Para resolver isso vamos criar no diretório raiz um arquivo de configuração que o VSCode entende, chamado de jsconfig.json.

Dentro dele inclua as configurações abaixo:

{
  "compilerOptions": {
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules"]
}

Saiba mais sobre o arquivo jsconfig.json:

https://code.visualstudio.com/docs/languages/jsconfig

Agora sim! 😎

Uma ferramenta que gosta de reclamar! 😡

Caso esteja utilizando o eslint em seu projeto, irá receber muitas reclamações das importações que você faz utilizando o prefixo ‘@’.

Felizmente, existe uma biblioteca que serve para avisarmos ao eslint que está tudo certo.

Adicione:

    babylu@Project: ~$ yarn add eslint-import-resolver-babel-plugin-root-import -D

    ou

    babylu@Project: ~$ npm install eslint-import-resolver-babel-plugin-root-import -D

No arquivo de configuração do eslint inclua as seguintes propriedades.

  "settings": {
    "import/resolver": {
      "babel-plugin-root-import": {}
    }
  }

Perguntas que parecem idiotas mas não são 🤔

Posso usar isso para aplicativos que vão para produção?

R: Sim, se você tiver seguido corretamente os passos verá que configuramos para produção no babel.config.js

Posso usar no React para web?

R: Para utilizar o babel plugin root import para Web é necessário realizar algumas outras configurações.

Mas nem tudo na vida são flores 🔴

É possível que se encontre bugs na biblioteca. Caso você encontre por favor relate no repositório oficial do babel plugin root import e ajude a comunidade a criar uma biblioteca melhor.

https://github.com/entwicklerstube/babel-plugin-root-import/issues

Me siga no Twitter @heybrunoandrade

Me ajude a traduzir esse artigo para outros idiomas.
Acessar Repositório

Manual on how to become the worst programmer in the world

Bruno A. — Tue, 16 Jul 2019 23:20:17 +0000

If you want to become the worst programmer in the world I strongly recommend reading those steps that have proven effective in the lives of some programmers.

Learn multiple languages / frameworks at once

If you want to become the programming guy learn 8 languages and 5 frameworks at the same time.

Create complex jobs for crumbs

The best part of being the worst programmer in the world is to make a complex system and sell it for $25.

Discuss the best language/framework

Discussing with the classmates stating that React is better than angular is something that will bring you a great feeling, even because React solves all problems.

Do not use version control

You can use Google Drive to version your code. The best practice!

Are you in a team? Work alone!

Work alone, you do not have to depend on another person. Know that, "Want to make things happen, do it yourself".

Do not be proactive

Be proactive for what? Nothing will happen, everything will happen well!

Do not respect the Senior Developer

The Senior Developers do not know what you're talking about, that post you read on facebook made by a 17 year old who knows how to create a component in the react knows what he's talking about.

Don't have discipline

We become programmers to do whatever you want whenever you want and this is our world, get used to it!

Forget your mental and physical health

You need to stay only on the computer and not worry about your health. Getting out of the computer for a few hours to exercise may cost you money. Time is money, write it down!

Get away from the people you love

Study, work on the personal project, work on delivery of the project that is already for tomorrow. There is no time for people, but no problem because they will always be around.

And finally ... Write in Dev.to a little manual of how
become the worst programmer in the world.

Original Post [PT/BR]:
https://medium.com/@brunoandrade.me/manual-de-como-se-tornar-o-pior-programador-do-mundo-3ac70b4fa1e2

If you have found some error in the translation, please inform me.