Forem: Marcelle Vargas

Discovering React’s useCallback

Marcelle Vargas — Mon, 28 Oct 2024 20:16:44 +0000

There are several React hooks, and recently, while studying, I found that this hook deserves more of my attention.

But before diving into what useCallback actually is, let’s start with a preliminary question: What exactly is a hook?

What is a hook?

Informally, hooks can be thought of as the “components” of business logic. When you need to execute the same logic in multiple places, you can isolate that logic in a hook and call it from any part of your system. This concept also applies to React’s native hooks.

Now that we understand that hooks are encapsulated logics meant for reuse, we can move on to the second topic necessary to understand useCallback: React’s rendering process.

How does React.js render components?

React introduced the component-based architecture pattern in a very efficient way, where each part of your interface can be isolated and reused within the system. This significantly improved the organization and maintenance of web systems. To render these components, they need to be called within a parent component that functions as your page.

So far, this setup isn’t problematic, but it still doesn’t solve the performance issue, as every state change requires updating the entire page. There are other approaches to address this issue, depending on the context, but today we’ll focus on useCallback.

So, what does useCallback do?

Basically, it’s a hook that caches your function, preventing it from being recreated unnecessarily. It will only be executed again if one of its dependencies changes (similar to useEffect).

Example with code

Let’s create a counter where the user can click a button to increment a value and also increase the interval step.

import React, { useState, useCallback } from "react";

const ChildComponent = React.memo(({ onIncrement }) => {
  console.log("ChildComponent rendered");
  return (
    <div>
      <button onClick={onIncrement}>Increment in Child</button>
    </div>
  );
});

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(false);
  const [incrementStep, setIncrementStep] = useState(1);

  const incrementWithoutCallback = () => {
    setCount((prevCount) => prevCount + incrementStep);
  };

  console.log("ParentComponent rendered");

  return (
    <div>
      <h1>Counter: {count}</h1>

      <h2>Without useCallback</h2>
      <ChildComponent onIncrement={incrementWithoutCallback} />

      <button onClick={() => setOtherState(!otherState)}>
        Toggle Other State
      </button>

      <button onClick={() => setIncrementStep((prev) => prev + 1)}>
        Increase Increment Step
      </button>
    </div>
  );
}

export default ParentComponent;

In the example above, the child component is rendered each time there is a change in the parent component.

import React, { useState, useCallback } from "react";

const ChildComponent = React.memo(({ onIncrement }) => {
  console.log("ChildComponent rendered");
  return (
    <div>
      <button onClick={onIncrement}>Increment in Child</button>
    </div>
  );
});

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(false);
  const [incrementStep, setIncrementStep] = useState(1);

  const incrementWithCallback = useCallback(() => {
    setCount((prevCount) => prevCount + incrementStep);
  }, [incrementStep]);

  console.log("ParentComponent rendered");

  return (
    <div>
      <h1>Counter: {count}</h1>

      <h2>With useCallback</h2>
      <ChildComponent onIncrement={incrementWithCallback} />

      <button onClick={() => setOtherState(!otherState)}>
        Toggle Other State
      </button>

      <button onClick={() => setIncrementStep((prev) => prev + 1)}>
        Increase Increment Step
      </button>
    </div>
  );
}

export default ParentComponent;

When we use useCallback, the child component will only re-render when the dependency changes.

I hope this text has helped you better understand how useCallback works.

Hi, my name is Marcelle, and I’m a web developer. :)

I’ve been working in tech since 2016, and I’m passionate about what I do. That’s why I’m always studying and sharing my study notes in the form of articles.

marcellevargas - Overview

Descobrindo o useCallback do React

Marcelle Vargas — Mon, 28 Oct 2024 20:10:40 +0000

Existem vários hooks do React e recentemente estudando achei que esse hook merece uma atenção maior da minha parte.

Mas antes de entrar efetivamente no que seria o useCallback, vamos começar com uma pergunta anterior. O que seria um hook ?

O que é um hook ?

Hooks de forma informal, podemos dizer que seriam os “componentes” das regras de negócio. Quando você precisa executar a mesma lógica em mais de um lugar, você pode isolar essa lógica em um hook e chamar ela em qualquer área do seu sistema. Essa conceito também pode ser extendido aos hooks nativos do React.

Agora que entendemos que hooks são lógicas encapsuladas para serem reutilizadas nós podemos ir para o segundo tópico necessário para entender o useCallback que é o processo de renderização do React.

Como o React.js renderiza os componentes?

O React introduziu de forma muito eficiente o padrão de arquitetura de componentização, onde cada parte da sua interface pode ser isolada e reaproveitada no sistema. Isso facilitou muito a organização e a manutenção de sistemas web, para você renderizar esses componentes eles precisam ser chamados em um componente pai que se comporta como a sua página.

Até o momento esse cenário não é ruim, mas você ainda não consegue resolver o problema de performance pois a cada alteração de estado você precisar atualizar toda a página. E para resolver isso existem outras abordagens dependendo do contexto, mas hoje vamos trazer um destaque para o useCallback.

Enfim, o que o useCallback faz ?

Basicamente ele é um hook que cria um cache da sua função e evita que ela seja recriada sem necessidade pois ela só vai ser executada novamente quando houver uma alteração em uma das dependências (assim como o useEffect faz).

Exemplo com código

Vamos criar um código de contador aonde o usuário pode clicar em um botão para incrementar um valor e também aumentar o valor do intervalo.

import React, { useState, useCallback } from "react";

const ChildComponent = React.memo(({ onIncrement }) => {
  console.log("ChildComponent renderizado");
  return (
    <div>
      <button onClick={onIncrement}>Incrementar no Filho</button>
    </div>
  );
});

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(false);
  const [incrementStep, setIncrementStep] = useState(1);

  const incrementWithoutCallback = () => {
    setCount((prevCount) => prevCount + incrementStep);
  };

  console.log("ParentComponent renderizado");

  return (
    <div>
      <h1>Contador: {count}</h1>

      <h2>Sem useCallback</h2>
      <ChildComponent onIncrement={incrementWithoutCallback} />

      <button onClick={() => setOtherState(!otherState)}>
        Toggle Other State
      </button>

      <button onClick={() => setIncrementStep((prev) => prev + 1)}>
        Aumentar Passo de Incremento
      </button>
    </div>
  );
}

export default ParentComponent;

No exemplo de cima, o componente filho é renderizado a cada alteração que acontece no componente pai

import React, { useState, useCallback } from "react";

const ChildComponent = React.memo(({ onIncrement }) => {
  console.log("ChildComponent renderizado");
  return (
    <div>
      <button onClick={onIncrement}>Incrementar no Filho</button>
    </div>
  );
});

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(false);
  const [incrementStep, setIncrementStep] = useState(1);

  const incrementWithCallback = useCallback(() => {
    setCount((prevCount) => prevCount + incrementStep);
  }, [incrementStep]);

  console.log("ParentComponent renderizado");

  return (
    <div>
      <h1>Contador: {count}</h1>

      <h2>Com useCallback</h2>
      <ChildComponent onIncrement={incrementWithCallback} />

      <button onClick={() => setOtherState(!otherState)}>
        Toggle Other State
      </button>

      <button onClick={() => setIncrementStep((prev) => prev + 1)}>
        Aumentar Passo de Incremento
      </button>
    </div>
  );
}

export default ParentComponent;

Quando usamos o useCallback ele só irá atualizar o componente filho quando a dependência sofrer uma alteração

Espero que esse texto tenha te ajudado a entender melhor como funciona o useCallback.

Oi, meu nome é Marcelle e eu sou desenvolvedora web :)

Eu trabalho com tecnologia desde 2016, mas eu sou apaixonada pelo que faço. Por isso eu estou sempre estudando e compartilhando as minhas anotações de estudo em forma de artigo.

marcellevargas - Overview

Secure Front-End Development

Marcelle Vargas — Wed, 10 Apr 2024 13:48:33 +0000

html tag

Front-end development is a crucial area for web developers, standing out for its ability to create interactive and appealing user interfaces. This area encompasses a variety of technologies and tools, enabling developers to work in an agile and efficient way, implementing innovative functionalities that enhance the user experience. However, in addition to focusing on performance, accessibility, and usability, front-end developers must adopt secure development practices to ensure the protection and privacy of users.

Attacks Originating from the Front-end

Certain types of cyber attacks can originate from the front-end if it is developed with some vulnerabilities. Gaining an understanding of how to enhance the security of an application necessitates a comprehension of some attacks that may stem from the front-end.

Cross-Site Scripting (XSS)

Cross-Site Scripting (XSS) attacks are exploited through vulnerabilities in web applications, allowing external malicious code to be injected and executed in the context of the original application. This type of attack can have serious consequences, including the leakage of sensitive information, both from the system and from users interacting with the compromised site. This potential vulnerability puts the integrity and confidentiality of data at risk, making it essential to implement appropriate security measures to protect applications against this type of threat.

Cross-Site Request Forgery (CSRF)

Cross-Site Request Forgery (CSRF) attacks occur when authenticated users in a system are manipulated to perform unwanted actions without their knowledge. In these attacks, the malicious script is not directly inserted into the target system. Instead, these attacks exploit the active sessions of users, using cookies stored in the browser. This causes the system to mistake the malicious requests as legitimate, originating from the users themselves, leading to the execution of unauthorized actions.

Insecure Direct Object References (IDOR)

Insecure Direct Object References (IDOR) is a vulnerability that occurs when a web application exposes direct references to internal data. This allows attackers to access or manipulate data that they should not have access to, by exploiting these references. Essentially, IDOR violates access restrictions and permissions, enabling the attacker to view or modify information beyond their authorized permission scope.

Fortifying the Front-end

Although the front-end alone cannot ensure the full security and integrity of a system, this article aims to explore ways in which the front-end can significantly contribute to the security of applications.

CSP Configuration

CSP (Content Security Policy) is a policy that, when configured on the front-end, informs the browser about the origin of the scripts it can execute, disregarding external scripts. Ideally, this configuration should be implemented both on the back-end and the front-end, but if that’s not possible, adding it on the front-end will already contribute to making users more secure when accessing your site.

Recognizing the need to ensure user security, since 2016, the W3C has been advising developers to implement these configurations. To set it up in React.js, you can add a meta tag in the index.html file.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

Using Cookies Securely

I think many people, upon reading about the vulnerability in the use of cookies, might consider stopping their use. Therefore, I need to emphasize that one of the principles of secure development is not the sole use of one practice, but rather a combination of practices that involve all areas of the development process. However, focusing on cookies, using them securely requires that some configurations be made on the back-end (such as Anti-CSRF Tokens and adding the ‘samesite’ attribute to cookies).

On the front-end, as a way to ensure the security of the application, do not store sensitive data in cookies and use them only as a means to enhance the user experience, such as storing their usage preferences.

Use of Local Storage

Local storage is often used in day-to-day development, but the data stored in it and the way it is stored require some care, as it is possible to access the information through JavaScript. Therefore, avoid storing sensitive information and, if you need to store session tokens, opt for tokens that expire.

For example, assume you are working on the front-end of a sales system and will store the session token to ensure that the user has access to the sales area of the system. Within the system, to ensure that this user can have access, it will be necessary to present a credential (a token) whenever information is requested. Ideally, this token should be generated and managed by the backend and needs to contain an expiration date. This way, on the front necessary, this token will be sent to the back end to validate that it is still valid.

function verifyToken(apiUrl, key) {
    const token = localStorage.getItem(key);
    if (!token) {
        return;
    }

    fetch(apiUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': token
        }
    })
    .then(response => {
        if (response.status === 498) {
            localStorage.removeItem(key);
            return;
        } else if(response.status === 200) {
            return token;
        } else {
            console.log('Received unexpected status:', response.status);
            return;
        }
    })
    .catch(error => {
        console.error(error);
    });
}

Input Sanitization

Input sanitization is a fundamental practice in the development of secure applications, especially in terms of front-end security. This process involves cleaning and validating data entered by users to prevent vulnerabilities, such as SQL injection or Cross-Site Scripting (XSS) attacks.

By sanitizing inputs, potentially malicious characters are removed or escaped, ensuring that only safe and correctly formatted data are processed by the application. This approach not only protects the system against malicious manipulations but also preserves the integrity of the data and maintains the reliability of the user interface, being a critical component for the security and stability of modern web applications.

Tools to Help You Ensure Security

DOMPurify

DOMPurify plays a role in input security, which is an effective measure to mitigate the risks associated with the injection of malicious scripts, such as Cross-Site Scripting (XSS) attacks. This JavaScript library specializes in sanitizing HTML content, efficiently removing potentially dangerous elements and attributes.

By integrating DOMPurify into an application, developers can ensure that any content entered by users, such as comments or form entries, is cleansed of harmful scripts before being rendered in the browser. This not only protects the application but also enhances user safety, preventing the execution of malicious code and maintaining the integrity of the user interface.

DOMPurify library

NPM Audit

The npm audit command is a built-in npm command that helps to check all dependencies installed in the project, to validate security vulnerabilities that have already been identified. When executed, it compares the versions of the packages used with a database of known security vulnerabilities and generates a detailed report. This report not only identifies vulnerable libraries but also presents alternatives to help with replacement and how to update to safer versions.

This functionality is extremely valuable for developers, as it helps to maintain the integrity and security of their applications, alerting them to potential risks and facilitating the management of vulnerable dependencies. Additionally, npm audit is a fundamental tool in continuous integration (CI) processes, contributing to the automation of vulnerability identification in the early stages of the development cycle.

npm audit documentation

Library for Anti-CSRF Tokens

Depending on the project’s requirements, it may be necessary to store some information such as cookies on the server, and an alternative to do this securely, in addition to configuring the meta tag, is to use the csfr library.

CSFR library

Conclusion

Front-end development security is an area where the adoption of safe practices becomes fundamental, integrating them from the beginning of the development process. Strategies such as the implementation of CSP, secure use of cookies, effective management of local storage, and sanitization of inputs are crucial steps for the protection of user data and the integrity of web applications.

With the introduction of AI tools in development, developers need to be even more attentive to the codes generated, adopting a critical approach in implementation to ensure security. This continuous process requires vigilance and constant updating, ensuring that applications not only impress with functionality and design but also stand out for their robust security.

At ArcTouch, we help companies create engaging and secure apps, websites, and connected experiences. See some of our work.

References

Formação gratuita para novos desenvolvedores

Marcelle Vargas — Wed, 31 Jan 2024 16:25:07 +0000

Olá pessoas !
A Fundação Bradesco está com inscrições abertas para cursos de programação de nível iniciante.

Python 🐍

Mobile :mobile_phone:

-Desenvolvendo Aplicações Mobile com Android Studio

Conteúdos gerais sobre programação 💻

Web 🛜

Crie um site simples usando HTML, CSS e JavaScript

Criando meu primeiro Widget para o Notion

Marcelle Vargas — Wed, 03 Jan 2024 18:44:04 +0000

Photo by Sigmund on Unsplash

Notion é uma ferramenta que faz parte do meu dia a dia, toda a minha vida é organizada nele. E algo que sempre me chamou a atenção foram os widgets que podemos adicionar nele. E recentemente eu descobri uma forma de criar os meus e é isso que nós vamos fazer nesse artigo.

Pré-requisitos

Ter o node.js instalado
Ter uma conta no github

Setup do projeto

Criar um projeto react

npx create-react-app notion-clock-widget

Instalar a bibioteca react-gh-pages (ela irá agilizar o processo de deploy no Github pages)

npm install gh-pages --save-dev

Criando o componente de relógio

Vamos começar criando a estrutura básica de um function component

//relogio.js

import React from 'react';
function Relogio() 
  return (
    <div>
      <h2>relogio</h2>
    </div>
  );
}

export default Relogio;

E como estamos criando um relógio eu preciso que ele sempre me mostre o horário atualizado. Para isso vamos utilizar dois hooks do react o useState (para armazenar a hora) e o useEffect (para manter a atualização do estado mesmo depois da página ser renderizada).

import React, { useState, useEffect } from 'react';

function Relogio() {
  const [horarioAtual, setHorarioAtual] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => updateTime(), 1000);

    return function cleanup() {
      clearInterval(timerID);   
    };
  }, []);

  function updateTime() {
    setHorarioAtual(new Date());
  }

  return (
    <div className='clock-container'>
      <h2>{horarioAtual.toLocaleTimeString()}</h2>
    </div>
  );
}

export default Relogio;

Como um relógio tem atualizações a cada 1s nós usamos a função setInterval para chamar a função que irá realizar a atualização do estado do relógio.

Fazendo o deploy no Github Pages

Com o código criado vamos fazer a configuração para o deploy. No arquivo package.json logo abaixo de version adicione o nome “homepage” e na URL substitua pelo seu nome de usuário e o nome do repositório criado.

  "name": "my-app",
  "version": "0.1.0",
+ "homepage": "https://{SEU NOME DE USUARIO}.github.io/{NOME DO REPOSITÓRIO}",
  "private": true,

Depois adicione os comandos de deploy e predeploy em “scripts”

"scripts": {
   "predeploy": "npm run build",
   "deploy": "gh-pages -d build",

Quando finalizar faça o commit dessas alterações e o push para o repositório remoto.

Configurando o Github pages

No Github abra o seu repositório e vá em settings e depois em pages e em “Build and deployment” altere a branch para “gh-pages” e a pasta para “/root”.

Tela do github para configuração do Github Pages

Importando o widget no Notion

Com a url que foi gerada para o seu site, abra o notion e adicione o bloco “integrar”

tela do notion

E cole o link que foi utilizado na “homepage” do seu package.json, se tudo funcionar você vai ter um relógio parecido com esse

Captura da tela do Notion com o widget

Se você gostou desse artigo e quer utilizar esse widget, você encontra o link para ele e outras coisas mais na minha página

Marcelle Vargas

Fonte

Biblioteca React Gh Pages

GitHub - gitname/react-gh-pages: Deploying a React App (created using create-react-app) to GitHub Pages

Imagem do Bulbasauro, por Dhiogo Luis (https://pin.it/2FJguai)

Clube de leitura para Devs✨

Marcelle Vargas — Tue, 26 Dec 2023 19:11:44 +0000

Photo by Vladyslav Bahara on Unsplash

A oportunidade de interagir com pessoas do setor de tecnologia sempre foi fundamental para o meu crescimento e evolução como desenvolvedora. Inspirada por essa experiência, decidi criar o Clube de Leitura para Devs. Este clube não apenas incentiva o hábito da leitura, mas também se dedica ao estudo de temas frequentemente negligenciados na rotina diária, porém essenciais para aprimorar suas habilidades de programação. É um espaço para descobrir e explorar aspectos vitais da nossa profissão, contribuindo para o desenvolvimento contínuo de cada membro como um programador mais competente e versátil.

E como esse clube irá funcionar ?

Em um canal do Telegram (link para o grupo) eu vou compartilhar as informações da leitura da semana e também um material complementar para você se aprofundar no tópico da semana. E pensando também nas semanas corridas que podem acontecer com todos nós, eu vou disponibilizar também um resumo das páginas da semana, dessa forma você vai poder acompanhar e participar dos debates.

Caso você goste de utilizar o Notion para organizar a sua vida pessoal, também temos um template gratuito no grupo do telegram para você organizar o seu processo de estudo.

Preciso ter algum conhecimento prévio para participar ?

Não vai ser necessário e a ideia é ser um ambiente seguro para tirar dúvidas. Caso você leia algo e não entenda, você pode perguntar porque a ideia é ser um espaço livre e respeitoso.

Precisa pagar algo para participar ?

Não temos taxa de mensalidade nem nada do tipo, a única coisa que pode acontecer é em algum momento ser necessário comprar algum livro. Mas geralmente eu sou adepta a livros que estejam disponíveis de forma gratuita, assim vamos conseguir democratizar o acesso ao conteúdo.

Quando irá começar ?

Vamos começar no dia 02/01/2024 e no grupo do telegram você já encontra o link para baixar o livro. Durante o mês de janeiro iremos ler Algoritmos — Um Guia Ilustrado Para Programadores e Outros Curiosos do autor (Aditya Y. Bhargava).

Todos os links você encontra no meu agregador de links abaixo

marcellevargas - Link in Bio & Creator Tools | Beacons

Next.js 14 as novidades dessa nova versão

Marcelle Vargas — Wed, 01 Nov 2023 19:54:51 +0000

Em outubro de 2023, foi anunciado a nova versão do Next.js 14 e algumas features bem interessantes para facilitar o trabalho dos desenvolvedores e a experiências dos usuários. Dentre elas duas me chamaram bastante atenção principalmente para quem utiliza o Next.js junto com algum CMS para gestão de conteúdo.

Streaming de Server Rendering Components

O Next.js já permite a renderização dos componentes de UI no servidor, através do SSC (Server Static Components), e isso fez com que a experiência do usuário melhora-se bastante. Pois ao abrir uma página web o navegador já encontra parte dos componentes prontos para ser exibido sem a necessidade de aguardar o processamento desses componentes a cada requisição. Mas essa forma que melhorou a experiência do usuário, tem alguns problemas. E o principal deles é a dificuldade de tornar o conteúdo desses componentes dinâmicos.

É dessa forma que o Streaming Server Rendering auxilia para trabalhar com componentes de conteúdo dinâmicos, causando menos impacto nos scores de performance de SEO das páginas. Dessa forma quando o componente termina de ser renderizado no servidor ele é disponibilizado para o navegador do usuário (algo “parecido” com o lazy loading).

Suspense Components

É bem comum hoje em dia páginas web apresentarem animações em quanto carregam os conteúdos dos sites. Dessa forma a experiência do usuário é menos impactada em quanto os dados são processados. Pensando nisso o Next.js criou um componente chamado Suspense que recebe como propriedade um outro componente com uma estrutura de UI que é exibida em quando a página é carregada.

A equipe do Next.js ainda recomenda o uso do componente Suspense junto com o Streaming Server Rendering, para melhorar a performance do site na perspectiva de SEO.

Outras duas novidades anunciadas no evento para essa nova versão são melhorias no componente de Imagem e a mudança para um novo compilador, o SWC que estaria substituindo o Babel. Mas essas duas novidades eu vou dedicar artigos específicos para eles.

Fontes

Code Challenge — 1

Marcelle Vargas — Mon, 30 Oct 2023 16:44:28 +0000

Code Challenge — 1

Criando um componente de modal usando React.js

Photo by Goran Ivos on Unsplash

Procurando praticar mais programação eu estarei publicando uma série de artigos explicando qual foi a solução desenvolvida e disponibilizando o código em cada desafio. E o desafio dessa semana é criar um componente de modal usando React.js com as seguintes condições:

O conteúdo da modal precisa ser passado por props
O usuário precisa conseguir fechar a modal através de um botão
O texto do botão também precisa ser passado por props
O usuário precisa conseguir fechar a modal ao clicar fora da caixa

Criando a estrutura do componente

A primeira coisa que eu vou fazer então vai ser criar um arquivo para o componente de modal.

// src/modal.js
const Modal = () => 
  return (
    <div>
      Modal
    </div>
  );
};

export default Modal;

Depois de criar o componente eu vou adicionar no App.js esse componente.

import "./styles.css";
import Modal from "./modal";

export default function App() {
  return (
    <div className="App">
      <Modal/>
    </div>
  );
}

Para atender aos requisitos do desafio, eu preciso criar um componente que receba as seguintes propriedades(props):

Um texto que será exibido como conteúdo da modal
Um texto para o botão

const Modal = (props) => {
  if (!props.isOpen) return null;

  const handleClickOutside = (e) => {
    if (e.target === e.currentTarget) {
      props.closeModal();
    }
  };
  return (
    <div className="modal-container" onClick={handleClickOutside}>
      <div className="modal-content">
        {props.content}
        <button onClick={props.closeModal}>{props.buttonLabel}</button>
      </div>
    </div>
  );
};

export default Modal;

Como as props são um objeto, eu posso fazer a desestruturação e selecionar as propriedades que eu vou precisar usar(além de tornar o código mais legível).

const Modal = ({ content, buttonLabel}) => {
  if (!isOpen) return null;

  const handleClickOutside = (e) => {
    if (e.target === e.currentTarget) {
      closeModal();
    }
  };
  return (
    <div className="modal-container" onClick={handleClickOutside}>
      <div className="modal-content">
        {content}
        <button onClick={closeModal}>{buttonLabel}</button>
      </div>
    </div>
  );
};

export default Modal;

E no App.js eu vou adicionar essas propriedades ao

<Modal
  content={"Hey! Eu sou uma modal."}
  buttonLabel={"fechar"}
/>

Entendendo o CSS

Estrutura do HTML

Para essa modal eu criei uma estrutura com 2 divs, onde a div principal (modal-container) irá ser responsável por posicionar o elemento na tela e a div interna (modal-content) vai ser responsável por posicionar os elementos da modal.

CSS da div principal

Como a ideia dessa div é auxiliar no posicionamento da modal na tela, ela precisa ter o tamanho total da tela e não pode ser afetado pelo restante dos elementos do site. Para isso vamos usar a propriedade “position” e outras propriedades, mas ela é a mais importante.

Um elemento com “position:fixed” passa a ser posicionado de acordo com a janela de visualização, não seguindo mais o posicionamento herdado pelos elementos mais altos da hierarquia.

.modal-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
}

CSS da caixa de modal

Esse elemento tem um CSS simples então eu vou apenas liberar o código abaixo

.modal-content {
  display: flex;
  flex-direction: column;
  background-color: white;
  border: 1px solid black;
  padding: 30px;
  border-radius: 5%;
}

.modal-content button {
  border: none;
  margin-top: 5px;
  padding: 5px 0px;
}

Usando hooks para controlar a exibição da modal

Hooks são funções javascript que são encapsuladas pela biblioteca do React.js. Permitindo que você economize tempo no processo de desenvolvimento. E para o componente de modal, eu vou usar o hook de useState() para me ajudar a controlar quando a modal deve, ou não, ser exibida. Como eu não quero que a página abra com a modal aberta, eu já adicionei o valor padrão como false.

import "./styles.css";
import Modal from "./modal";
import { useState } from "react";

export default function App() {
  const [statusModal, setModalStatus] = useState(false);

  return (
    <div className="App">
      <Modal
        content={"Hey! Eu sou uma modal."}
        buttonLabel={"fechar"}
      />
    </div>
  );
}

Depois disso eu vou editar o componente de modal e adicionar duas propriedades: uma para gerenciar o status da modal e uma para que a modal possa ser fechada quando ela já estiver aberta. Dessa forma o componente da modal ficaria dessa forma:

// app.js
<Modal
  content={"Hey! Eu sou uma modal."}
  buttonLabel={"fechar"}
  isOpen={statusModal}
  closeModal={() => setModalStatus(false)}
/>

// modal.js
const Modal = ({ content, buttonLabel, isOpen, closeModal }) => {
  if (!isOpen) return null;

  return (
    <div className="modal-container" onClick={handleClickOutside}>
      <div className="modal-content">
        {content}
        <button onClick={closeModal}>{buttonLabel}</button>
      </div>
    </div>
  );
};

export default Modal;

A propriedade “isOpen” irá receber o valor do state declaro no App.js, como ele é um booleano caso o valor dele esteja como false ao invés de retornar o componente eu retorno null e a modal não é exibida na tela. Já a propriedade “closeModal” ela recebe a função closeModal() declarada no App.js, e quando essa função é executada ela altera o estado da Modal para false.

Espero que tenham gostado e que esse artigo possa te ajudar de alguma forma :)

O link para o código completo do componente:

https://medium.com/media/efe34736edbd64881f77c4172e717ceb/href

Sanity CMS, uma alternativa aos altos custos de hospedagem

Marcelle Vargas — Mon, 18 Sep 2023 11:53:57 +0000

Existem diversos frameworks e CMS’s disponíveis para utilizar e alguns de forma gratuita, desde que você pague um serviço de hospedagem. E é justamente nesse ponto em que o Sanity se diferencia dos demais.

Photo by Anete Lūsiņa on Unsplash

O que é o Sanity ?

O Sanity é um CMS(Content Management System), feito em JavaScript que permite que você organize o conteúdo de um site usando a estrutura de schemas, algo similar ao que é feito no GraphQL e no Strapi (outro CMS javascript). O Sanity também tem suporte para typescript.

Quais as vantagens de utilizar de utilizar o Sanity ?

1- Modelagem de conteúdo de acordo com o site

Assim como outros CMS feitos em JavaScript, a possibilidade de modelar o conteúdo de acordo com o site não é algo inovador, mas eu considero um ponto importante na escolha de um CMS.

2- Ter mais de um nível de usuário nos planos gratuitos

Ter a possibilidade de criar um usuário com permissão de administrador e um de editor, ainda no plano gratuito, me permite como desenvolvedora testar como determinadas funções serão exibidas para o usuário final. No plano gratuito, você tem a opção de criar 3 usuários com a role de editor e a quantidade de usuários da role de administrador são ilimitados. Outro detalhe importante é que inclusive os usuários com a role de editor, tem a opção de fazer login via SSO (sem custo adicional).

3- “Generous usage quota”

Nos últimos meses eu tenho procurado diversas alternativas de CMSs gratuitos para testar funcionalidades de desenvolvimento com frameworks como o Next.js. E de vários CMSs que eu testei esse realmente é o que tem a maior cota de uso no plano gratuito. Permitindo o armazenamento de imagens utilizando inclusive a CDN.

Essas são as minhas impressões iniciais e se você dev, está procurando uma ferramenta para desenvolver sem precisar investir alto em ferramentas apenas para estudo. Esse CMS pode ser uma boa opção até o momento.

Sanity: The Composable Content Cloud

Next.js: bests practices for optimizing your website for search engines

Marcelle Vargas — Mon, 19 Jun 2023 17:20:19 +0000

SEO is one of the fundamentals of digital marketing and is essential if you want to sell something on the web, whether it’s an idea or a product. Robots, such as those used by Google to rank pages in search engines, have specific requirements for selecting content, and the key to success is optimization. As developers, we need to create a webpage that helps customers achieve these goals. But the question is, how do we do this? In this article, we will discuss tips on how to improve the SEO of web pages using one of the most popular frameworks of the moment, Next.js.

Friendly URL’s

Prefer simple, logical URLs. When setting up a URL for a page, avoid using IDs, random numbers, underscores, or multiple words without separating them. This will increase the chances that your content will reach the intended user. Next.js automatically generates user-friendly URLs. When we create a file inside the “pages” folder, Next.js generates a URL for that page with the same path we defined on that page. Therefore, we should choose intuitive names for our pages.

// Good Practice
https://mywebsite.com/articles/how-to-be-developer

// Bad Practice
https://mywebsite.com/articles/how_to_be_developer

Semantic HTML

If you want your site to appear more easily on search pages, you need to develop sites with semantic HTML. Google uses HTML tags to find content and index it correctly. In addition to the use focused on SEO and semantic HTML accessibility, it is part of the Clean Code practices for HTML. If you want to understand more about semantic HTML, I recommend reading the article below.

Clean HTML

Use an Open Graph on your project

Creating optimized content is not only important for the Google search engine, but it is also important for social networks. To help us create an optimized structure for social networks, Facebook created the Open Graph. The Open Graph Protocol is a set of meta-tags that allows any web page to have content optimized for sharing on social networks. The tag list below is very useful for different types of content. Remember to focus on keywords when configuring this content.

og:title - The title optimized for SEO
og:description - The description of your content optimized for SEO
og:image - An URL of image for sharing.
og:url - The canonical URl

Here is an example of how to configure this in Next.js.

<div>
  <title>Product Title</title>

  <meta property="og:title" content="The title optimized for SEO" />
  <meta
    property="og:description"
    content="Description of your content optimized for SEO"
  />
  <meta
    property="og:image"
    content="An URL of image for sharing"
  />
</div>

Generate a sitemap.xml (next-sitemap)

The sitemap file contains data about links within our website and when this internal content has been modified. This file helps Google index pages and not forget any important ones. But now maybe you think, “Well, Google robots are not working too well?” Calm down, this recommendation is not for every case. Google lists these three topics to assess whether using sitemap.xml is recommended:

Large sites For Google, large sites have more than 500 pages, and it’s more difficult to ensure that every page has links from at least one other page. In this case, GoogleBot may not find new pages.
New website and if your website has few external links Google’s crawler finds new sites more easily by following links from page to page. When your site is new, GoogleBot might not find it.
Your site has a lot of rich content (like images and videos) It is recommended to include this information in the sitemap to help Google with search.

Optimize Images

The SEO of a page is calculated based on some metrics, such as LCP — Largest Contentful Paint. LCP is calculated by taking the largest text or image element present on the page and evaluating how long that element takes to load after the page starts loading, for having a good score the indicated is 2,5 seconds or less. To help with this score, Next.js has a component called next/image. This component wraps the HTML “img” tag and adds some very useful properties to improve SEO score. The trick here is in your larger image you add a bracket called “priority”. This makes your image preloaded and ready to use when the user opens the page. In addition, the next/image component has other properties that can improve the user experience, such as the placeholder that has the blur value, which presents the user with either a blurred image or a color box.

Lazy imports

React proposes that we create components to organize our web page and separate the code in the project. But when we need to use multiple components on one page, sometimes it makes the page load slow and affects the SEO score. To avoid this, Next.js has a component called Dynamic(). This component causes the loading of certain components to be loaded only when necessary, reducing the number of components that will be initially loaded. Let’s assume that your site will display a completely different banner on some pages. Using the Next.js dynamic import, managing the use of this component becomes simpler.

import dynamic from 'next/dynamic';

const CustomBanner= dynamic(() => import('../components/customBannerComponent'));

export default function Home() {
  return <CustomBanner/>
}

Optimize third-party scripts

Likewise, we have an image component to help us with preloading images, we have a component called Scripts. This component enables us management some life cycles to improve performance, using a property called strategy. This property can receive three values (beforeInteractive, afterInteractive, lazyOnload) to define when this script will be executed.

 <Script src="https://coolscript.com/coolscript.js" strategy="beforeInteractive" />

Promises()

Marcelle Vargas — Tue, 28 Mar 2023 22:06:14 +0000

According to the MDN Web Docs “ A promise is a proxy for a value not necessarily known “. In other words, a promise is an intermediary between the web application and the server.

How does a Promise work?

To understand how a promise works let’s analyze the fetch function. Fetch is a JavaScript function for performing HTTP requests. And when we make an HTTP request the first thing fetch() returns us is a promise object with a status of pending, because the fetch is making us a “promise” that the request was made and that it will return us with the server’s response.

fetch('https://jsonplaceholder.typicode.com/todos/1') .then( console.log(response.json()))

Then the second return is effectively the server response

fetch('https://jsonplaceholder.typicode.com/todos/1') .then( console.log(response.json())) .then( console.log(json))

Why use?

1- Simplified Error Management: Promises allow you to catch errors in an easier and more organized way compared to nested callbacks. Instead of dealing with multiple levels of nested callbacks, Promises can use a single function catch() to handle all errors in one place.

2- More readability and less nesting: Using Promises can improve code readability as Promises allow code to be written in a more logical and linear sequence rather than using nested callbacks which can make code difficult to read . This can make the code easier to understand and maintain.

3- More modular and reusable code: Promises can be easily used in multiple places in the code and can be chained together to create control flows in a modular way. This makes the code more reusable and easier to maintain and update over time. Additionally, Promises can be used in conjunction with other JavaScript functionality such as async/await to create more efficient and cleaner code.

In other articles we will talk more about synchronous functions with async/await.

Originally published at https://marcellecode.com.

How to make a Health Site Bot

Marcelle Vargas — Wed, 22 Mar 2023 22:15:12 +0000

banner how to make a health site bot

When we create a website be it for a client or personal, it’s important to guarantee the service is up. Thinking help with this, that’s the objective of this article. With that in mind, let’s create a bot using Node.js to let us know when our site responds to HTTP Status other than 200.

Step 1: Start the project

The first step of our project is to create the folder of our bot, so insert this line of code below on your terminal

mkdir health-site-bot && cd health-site-bot

Now we’ll run a command for Node.js to create the basic structure necessary to run the project

npm init -y

If everything is ok, now we’ll be creating the two files to define our bot.

touch config.js && touch server.js

Step 2: Install the Libraries

Run all the lines below on your terminal

npm i dotenv && npm i express && npm i nodemailer

Step 3: Editing Config.js

Let’s import the dotenv and path libraries, and export the global variables EMAIL and PASSWORD.

const dotenv = require("dotenv");
const path = require("path");

dotenv.config({
  path: ".env",
});

module.exports = {
  EMAIL: process.env.EMAIL,
  PASS: process.env.SENHA
};

Step 4: Create a .env file

The .env file is a file that saves information like credentials. With this method, we can make configurations for the production and development environments just set what .env file I want to use.

#.env
EMAIL=email@teste.com
PASS=123456

How the .env file serves to store credentials it’s not so good if you save this on your repository. In the next step, we’ll configure the .gitignore to remove this file from our repository and prevent accidental commits.

Step 5: Configure .gitignore file

In this file we’ll add a name of two files for git not add when we make a commit.

touch .gitignore

node_modules
.env

Step 6: Create a serve.js file

The serve.js is a file we use to configure our bot. So, the first thing we’ll do is, import the necessary libraries.

//serve.js
const nodemailer = require("nodemailer");
const config = require("./config.js");
const moment = require("moment");
const https = require("https");

After that, we create a constant variable for storing the URL application we want to monitor.

const url = "https://www.google.com/"

With this URL defined, we can create a function for making requests HTTP to verify the status. If this status is not equal to 200, we’ll call a function to notify us.

function healthCheck() {
  https.get(_url, function (res) {
    if (res.statusCode !== 200) {
      _sendMail();
    }
  });
}

In this tutorial, our bot notifies us by e-mail. So, let’s create a function called “_sendMail()”

function _sendMail(statusHTTP) {
  var transporter = nodemailer.createTransport({
    host: "HOST_EMAIL",
    auth: {
      user: config.EMAIL,
      pass: config.SENHA,
    },
  });
}

In the above code, we use a function from nodemailer to create a connection with e-mail host. The username and password used in this file are imported from the .env file, they are the email account data we will use to send the notifications.

var mailOptions = {
    from: "YOUR_EMAIL",
    to: "EMAIL_RECEIVE",
    subject: `ERROR WITH ${url}`,
    text: `Oops! Your service is having problems.
           Problem description:
           Received code: ${statusHTTP}`,
  };
  transporter.sendMail(mailOptions, function (error, info) {
    if (error) {
      console.log(error);
    }
  });

The last part of our script is to create a function for call _sendMail if the website return status different than 200.

function healthCheck() {
  https.get(_url, function (res) {
    if (res.statusCode !== 200) {
      _sendMail();
    }
  });
}

healthCheck();

At this moment, the serve.js file is like this

const nodemailer = require("nodemailer");
const config = require("./config.js");
const https = require("https");

const _url = 'URL_APP';

function _sendMail(statusHTTP) {
  var transporter = nodemailer.createTransport({
    host: "HOST_EMAIL",
    auth: {
      user: config.EMAIL,
      pass: config.SENHA,
    },
  });
  var mailOptions = {
    from: "SEU_EMAIL",
    to: "EMAIL_DO_REMETENTE",
    subject: `ERROR WITH ${url}`,
    text: `Oops! Your service is having problems.
           Problem description:
           Received code: ${statusHTTP}`,
  };
  transporter.sendMail(mailOptions, function (error, info) {
    if (error) {
      console.log(error);
    }
  });
}

function healthCheck() {
  https.get(_url, function (res) {
    if (res.statusCode !== 200) {
      _sendMail();
    }
  });
}

healthCheck();

MarcelleCode is digital content creator about web development