DEV Community: Beatriz Oliveira

Documentação em toda parte

Beatriz Oliveira — Mon, 19 Feb 2024 19:00:35 +0000

Nesse texto irei comentar como o ato de documentar interfere na minha vida em vários aspectos e como você também pode utilizar e se beneficiar.

No Trabalho

Eu pessoalmente estou sempre adepta a usar documentação para explicar fluxos importantes tanto tecnicamente quanto sobre regra de negócios de uma empresa ou organização em que você esteja trabalhando.

A documentação no serviço te ajuda a andar mais rápido e não ter muitas dependências externas.

Por exemplo: Não sei o fluxo de algo, não domino aquilo ---> vou na doc (interna ou externa) ---> e me destravo sem precisar chamar alguém da equipe para me ajudar naquilo que já foi documentado e consequentemente parar a pessoa para tal.

Muitas vezes há lacunas nessas documentações ou até nem existe uma dependendo do local. É importante que você seja proativo em criá-las, isso irá ajudar a todos.

Uma dica do "o que" documentar além do genérico "fluxos importantes e regras de negócios" é quando chega em você mais de 1 vez a mesma pergunta: "Como é mesmo que funciona aquilo?", isso já é um indicativo que pode ser documentado.

Em resumo te ajuda a não ter trabalho repetitivo, além de descentralizar conhecimento com seu time.

Vida

O tópico acima pode ser utilizado também na questão vida em uma explicação mais genérica, mas aqui irei comentar minha visão e como me ajuda no dia-a-dia.

Finanças

É de conhecimento ou deveria ser que ter uma planilha de acompanhamento financeiro seja de alta importância principalmente na vida adulta, e olha só também é uma forma de documentação!

Estudos

Nos estudos a documentação pode aparecer de diversas maneiras, com resumos, artigos, vídeos explicativos, anotações. Eu particularmente gosto de escrever meus aprendizados e compartilhar em algum lugar para outras pessoas (é uma forma num alto nível de descentralizar conhecimento em massa).

Diário

Também gosto bastante da documentação diária através de um caderno apenas para isso, me ajuda a organizar pensamentos, analizar de fora como foi o dia, e resolucionar problemas organizar rotina ou planejar (agenda).

Performance

Por último mencionar performance, seja de alguma meta que você queira alcançar ou talvez comparar o seu eu do passado com o de agora, só podemos ter uma visão concreta do progresso ou degresso com algo concreto e palpável como por exemplo alguma forma documentada disso.

https://twitter.com/biantris_/status/1504158969606062084

Para finalizar esse texto vale pontuar que existe inúmeras maneiras de documentar algo seja ela: textual, visual, através de audio, etc. O importante é conseguir fazer o ato de documentar para destravar sua vida e as dos outros ou apenas se expressar.

Um artista também doucumenta a expressão dos seus vários eu's durante o tempo.

Trecho do livro O ato criativo: Uma forma de ser

Obrigado quem leu até aqui e espero que esse post tenha lhe agregado em algo na sua trajetória \o/

Foto de Aaron Burden na Unsplash

Qualquer dúvida só mandar DM no Twitter @biantris
Se quiser continuar apoiando meus conteúdos Patreon
Meu GitHub biantris

Aplicando o Learn In Public na Vida Real

Beatriz Oliveira — Thu, 16 Feb 2023 17:52:30 +0000

A maneira mais rápida de aprender

TL:DR
Nesse texto compartilho como foi a minha trajetória aplicando o Learn in Public e tudo o que o mesmo me proporcionou na área da programação.

1. O que é?
2. Como aplicar?
3. Oportunidades

O que é?

Basicamente o Learn in Public (Aprender em Público) é uma ideia/movimento criado pelo desenvolvedor @swyx, que aliás é grande influente em comunidades tech, e fez do "Learn in Public" uma comunidade com milhares de integrantes.

Ele explica que devemos nos expor mais para aprender mais. O que ganhamos quando nos expomos mais para as pessoas?

Resposta: Visibilidade, a melhor coisa em qualquer área profissional, pois abre muitas portas e oportunidades.

E com isso também obtemos mais aprendizado, você pode se aperfeiçoar com referências da sua área, assim como, alguém que é mais especialista do que você pode apontar lacunas de conhecimento ou até mesmo erros cometidos e aprender com eles (E isso é ótimo).

Você precisa formar o hábito de criar exaustão de aprendizado, crie blogposts, escreva textos, faça vídeos, streams, participe de comunidades, seja ativo, dê palestras.

A imagem acima mostra o dashboard do dev.to e um pouco dos textos que já publiquei nele.

Uma das coisas que mais me motiva para a criação de conteúdo para outras pessoas é:

Criar e compartilhar coisas que eu queria ter contato quando precisei, tanto como as maneiras que eu citei acima, ou qualquer outra forma de comunicação, se isso já ajudar alguém já valerá a pena.
Receber feedbacks, todo tipo de feedback é bom (basta saber filtrar e lidar com eles), você acaba recebendo praticamente uma mentoria indireta de "estranhos" e o melhor sem pedir por ela.

Faça o possível para acertar, mas não se preocupe quando estiver errado.

Não julgue e não tenha medo de ser julgado, todo mundo já foi iniciante um dia então não faz sentido julgar alguém que apenas está tentando aprender e se desenvolver. Você que já não é mais iniciante seja mentor de um, se aperfeiçoe mais ensinando e ajudando a pegar o caminho "mais fácil" que você passou.

Validação de aprendizagem, nada melhor do que compartilhar seus conhecimentos é validá-los, não tem como mentir para você mesmo, você não consegue explicar algo de fato se não dominar aquele assunto, nada melhor do que compartilhar para validar isso com os outros.

A imagem acima mostra o Medium que é outra plataforma para publicação de textos e artigos, outro meio para compartilhar conhecimento, e um pouco dos textos que fiz lá.

Jogo do win-win (ganha-ganha), no learn in public todos os lados ganham com a aplicação do mesmo, um exemplo bem legal sobre esse ponto é através de perguntas, você não quer ficar travado em uma questão por muito tempo e compartilhar sua dúvida com a sua rede social ou comunidade é uma ótima maneira de aprender e se destravar e a outra pessoa validar o conhecimento dela lhe respondendo.

A imagem acima mostra mostra uma série de perguntas e respostas que já publiquei no twitter fazendo perguntas e me destravando com a minha comunidade lá.

Como aplicar?

Já listei várias formas de aplicar o Learn in Public mais aqui vai elas de novo, para não deixar batido:

Qualquer forma de expor em público seus aprendizados como:

Escrever artigos, blog post, aqui mesmo no Dev.to;
- Ex: dev.to/beatrizoliveira
Gravar vídeos sobre o assunto:
- Ex: APRENDA MYSQL (Um vídeo educacional ótimo sobre mySQL)
Publicar em alguma rede social:
- Ex: Twitter, Instagram, Linkedin, Tiktok, etc. girl.coding (A Giovanna produz um ótimo conteúdo através do instagram e outras redes)
Explique seu código:
- Ex: twitch.tv/danielhe4rt (O @danielhe4rt sempre quando está em live ele tá programando algo e consequentemente explicando o mesmo)
Palestras/Talks:
- Ex: learn-in-public (a própria palestra que originou esse texto!)
Build In Public:
- Ex: twitch.tv/eduardorfs (O cara simplesmente está criando sua própria linguagem de programação em live)

Oportunidades

Além das inúmeras vantagens que você obtêm compartilhando conhecimento, aqui vai as oportunidades que tive me expondo mais:

Tive a grande oportunidade de palestrar pela primeira vez para He4rt Developers
- confira aqui a talk He4rt Conf
Tive a oportunidade de participar também pela primeira vez de um podcast sobre tech, no pilhacheia
- confira aqui o episódio O verdadeiro pilhacheia
A última foto é bem especial, é um feedback de umas das pessoas que dou mentoria (free hein), é bem legal fazer essa troca e ajudar quem tá começando ou em qualquer nível!

Esse texto foi criado através de uma talk que dei sobre o mesmo assunto, link: https://speakerdeck.com/beatrizoliveiira/learn-in-public

Obrigado quem leu até aqui e espero que esse post tenha lhe agregado em algo na sua trajetória \o/

Qualquer dúvida só mandar DM no Twitter @biantris
Se quiser continuar apoiando meus conteúdos Patreon
Meu GitHub biantris

Evento de Click no JavaScript

Beatriz Oliveira — Tue, 05 Apr 2022 16:25:17 +0000

Eventos no JavaScript

Normalmente, ao visitarmos páginas web, executamos ações através de botões, links ou elementos de ui. Como esses elementos clicáveis são manipulados através de eventos em JavaScript para podermos executar determinada funcionalidade.
Um dos eventos mais utilizados é o onclick , que é executado quando o usuário clica em um elemento.

Ver mais: https://developer.mozilla.org/pt-BR/docs/Web/API/GlobalEventHandlers/onclick

Sintaxe básica do onclick:



<element onclick="function()">Clique here</element>



<button onclick="function()">Clique here</button>

Note que o atributo onclick é puramente JavaScript. O valor que ele recebe é a função que será executada já que ela é passada diretamente na tag de abertura.

Em JavaScript declaramos uma função chamando-a pelo nome e em seguida adicionamos parênteses após o identificador da função(o nome da mesma).



function() {
    // código
}

Exemplo de evento onclick:

Background-changer

Basicamente esse projeto tem como objetivo mudar a cor do background da página ao clicar no botão.

Vamos ver cada parte do código e entender como funciona.

Começando com o nosso código html:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🎨Background Changer🎨</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
</head>
<body>
    <button id="btn">🌈Change Me🌈</button>
</body>
</html>

Depois estilização:



@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");

* {
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    margin: 0;
    min-height: 100vh;
}

button {
    background-color: rebeccapurple;
    color: white;
    padding: 1rem;
    font-family: inherit;
    font-size: 1.2rem;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    border: none;
    transition: transform 0.1s linear;
}

button:focus {
    outline: none;
}

button:active {
    box-shadow: 0;
    transform: translate(2px, 2px);
}

Resultado:

Agora iremos adicionar o nosso evento onclick para mudar a cor do background da página:



const btn = document.getElementById('btn');

btn.addEventListener('click', () =>{
    document.body.style.background = randomBg();
});

function randomBg() {
    return `hsl(${Math.floor(Math.random()
        * 360)}, 100%, 50%)`;
}

Primeiramente iremos adicionar a função btn onde será passada na tag html e irá chamar o id btn que será o nosso botão.

Ao ocorrer o evento de clique será chamado o addEventListener que irá executar a função ramdomBg que irá retornar uma cor aleatória.

Obs: O addEventListener() serve para esperar um evento que será acionado e assim chamar a função determinada

ref https://developer.mozilla.org/pt-BR/docs/Web/API/EventTarget/addEventListener

Resultado:

Como debugar seus eventos com console.log:

Às vezes, podemos querer saber mais informações sobre o evento, como qual elemento foi clicado. Nesse caso, precisamos passar um parâmetro de evento para nossa função.

Este exemplo mostra como você pode obter o id do elemento:



    btn.addEventListener('click', (e) =>{
    document.body.style.background = randomBg();
    console.log(e.target.id)
});

Resultado é o id que passamos mais acima btn

Por que no React é onClick?

Basicamente a diferença é que a nomeação de eventos em React são usando camelCase ao invés de letras minúsculas.



onclick != onClick

Seja mais em: https://pt-br.reactjs.org/docs/handling-events.html

Veja mais sobre:

Fundamentos do React - Props vs State

Beatriz Oliveira — Sun, 13 Feb 2022 18:44:55 +0000

Este artigo é uma tradução pt-BR do artigo React Fundamentals: Props vs State por Kent C. Dodds.

TL;DR

Vamos comparar props e state. Aqui está uma definição para cada um:

"props" ( abreviação de "properties" ) é um objeto de entradas arbitrárias que um componente de função do React aceita como o primeiro argumento.
"state" são dados que mudam ao longo do tempo de vida de uma instância específica de um componente React.

Vamos nos aprofundar em cada um.

Props

Pense nas props como argumentos para uma função. Componentes React são funções que retornam JSX ( ou mais, geralmente algo que é renderizável como elementos React, null, uma string, etc.). Normalmente, quando você tem um pedaço de código que gostaria de reutilizar, você pode colocar esse código em uma função e quaisquer valores dinâmicos usados anteriormente podem ser aceitos como argumentos ( por exemplo const five = 2 + 3, pode ser extraído para uma função e aceitar como const five = add(2, 3) ).

O mesmo vale para um código JSX, exceto quando em vez de chamá-lo como uma função normal ( add(2, 3) ) você usa a sintaxe JSX ( <Add n1={2} n2={3} /> ). Os "atributos" fornecidos no JSX são chamados de props e são colocados juntos em um único objeto e passados para a função do componente Add como primeiro argumento da seguinte forma:

function Add(props) {
  return (
    <div>
      {props.n1} + {props.n2} = {props.n1 + props.n2}
    </div>
  );
}

Se eu fosse usar isso seria dessa forma:

<Add n1={2} n2={3} />

Veja como isso seria renderizado:

2 + 3 = 5

Obs:.
As props podem ser qualquer coisa. Nesse exemplo, elas são números, mas também podem ser ( e geralmente são ) strings, arrays, objetos, funções, etc.

Digamos que queremos usar o padrão n2 para 0 caso alguém não o forneça. ( como <Add n1={2} /> ). Uma regra das props é que você não tem permissão para alterá-los. Logo, você não poderia fazer algo assim:

function Add(props) {
  if (typeof props.n2 === "undefined") {
    props.n2 = 0;
  }
  return (
    <div>
      {props.n1} + {props.n2} = {props.n1 + props.n2}
    </div>
  );
}

Se tentarmos fazer isso, obteremos o seguinte erro:

TypeError: Cannot add property n2, object is not extensible

Mas isto é simples de resolver:

function Add(props) {
  let n2 = props.n2
  if (typeof n2 === 'undefined') {
    n2 = 0
  }
  return (
    <div>
      {props.n1} + {n2} = {props.n1 + n2}
    </div>
  )
}

Ou, muitas vezes, você encontrará pessoas que usam sintaxe de desestruturação com valores padrão também (essa é minha preferência pessoal):

function Add({n1, n2 = 0}) {
  return (
    <div>
      {n1} + {n2} = {n1 + n2}
    </div>
  )
}

Isso é incrível, mas se eu quiser alterar dinamicamente o valor das props? Digamos que eu queira construir algo assim:

Sem estado, podemos fazer assim:

function AddWithInput(props) {
  function handleInputChange(event) {
    const input = event.target
    const newN2 = Number(input.value)
    props.n2 = newN2
  }
  return (
    <div>
      {props.n1} +{' '}
      <input type="number" value={props.n2} onChange={handleInputChange} /> ={' '}
      {props.n1 + props.n2}
    </div>
  )
}

No entanto, isso não funcionará por dois motivos:

O React não sabe que atualizamos o valor do n2 do nosso objeto props, então ele não atualizará a DOM quando mudarmos props.n2, logo, não veremos nossas alterações de qualquer maneira;
Receberemos o aviso TypeError como anteriormente.

É ai que entra o state(estado).

State

Estados são dados que mudam ao longo do tempo, e isso é perfeito para nossa situação:

function AddWithInput(props) {
  const [n2, setN2] = React.useState(0)

  function handleInputChange(event) {
    const input = event.target
    const newN2 = Number(input.value)
    setN2(newN2)
  }

  return (
    <div>
      {props.n1} +{' '}
      <input type="number" value={n2} onChange={handleInputChange} /> ={' '}
      {props.n1 + n2}
    </div>
  )
}

Isso funcionará, e é exatamente para isso que o estado no React deve ser usado. Serve para rastrear valores de dados durante a vida útil do componente (desde que o componente exista na página).

No entanto, os usuários do componente AddWithInput não podem mais definir o valor inicial de n2. Da forma que esse componente é implementado atualmente, ele não está fazendo referência nenhuma a props.n2. Mas podemos fazer isso funcionar usando props quando iniciamos nosso estado.

function AddWithInput(props) {
  const [n2, setN2] = React.useState(props.n2)

  // ... etc...
}

Agora se alguém fizesse isso: <AddWithInput n1={2} n3={3} /> então o resultado ficaria assim ( observe que o valor de entrada incial é 3) :

Com isso nossas props são "argumentos" ou "entradas" que podemos passar para um componente, e state é algo que é gerenciado dentro do componente e pode mudar com o tempo.

Deixe-me só limpar um pouco este componente e explicarei minhas mudanças:

function AddWithInput({n1, initialN2 = 0}) {
  const [n2, setN2] = React.useState(initialN2)

  function handleInputChange(event) {
    const input = event.target
    const newN2 = Number(input.value)
    setN2(newN2)
  }

  return (
    <div>
      {n1} + <input type="number" value={n2} onChange={handleInputChange} /> ={' '}
      {n1 + n2}
    </div>
  )
}

Mudei para o padrão de desestruturação para as props e alterei a prop n2 para initialN2. Quando estou utilizando um valor de prop para inicializar um valor de estado, normalmente gosto de dar a ele o prefixo initial para comunicar que as alterações nessa prop não serão levadas em consideração. Se é isso que você deseja, então você irá usar o Elevando o State.

Conclusão

Espero que isso ajude a esclarecer a diferença entre props e state no React para você. É um conceito fundamental. Vá em frente e teste esse pequeno app abaixo. Onde está o estado, onde estão as props?

Espero que seja útil! Boa sorte!

Espero que esse post tenha lhe ajudado ou agregado em algo \o/

Para feedbacks sobre fale comigo pelo Twitter
Se quiser continuar apoiando meus conteúdos Patreon
Meu GitHub https://github.com/biantris

Converting AND to OR in JavaScript

Beatriz Oliveira — Tue, 21 Dec 2021 17:00:00 +0000

Truth Table

First, it is good to review the concepts of the truth table, to understand how to input and boolean values work.
A truth table is nothing more than a logic machine that for a given input or value and its output is calculated according to logical, functional, and Boolean predeterminations

AND and OR

Recently I was faced with a lack of knowledge regarding Booleans, I didn't know how to convert a &&(AND) to ||(OR) in the language I was using (JavaScript), I would have to do a validation converting AND to OR so I focused on these two logical operators in this post.
Logical operators are nothing less than mathematical functions and expressions, yes the ones you probably studied in school.

The logical operator AND also called logical conjunction, is used for given two value inputs where it produces a true value if both operands are true. In programming logic, there are two values in bits that represent true or false which are: 1 and 0

Logical OR operator also called Logical Disjunction, given two inputs with values, it produces a true value if at least one of its operands is true.

Logical Operator XOR

The logical operator XOR represents the inequality function that is if both inputs are true or false the output will be false (0) if both inputs differ it will return true. A nice phrase to remember the logic of XOR is :
"must have one or the other, but not both "
The analytical presentation of this logical operator is given by the expression:



f(a,b)=a+b-2ab

An interesting curiosity that you may not have realized yet is that the logical operator XOR is the conversion of the AND and OR operators, and so when you have a logical AND and want to turn it into a logical OR you will use the XOR.

Logical operator XOR in JavaScript

After a summary of logical operators and truth table we can now get back to solving the problem that triggered this post.
As in the truth table there are also logical operators in programming languages, and how would be the XOR operator in JavaScript?

Simple, since we do not have a real symbol for this operator we can represent it with the conversion of the AND to OR operators that would look like this:



bCondition1 && bCondition2



!(!bCondition1 || !bCondition2)

I hope this post has helped you or added something to it \o/

For feedback on talk to me on Twitter
If you want to continue supporting my content Patreon
My GitHub https://github.com/biantris

Version in Pt-BR 🇧🇷: https://dev.to/beatrizoliveira/convertendo-and-para-or-em-javascript-4ohd

Convertendo AND para OR em JavaScript

Beatriz Oliveira — Tue, 14 Dec 2021 16:26:21 +0000

Tabela Verdade

Primeiramente é bom dá uma revisada nos conceitos de tabela verdade, para entender como valores de entrada e booleanos funcionam.
A Tabela verdade nada mais é que um mecanismo de lógica que para determinada entrada ou valor e é calculado sua saída de acordo com predeterminações lógicas, funcionais e booleanas

AND e OR

Recentemente me deparei com uma falta de conhecimento em relação a booleanos eu não sabia como converter um &&(AND) para ||(OR) na linguagem que estava utilizando (JavaScript), teria que fazer uma validação convertendo AND para OR por isso o foco nesses dois operadores lógicos nesse post.
Operadores lógicos são nada a menos que funções e expressões matemáticas, sim aquelas que você estudou provavelmente na escola.

O Operador lógico AND também chamado de Conjunção lógica, ele é utilizado para dados dois inputs de valores onde produz um valor verdadeiro se ambos os operandos forem verdadeiros. Em lógica de programação existem dois valores em bits que representam verdadeiro ou falso que são: 1 e 0

Operador lógico OR também chamado de Disjunção lógica, dado dois inputs com valores ele produz um valor verdadeiro se pelo menos um de seus operandos for verdadeiro.

Operador Lógico XOR

O operador lógico XOR ele representa a função de desigualdade ou seja se ambas as entradas forem verdadeiras ou falsas a saída será falsa (0) se ambas entradas se distinguirem ele retornará verdadeiro. Uma frase legal para lembrar a lógica do XOR é :
"deve ter um ou outro, mas não ambos"
A apresentação analítica desse operador lógico se dar pela expressão:

f(a,b)=a+b-2ab

Uma curiosidade interessante que você deve ainda não ter percebido é que o operador lógico XOR é a conversão dos operadores AND e OR, e assim quando você tiver uma lógica AND e quiser transformá-la em uma lógica OR usará o XOR.

Operador lógico XOR em JavaScript

Depois de um breve resumo sobre operadores lógicos e tabela verdade agora podemos voltar a resolução do problema que desencadeou esse post.
Assim como na tabela verdade também existem nas linguagens de programação operadores lógicos, e como seria o operador XOR em JavaScript?

Simples, já que não temos um símbolo de fato desse operador podemos representá-lo com a conversão dos operadores AND para OR que ficaria desde modo:

bCondition1 && bCondition2

para

!(!bCondition1 || !bCondition2)

Espero que esse post tenha lhe ajudado ou agregado em algo \o/

Para feedbacks sobre fale comigo pelo Twitter
Se quiser continuar apoiando meus conteúdos Patreon
Meu GitHub https://github.com/biantris

Versão em en 🇺🇸: https://dev.to/beatrizoliveira/converting-and-to-or-in-javascript-30jc

Adding react-to-print in your project

Beatriz Oliveira — Fri, 15 Oct 2021 15:43:49 +0000

In this blogpost I'll show an added feature in a project already created My first project with React ts + Hooks link to blogpost:

My first project with React ts + Hooks

Beatriz Oliveira ・ Apr 4 '21

#react #typescript #hooks #materialui

Step by Step

1 - Install Dependencies

# using yarn
yarn add react-to-print

# using npm
npm i react-to-print

2 - Flow of the new Feature:

An import concept is Lifting State Up which consists of: when we want to add one or more features/components for certain functionality and manage them so that they work together we use the concept of elevating state so that the root component will be the manager of all child components.

See more in: https://reactjs.org/docs/lifting-state-up.html#gatsby-focus-wrapper

3 - Folder structure

To best understand and visualization:

4 - Add ActionButton

First, we will import all the dependencies that will be used and pass the type of the componentToPrint function to be used:

import React from "react";
import Button from "@material-ui/core/Button";
import ReactToPrint from "react-to-print";

type ActionButtonProps = {
  componentToPrint: React.MutableRefObject<null>;
};

And we create ActionButton function and we passed the componentToPrint function into the same, and return button print:

return (
    <>
      <ReactToPrint
        trigger={() => (
          <Button id={"print"} variant="contained" color="primary">
            {" "}
            {"Print"}{" "}
          </Button>
        )}
        content={() => componentToPrint.current}
      />
    </>
  );

We wrap the button with ReactToPrint and pass a trigger on it where the component will return and then an onClick.
How we will use the useRef hook to return mutable objects via .current and related components.

5 - We passed ComponentToPrint to TodoList component

We wrap the To component of the List with a div that links with componentToPrint:

return (
    <div ref={(el) => (componentToPrint.current = el)}>
      {list.map((item, index) => (
        <div key={item.id}>
          <TextField
            value={item.value}
            onChange={(e) => handleChange(e.currentTarget.value, item.id)}
          />
          <IconButton onClick={() => handleAdd(index)}>
            <AddIcon />
          </IconButton>

          {list.length > 1 && (
            <IconButton onClick={() => handleDelete(item.id)}>
              <DeleteIcon />
            </IconButton>
          )}
        </div>
      ))}
    </div>
  );

6 - Pass componentToPrint to component Root (App.tsx)

Coming to the last step we will pass the componentToprint on the parent component where it will manage the child components.

We pass the componentToPrint function inside the App function and we will use the useRef hook to finish the relation of all the components that are part of the buttonPrint and we pass the componentToPrint as a parameter in their return:

const App = () => {
  const componentToPrint = useRef(null);

  return (
    <div className="container">
      <TodoList componentToPrint={componentToPrint} />
      <ActionButton componentToPrint={componentToPrint} />
    </div>
  );
};

Result

🔗 GitHub:

biantris / todolist

📝 todo-list + react hooks + material ui + react-to-print

📋Todo-List

Well, the project that will be presented is very simple, but served to consolidate basic knowledge about React, I chose to use typescript, because the code becomes more readable and simple, but if you prefer you can use normal javascript.

The project will use:

Typescript
React Hooks
Material UI

Dev.to article with step by step

🔗 my-first-project-with-react-ts-hook

Dev.to article adding new feat print button

🔗 adding-react-to-print-in-your-project

✨ New Feature react-to-print

Getting Started

1- Clone repository.

2- Install dependecies.

> yarn
// or
> yarn install
// and
> yarn start

Demo

🔗 todolist

CodeSanbox

🔗 codesandbox

Contributions

Feel free to contribute to this project, if you find any bugs or improvements, open an issue and send a PR about it \o/

View on GitHub

🔗 CodeSandbox: https://codesandbox.io/s/react-to-print-f5tje?file=/src/App.tsx

Speak it like you're playing a video game

Beatriz Oliveira — Wed, 18 Aug 2021 13:04:29 +0000

Recently I faced problems to develop my learning in the English language and luckily (or by chance) I came across this wonderful talk by teacher Marianna Pascal, and I found it interesting to talk about it.

Teacher Mariana Pascal teaches Malaysian students to improve their English, and dealing with several students she noticed something in common.

She noticed a difference that made one student do very well at communicating and others not, some with a high level of English but couldn't communicate and others with a low level of English but great at expressing themselves.

The reason for this was that students with a low level of English were focused only on the person they were practicing the conversation with and on its outcome, others were too concerned about what mistakes not to make, or whether they were going to be judged.

The idea that is passed on that we should sound like a well-spoken English (high level), causes excessive concern, overthink stresses the brain, scares us and we get stuck, all because the main focus is not being communication.

We should practice learning as if we were playing video games, even though we suck at that game, we don't care if other players are judging us, we are just having fun and focused on moving to the next level and winning the game.

The teacher also brings data that shows that for every 1 native speaker in English there are 5 non-native speakers, which reinforces that you should not worry so much about making mistakes but about fulfilling your objective, which is to communicate and be understood.

A language is not an art to be mastered, but a tool to achieve your results.

How to create good patreon benefits

Beatriz Oliveira — Thu, 05 Aug 2021 14:14:34 +0000

This case I will add my exclusive Discord Server for new Patreons!!

Step 1: Have a Discord Server created.

Step 2: Log in to Patreon and navigate to your Creator Page Editor. From here select the Tiers link of your editor. From here select the Tiers link.

Step 3: Click the Edit tier button on a Tier you’d like to assign a Discord role(s) and click into the Advanced button. Scroll until you find the Connect to Discord button.
1:

2:

3:

Step 4: Click the Connect to Discord button and log in to your Discord account via the pop-up window that populates.

Step 5: Head to the Server Settings window and navigate to the Roles tab. You’ll notice a new “Patreon” role is in your server, go ahead and rename the role “Patreon Bot”.

Server management tips:

Rename your roles so that they match your Tier names
Give your roles a distinguishing color
Enable the Display role members separately from online members setting, this will help you distinguish Patrons from other server members

Step 6: Give the Patreon Bot the required permissions
Make sure that the Patreon Bot is above the roles you’ve just created for your Tiers. If you have existing roles you’d like to assign to patrons, be sure to drag the Patreon Bot above those roles. If the Patreon Bot is not above these roles, it will not assign that role to patrons.

Important: Do not deselect or add any permissions to the Patreon Bot! It has all of the permissions it needs, and adding any additional permissions may break the integration.

Step 7: Click the Edit tier button on a Tier you’d like to assign a Discord role(s), and click into the Advanced button. Scroll down and select Gives patrons access to selected Discord roles. A drop-down menu will populate where you can select a role.

You can select multiple roles. This useful if higher tiers are meant to receive benefit that lower tiers do. When you’ve selected your role(s) click Save tier button.

And done, now you can create better benefits for your patreons 🎉

Enjoy and support me in Patreon, I create several things related to open source😄

I was editting the wrong filename...

Beatriz Oliveira — Wed, 09 Jun 2021 02:06:59 +0000

I begin my series of problems and things that have stopped me and will stop me along my journey, I hope you have fun with my noob problems and don't think you are less intelligent for stopping with these things everyone has been a beginner and has stopped with this. \o/

I'm writing this post on June 8th at 11:48 am and yesterday I had a big problem that made me crash for a few hours. The problem is that I'm still very noob (this isn't so bad depending on your perception) and I ended up getting stuck by bad luck (or luck) I dropped a task so I could solve a bug a form of one of the screens on the platform I'm on working currently, the problem is that in that file where the component I was refactoring was there was another component with the almost identical name, that was my disaster 😂.

The component itself was my component's mutation file, but since the name of the other mutation was almost the same, the chances of me getting confused were huge (and that's what happened). An important point is that the ide I was using didn't help me much, I say this because my superior solved the wrong import problem in less than 3 minutes (yes I confused and imported the other mutation and it made me mess up other files and refactor that it didn't was to refactor in the case at hand). Another point that was pointed out by him was to put another name on the mutation because I would get confused more with the name of the same component and mutation, so I passed it as JobExamQuestionAddM.

The tip I give is USE AN IDE THAT HELP YOU in these details that we do not pay attention to a good IDE can help you with automatic imports or you can do this just by clicking and seeing that what you are actually importing is right or if there is.

Here in this first image Vscode didn't help me much, as it didn't show that I was importing the wrong component and only showed a typescript error

In this second image I'm using the Webstorm ide it pointed out that the import was wrong because I clicked on the component name in the import line and it didn't go anywhere, as shown in the image just placing the mouse over the name with correct import already shows that your component actually exists and is being used.

The second tip is PAY ATTENTION TO WHAT YOU'RE DOING, these silly lack of attention made me waste a lot of time and as I'm pretty noob at all I didn't know what I was doing, so it's extremely important to ask your coworkers for help they are more experienced and will give you clues to the possible solution.

Thanks for your attention and stay tuned for the next issue post because it will definitely have several issues.😂

My first project with React ts + Hooks

Beatriz Oliveira — Sun, 04 Apr 2021 19:35:50 +0000

The project will use:

Typescript
React Hooks
Material UI

1-Step:

Create the project with create-react-app TodoList using or not the Typescript template.

npx create-react-app TodoList --template typescript

# or

yarn create react-app TodoList --template typescript

2-Step:

With the project created, install Material ui.

# using npm
npm install @material-ui/core

# using yarn
yarn add @material-ui/core

Also add the icon pack:

# using npm
npm install @material-ui/icons

# using yarn
yarn add @material-ui/icons

3-Step:

Create a file TodoList.tsx where all the project code will be, also create a styles folder containing TodoList.css if you want to style the project.

4-Step:

In TodoList.tsx import the hook useState, TextField, ButtonIcons, AddIcon and DeleteIcon from the ui material.

import React, { useState } from 'react';
import { TextField, IconButton } from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import DeleteIcon from '@material-ui/icons/Delete';

Next we will create an interface, interface in typescript is the way to name types, so we will create our TodoItem interface passing the value of id as number and value as a string.

interface TodoItem {
    id: number
    value: string
}

Create a state useState set and setList with an array of type TodoItem , in its default value we will pass an array with id: 0, and the empty string value: ''. Then we'll create functions of type handleChange, handleAdd and handleDelete to handle this list :


export const TodoList: React.FC = () => {
    const [list, setList] = useState<TodoItem[]>([{ id: 0, value: '' }])

    const handleChange = (value: string, id: TodoItem['id']) => {
        setList(prev => prev.map(item => item.id === id ? { ...item, value } : item ))
    }

    const handleDelete = (id: TodoItem['id']) => {
        setList(prev => prev.filter(item => item.id !== id))
    }

    const handleAdd = (index: number) => {
        const newItem = { id: count ++, value: '' }
        setList(prev => [...prev.slice(0, index + 1), newItem, ...prev.slice(index + 1)])
    }

5-Step:

In the return pass a list.map taking the item and the index, rendering a div,where we will pass a key with value item.id which will be unique to each item, then we will also render the TextField from the ui material with a value and the onChange. Then we pass the IconButton also from the material ui rendering the IconAdd with an onClick and we do the same thing with the IconDelete but passing the handleDelete instead of the handleAdd.


return (
        <div>
          {list.map((item, index) => (
            <div key={item.id}>
              <TextField
                value={item.value}
                onChange={e => handleChange(e.currentTarget.value, item.id)}
              />
              <IconButton onClick={() => handleAdd(index)}>
                <AddIcon />
              </IconButton>

              {list.length > 1 && (
                <IconButton onClick={() => handleDelete(item.id)}>
                  <DeleteIcon />
                </IconButton>
              )}
            </div>
          ))}
        </div>

Note.1: the list.length is the quantity of the list,in other words, it will always start with 1 item.
Note.2: We will also create a variable let count = 1 to simulate an id.

Result

The TodoList.tsx will look like this:

import React, { useState } from 'react';
import { TextField, IconButton } from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import DeleteIcon from '@material-ui/icons/Delete';

interface TodoItem {
    id: number
    value: string
}

let count = 1

export const TodoList: React.FC = () => {
    const [list, setList] = useState<TodoItem[]>([{ id: 0, value: '' }])

    const handleChange = (value: string, id: TodoItem['id']) => {
        setList(prev => prev.map(item => item.id === id ? { ...item, value } : item ))
    }

    const handleDelete = (id: TodoItem['id']) => {
        setList(prev => prev.filter(item => item.id !== id))
    }

    const handleAdd = (index: number) => {
        const newItem = { id: count ++, value: '' }
        setList(prev => [...prev.slice(0, index + 1), newItem, ...prev.slice(index + 1)])
    }

    return (
        <div>
          {list.map((item, index) => (
            <div key={item.id}>
              <TextField
                value={item.value}
                onChange={e => handleChange(e.currentTarget.value, item.id)}
              />
              <IconButton onClick={() => handleAdd(index)}>
                <AddIcon />
              </IconButton>

              {list.length > 1 && (
                <IconButton onClick={() => handleDelete(item.id)}>
                  <DeleteIcon />
                </IconButton>
              )}
            </div>
          ))}
        </div>
      )
    }

the project link :

Meu primeiro projeto com React ts + Hooks

Beatriz Oliveira — Tue, 02 Mar 2021 17:31:26 +0000

Bom, o projeto que será apresentado é bem simples, mas serviu para consolidar conhecimentos básicos sobre React, optei por utilizar o typescript, pois o código se torna mais legível e simples, mas se preferir pode utilizar javascript normal.

No projeto será utilizado:

Typescript
React Hooks
Material UI

1) Passo:

Criar o projeto com create-react-app TodoList usando ou não o template de Typescript.

npx create-react-app TodoList --template typescript

# or

yarn create react-app TodoList --template typescript

2) Passo:

Já com o projeto criado instale o Material ui.

# utilizando o npm
npm install @material-ui/core

# utilizando o yarn
yarn add @material-ui/core

Também adicione o pacote de ícones:

# usando npm
npm install @material-ui/icons

# usando yarn
yarn add @material-ui/icons

3) Passo:

Crie um o arquivo TodoList.tsx onde ficará todo o código do projeto, crie também uma pasta styles contendo TodoList.css se você quiser estilizar o projeto.

4) Passo:

Em TodoList.tsx importe o hook useState, TextField, ButtonIcons, AddIcon e DeleteIcon do material ui.

import React, { useState } from 'react';
import { TextField, IconButton } from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import DeleteIcon from '@material-ui/icons/Delete';

Em seguida vamos criar uma interface , interface no typescript é a forma de nomear os tipos, com isso criaremos nossa interface TodoItem passando o valor do id como number e value como uma string.

interface TodoItem {
    id: number
    value: string
}

Crie um state useState set e setList com um array do tipo TodoItem , no seu valor default vamos passar um array com id: 0, e o uma string vazia value: ''. Depois iremos criar funções do tipo handleChange, handleAdd e handleDelete para lidar com esse list :


export const TodoList: React.FC = () => {
    const [list, setList] = useState<TodoItem[]>([{ id: 0, value: '' }])

    const handleChange = (value: string, id: TodoItem['id']) => {
        setList(prev => prev.map(item => item.id === id ? { ...item, value } : item ))
    }

    const handleDelete = (id: TodoItem['id']) => {
        setList(prev => prev.filter(item => item.id !== id))
    }

    const handleAdd = (index: number) => {
        const newItem = { id: count ++, value: '' }
        setList(prev => [...prev.slice(0, index + 1), newItem, ...prev.slice(index + 1)])
    }

5) Passo:

No return passe uma list.map pegando o item e o index, renderizando uma div,onde iremos passar uma key com valor item.id que será único para cada item, em seguida vamos renderizar também o TextField do material ui com um value e o onChange. Depois passamos o IconButton também do material ui rederizando o IconAdd com um onClick e faremos a mesma coisa com o IconDelete, porém passando o handleDelete ao invés do handleAdd.


return (
        <div>
          {list.map((item, index) => (
            <div key={item.id}>
              <TextField
                value={item.value}
                onChange={e => handleChange(e.currentTarget.value, item.id)}
              />
              <IconButton onClick={() => handleAdd(index)}>
                <AddIcon />
              </IconButton>

              {list.length > 1 && (
                <IconButton onClick={() => handleDelete(item.id)}>
                  <DeleteIcon />
                </IconButton>
              )}
            </div>
          ))}
        </div>

Obs.1: a list.length é a quantidade da lista, ou seja, ela sempre vai começar com 1 item.
Obs.2: Também criaremos uma váriavel let count = 1 para simular um id.

Resultado

O TodoList.tsx ficará assim:

import React, { useState } from 'react';
import { TextField, IconButton } from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import DeleteIcon from '@material-ui/icons/Delete';

interface TodoItem {
    id: number
    value: string
}

let count = 1

export const TodoList: React.FC = () => {
    const [list, setList] = useState<TodoItem[]>([{ id: 0, value: '' }])

    const handleChange = (value: string, id: TodoItem['id']) => {
        setList(prev => prev.map(item => item.id === id ? { ...item, value } : item ))
    }

    const handleDelete = (id: TodoItem['id']) => {
        setList(prev => prev.filter(item => item.id !== id))
    }

    const handleAdd = (index: number) => {
        const newItem = { id: count ++, value: '' }
        setList(prev => [...prev.slice(0, index + 1), newItem, ...prev.slice(index + 1)])
    }

    return (
        <div>
          {list.map((item, index) => (
            <div key={item.id}>
              <TextField
                value={item.value}
                onChange={e => handleChange(e.currentTarget.value, item.id)}
              />
              <IconButton onClick={() => handleAdd(index)}>
                <AddIcon />
              </IconButton>

              {list.length > 1 && (
                <IconButton onClick={() => handleDelete(item.id)}>
                  <DeleteIcon />
                </IconButton>
              )}
            </div>
          ))}
        </div>
      )
    }

o link do projeto :