DEV Community: Rafael Domingues

Access your GitHub repo in VS Code

Rafael Domingues — Fri, 07 May 2021 20:54:16 +0000

Who has never been lost while browsing a repository on GitHub? I recently found a tool that caught my attention and has helped me daily to not get lost in my old codes.

GitHub1s

The project basically presents an easy way to access and view your Github repository as if it were inside the Visual Studio Code editor. To do this, simply add '1s' after 'github' in the repository url and press enter, as in the example:

Demo

Cloud development

In addition to being able to view your entire project, you can also edit files, execute docker containers and create pull requests through integration with GitPod, to do this just click in "Develop your project on Gitpod" button in the status bar.

It's also possible to use the tool for local development, to do this just take a look at the documentation clicking here.

Extensions

To make it even easier it is possible to add extensions created by the community to access the tool more quickly:

Check the list of extensions here! And choose the one you like best.

Was this tip useful? Comment if it helped you and share!

Acesse seu repositório do Github através do VS Code

Rafael Domingues — Fri, 07 May 2021 20:39:15 +0000

Quem nunca se perdeu enquanto navegava em um repositório no GitHub? Recentemente encontrei uma ferramenta que chamou bastante minha atenção e tem me ajudado diariamente a não me perder nos meus códigos antigos.

GitHub1s

O projeto basicamente apresenta uma forma fácil de acessar e visualizar seu repositório do Github como se estivesse dentro do editor Visual Studio Code. Para isso basta adicionar '1s' após 'github' na url do repositório e pressionar enter, como no exemplo:

Demo

Desenvolvimento em nuvem

Além de poder visualizar todo seu projeto também é possível editar arquivos, executar containers do docker e criar pull requests através da integração com o GitPod, para isso basta clicar no botão "Develop your project on Gitpod" na barra de status.

Também é possível utilizar a ferramenta para desenvolvimento local, para isso basta dar uma olhada na documentação clicando aqui.

Extensões

Para facilitar ainda mais é possível adicionar extensões criadas pela comunidade para acessar de forma mais rápida a ferramenta:

Confira a lista de extensões aqui! E escolha a que mais te agrada.

Esta dica foi útil? Comente se te ajudou e compartilhe!

Autenticação no React com Context API e Hooks

Rafael Domingues — Mon, 31 Aug 2020 03:18:56 +0000

O que é Context API?

A Context API, fornece uma maneira de passar os dados de componentes sem ter que passar manualmente em todos os níveis. Algo como o que o Redux faz criando e gerenciando um estado global, inclusive o próprio Redux utiliza Context API por debaixo dos panos.

Vale a pena dar uma olhada em como funciona e utilizar nos seus projetos para manipular dados simples, como na autenticação de um usuário em que veremos neste post.

Criando novo projeto

Primeiramente vou criar um novo projeto seguindo a documentação do ReactJS com Typescript (caso não deseje utilizar Typescript pode seguir normalmente o tutorial e ignorar as declarações de tipos), então vou executar o seguinte comando no meu terminal:



$ npx create-react-app authapp --template typescript

Com o projeto criado e aberto no seu editor preferido vamos começar apagando todos os arquivos que o React cria automaticamente, ficando com a seguinte estrutura:

Lembre-se de apagar as linhas de código que dependiam dos arquivos deletados!

Agora vamos instalar uma lib para nos auxiliar a lidar com as rotas da aplicação, para esse tutorial estarei utilizando a React Router. Podemos instalar através do seguinte comando:



$ yarn add react-router-dom

Caso esteja utilizando Typescript igual a mim, vai precisar instalar também a definição de tipos para essa lib como dependência de desenvolvimento através do comando:



$ yarn add @types/react-router-dom -D

Paginas da aplicação

Com a lib instalada podemos continuar, vamos agora criar dentro de src uma pasta chamada pages contendo 2 outras pastas, Login e Home cada uma com um arquivo index.tsx dentro, que serão as páginas da nossa aplicação. Por enquanto estamos assim:

Para ser mais rápido nesse tutorial não vou criar nenhum tipo de estilo para as páginas, mas fique a vontade para isso! Em nossa página Home vamos criar um componente contendo somente um h1 com o nome da página:



import React from 'react';

const Home: React.FC = () => {
 return (
   <div>
     <h1>Home</h1>
   </div>
 );
};

export default Home;

Em nossa página de Login vamos criar somente um botão que será responsável pelo nosso Login:



import React from 'react';

const Login: React.FC = () => {
 function handleLogin() {}

 return (
   <div>
     <button onClick={handleLogin}>Login</button>
   </div>
 );
};

export default Login;

Rotas da aplicação

Com as páginas criadas, vamos agora criar as rotas da nossa aplicação. Primeiro vamos criar,dentro de src, uma pasta routes onde vamos criar os arquivos que serão nossa rotas.

Para esse tutorial criei um arquivo que será responsável pelas rotas em que o usuário poderá se autenticar, tais como Login, Sign Up, etc, e um outro arquivo que será responsável pela navegação depois do usuário já estar autenticado. Ficando com a seguinte estrutura:

No nosso arquivo SignRoutes.tsx vamos criar a rota para nossa página de login seguindo a documentação do React Router.



import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

import Login from '../pages/Login';

const SignRoutes: React.FC = () => {
 return (
   <BrowserRouter>
     <Route path="/" component={Login} />
   </BrowserRouter>
 );
};

export default SignRoutes;

Vamos fazer o mesmo para nosso OtherRoutes.tsx mas dessa vez utilizando nossa página Home:



import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

import Home from '../pages/Home';

const OtherRoutes: React.FC = () => {
 return (
   <BrowserRouter>
     <Route path="/" component={Home} />
   </BrowserRouter>
 );
};

export default OtherRoutes;

Agora em nosso index.tsx, ainda na pasta, routes vamos importar nossas rotas e por enquanto retornar somente nossa rota de Login:



import React from 'react';

import SignRoutes from './SignRoutes';
import OtherRoutes from './OtherRoutes';

const Routes: React.FC = () => {
 return <SignRoutes />;
};

export default Routes;

Agora em nosso App.tsx na raiz do nosso projeto importaremos nossas Rotas, assim:



import React from 'react';
import Routes from './routes';

function App() {
 return <Routes />;
}

export default App;

Se rodarmos yarn start no nosso terminal poderemos ver nossa página de Login com um botão:

Criando Contexto

Com a base da nossa aplicação pronta, vamos começar a utilizar o Contexto do React para criar um “estado global” e criar nossa autenticação. Para isso dentro do nosso src vamos criar uma pasta contexts com um arquivo auth.tsx:

Dentro do nosso auth.tsxvamos importar o createContext do React e exportar uma variável AuthContext, um contexto com um objeto vazio dentro:



import React, { createContext } from 'react';

const AuthContext = createContext({});

export default AuthContext;

Em nosso App.tsx vamos importar esse AuthContext e circundar nossas rotas com o Provider do nosso Contexto passando uma propriedade value com um objeto contendo signed: true, da seguinte forma:



import AuthContext from './contexts/auth';

function App() {
 return (
   <AuthContext.Provider value={{signed: true}}>
     <Routes />
   </AuthContext.Provider>
 );
}

Agora se em nossa página de Login buscarmos esse Contexto e dermos um console.log teremos a seguinte resposta:



import React, { useContext } from 'react';
import AuthContext from '../../contexts/auth';

const Login: React.FC = () => {
 const context = useContext(AuthContext);

 console.log(context);
...

Console.log:

Ou seja, nosso signed enviado no nosso App.tsx pode ser recuperado dentro do nosso componente!

Criando Provider

Para melhorar nosso contexto e implementar o restante do código para lidar com a autenticação, vamos trazer o Provider para dentro do nosso arquivo auth.tsx e o exportá-lo.



const AuthContext = createContext({});
...
export const AuthProvider: React.FC = ({ children }) => {
 return (
   <AuthContext.Provider value={{ signed: true }}>
     {children}
   </AuthContext.Provider>
 );
};
...
export default AuthContext;

Agora podemos importar nosso provider dentro do App.tsx, melhorando bastante o nosso código sem alterar o funcionamento:



...
import { AuthProvider } from './contexts/auth';

function App() {
 return (
   <AuthProvider>
     <Routes />
   </AuthProvider>
 );
}
...

Fazendo as chamadas a API

Utilizarei Axios para realizar as requisições à API. Para isso vamos instalar o pacote do axios:



yarn add axios

Vamos criar uma pasta services e um arquivo api.ts para configurar o axios:



import axios from 'axios';

const api = axios.create({
 baseURL: 'https://localhost:3333',
});

export default api;

Com o axios configurado vamos criar uma função para fazer a chamada a api dentro do nosso arquivo auth.tsx:



...
import api from '../services/api';
...
export const AuthProvider: React.FC = ({ children }) => {
...
async function Login() {
   const response = await api.post('/login', {
     email: 'example@email.com',
     password: '123456',
   });

   console.log(response);
 }
...

Para utilizarmos essa função em outros componentes teremos que adicioná-la ao value do nosso Provider:



return (
   <AuthContext.Provider value={{ signed: true, Login }}>
...

Criaremos também uma interface com os dados que estarão no nosso value e adicionaremos o tipo criado ao nosso contexto:



interface AuthContextData {
 signed: boolean;
 Login(): Promise<void>;
}

const AuthContext = createContext<AuthContextData>({} as AuthContextData);

E agora poderemos acessá-la no nosso componente de Login e realizar o login:



...
function handleLogin() {
   context.Login();
}
...

Agora ao clicarmos no botão de login nossa função responsável pelo login será chamada e para ter certeza disso podemos ver nosso console.log:

Precisamos guardar os dados retornados pela API em algum lugar, para isso vamos criar um estado para nosso user e vamos adicionar nosso token no header das nossas chamadas pelo axios:



...
  const [user, setUser] = useState<object | null>(null);
...
  async function Login() {
...
   setUser(response.data.user);
   api.defaults.headers.Authorization = `Bearer ${response.data.token}`
...

Com nosso user em mãos podemos adicioná-lo ao Provider e mudar nosso signed para depender de user:



...
return (
   <AuthContext.Provider value={{ signed: Boolean(user), user, Login }}>
     {children}
   </AuthContext.Provider>
 );
...

Lembre-se de adicionar o user a interface AuthContextData caso esteja utilizando typescript:



interface AuthContextData {
  signed: boolean;
  user: object | null;
  Login(): Promise<void>;
}

Modificando as Rotas

Finalmente podemos ir no index.tsx das nossas rotas e utilizar nosso contexto para decidir qual rota o usuário deve acessar:



import React, { useContext } from 'react';
import AuthContext from '../contexts/auth';

import SignRoutes from './SignRoutes';
import OtherRoutes from './OtherRoutes';

const Routes: React.FC = () => {
 const { signed } = useContext(AuthContext);

 return signed ? <OtherRoutes /> : <SignRoutes />;
};

export default Routes;

Com isso pronto, nossa autenticação já está funcionando e ao clicar em Login o usuário deve ser mandado para a página Home!

Criar hook useAuth

Podemos criar um hook personalizado para facilitar o uso do nosso contexto, para isso vamos exportar uma função chamada useAuth do nosso arquivo auth.tsx, que cria nosso contexto com useContext, e remover nosso export default de AuthContext:



export function useAuth(){
 const context = useContext(AuthContext);

 return context;
}

Agora podemos mudar nas rotas e na nossa página de login onde utilizamos useContext(AuthContext) para:



import { useAuth } from '../../contexts/auth';
...
 const context = useAuth();
...

Finalmente nosso hook para autenticação está pronto para uso!

Extras

Salvar dados no Storage

Normalmente salvamos os dados como user e token para manter o usuário logado mesmo após sair da aplicação. Para isso podemos utilizar o SessionStorage ou LocalStorage, na Web, e o AsyncStorage no React Native.

Na nossa função de login no auth.tsx podemos fazer o seguinte:



async function Login(){
...

  localStorage.setItem('@App:user', JSON.stringify(response.data.user));
  localStorage.setItem('@App:token', response.data.token);
}
...

Para recuperar esses dados podemos criar um useEffect dentro do nosso componente AuthProvider:



...
export const AuthProvider: React.FC = ({ children }) => {
...

useEffect(() => {
    const storagedUser = localStorage.getItem('@App:user');
    const storagedToken = localStorage.getItem('@App:token');

    if (storagedToken && storagedUser) {
      setUser(JSON.parse(storagedUser));
      api.defaults.headers.Authorization = `Bearer ${storagedToken}`;
    }
  }, []);
...

Função de Logout

Como agora estamos salvando os dados no localStorage precisamos de uma forma para fazer logout da aplicação, para isso no nosso Provider dentro de auth.tsx podemos criar uma função que seta user como null novamente e remove os items do localStorage:



...
interface AuthContextData {
  signed: boolean;
  user: object | null;
  Login(user: object): Promise<void>;
  Logout(): void;
}
...
export const AuthProvider: React.FC = ({ children }) => {
...
  function Logout() {
    setUser(null);

    sessionStorage.removeItem('@App:user');
    sessionStorage.removeItem('App:token');
  }

  return (
    <AuthContext.Provider
      value={{ signed: Boolean(user), user, Login, Logout }}
    >
      {children}
    </AuthContext.Provider>
  );
...

Podemos agora criar um botão em nossa página Home e chamar essa função para realizar o logout da aplicação:



const Home: React.FC = () => {
  const { Logout } = useAuth();

  async function handleLogout() {
    Logout();
  }

  return (
    <div>
      <h1>Home</h1>
      <button onClick={handleLogout}>Logout</button>
    </div>
  );
};

Apesar de parecer complicado de inicio, podemos ver que no fim temos algo bem mais simples que Redux e funcionando como deveria! O que achou?

Todo código pode ser encontrado no Github: https://github.com/rafacdomin/Auth-React-ContextAPI

Fonte: https://www.youtube.com/watch?v=KISMYYXSIX8

Creating Floating Label/Placeholder for Input with ReactJS

Rafael Domingues — Wed, 19 Aug 2020 17:35:09 +0000

- What is a float label?

These days I was working in a project that the inputs had a different behavior, while empty they had a normal placeholder but when filled, the placeholder moved above the typed text, something that looks very simple but that would make a difference in the page layout.

Example:

After some research I decided to share my learning and help you put that finishing touch on your projects.

- How to do?

Creating a new project

First of all I will create a new project in React with yarn:

$ yarn create react-app float-input

After cleaning up the code that the command did for us, I created a div that contains an input and a label like this:

<div id="float-label">
  <input type="email" />

  <label htmlFor="email">
    E-mail
  </label>
</div>

Now let's stylize with css, feel free to style it the way you prefer, in my case I did the following:

#float-label {
  display: flex;
  flex-direction: column;
  min-width: 350px;
}

#float-label input {
  width: 100%;
  height: 56px;
  padding: 14px 16px 0 10px;
  outline: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

#float-label label {
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 0 12px;
  color: #999;
  pointer-events: none;
}

Our input now looks like this:

Doing animation with CSS

Now we start with the "magic", which consists of a transition and the behavior of position absolute, which has the axes referring to the parent element, if it is position relative.

First we add position relative to the css of our div:

#float-label {
  ...

  position: relative;
}

Now we add position absolute to our label and a transform to center our label, as if it were a placeholder for our input:

#float-label label {
  ...

  position: absolute;
  transform: translate(0, 26px) scale(1);
}

We have the following result:

Now we are going to do the animation with a transition and use the focus-within to apply the translate effect to change the position and scale in ourlabel:

#float-label label {
  ...

  transform-origin: top left;
  transition: all 0.2s ease-out;
}

#float-label:focus-within label {
  transform: translate(0, 12px) scale(0.75);
}

We now have the following result but still with a small problem that we are going to fix:

Doings changes in ReactJS

First we add a className to our label, which will depend directly on a variable that we will create in the state of our React component through the useState hook:

const [isActive, setIsActive] = useState(false);

return(
...
  <label className={ isActive ? "Active" : ""} htmlFor="email" >
  E-mail
  </label>
...
);

To change our state variable we will create a function that handles what was typed in our input:

const [value, setValue] = useState('');

function handleTextChange(text) {
  setValue(text);

  if (text !== '') {
    setIsActive(true);
  } else {
    setIsActive(false);
  }
}

return(
...
<input
  type="email"
  value={value}
  onChange={(e) => handleTextChange(e.target.value)}
/>
);

The function is called whenever we type something in the input and is responsible for changing our value and checking if the text in the input is actually a word.

Finally, we stylized our Active class in our css with the same code used before to make our label change position:

#float-label .Active {
  transform: translate(0, 12px) scale(0.75);
}

And our animation is ready! Tell me below if you liked and if you managed to do it :)

Remembering that if you know a better way to do this same functionality, feel free to share too!

Based on: https://velhobit.com.br/design/como-fazer-efeito-float-label-animado-com-css3-puro.html

Criando um input com label flutuante no ReactJS

Rafael Domingues — Wed, 12 Aug 2020 01:18:59 +0000

O que é um label flutuante?

Esses dias eu estava trabalhando em um projeto e me deparei com o design dos inputs, que tinham um placeholder enquanto vazios e quando preenchidos o placeholder ficava acima do texto digitado, algo bem simples mas que faria uma diferença no layout da página.

Exemplo:

Depois de pesquisar um pouco decidi fazer um pequeno post e compartilhar para quem sabe ajudar a dar um toque a mais no design dos seus Inputs. Vamos lá!

Como fazer?

Primeiramente vou criar um novo projeto do React com yarn.



$ yarn create react-app float-input

Depois de limpar o código que o react criou sozinho vou criar uma div contendo um elemento input e um elemento label, da seguinte forma:



<div id="float-label">
  <input type="email" />

  <label htmlFor="email">
    E-mail
  </label>
</div>

E agora vou estilizar um pouco com css, fique a vontade para estilizar da forma que preferir, no meu caso fiz o seguinte:



#float-label {
  display: flex;
  flex-direction: column;
  min-width: 350px;
}

#float-label input {
  width: 100%;
  height: 56px;
  padding: 14px 16px 0 10px;
  outline: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

#float-label label {
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 0 12px;
  color: #999;
  pointer-events: none;
}

Por fim nosso label e nosso input estão aparecendo assim na página:

Agora começamos com a "mágica", que consiste em uma transition e o comportamento do absolute, que tem os eixos referentes ao elemento pai, caso esse seja relative.

Primeiro adicionamos position relative ao css da nossa div pai:



#float-label {
  ...

  position: relative;
}

Agora adicionamos position absolute ao nosso label e um transform para centralizar nosso label, como se ele fosse um placeholder para nosso input:



#float-label label {
  ...

  position: absolute;
  transform: translate(0, 26px) scale(1);
}

Temos o seguinte resultado:

Agora vamos fazer a animação com um transition e uso do focus-within para aplicar o efeito de translate para mudar a posição e scale na nossa label:



#float-label label {
  ...

  transform-origin: top left;
  transition: all 0.2s ease-out;
}

#float-label:focus-within label {
  transform: translate(0, 12px) scale(0.75);
}

Temos agora o seguinte resultado mas ainda com um pequeno problema que já vamos corrigir:

Para corrigir esse problema eu encontrei a seguinte solução:

Primeiro adicionamos um className ao nosso label, que vai depender diretamente de uma variável que vamos criar no estado do nosso componente React através do hook useState:



const [isActive, setIsActive] = useState(false);

return(
...
  <label className={ isActive ? "Active" : ""} htmlFor="email" >
  E-mail
  </label>
...
);

Para alterar essa nossa variável do estado criaremos uma função que lida com o que foi digitado no nosso input:



const [value, setValue] = useState('');

function handleTextChange(text) {
  setValue(text);

  if (text !== '') {
    setIsActive(true);
  } else {
    setIsActive(false);
  }
}

return(
...
<input
  type="email"
  value={value}
  onChange={(e) => handleTextChange(e.target.value)}
/>
);

A função é chamada sempre que digitamos algo no input e é responsável por mudar nosso value e verificar se o texto no input é de fato alguma palavra.

Por fim, estilizamos nossa classe Active no nosso css com o mesmo código utilizado antes para fazer nosso label mudar de posição, ficando assim:



#float-label .Active {
  transform: translate(0, 12px) scale(0.75);
}

E nossa animação está pronta! Me diz ai embaixo o que você achou e se conseguiu fazer ai :)

Lembrando que se conhecer uma forma melhor de fazer esta mesma funcionalidade, fique a vontade para compartilhar também!

Baseado em: https://velhobit.com.br/design/como-fazer-efeito-float-label-animado-com-css3-puro.html

Adding a README to your GitHub profile

Rafael Domingues — Tue, 28 Jul 2020 07:57:33 +0000

Hello everyone, recently GitHub released a new feature that allows you to personalize your profile on the website in a very simple way, adding a README. You can see how mine looked below:

How to?

As I said before, it's quite simple, all you need to do is create a new repository with the same name as your username and add a README.md file to it

Now you only need to add some content (text, images, GIFs, emojis, etc.) to this README.md using the markdown syntax and commit the changes to the repo's main branch. Congratulations! This should be visible on your profile now :)
If you are not familiar with markdown syntax, check this guide: https://guides.github.com/pdfs/markdown-cheatsheet-online.pdf

Nice READMEs

Here are some examples of nice profiles that inspired me:

martins-rafael profile

M0nica profile

WaylonWalker profile

If you need more inspiration check this repository for more README profile examples.

I'm curious to see what your GitHub profile looks like, share the link to your profile below!