Forem: Hebert Montarroyos

CSS Art: June - 14 de Junho Dia Mundial do Doador de Sangue

Hebert Montarroyos — Wed, 05 Jun 2024 12:54:05 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiração

Aproveitando o tema livre para escolher algo que represente o mês de junho, podendo ser um lugar, lembrança ou até mesmo uma data, eu resolvi aproveitar para colocar esse tema em pauta que é tão importante e ajuda a salva milhões de vida por ano, que é o de doar sangue, e nada melhor do que aproveitar para falar e exaltar a todos os que se propõem a doar um pouco do que tem, para salvar vidas em todo mundo, não podia deixar passar essa data, que inclusive é a mesma do meu aniversário, e com isso tenho muito orgulho do movimento e apoio a todos que doam ;)

Demo

Inspiração

Pensando no dia mundial do doador de sangue, eu pensei em enfatizar o órgão responsável por fazer todo o bombeamento de sangue no nosso corpo, o mais importante para termos vida ou um dos mais, a partir dae achei interessante que fosse feito usando inteiramente o css.
Para isso eu utilizei das pseudo-classes before e after para criar as formas e para a animação trabalhei muito com os transforms dentro dos meus keyframes para criar toda essa animação de parecer que o coração está pulsando, alternando no seu tamanho de tempo em tempos e deixando com um time de infinite, para ser constante.

Feito essa parte que seria talvez a mais chamativa queria dar uma mensagem de conscientização, mas que não fosse apenas uma mensagem, mas algo funcional sem precisar ser uma aplicação grande seguindo o conceito se SPA, para isso adicionei um button e estilizei ele para que ficasse com a paleta que escolhi usando algumas fontes gratuitas no google fonts, com o link de redirecionar para a página do Hemorio que é uma instituição localizada aqui no estado do Rio de Janeiro no Brasil, que recolhe doação de sangue para o banco de sangue daqui.

Para o background achei interessante colocar uma imagem de fundo em vetor, que representa bem a mensagem da doação ser algo mundial e que independente de cor, gênero, religião entre outros, somos todos iguais, e isso só mostra que devemos nos unir em prol de salvar inúmeras vidas.

Além disso, queria colocar uma mensagem final e para isso nada melhor que a frase:

"Doe sangue, salve vidas. Seja a esperança hoje!"

E para combinar com essa frase animei usando o animation, para dar aquela impressão que tinha alguém digitando, além disso, achei interessante controlar essa animação com JavaScript para que pudesse aumentar ou diminuir o time da animação, para isso criei uma função que acessa o meu seletor ali na minha DOM e com o setTimeout define um time de animação.

Achei também para que não ficar um vazio a aplicação ficaria bacana com um Header bem sutil, e para isso eu fiz usando novamente os keyframes para alterar as cores da nossa paleta imitando uma artéria.

É isso galera espero que curtam, e lembre-se não só dia 14 de junho, mas todos os dias que quiserem os postos de cada cidade ficam sempre buscando novos doadores.
Grande abraço a todos e espero que curtam, todo o código segue livre no CodePen.

Minha Colaboração com o Hacktoberfest 2023

Hebert Montarroyos — Fri, 27 Oct 2023 18:03:43 +0000

Vamos lá, do começo

Então galera como falei antes nos posts anteriores, este é meu primeiro hacktoberfest, porém acabei começando um pouco tardio por uma série de fatores, eu não conhecia o evento e só na metade de outubro vim saber dele e poder participar, devido a problemas pessoais não consegui antes.

Além de contribuidor eu também participei como mantenedor de um repositório, o qual se trata de uma biblioteca de componentes para React, a FeboUI, segue o link do seu repositorio.

Fiz também um artigo falando como foi a experiência de ser mantenedor de um projeto no hacktoberfest 2023, segue o link caso queiram conferir.

Um pouco sobre minha participação no hacktoberfest 2023

Como eu entrei já um pouco mais tarde no evento e sendo minha primeira vez como participante do hacktoberfest, eu estava um pouco perdido, e após ler alguns guias aqui na comunidade pude entender como funcionava o evento, e no próprio site do hacktoberfest, pude ler sobre suas regras e ae então ficou mais fácil.

Na minha visão eu achava que qualquer projeto open source valeria, mas tinha algumas diretrizes que tinha que seguir como, por exemplo, ter a flag #hacktoberfest ou #hacktoberfest-accepted, isso também me ajudou entender como preparar meu repositório, para ser um mantenedor.

Devido a isso eu comecei testando em alguns repositórios de testes no hacktoberfest alguns PRs e também fiz algumas contribuições algumas não valeram como foi o caso de um repositório em que se tratava de ajudar a galera que estava começando eu crie um método que calculava a idade com base na data passada, porém esse repositório acabou entrando como spam e infelizmente não contou como voto valido no hacktoberfest.

Tive outras contribuições em projetos, open source, porém como não tinha a flag do hacktoberfest e por outras diretrizes acabou não contando, devido a isso vi algo na regra, que não tinha problema em fazer, colaborar no meu próprio projeto em que estava mantendo e com isso inspirar a galera a colaborar com ele.

E como isso estava dentro das regras, eu peguei alguns problemas conhecidos e outras features que era necessário implementar na FeboUI e fiz com isso, o que me valeu os 4PRs validos para o hacktoberfest, mas não só por isso que colaborei no meu repositório e sim para fazer com que a galera se sentisse motivada a ajudar também, visto que ele se enquadrou em um repositório open source valido no hacktoberfest.

Outros pontos que vi e acho interessante acrescentar, e também como mantenedor, mesmo que os PRs que fiz em outros repositórios não valeram para o hacktoberfest ainda, sim, pude contribuir com o open source e acho que esse é o foco principal do evento.

Não deixe para a última hora, falo isso por experiência própria, tanto que o próximo hacktoberfest espero começar logo antes, além de também ser paciente, pois os mantenedores de projetos recebem muitas solicitações e ter que avaliar isso um por um requer um certo tempo, então também esteja disposto a fazer alterações com base no feedback que foi fornecido caso haja alguma mudança que forem solicitadas.

Minhas colaborações

Dito tudo isto galera aqui estão minhas 4 colaborações validas no hacktoberfest 2023

🎃 feat: add Component PriceFormat
🎃feat: add news props in component Price Format
🎃fix: adjust component Video
🎃feat: add component FlatList

Vamos que vamos galera.

🚀 Let's code! 🚀

Febo UI no Hacktoberfest 2023

Hebert Montarroyos — Thu, 26 Oct 2023 23:00:13 +0000

Introdução

Mais uma vez aqui galera, dessa vez venho trazer minha experiência como mantenedor de um repositório que está participando do hacktoberfest23.

É minha primeira vez participando do evento, acabei até entrando um pouco tarde já na metade do mês quase no final, já que esse mês foi um pouco corrido para mim por motivos pessoais, mas ao saber do evento e ter o conhecimento sobre tal, logo procurei participar tanto como colaborador como mantenedor trazendo um projeto que tem um valor muito sentimental para mim, como desenvolvedor, além de desde o momento de sua criação, fazer com que o mesmo fosse open source para que outros devs possam aprender e também contribuir com o mesmo, e vi no hacktoberfest uma oportunidade perfeita de trazer ele.

O que é o Febo UI ?

Vou falar um pouco do que se trata o repositório que trouxe como mantenedor nesse hacktoberfest.

O FeboUI é uma biblioteca de componentes para a biblioteca React, ela visa simplificar o desenvolvimento trazendo componentes reutilizáveis simples de utilizar, e com uma gama de personalização para cada componente.
Atualmente eu não lancei ainda sua versão 1.0.0 por conta de não ter tempo para revisar tudo, visto que tem ainda pequenas correções a se fazer nela, além de muitos outros componentes já pré-lançados em branchs a parte no backlog pronto para mergear na branch principal.

Mas infelizmente por conta da correria do dia a dia, é somente eu para poder atualizar toda a documentação do seu storybook, além de testar subir tudo e atualizar o pacote com os novos componentes, então na última versão lançada até o momento ainda consta algumas pequenas falhas de alguns componentes que por sinal, eu abri algumas issues para que quem puder ajudar no hacktoberfest ajuste lá e contribua como um colaborador, de um projeto open source que só visa trazer melhorias para a comunidade.

Atualmente você consegue achar o FeboUI na página oficial do NPM para instalar, ou via Yarn caso deseje, na sua versão 0.1.36 Beta.

Também segue o link para seu repositório, o qual tem algumas issues abertas para colaborar no hacktoberfest.

Para isso, nele tem um arquivo chamado CONTRIBUTORS.md a qual eu deixei uma breve instrução para que todo PR aberto seja colocado seguindo a padronização, seus dados como contribuidor do projeto da seguinte a convenção abaixo.

#### Name: [Hebert Montarroyos](https://github.com/HMontarroyos)
- Place: Rio de Janeiro, Brazil
- Bio: Fullstack Developer
- GitHub: [Hebert Montarroyos](https://github.com/HMontarroyos)

Independente do hacktoberfest fique a vontade para contribuir com o projeto, a intenção dele é essa mesmo crescer com a comunidade para uma lib completa de componentes, facilitando ainda mais o desenvolvimento web totalmente open source.

Espero por vocês lá ;)

Prós e Contras

Como eu acabei começando um pouco mais tarde no hacktoberfest, como falei acima, não posso culpar a comunidade de não ter tido muitos colaboradores no repositório em si, então não sei nem se isso seria um ponto contra, já que partiu de mim infelizmente chegar tardio ao evento.

Mas como ponto totalmente excelente e que além de conhecer outros repositórios open source pude divulgar o FeboUI ainda mais, para ter um alcance maior na comunidade e não só com a finalização do hacktoberfest, espero que vocês continue a nos apoiar e vamos juntos construir nossa lib de componentes React.

✨ Agradeço a todos que contribuíram com o FeboUI. ✨

O que vem a seguir ?

Como dito antes e importantíssimo que todos que colaboram ou agora que conheceram a nossa lib, possam continuar ajudando com novas features, corrigindo bugs entre outras soluções e assim criar uma lib muito melhor, mesmo após a finalização do hacktoberfest desse ano.

Novamente deixo meu agradecimento não só como mantenedor do FeboUI, mas como contribuidor em outros projetos do hacktoberfest23.

Vamos que vamos galera.

🚀 Let's code! 🚀

Trilhando o meu primeiro Hacktoberfest 2023

Hebert Montarroyos — Thu, 26 Oct 2023 19:40:44 +0000

Olá rede, muito prazer me chamo Hebert Montarroyos, sou Desenvolvedor FullStack, é meu primeiro contato com o hacktoberfest, na verdade, acabei entrando um pouco mais tarde já na metade de outubro, porém pretendo me comprometer e além de colaborar com a comunidade, pretendo manter um projeto, que já tenho faz um tempo open source, para que outros devs possam ajudar e também aprender com ele.

Durante o Hacktoberfest, vou explorar projetos de código aberto alinhados aos meus interesses e habilidades. Seja codificando, corrigindo erros, melhorando a documentação ou sugerindo recursos, estou pronto para me envolver. Acredito que o código aberto é sobre colaboração e inovação. Espero conectar-me com pessoas que compartilham essa paixão pela tecnologia e o desejo de fazer a diferença no mundo através de contribuições com o open source.

Há um tempo escrevi um artigo ensinando como colaborar com projetos open source, deixo o link aqui também.

Além de divulgar ainda mais meu projeto open source que se trata de uma biblioteca de componentes para React a qual deixo o link aqui também, caso queiram colaborar e também está com a flag do #hacktoberfest2023.

Dito tudo isto fico aberto a novas oportunidades, caso queiram trocar alguma ideia só me chamar por aqui ou em alguma rede social minha, um ótimo hacktoberfest a todos, e vamos codar.

🚀 Let's code! 🚀

21 Extensões Essenciais do Chrome para Aprimorar o Desenvolvimento Web

Hebert Montarroyos — Sat, 09 Sep 2023 17:04:51 +0000

Aprimore seu Fluxo de Trabalho com essas extensões especializadas e Aumente sua Eficiência no Desenvolvimento Web

Para quem usa o Google Chrome, para desenvolvimento web, já deve ter notado que ele é um poderoso amigo na hora de depurar seus códigos através do Web development tools, nativo nele, onde você pode ver seus console.log, analisar o que esta sendo salvo na memória do navegador ou até o que aquela requisição está vindo da API, que você está consumindo.
Além de tudo isso o Chrome em sua loja oficial, chrome web store, tem diversas extensões desenvolvidas prontas para uso para facilitar a vida de qualquer desenvolvedor web, pensando nisso vou trazer aqui 21 extensões que eu venho feito uso, há algum tempo, vamos lá.

1.Allow CORS: Access-Control-Allow-Origin

Esta extensão elá basicamente adiciona facilmente a regra (Access-Control-Allow-Origin: *) ao cabeçalho de resposta, isto é muito útil para quebrar um galho, quando dá erro de CORS da API e sua requisição é bloqueada pelo navegador, com ela você consegue desativar ou ativar e também passar parâmetros adicionais.

2. ColorZilla

Com o ColorZilla você pode obter uma leitura de cores de qualquer ponto do seu navegador, ajustar rapidamente essa cor e colá-la em outro programa, seletor de cores. Isso é muito útil para descobrir que cor e determinado elemento daquela página e através disso você conseguir salvar sua cor em rgb ou outro formato que ele atende, para uso depois no seu CSS.

3. Clear Cache

Basicamente através dessa extensão você consegue limpar todo o seu cache e dados de navegação com um único clique de um botão, sendo bem útil também quando quiser limpar os dados salvos na memória do navegador, pois ele também tem uma opção para limpar somente isso.

4. CSS Peeper

Através desta extensão é possível selecionar elementos da página, seja eles textos, imagens ou até componentes inteiros e através disso extrair seu CSS. Isso é muito útil quando você quer reaproveitar determinado elemento para seu site ou então, quer apenas saber o que utilizou dentro daquela aplicação, sem dúvida de toda a lista é um das extensões com maior poder para quem trabalha no front-end.

5. EditThisCookie

EditThisCookie é um gerenciador de cookies. Você pode adicionar, excluir, editar, procurar, proteger e bloquear cookies. Isso é bastante útil seja para você limpar os seus cookies de navegação de um determinado site ou quando você está trabalhando com alguma aplicação e deseja criar um cookie fake, através desta extensão com apenas alguns cliques isso é possível.

6. Fake Filler

Esta extensão é maravilhosa quando você quer testar seus próprios formulários ou de algum site, de maneira rápida, ao clicar sobre a extensão ela automaticamente verifica se tem algum formulário na página, caso tenha já preenche de maneira aleatória com dados fakes como no exemplo acima. Basicamente um preenchedor de formulário que preenche todas as entradas em uma página com dados falsos/fictícios.

7. JSON Viewer

Essa extensão diferente das demais, ela já vem habilitada por default no momento que é instalada, basicamente ela facilita sua vida ao se deparar com algum arquivo JSON vindo de alguma API, por exemplo, o que ela faz e exatamente deixar seu JSON mais bonito e personalizável, como no exemplo acima que é um GET onde traz meus dados da minha API, consigo visualizar sem estar tudo embolado no navegador, graças a essa extensão.

8. Lighthouse

O Lighthouse é uma ferramenta automatizada de código aberto para melhorar o desempenho, a qualidade e a correção de seus aplicativos da web. Essa extensão após instalada você só ira conseguir ver ela dentro do próprio dev tools do chrome, aonde ele irá agora ter uma aba personalizada somente dele, com isso você consegue testar o desempenho, consegue vê se seu site está tendo acessibilidade com todos os públicos, também consegue gerir o SEO do seu site para monitorar como ele está sendo apresentado nas páginas, além de muitas outras funcionalidades.

9. Octotree — GitHub code tree

Esse cara é um facilitador de vidas, toda vez que você está vendo algum repositório no github, já deve ter se deparado de ter que entrar em cada pasta para vê o que cada uma faz né. Basicamente com essa extensão isso vai mudar, por que ao ter ela instalada qualquer repositório que você entrar a partir de agora no github, ela irá aparecer ali do lado esquerdo e ao passar o mouse sobre ela ira abrir essa aba, que você consegue facilmente vê tudo que tem dentro da pasta src, por exemplo, sem ter que entrar nela, facilitando sua visita rápida pelo repositório em questão.

10. Material Icons for GitHub

A decima extensão o print da extensão anterior já deve ter entregado, basicamente para quem curte utilizar o Material no VSCode, por exemplo, e está habituado, com essa coleção de ícones, ficará melhor ainda com essa coleção agora no seu repositório do github, basicamente com ela instalada e habilitada você tem acesso agora ao Material icons no GitHub.

11. Material DevTools Theme Collection

Para os amantes de Material, ae vai mais uma extensão massa para complementar a lista, através dela é possível alterar todo o tema do dev tools nativo do chrome, dando um ar mais parecido com nosso VSCode.

12. Window Resizer

Window Resizer é a extensão perfeita quando se quer trabalhar com responsividade para ajustar os elementos da sua aplicação nos mais variados formatos de tela, ao clicar sobre a extensão elá lhe entrega diversos tamanhos onde você pode customizar e testar como cada componente está sendo exibido na página em cada dispositivo, além de te dar uma régua para verificar cada píxel da página, sem dúvida facilita em muito o trabalho no front-end.

13. WhatFont

Com esta extensão, assim como o nome já diz, ela basicamente consegue capturar qual a fonte foi escolhida para o texto em questão, da página, apenas clicando nela e posicionando o mouse acima do texto desejado, elá identifica qual a fonte foi escolhida.

14. Web Developer Checklist

Web Developer Checklist é uma extensão que ajuda os desenvolvedores a garantir que seus sites ou aplicativos web atendam a uma lista de boas práticas e diretrizes recomendadas para garantir um alto nível de qualidade e usabilidade. Com a Web Developer Checklist, os desenvolvedores podem verificar se o site ou aplicativo web atende aos padrões de design, desenvolvimento e segurança, como no exemplo acima no site oficial da Apple, ela pontou alguns pontos a melhorar e elogiou outros como concluídos.

15. Web Developer

Essa sem dúvida é minha preferida de toda a lista, extensão famosa pau para toda obra, basicamente o que ela faz é o seguinte, ela adiciona um botão de barra de ferramentas com várias ferramentas de desenvolvedor web, mas não é qualquer ferramenta, ela consegue desabilitar o JavaScript e CSS da página, consegue resetar o CSS da página, habilita ou desabilita cookies, Popups entre muitas outras funcionalidades, uma gama de ferramentas perfeitas para desenvolvimento front-end.

16. Wappalyzer — Technology profiler

Wappalyzer é uma extensão de análise de tecnologia que permite identificar as tecnologias utilizadas em um site ou aplicação web. Com o Wappalyzer, você pode descobrir quais sistemas de gerenciamento de conteúdo (CMS), frameworks, linguagens de programação, bancos de dados e outras tecnologias estão sendo usadas em um determinado site, como no exemplo acima que utilizei ela para algumas das tecnologias usadas no site da Blizzard.

17. VisBug

Essa extensão é tipo o mod God nos games, com ela habilitada após instalada em qualquer site ela permite aos desenvolvedores web editar facilmente o design e o layout de uma página web em tempo real, sem dúvida uma ótima extensão para se ter como desenvolvedor front-end.

18. Site Palette

É uma excelente ferramenta, basicamente você ao habilitar consegue ter acesso a toda paleta de cores que foi feita no site em questão. Essa extensão eu vou deixar, mas como menção honrosa aqui, já utilizei muito no passado, porém agora ela se tornou uma extensão paga, então na minha opinião é, mas valida para quem trabalha somente com a parte de ui/ux e tem muitos projetos com isso, pois para usar somente uma vez não sei se valeria tanto a pena, mas fica a sua escolha, de qualquer modo não dá para não negar que se trata de uma excelente ferramenta.

19. Save SVG as PNG

Essa extensão o uso dela é bem simples, ela serve para salvar imagens SVG como PNG. Você pode navegar até um arquivo .svg, clique com o botão direito nele e clique no item do menu de contexto ‘Salvar SVG como PNG’.

20. React Developer Tools

O React Developer Tools é uma extensão imprescindível para quem desenvolve aplicações web com React, ao ser instalada ela adiciona uma nova aba no dev tools do chrome, que permite aos desenvolvedores inspecionar e depurar aplicações React. Além dela não se exclusiva do chrome estando também no Mozilla Firefox e outros navegadores populares. Essa ferramenta oferece um conjunto de funcionalidades valiosas para desenvolvedores que trabalham com o React. Você só consegue ter acesso a essa aba nova no dev tools, somente em aplicações React onde o próprio navegador faz essa identificação, podendo gerenciar as props e estados entre outras funcionalidades nativas do React.

21. Redux DevTools

Redux DevTools, essa extensão assim como a de cima o React Developer Tool, também cria uma nova aba no dev tools, porém dessa vez para aplicações que utilizem do Redux, uma biblioteca de gerenciamento de estado para JavaScript em sua aplicação, com diversas funcionalidades únicas no seu dev tools.

Resumo

Existem muitas outras extensões que eu não cheguei a trazer aqui para não ficar muito grande o artigo, que qualquer coisa posso trazer uma parte 2 ou 3 sobre o assunto caso tenha alguma necessidade. Essas extensões são ótimas, pois além das funcionalidades nativas do Chrome, como o Web Development Tools, que permite depurar códigos de forma eficaz, a Chrome Web Store oferece uma ampla variedade de extensões desenvolvidas para otimizar o fluxo de trabalho dos desenvolvedores, além dessas pode se fazer uma pesquisa e achar outras mais, ficaria grato também se quisesse deixar o nome das extensões que vocês costumam usar para seu desenvolvimento, aumentando ainda mais nossa lista e ajudando ainda mais a comunidade. Essas extensões que eu trouxe foram para o navegador Chrome, porém muitas delas aqui citadas também existem para outros navegadores como no Mozilla, por exemplo, fica a seu critério buscar compatibilidade com demais navegadores.

Explorando a lib usehooks-ts para Desenvolvimento no React

Hebert Montarroyos — Sat, 02 Sep 2023 17:37:45 +0000

Essa lib é uma boa escolha para quem curte hooks personalizáveis, além de ser em Typescript, o que facilita na hora de desenvolver e conhecer os recursos que essa poderosa lib, traz consigo.

Vamos lá, usehooks-ts o que falar desse camarada que facilita em muitos aspectos a vida do dev. Ela é uma biblioteca que fornece uma coleção de hooks personalizados, para uso em projetos React com TypeScript. Esses hooks abrangem uma variedade de funcionalidades, desde manipulação de estado até interações com APIs externas.

Essa biblioteca é útil porque oferece uma maneira conveniente de reutilizar lógica em seus componentes React. Em vez de escrever a mesma lógica repetidamente em vários componentes, você pode simplesmente importar os hooks correspondentes da biblioteca e usá-los em seus componentes.

Alguns exemplos de hooks disponíveis nessa biblioteca incluem o useLocalStorage, que permite armazenar dados no localStorage do navegador, e o useFetch, que facilita a realização de requisições HTTP.

Basicamente elá e uma biblioteca de hooks personalizados, feito em Typescript, mas se você tiver caído de paraquedas e não saber o que são hooks personalizados, eu fiz uma matéria sobre o assunto, vou deixar o link aqui.

E caso você nem faça ideia do que são os hooks no React, um breve resumo que eu poderia dar, seria que os Hooks são uma característica introduzida no React, que permitem que você use o estado e outros recursos do React em componentes funcionais. Antes da introdução dos hooks, o React principalmente se baseava em componentes de classe para gerenciar o estado e o ciclo de vida.

Voltando a falar sobre essa lib, se você estiver trabalhando em um projeto React com TypeScript, o uso dessa biblioteca pode simplificar seu código e aumentar sua produtividade. No entanto, é importante revisar a documentação e entender como cada hook funciona antes de usá-lo em seu projeto, eu irei trazer alguns pontos positivos e também negativos de utilizar essa lib, assim como alguns métodos populares dela, juntamente como instalar em seu projeto react.

Vantagens do usehooks-ts

Produtividade: Essa lib fornece um acervo de hooks personalizados e amplamente testados na comunidade, o que pode acelerar o desenvolvimento, fornecendo implementações comuns de funcionalidades que você pode simplesmente importar e usar em seus componentes, como o useLocalStorage ou useFetch,citados anteriormente.

Reutilização de código: Hooks personalizados encapsulam lógica complexa em componentes, tornando mais fácil e eficiente a reutilização desse código em toda a aplicação.

Type Safety (Segurança de Tipos): Como o usehooks-ts é projetada com TypeScript, isso pode ajudar a melhorar a segurança de tipos em seu código, o que pode evitar muitos erros comuns.

Alto Acervo: Essa lib possui muitos hooks atualmente em sua versão, o que lhe facilita utilizar dela em vários projetos, como, por exemplo, o hook useDarkMode que é um hook onde permite adicionar um tema escuro ao seu aplicativo, muito útil na maioria das aplicações.

Desvantagens do usehooks-ts

Limitações: Bibliotecas de hooks personalizados podem não atender a todas as necessidades da sua aplicação, o que pode exigir soluções adicionais ou personalizadas, mesmo falando sobre seu alto acervo de métodos, pode ser que em sua aplicação específica algo nessa lib não atenda, e por isso não seja necessário utilizar ela no codigo.

Curva de Aprendizado: Possa ser que alguns hooks dessa lib, seja necessário dar uma estudada, mas afundo para entender como implementar, mesmo estando tudo bem documentado, vale a pena colocar esse ponto.

Tamanho do Bundle: Como toda boa dependência, isso pode aumentar o tamanho do bundle da sua aplicação, caso tenha muitas dependências instaladas em seu projeto, isso possa vir futuramente afetar o desempenho.

Como fazer o uso do usehooks-ts em seus projetos

Instale a biblioteca usehooks-ts usando o npm ou o yarn.

npm i usehooks-ts
ou
yarn add usehooks-ts

Vou dar um exemplo a seguir de como fazer o uso dessa lib em seu projeto, no nosso caso, vou utilizar do hook useFetch, para fazer uma chamada simples a essa API gratuita de fatos aleatórios do ilustre Chuck Norris, a chucknorris.io.

Para isso criei um componente chamado ChuckNorrisFactsRandom , que o único objetivo desse componente será exibir uma série de fatos icônicos sobre nosso Chuck Norris aleatoriamente, ou seja, toda vez que recarregar a página esses fatos serão recarregados visto que estaremos fazendo um Get para essa API, onde nosso endpoint sempre nos devolve um fato randômico.

import { useFetch } from "usehooks-ts";

interface ChuckNorrisJoke {
  value: string;
}

export const ChuckNorrisFactsRandom = () => {
  const { data, error } = useFetch<ChuckNorrisJoke>(
    `https://api.chucknorris.io/jokes/random`
  );

  if (error) {
    console.error(error);
    return <div>Error: {error.message}</div>;
  }

  if (data) {
    return (
      <div>
        <p style={{ fontStyle: "italic" }}>{data.value}</p>
      </div>
    );
  }

  return <div>Loading...</div>;
};

export default ChuckNorrisFactsRandom;

E no meu App eu vou chamar esse componente para renderizar na minha aplicação.

import { ChuckNorrisFactsRandom } from "./Components";

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

export default App;

E o resultado é esse, nada estilizado mesmo, só para amostrar um exemplo de uso real de um dos hooks dessa biblioteca.

Hooks populares do usehooks-ts

Eu vou usar alguns dos próprios exemplos que tem na biblioteca, para mais detalhes é só dar uma olhada mesmo na própria documentação do usehooks-ts.

useDarkMode: Esse hook permite adicionar um tema escuro ao seu aplicativo. Veja o exemplo abaixo, ao pressionar cada botão ele vai mudar, depois é só você criar um arquivo no seu CSS global de temas, para implementar de fato essa funcionalidade, podendo até mesmo ter a opção de desativar ou ativar o tema, separado em métodos diferentes.

import { useDarkMode } from "usehooks-ts";

function App() {
  const { isDarkMode, toggle, enable, disable } = useDarkMode();

  return (
    <div>
      <p>Current theme: {isDarkMode ? "dark" : "light"}</p>
      <button onClick={toggle}>Toggle</button>
      <button onClick={enable}>Enable</button>
      <button onClick={disable}>Disable</button>
    </div>
  );
}

export default App;

useHover: Esse hook ele permite você verificar se tem algum elemento na página sobre o efeito de hover utilizando de JavaScript para isso ao invés do CSS. No exemplo abaixo ao posicionar o mouse sobre a palavra unhovered ela é substituída por hovered, ao tirar ele volta para o que estava anterior.


import { useRef } from "react";
import { useHover } from "usehooks-ts";

function App() {
  const hoverRef = useRef(null);
  const isHover = useHover(hoverRef);

  return (
    <div ref={hoverRef}>
      {`The current div is ${isHover ? `hovered` : `unhovered`}`}
    </div>
  );
}

export default App;

useLocalStorage: Esse hook permite armazenar e recuperar dados no localStorage do navegador. No exemplo abaixo ele poderia ser facilmente combinado com o useDarkMode,para salvar o tema no navegador do usuário, no nosso caso fizemos diferente, mas também é uma opção. No nosso caso salvamos uma variável booleana chamada, darkTheme no nosso LocalStorage, e através do clique nesse botão seu valor e alterado para true ou false.

import { useLocalStorage } from "usehooks-ts";

function App() {
  const [isDarkTheme, setDarkTheme] = useLocalStorage("darkTheme", true);
  const toggleTheme = () => {
    setDarkTheme((prevValue: boolean) => !prevValue);
  };

  return (
    <button onClick={toggleTheme}>
      {`The current theme is ${isDarkTheme ? `dark` : `light`}`}
    </button>
  );
}

export default App;

Conclusão

A biblioteca usehooks-ts é uma valiosa ferramenta para desenvolvedores React que desejam aprimorar a produtividade e a legibilidade de seu código. Ela oferece uma coleção de hooks personalizados pré-construídos, projetados para simplificar tarefas comuns no desenvolvimento de aplicativos React com TypeScript. Esses hooks abstraem a complexidade de tarefas como gerenciamento de estado, requisições de API e interações com o ciclo de vida dos componentes, permitindo que os desenvolvedores se concentrem mais na lógica de negócios de suas aplicações. Embora a usehooks-ts possa acelerar o desenvolvimento, é importante considerar cuidadosamente as vantagens e desvantagens de sua utilização em um projeto específico, bem como a conformidade com as práticas recomendadas de desenvolvimento.

Construindo Aplicações Web com a Poderosa Stack MERN

Hebert Montarroyos — Thu, 24 Aug 2023 16:47:24 +0000

Guia Passo a Passo da Stack MERN: Do Início ao Uso em Projetos Reais

A Stack MERN é um conjunto de tecnologias amplamente utilizadas para desenvolver aplicações web modernas e eficientes. Nada mais é do que um acrônimo composta por essas 4 tecnologias: MongoDB, Express.js, React e Node.js, essa stack oferece uma abordagem completa, para a criação de aplicações full-stack. Neste artigo, exploraremos cada componente da stack MERN, suas características distintas e os prós e contras de estudá-la seguindo minha percepção, que tive ao usa-lá, logicamente como sempre falo, cada um pode ter suas próprias vantagens ou desvantagens, além de deixar um exemplo de caso de uso real de uma aplicação web utilizando dessa stack.

Essa Stack ela é dividida da seguinte maneira, o React fica responsável por toda a parte no lado do cliente, o front-end da aplicação, deixando o Express.js e o Node.js na parte do servidor, juntamente com o MongoDB no back-end, onde é usado como o banco de dados da aplicação.

Existe outra stack muito similar a essa, que é a MEAN, fazendo basicamente a mesma coisa, porém no lugar do React, se utiliza do Angular para gerir a parte do front-end da aplicação.

Eu vou falar um pouco de cada uma aqui de forma resumida, trazendo alguns pontos fortes e fracos de se usar cada tecnologia, pretendo depois trazer um artigo a parte, falando detalhadamente sobre cada tecnologia em questão, para não alongar muito aqui.

1. MongoDB

O MongoDB é um banco de dados NoSQL orientado a documentos, que oferece flexibilidade e escalabilidade para as aplicações.

Vantagens:

Flexibilidade de Esquema: Os documentos são armazenados em formato JSON-like (BSON), permitindo que os esquemas se adaptem às mudanças ao longo do desenvolvimento.
Escalabilidade Horizontal: O MongoDB suporta a distribuição de dados em clusters, facilitando o aumento de capacidade à medida que o tráfego aumenta.
Desenvolvimento Rápido: A ausência de esquema rígido acelera o processo de desenvolvimento, permitindo iterações mais ágeis.

Desvantagens:

Complexidade de Modelagem: A ausência de um esquema definido pode resultar em modelos de dados mal estruturados, exigindo uma abordagem cuidadosa na modelagem.
Menos Adequado para Dados Relacionais: Aplicações que dependem fortemente de relações complexas entre os dados podem encontrar desafios ao usar um banco de dados NoSQL, como é o caso do MongoDB.

2. Express.js

O Express.js é um framework para criação de aplicativos web em Node.js. Ele simplifica a criação de APIs e o manuseio de rotas e requisições.

Vantagens:

Simplicidade: O Express oferece uma abordagem minimalista, permitindo aos desenvolvedores criar rapidamente endpoints e configurar middleware.
Ampla Comunidade e Documentação: Sendo um dos frameworks mais populares para Node.js, o Express tem uma comunidade ativa e vasta documentação.

Desvantagens:

Estrutura Flexível: A falta de estrutura rígida pode levar a inconsistências na organização do código, especialmente em projetos maiores.

3. React

O React é uma biblioteca JavaScript desenvolvida pelo Facebook para construir interfaces de usuário interativas e reativas, no lado do cliente.

Vantagens:

Componentização: O React promove a criação de componentes reutilizáveis, agilizando o desenvolvimento e a manutenção.
Renderização Eficiente: Utilizando o conceito de Virtual DOM, o React atualiza apenas as partes necessárias da interface, melhorando o desempenho.

Desvantagens:

Curva de Aprendizado Inicial: Para desenvolvedores novos no conceito de componentes e JSX, pode haver uma curva de aprendizado inicial.

4. Node.js

O Node.js é um ambiente de execução JavaScript do lado do servidor. Ele permite que os desenvolvedores construam aplicativos web escaláveis e em tempo real.

Vantagens:

JavaScript Unificado: Usar a mesma linguagem (JavaScript) em todo o stack simplifica a comunicação e a colaboração entre os desenvolvedores.
Não Bloqueante: O modelo de E/S não bloqueante do Node.js permite um alto desempenho e escalabilidade em aplicações que dependem de muitas operações de I/O.

Desvantagens:

Gerenciamento de Eventos: O modelo baseado em eventos pode tornar o código complexo em casos de fluxos de controle complexos.

Essas foram algumas vantagens e desvantagens que encontrei ao longo dos anos utilizando dessa stack, teria muitas outras, mas é assunto para um próximo artigo. Sinta-se a vontade para concordar ou discordar sobre os pontos que citei até aqui.

Vantagens de Estudar a Stack MERN

Tecnologias Modernas: A stack MERN é composta por tecnologias atualizadas e amplamente adotadas na indústria.
Flexibilidade: A flexibilidade das tecnologias permite adaptar-se a diferentes tipos de projetos e requisitos.
Comunidades Ativas: Cada componente da stack possui uma comunidade ativa, facilitando a obtenção de suporte e aprendizado contínuo.
Linguagem Unificada: Você pode escrever tudo com Javascript, sem a necessidade de ter a curva de aprendizado de utilizar outra linguagem em alguma tecnologia do acrônimo.

Desvantagens de Estudar a Stack MERN

Curva de Aprendizado: Cada tecnologia possui sua própria curva de aprendizado, o que pode ser desafiador para desenvolvedores iniciantes.
Complexidade: A integração de quatro tecnologias diferentes pode aumentar a complexidade do desenvolvimento e da depuração.
Tecnologias em Evolução: As tecnologias podem evoluir rapidamente, exigindo que os desenvolvedores estejam atualizados constantemente.

Apontando aqui os prós e contras dessa Stack que achei, vou dar um exemplo prático de caso de uso de como utilizar ela em um projeto real.

Utilizando a Stack MERN em um projeto real

Para este artigo, vou dar um exemplo simples de uma aplicação real, que será uma espécie de To Do List, onde o usuário consegue adicionar suas tarefas(To Do) e também atualizar caso tenha necessidade e posteriormente excluí-las, esses To Dos então são mandados para nossa API onde persistirá no nosso banco de Dados em questão.

Front-end da Aplicação

Vamos começar criando nossa aplicação no front-end, do lado do cliente utilizando do React, para isso execute o seguinte comando:

npx create-react-app todo_list — template typescript

Após isso vamos utilizar de algumas libs que vão facilitar a criação do nosso projeto como o Axios, na hora de fazer nossa chamada a nossa API, e para estilizar eu não vou focar muito nisso, então optei por utilizar os componentes já prontos do MaterialUI.

npm install @mui/material axios @mui/icons-material — save

Optei por usar o CRA afins de já vi os recursos prontos para startar nossa aplicação, porém vamos refatorar, já que tem muita coisa que não vamos usar nela, e deixar somente o que importa, ao fim de tudo isso a estrutura do seu projeto ficará algo assim.

Como estou utilizando o TypeScript no projeto, tive que criar uma pasta chamada types para poder tipar manualmente a biblioteca de icons do material que até o momento deste artigo não estava tipada nativamente, então é só criar uma pasta com o nome de types dentro de src, e dentro dela crie um arquivo chamado mui-icons-material.d.ts e adicione o seguinte trecho.

declare module '@mui/icons-material/Delete' {
    import { SvgIconProps } from '@mui/material/SvgIcon';

    const DeleteIcon: (props: SvgIconProps) => JSX.Element;
    export default DeleteIcon;
  }

Feito isso, o TypeScript vai parar de dar erro de tipagens, futuramente ao chamar essa lib no código.

Antes mesmo de criar nosso back-end utilizando das outras tecnologias da stack MERN, vamos já deixar nosso front-end preparado, para isso crie uma pasta chamada server no src da aplicação, e dentro dela crie um arquivo chamado api.tsx, dentro desse arquivo você fará a seguinte chamada a nossa API, para nossas rotas via Axios.

import axios, { AxiosResponse } from "axios";

const baseUrl = "http://localhost:3001/toDos";

const api = axios.create({ baseURL: baseUrl });

export interface ToDo {
  _id: string;
  text: string;
  completed: boolean;
}

export const fetchToDos = async (): Promise<ToDo[]> => {
  try {
    const response: AxiosResponse<ToDo[]> = await api.get(baseUrl);
    return response.data;
  } catch (error) {
    console.error("Error fetching toDos:", error);
    throw error;
  }
};

export const addToDo = async (task: {
  text: string;
  completed: boolean;
}): Promise<void> => {
  try {
    await api.post(baseUrl, task);
  } catch (error) {
    console.error("Error adding toDo:", error);
    throw error;
  }
};

export const toggleToDo = async (
  toDoId: string,
  completed: boolean
): Promise<void> => {
  try {
    await api.put(`${baseUrl}/${toDoId}`, { completed: !completed });
  } catch (error) {
    console.error("Error toggling toDo:", error);
    throw error;
  }
};

export const deleteToDo = async (toDoId: string): Promise<void> => {
  try {
    await api.delete(`${baseUrl}/${toDoId}`);
  } catch (error) {
    console.error("Error deleting toDo:", error);
    throw error;
  }
};

Feito isto nossas futuras rotas já estará tudo configurada, chamadas via Axios na nossa aplicação e exportado todos os métodos do nosso CRUD, vamos agora importar ele no nosso arquivo principal App.

import React, { useState, useEffect } from "react";
import {
  Container,
  TextField,
  Button,
  List,
  ListItem,
  ListItemText,
  Checkbox,
  IconButton,
} from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import {
  ToDo,
  fetchToDos,
  addToDo,
  toggleToDo,
  deleteToDo,
} from "./server/api";

function App() {
  const [toDos, setToDos] = useState<ToDo[]>([]);
  const [toDoText, setToDoText] = useState<string>("");

  useEffect(() => {
    loadToDos();
  }, []);

  const loadToDos = async () => {
    const fetchedToDos = await fetchToDos();
    setToDos(fetchedToDos);
  };

  const handleAddToDo = async () => {
    if (toDoText.trim() === "") return;

    await addToDo({ text: toDoText, completed: false });
    setToDoText("");
    loadToDos();
  };

  const handleToggleToDo = async (toDoId: string, completed: boolean) => {
    await toggleToDo(toDoId, completed);
    loadToDos();
  };

  const handleDeleteToDo = async (toDoId: string) => {
    await deleteToDo(toDoId);
    loadToDos();
  };

  return (
    <Container>
      <h1>To Do List</h1>
      <TextField
        label="Adicionar To Do"
        variant="outlined"
        fullWidth
        value={toDoText}
        onChange={(e) => setToDoText(e.target.value)}
      />
      <Button variant="contained" onClick={handleAddToDo}>
        Adicionar
      </Button>
      <List>
        {toDos.map((toDo) => (
          <ListItem key={toDo._id}>
            <Checkbox
              checked={toDo.completed}
              onChange={() => handleToggleToDo(toDo._id, toDo.completed)}
            />
            <ListItemText primary={toDo.text} />
            <IconButton onClick={() => handleDeleteToDo(toDo._id)}>
              <DeleteIcon />
            </IconButton>
          </ListItem>
        ))}
      </List>
    </Container>
  );
}

export default App;

Pronto nosso front-end está finalizado por hora, dessa maneira você já consegue ver algo como o exemplo abaixo, porém ainda não tem como adicionar, pois as rotas ainda não foram criadas no nosso back-end, então vamos criá-las agora.

Back-end da Aplicação

Para criar nosso back-end em NodeJS e Express.js vamos fazer o seguinte. Primeiro crie uma pasta chamada todo_list_api e dentro dessa pasta rode o seguinte comando:

npm init -y

Isso irá criar nossa configuração do package.json, após isso rode o seguinte comando para instalar o express.js e o mongoose, que é uma biblioteca de modelagem de objetos para Node.js, projetada para trabalhar com o MongoDB, isso vai facilitar em muito na hora de montar nossos schemas.

npm install express mongoose

Após isso também vamos instalar e configurar o TypeScript para trabalhar com ele.

npm install typescript@latest — save-dev

Esse comando vai instalar a versão mais atual do TypeScript até o momento, após isso é necessário ainda passar as configurações para o compilador do TypeScript, para isso crie um arquivo na raiz do projeto chamado tsconfig.json, e dentro dele cole o seguinte trecho de código, basicamente isto são algumas configurações básicas para utilizar o TypeScript no nosso projeto, existem muitas outras do que somente estas, por hora vão bastar somente elas.

{
    "compilerOptions": {
      "target": "ES2018",
      "module": "commonjs",
      "outDir": "./dist",
      "rootDir": "./src",
      "strict": true,
      "esModuleInterop": true
    }
  }

Vamos precisar também dessa lib instalada no nosso código.

npm install — save-dev ts-node

O ts-node é uma ferramenta que permite executar arquivos TypeScript diretamente no Node.js sem a necessidade de compilação prévia.

Pode ser que alguma lib que você venha instalar necessite de seu @types por conta do TypeScript, então é só procurar na web ou na própria doc da documentação em questão, que você acha para instalar, caso necessite dependendo da versão usada.

Vamos já adiantar também e instalar outra biblioteca para salvar nossas variáveis de ambiente, na hora de fazer a chamada ao MongoDB Atlas, não ficar exposto no código nosso login e senha, já que isso seria uma falha crítica de segurança, para isso vamos utilizar essa lib chamada, dotenv.

npm install dotenv

Feito isso vamos criar um arquivo na nossa raiz do nosso projeto chamado .env, a princípio pode deixá-lo vazio, que será lá que ficarão nossas variáveis de ambiente, onde quando for subir essas informações para algum repositório lembre-se de criar um arquivo chamado, .gitignore e colocar para ignorar esse .env, por default já vem, porém, sempre é bom olhar isso.

Após isso feito vamos criar a nossa estrutura de pastas, para trabalhar mais organizado na nossa API, no meu caso eu estou usando um padrão de Arquitetura em Camadas. Nesse padrão, o código é organizado em diferentes camadas, cada uma com uma responsabilidade específica. As camadas mais comuns e que vamos usar nesse exemplo são o Model, Controller, Repository e Service, breve vou criar um artigo explicando o porquê desse padrão é o que cada um faz por boas práticas, mas para não se alongar muito apenas siga essa estrutura por hora, para darmos prosseguimento ao projeto.

Eu criei toda nossa estrutura que vamos precisar nesse exemplo acima, com seus respectivos arquivos vazio até o momento e que vamos começar a codificar, como pode ser visto a maioria das pastas tem um arquivo index.ts, isso costuma ser uma boa prática, pois na hora de fazer o import, por padrão o compilador sempre busca pelo valor index por default, caso contrário teria que especificar o nome do arquivo dentro da pasta, na hora do import.

Vamos começar agora modelar os nossos dados da nossa aplicação, para isso vamos criar nosso modelo, lá no nosso model e já vamos preparar nosso schema através do mongoose para falar o que vai ser mandado para o MongoDB.

import { Document, Schema, model } from "mongoose";

export interface toDo extends Document {
  text: string;
  completed: boolean;
}

const toDoSchema: Schema = new Schema({
  text: { type: String, required: true },
  completed: { type: Boolean, required: false },
});

export default model<toDo>("toDo", toDoSchema);

Feito isto, já tendo o nosso modelo criado, vamos agora criar a nossa conexão com o nosso banco de dados, que no nosso caso eu vou utilizar o Mongo Atlas que é a solução projetada para hospedar e operar bancos de dados MongoDB na nuvem.

Para isso você tem que ter uma conta no site do MongoDB, para poder criar um Cluster no Mongo Atlas.

Você terá que criar um projeto para trabalhar, é só clicar no botão New Project, você vai inserir o nome do seu projeto e logo em seguida, ele vai pedir para você adicionar outros e-mails caso tenha mais alguém no projeto com você, no nosso caso só ir em next, já que o seu e-mail cadastrado na sua conta já será o Owner do projeto por default.

Aqui é a parte crucial, é onde você vai criar seu cluster, se atente algumas informações, na hora de definir o nome lembre-se que ele não poderá mais ser alterado, então escolha com sabedoria no nosso caso, vamos usar toDoList, o fornecedor eu deixei a AWS mesmo, mas fica a seu critério e a região, é outro ponto importante eu recomendo colocar sempre a região, mas próxima de você no meu caso eu coloquei o Brasil, escolhi também a versão gratuita e depois disso só clicar em create.

Feito isto, você será redirecionado para essa página onde será necessário criar seu usuário com sua chave única.

Após isso será necessário colocar seu IP para conectar a seu cluster, basta clicar no botão Add My Current IP Address, que ele vai adicionar seu IP atual a lista de permitidos para acessar seu cluster.

Feito isto, parabéns, você já tem seu cluster criado para conectar a sua API.

Mas para isso agora vamos precisar de alguns dados que serão adicionados a nossas variáveis de ambiente, para conectar com o Mongo Atlas. Ao clicar em connect irá abrir essas opções:

Você irá selecionar a opção Drivers e irá abrir essa nova janela.

Nesta janela você irá copiar toda essa linha que está selecionada na imagem, lembre-se isso são os dados sensíveis da sua aplicação, por isso eu deixei oculto aqui, e você vai substituir o password pela senha que você criou, la para seu usuário acessar seu cluster, tudo isso irá ficar em suas variáveis de ambientes, eu vou estar amostrando como eu fiz aqui com minhas variáveis de ambientes, é só replicar modificando com as suas próprias variáveis do seu banco.

Seu arquivo .env, deve ficar desse jeito e agora no nosso arquivo db iremos fazer a nossa conexão com o Mongo Atlas criado.

import mongoose from "mongoose";
import { config as dotenvConfig } from "dotenv";
dotenvConfig();

export async function connect() {
  const baseUrl = `mongodb+srv://${process.env.MONGODB_USER}:${process.env.MONGODB_PASSWORD}@${process.env.MONGODB_CLUSTER_URL}/${process.env.MONGODB_DATABASE}`;
  try {
    const options: any = {};
    options.useNewUrlParser = true;
    options.useUnifiedTopology = true;
    await mongoose.connect(baseUrl, options);
    console.log("MongoDB connected sucess");
  } catch (error) {
    console.error(error);
  }
}

Feito isto, já temos a nossa chamada com o nosso banco de Dados criado, a partir do nosso método connect, que será chamado posteriormente no nosso server, para conectar nosso banco de dados com nossa aplicação.

Agora vamos criar nosso repository, que é responsável por lidar com a camada de acesso a dados. Ele fornece uma abstração sobre como os dados são armazenados e recuperados. O principal objetivo é isolar o restante do código da lógica específica do armazenamento, tornando mais fácil a troca ou atualização do mecanismo de armazenamento sem afetar o restante do sistema, para isso vamos criar nosso CRUD básico aqui dividido nos nossos métodos de buscar, criar, atualizar e deletar um toDo.

import toDo, { toDo as toDoModel } from "../model/toDo";

class ToDoRepository {
  async getAllToDos(): Promise<toDoModel[]> {
    return toDo.find();
  }

  async createToDo(toDoData: Partial<toDoModel>): Promise<toDoModel> {
    return toDo.create(toDoData);
  }

  async updateToDoData(
    toDoId: string,
    updateData: Partial<toDoModel>
  ): Promise<toDoModel | null> {
    return toDo.findByIdAndUpdate(toDoId, updateData, { new: true });
  }

  async deleteToDo(toDoId: string): Promise<void> {
    await toDo.findByIdAndDelete(toDoId);
  }
}

export default new ToDoRepository();

Criei uma classe com os métodos do CRUD e por fim exportei uma instância da classe para ser usada no meu service que vou criar agora, poderia também ter usado de outro paradigma como o funcional, porém optei nesse projeto utilizar do paradigma de classes, seguindo, vamos criar agora nosso service.

No nosso service, ele é onde a lógica de negócios da aplicação é implementada, nele que vamos chamar os nossos métodos criados no nosso repository.

import toDoRepository from "../repository";
import { toDo } from "../model/toDo";

class ToDoService {
  async getAllToDos(): Promise<toDo[]> {
    return toDoRepository.getAllToDos();
  }

  async createToDo(toDoData: Partial<toDo>): Promise<toDo> {
    return toDoRepository.createToDo(toDoData);
  }

  async updateToDo(
    toDoId: string,
    updateData: Partial<toDo>
  ): Promise<toDo | null> {
    return toDoRepository.updateToDoData(toDoId, updateData);
  }

  async deleteToDo(toDoId: string): Promise<void> {
    return toDoRepository.deleteToDo(toDoId);
  }
}

export default new ToDoService();

Após isso, já com nosso repository e service criados e a vez de criarmos nosso controller que será responsável, como intermediário entre as solicitações do usuário e o restante do sistema. Ele que vai receber as solicitações, processar os dados necessários, interagir com os serviços apropriados e decidir qual visão (ou saída) deve ser apresentada ao usuário. Para isso vamos criar nosso CRUD básico aqui agora, da seguinte maneira.

import { Request, Response } from "express";
import toDoService from "../service";

class ToDoController {
  async getAllToDos(req: Request, res: Response): Promise<void> {
    try {
      const toDos = await toDoService.getAllToDos();
      res.json(toDos);
    } catch (error) {
      res.status(500).json({ error: "Error fetching toDos" });
    }
  }

  async createToDo(req: Request, res: Response): Promise<void> {
    const { text } = req.body;

    try {
      const newToDo = await toDoService.createToDo({ text });
      res.status(201).json(newToDo);
    } catch (error) {
      res.status(500).json({ error: "Error creating toDo" });
    }
  }

  async updateToDo(req: Request, res: Response): Promise<void> {
    const { toDoId } = req.params;
    const { completed } = req.body;

    try {
      const updatedToDo = await toDoService.updateToDo(toDoId, { completed });
      res.json(updatedToDo);
    } catch (error) {
      res.status(500).json({ error: "Error updating toDo" });
    }
  }

  async deleteToDo(req: Request, res: Response): Promise<void> {
    const { toDoId } = req.params;

    try {
      await toDoService.deleteToDo(toDoId);
      res.status(204).send();
    } catch (error) {
      res.status(500).json({ error: "Error deleting toDo" });
    }
  }
}

export default new ToDoController();

Para deixar mais organizado eu utilizei alguns status code http, para que o nosso front consiga tratar essas informações.

Agora para organizar melhor nossa aplicação, vamos criar nosso arquivo de routes, onde ficarão nossas chamadas do nosso controller.

import express from "express";
import toDoController from "../controller";

const router = express.Router();

router.get("/toDos", toDoController.getAllToDos);
router.post("/toDos", toDoController.createToDo);
router.put("/toDos/:toDoId", toDoController.updateToDo);
router.delete("/toDos/:toDoId", toDoController.deleteToDo);

export default router;

Desse jeito, utilizando do Express.js do MERN, podemos criar um roteador chamado router usando express.Router(). Um roteador permite definir as rotas separadamente para modularizar o código e organizar as diferentes partes da aplicação.

Agora precisamos criar nosso server, que será nosso endpoint de nossa aplicação para chamar nossa porta e rodar ela.

Mas antes disso vamos instalar duas ultimas biblioteca para facilitar nossa vida, primeiro vamos instalar essa.

npm install cors

Isso vai resolver possíveis dores de cabeça no futuro, o pacote cors serve para lidar com políticas de mesma origem (Same-Origin Policy) em navegadores e permite que um servidor conceda permissão para que recursos em um determinado domínio sejam acessados de outro domínio. Isso é particularmente útil quando você está construindo APIs que serão acessadas por diferentes origens. Certifique-se de configurá-lo adequadamente para suas necessidades de segurança e autenticação, no nosso caso esta configuração já vai resolver.

Logo após vamos instalar essa aqui.

npm install -g nodemon

A opção -g indica que você está instalando o pacote globalmente no seu sistema, o que significa que o nodemon ficará disponível para uso em qualquer projeto, em qualquer pasta.

O nodemon é uma ferramenta que ajuda a desenvolver aplicativos com o Node.js reiniciando automaticamente o servidor toda vez que um arquivo do projeto é modificado. Isso é especialmente útil durante o desenvolvimento, pois permite que você veja as alterações imediatamente, sem precisar reiniciar o servidor manualmente a cada vez.

import express from "express";
import cors from "cors";
import { connect } from "./config/db";
import toDoRoutes from "./routes";

const app = express();
const PORT = process.env.PORT || 3001;

app.use(cors());
app.use(express.json());

connect();

app.use(toDoRoutes);

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Por último, não esqueça de alterar o endpoint, no seu package.json no main que vem por padrão index.js para no nosso caso server.ts e adicione esse comando ao nosso package.json nos seus scripts:

“start”: “nodemon src/server.ts”

E após isso execute esse comando para rodar nossa API.

npm start

Se você seguiu todo esse tutorial, sua API já vai estar rodando e conectada ao seu banco de dados deste jeito.

Agora vamos voltar na nossa aplicação no front-end que deixamos rodando e vamos testar nossas funcionalidades.

Se você seguiu tudo até aqui, creio eu que esteja funcionando perfeitamente, basta deixar tanto o servidor da API ligado e deixar sua aplicação rodando na porta 3000, e você vai ver algo como isso, já sendo possível adicionar e excluir seus toDos.

E você também pode ver seus toDos salvos no seu banco de dados lá no Mongo Atlas deste jeito.

Pronto, feito isto já temos uma aplicação totalmente funcional full-stack construído com base na stack MERN, utilizando de todas as tecnologias do acrônimo.

Eu não foquei em estilização, ou nem na parte de segurança da nossa API, como também não foquei nos testes, apenas testei na minha máquina por um cliente como o Postman para vê se todas as rotas estavam funcionando normalmente, acho que isso é assunto para outro artigo, mas sinta-se livres para usar esse exemplo como base de algum projeto e publicar em seus portifólios, pode, por exemplo, evoluir deixar a API modularizada com login e cada usuário ter seus próprios toDos salvos no banco separado, enfim ideias é o que não faltam para continuar essa aplicação.

Em outro artigo futuro irei amostrar como fazer o deploy de sua aplicação back-end, ao invés de ter que utilizar em seu localhost, toda vez ligando seu servidor.

Conclusão

A Stack MERN oferece um ambiente robusto para o desenvolvimento de aplicações web modernas e escaláveis. Ela combina a flexibilidade do MongoDB, a agilidade do Express.js, a interatividade do React e a eficiência do Node.js. Enquanto apresenta desafios de aprendizado e complexidade, os benefícios da MERN Stack são evidentes em projetos que exigem interfaces dinâmicas, escalabilidade e desenvolvimento ágil. Ao estudar essa stack, os desenvolvedores estarão bem equipados para enfrentar os desafios e demandas do desenvolvimento web, projetando uma aplicação de ponta a ponta, desde o front-end até o back-end do seu negócio, logicamente cada projeto tem sua especificação e não pode ser uma bala de prata de sempre utilizá-la para tudo, visto seus prós e contras, fica a seu critério de estudá-la ou utilizá-la em seus projetos.

Do Conceito à Implementação: Criando e Utilizando Hooks Personalizados no React

Hebert Montarroyos — Fri, 18 Aug 2023 13:08:55 +0000

Além de useState e useEffect: Desenvolva seus próprios Hooks, que Melhoram a Produtividade e a Qualidade do Código.

O React é uma biblioteca JavaScript amplamente utilizada para a criação de interfaces de usuário interativas e reativas. Uma das características mais marcantes do React é a introdução dos Hooks, que revolucionaram a forma como os componentes funcionais são construídos e gerenciados. Neste artigo, exploraremos o que são os Hooks, porque eles são importantes, como criar seus próprios Hooks personalizados e como utilizá-los para melhorar a experiência de desenvolvimento.

O que são Hooks no React?

Os Hooks ou numa tradução literal ganchos, são funções especiais que permitem que você ligue recursos de estado e comportamento aos componentes funcionais do React. Antes da introdução dos Hooks, a criação de componentes que possuíam estado e ciclo de vida complexos era mais comumente realizada através de componentes de classe, como o componentDidMount() por exemplo. No entanto, com a adoção de Hooks, é possível escrever componentes funcionais mais legíveis, reutilizáveis e fáceis de testar.

Existem diversos hooks integrados nativamente no react, eu não vou prolongar muito o assunto, pois pretendo trazer um artigo somente para isso, mas posso citar brevemente alguns como o useState, useEffect, useContext entre outros que breve irei trazer uma review de como usá-los e o que cada um faz.

O foco aqui deste artigo e falar um pouco sobre os hooks e ensinar como criar seus próprios hooks personalizáveis no react. Vou citar também, pelo meu ponto de vista, suas vantagens e desvantagens de criar seus próprios hooks.

Vantagens dos Hooks

1. Maior Legibilidade

Os Hooks permitem que você divida a lógica do componente em unidades menores e específicas, tornando o código mais legível e fácil de compreender.

2. Reutilização de Lógica

Você pode criar Hooks personalizados para encapsular lógica específica e reutilizá-los em diversos componentes, promovendo a modularidade e evitando repetição de código.

3. Facilidade de Teste

Os componentes funcionais com Hooks são mais simples de testar, uma vez que a lógica está desacoplada em unidades menores e as dependências podem ser injetadas facilmente.

4. Melhoria na Performance

O React otimiza automaticamente a renderização de componentes com base nas dependências dos Hooks, resultando em melhorias de performance.

Possíveis Desvantagens

Embora os Hooks ofereçam muitas vantagens, é importante estar ciente de suas possíveis desvantagens:

1. Curva de Aprendizado

A transição de componentes de classe para componentes funcionais com Hooks pode exigir uma curva de aprendizado para desenvolvedores que não estão familiarizados com essa abordagem.

2. Abstração Excessiva

Em alguns casos, a abstração da lógica em Hooks personalizados pode tornar o código mais complexo e difícil de entender, se não for feita de maneira cuidadosa.

3. Performance Pobre em Casos Extremos

Embora a maioria das aplicações se beneficie da otimização automática dos Hooks, casos extremos podem levar a problemas de performance se os Hooks não forem utilizados de forma adequada.

Dito isso, apontei algumas possíveis vantagens no meu ponto de vista e desvantagens, sinta-se livre para concordar ou discordar dos pontos aqui citados, vamos agora para como criar seus hooks e por que criá-los.

Criando Seus Próprios Hooks Personalizados

A criação de Hooks personalizados é uma prática poderosa que permite encapsular lógica e funcionalidade específicas para seu aplicativo.

Vamos criar primeiramente dentro de nosso projeto React, uma pasta chamada “hooks”, é uma boa convenção utilizar desse nome, mas não chega a ser um requisito.

Assim como também é uma boa prática começar ao dar o nome para seu hook de chamar de “use”, como exemplo os nativos do próprio react, useRef, etc.

No nosso caso, eu vou criar um hook personalizado de exemplo para um site de advogados. Neste cenário, um advogado pode precisar rastrear o tempo gasto em diferentes casos e atividades.

Vamos criar um Hook chamado useTimeTracker que permite ao advogado registrar o tempo gasto em uma atividade específica.

No componente useTimeTracker vamos fazer o seguinte:

import { useState } from 'react';

function useTimeTracker() {
  const [timeEntries, setTimeEntries] = useState([]);

  const addTimeEntry = (activity, hours) => {
    const newEntry = {
      activity,
      hours,
      timestamp: new Date().toISOString(),
    };
    setTimeEntries([...timeEntries, newEntry]);
  };

  return { timeEntries, addTimeEntry };
}

export default useTimeTracker;

Agora, vamos considerar como um componente de um site de advogados poderia utilizar esse Hook personalizado, para isso vamos criar dentro da nossa pasta de componentes o arquivo TimeTrackingComponent:

import React from 'react';
import useTimeTracker from '../hooks/useTimeTracker';

function TimeTrackingComponent() {
  const { timeEntries, addTimeEntry } = useTimeTracker();
  const [activity, setActivity] = React.useState('');
  const [hours, setHours] = React.useState('');

  const handleAddTimeEntry = () => {
    if (activity && hours) {
      addTimeEntry(activity, parseFloat(hours));
      setActivity('');
      setHours('');
    }
  };

  return (
    <div>
      <h2>Registro de Tempo</h2>
      <div>
        <input
          type="text"
          placeholder="Atividade"
          value={activity}
          onChange={(e) => setActivity(e.target.value)}
        />
        <input
          type="number"
          placeholder="Horas"
          value={hours}
          onChange={(e) => setHours(e.target.value)}
        />
        <button onClick={handleAddTimeEntry}>Registrar Tempo</button>
      </div>
      <div>
        <h3>Registros de Tempo</h3>
        <ul>
          {timeEntries.map((entry, index) => (
            <li key={index}>
              Atividade: {entry.activity}, Horas: {entry.hours}, Data: {entry.timestamp}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default TimeTrackingComponent;

E no nosso App, vamos chamar esse componente, da seguinte maneira:

import TimeTrackingComponent from "./components/TimeTrackingComponent"


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

export default App;

Neste exemplo, o Hook useTimeTracker encapsula a lógica de registro de tempo e gerenciamento de entradas. O componente TimeTrackingComponent utiliza esse Hook para permitir que o advogado registre suas atividades e as horas gastas em cada atividade. Isso proporciona um código mais limpo e reutilizável, além de uma experiência mais intuitiva para o usuário.

O uso de Hooks personalizados permite que a lógica de negócios seja separada dos componentes de apresentação, facilitando a manutenção, o teste e a reutilização do código. No contexto de um site de advogados, o Hook useTimeTracker poderia ser estendido para incluir recursos adicionais, como a categorização das atividades, a geração de relatórios de tempo, entre outros.

Esse código poderia ficar melhor refatorado utilizando de outras abordagens e até estilizado, porém como esse não é o foco, resolvi focar somente na criação e explicação dos hooks, fazendo tudo do modo que coloquei aqui, você terá algo assim sendo renderizado em sua tela.

Conclusão

Os Hooks no React trouxeram uma nova maneira de desenvolver componentes funcionais poderosos e reutilizáveis. Eles melhoram a legibilidade, a reutilização de lógica e a facilidade de teste dos componentes, além de promover uma experiência de desenvolvimento mais moderna e eficiente. Criar seus próprios Hooks personalizados é uma prática recomendada para encapsular lógica específica e promover a modularidade em seu código. No entanto, é importante pesar as vantagens e desvantagens para escolher a abordagem certa para cada situação.

Lembre-se de que, como qualquer ferramenta, os Hooks devem ser usados com sabedoria e discernimento para garantir que seu código seja limpo, eficiente e fácil de manter.

Além de não ter a questão se é ou não melhor que componentes de classes, apenas outra abordagem de se trabalhar, breve também pretendo trazer um artigo falando um pouco da abordagem de Classes no React, no mais é isso e aproveitem e utilizem bastante como bem desejar em seus códigos.

Como contribuir com projeto open source e apoiar a comunidade

Hebert Montarroyos — Thu, 10 Aug 2023 13:29:31 +0000

Navegando no Universo Open Source do GitHub, Do Fork ao Merge

Em um mundo cada vez mais conectado e orientado pela colaboração, contribuir para projeto open source no GitHub se tornou uma maneira empolgante e acessível de participar ativamente do desenvolvimento de software. E para quem está se perguntando o que é Open Source?

Eu lhe respondo com o seguinte, os sistemas de Código Aberto(Open Source) são repositórios que fornecem acesso ao código-fonte, permitindo que membros da comunidade contribuam, mantenham, corrijam, criem variações e compartilhem, com a condição de que suas modificações também permaneçam acessíveis como código aberto.

Neste artigo eu vou trazer o básico de como colaborar com algum projeto open source, com um exemplo de um projeto que colaborei, além de após ter feito o fork do projeto sempre deixar ele atualizado para novas atualizações dá master principal do projeto em questão.

1. Escolha o projeto que ira contribuir, e faça um fork dele

Eu vou dar um exemplo prático de um repositório que colaborei recentemente que é um repo, onde cataloga uma, variedades de recursos do front end como uma espécie de enciclopédia, seja libs, linguagens, termos entre outros, vou deixar aqui os devidos créditos ao Zhu Liang, dono do repositório e também deixo o link dele, caso vocês queriam colaborar, acho super valido.

Não esquece de deixar a estrela no repositório escolhido, que isso ajuda bastante como apoio para o criador ;)

Após você escolher qual projeto open source irá colaborar, é só fazer o fork dele e você será levado para outra tela de confirmação, onde ele irá fazer uma cópia desse repositório para os seus repositórios onde você poderá agora trabalhar nele.

2. Faça um clone do projeto forkado para sua máquina

Após isso você verá que o repositório já aparece como um dos seus repos, no seu perfil, ele acabou de fazer uma cópia dele através do fork. Feito isso você pode escolher de qual maneira irá clonar o repositório para sua máquina e mandar ver.

Já com o projeto em sua máquina é uma boa prática você criar uma branch para trabalhar nessa nova atualização que você irá fazer, respeitando as boas práticas do GitFlow, sem sujar a main ou master principal da sua aplicação.

git checkout -b NOME_DA_NOVA_BRANCH

3. Após finalizar suas atualizações abra um Pr para o repositório original

Após ter finalizado tudo que você tinha que fazer, faça seu commit e logo em seguida o push para seu repositório forkado e logo em seguida na interface do github, você ira escolher a opção de Abrir um novo Pr.

Ao clicar sobre essa opção é muito importante você verificar qual a base está sendo comparada e de qual branch elá e, feito isto, estando tudo certo, só clicar em Create pull request.

O resultado ficará assim, não precisa se preocupar com os revisores, pois o dono do repositório será notificado, assim como você também consegue ver todos os prs abertos para esse repo no canto superior, como na imagem abaixo.

4. Após esperar e ter seu Pr aprovado, agora é a vez de atualizar seu fork com as atualizações da branch principal do projeto

Estando tudo ok, com seu Pr, muito provável que ele seja aprovado e consequentemente mergeado como foi o meu acima.

Após isso você já consegue ver seu nome como colaborador do projeto em questão na página inicial dele, ajudando contribuir com uma comunidade maior e melhor, sempre ajudando a crescer mais ainda.

Após isso é interessante você deixar seu fork atualizado, com a branch principal do repositório original.

Na sua máquina vá para a branch principal na pasta do seu repositório, seja ela a master ou a main e rode os seguintes comandos:

Se você ainda não tiver adicionado o repositório original como um remote, esse comando fará exatamente isso.

git remote add upstream URL_DO_REPOSITÓRIO_ORIGINAL
Após isso, certifique de estar na sua branch principal, e use o seguinte comando para, buscar as mudanças da branch principal do repositório original.

git fetch upstream
Após buscar as mudanças, você pode mesclar as alterações da branch principal do repositório original na sua branch principal usando o seguinte comando:

git merge upstream/master
Se houver conflitos entre as suas alterações na branch principal e as alterações do repositório original, o Git informará. Resolva esses conflitos manualmente, faça um novo commit e continue o processo.

E por último, após mesclar as alterações do repositório original na sua branch principal local, você precisará enviar essas alterações para o seu fork no GitHub usando o seguinte comando:

git push origin master
ou se a sua principal for a main é só substituir pelo nome dá master.

Agora você pode criar novas branchs, a partir da sua principal e continuar colaborando como novas features, fix entre outros para o projeto original, sempre repetindo esses mesmo passos e deixando sempre o seu fork, atualizado.

Resumo

Bom, feito isso você já poderá se considerar como um colaborador open source, e partir para muitos outros projetos ajudando ainda mais a comunidade a crescer e se tornar melhor. Lembrem-se sistemas, open source nem sempre precisa ser códigos, assim como o exemplo que eu trouxe aqui não foi, você pode ver uma documentação que precisa ser alterada, ou um assets de melhor qualidade para aquele projeto, entre infinitas possibilidades, esteja de mente aberta e boa força de vontade para colaborar, no mais é isso, parabéns pela escolha e vamos que vamos.

Explore agora 10 APIs gratuitas para dar vida às suas ideias geek

Hebert Montarroyos — Wed, 02 Aug 2023 11:48:14 +0000

Dê um Upgrade nos Seus Projetos Geek com Essas 10 APIs Gratuitas!

O mundo Geek é uma verdadeira galáxia repleta de paixões e interesses, compartilhados por milhões de entusiastas em todo o mundo. Dos amantes de jogos e animes aos aficionados por RPGs e board games, essa comunidade fervorosa busca constantemente novas formas de aprofundar suas experiências nesses universos fantásticos. É justamente para satisfazer essa sede de conhecimento e criatividade que neste artigo eu trago uma seleção especial de 10 APIs gratuitas, capazes de proporcionar aos desenvolvedores e fãs da cultura Geek uma imersão ainda mais profunda em seus temas favoritos.

Eu mesmo já fiz uso, de quase todas as APIs listadas aqui em meu projeto, e as que ainda não fiz eu já testei aqui no meu cliente, fazendo uma chamada, só para ver seu retorno e futuramente pretendo implementar em um projeto real.

Lembrando a todos que essa lista, até o atual momento da publicação desse artigo, está funcionando, porém, não me responsabilizo caso algum dos links para alguma das APIs listadas pare de funcionar, pois cada uma é mantida por uma equipe independente, dito isto vamos a nossa lista.

1. Marvel API

Vamos abrir a lista com essa maravilhosa API da Marvel, o qual já utilizei em alguns de meus projetos, a utilização da Marvel API é gratuita, porém, é necessário obter uma chave de acesso (API key) para poder fazer as requisições e ter acesso aos dados. Ao oferecer esses recursos valiosos, a Marvel API se torna uma ferramenta essencial para desenvolvedores criarem aplicativos, sites ou projetos relacionados ao vasto universo da Marvel, proporcionando uma experiência imersiva e enriquecedora para os fãs de todas as idades.

Essa API de todas as listadas é a única que é oficial dos próprios criadores sendo mantida pela própria Disney, ela foi desenvolvida para fornecer aos desenvolvedores e fãs acesso a uma vasta gama de recursos relacionados ao universo da Marvel. Através dela, é possível obter informações detalhadas sobre personagens, quadrinhos, séries, imagens e capas, eventos e criadores associados à Marvel, é o principal disso é que ela e atualizada constantemente com as últimas hqs ou series lançadas do universo Marvel, vale muito a pena testar.

2. Kitsu API

Essa outra API não menos importante, é a Kitsu API, criada para fornecer acesso a uma ampla gama de informações relacionadas a animes e mangás. Ela é oferecida pela plataforma Kitsu, que é uma comunidade online dedicada aos fãs de animações japonesas e quadrinhos.

Essa API oferece uma série de recursos valiosos que permitem aos desenvolvedores e fãs obterem detalhes sobre animes, mangás, personagens, entre outros. Utilizando o formato JSON:API, a Kitsu API segue um padrão bem estruturado que facilita a integração com outros aplicativos e sistemas.

A utilização da Kitsu API é gratuita, porém também requer uma chave de acesso (API key) para efetuar as requisições e acessar os dados. Com a Kitsu API, desenvolvedores podem criar aplicativos, websites e ferramentas que ampliam a experiência dos fãs de animes e mangás, proporcionando uma plataforma dinâmica e interativa para explorar, compartilhar e descobrir novos conteúdos relacionados a todo esse universo dos animes.

3. Poké API

Essa API é outra que já utilizei bastante também, a PokeAPI, foi desenvolvida para fornecer informações abrangentes sobre o mundo dos Pokémons.

Essa API oferece acesso a dados detalhados sobre os Pokémon, suas habilidades, tipos, movimentos, imagens de cada pokémon, jogos e muito mais.

Utilizando a PokeAPI, desenvolvedores e fãs podem explorar os diversos aspectos desse universo e criar aplicativos, como a maravilhosa pokédex marca icônica do anime, manga e jogos que lista cada pokémon existente nesse mundo.

Atualmente está na sua versão V2, a qual em sua versão beta até o momento já, tem suporte para GraphQL, e conta com atualizações constantes sempre que lança uma nova geração de pokémons. Segundo os próprios desenvolvedores dessa API em seu github oficial eles relataram que recebem mais de 330 milhões de solicitações por mês, bastante coisa hein, por isso vou deixar o link aqui caso vocês queiram, para ajudar como colaborador o projeto fazendo uma pequena doação.

4. The Rick and Morty API

Outra API de fácil uso, com um retorno muito legal para os fãs, a Rick and Morty API foi desenvolvida para proporcionar uma imersão no incrível universo da famosa série de animação “Rick and Morty”. Essa API oferece acesso a uma variedade de informações detalhadas sobre os episódios, personagens, locais, status, imagens e muito mais, presentes nesse universo.

Utilizando essa API , desenvolvedores e fãs têm a oportunidade de explorar a riqueza desse universo animado e criar aplicativos, sites e projetos que enriquecem a experiência dos espectadores e aficionados de “Rick and Morty”.

Atualmente ela já conta com suporte a GraphQL, além de ser bem performática, toda paginada, costuma trazer até 20 itens por página. Até o momento essa API tem cadastrado 826 personagens em sua base, um número bem grande, contando desde personagens e lugares bem conhecidos até, personagens que apareceram somente uma vez na série.

Para quem utiliza o Insomnia ou o Postman como seus clientes vou deixar as coleções respectivas para eles, dessas chamadas, para começar a usar a API com esta coleção Postman criada por loopDelicious . E caso opte pelo Insomnia, você pode usar esta coleção Insomnia criada por filfreire, respectivos créditos aos autores.

5. Chuck Norris.io

Outra API bem famosa no mundo Dev é essa, a Chuck Norris.IO criada para proporcionar acesso a uma das figuras mais icônicas e lendárias da cultura pop: o lendário Chuck Norris. Essa API é dedicada a fornecer fatos e piadas humorísticas sobre Chuck Norris, explorando as lendas e mitos que cercam esse famoso artista marcial e ator.

Ao utilizar a Chuck Norris.IO API, desenvolvedores e fãs podem desfrutar de uma série de curiosidades engraçadas sobre Chuck Norris, que se tornou uma sensação na internet devido aos chamados “Chuck Norris Facts”. Essas piadas, frequentemente exageradas e absurdas, retratam Chuck Norris como uma figura invencível e superpoderosa.

A utilização dessa API é gratuita e não requer autenticação ou chave de acesso, tornando-a acessível para todos os desenvolvedores e fãs de Chuck Norris.

Com essa API é possível fazer aquele app para zoar a galera legal, como, por exemplo, uma das chamadas dessa API traz algum fato aleatório sobre Chuck Norris como esse: “Chuck Norris não tem latência de disco porque o disco rígido sabe se apressar.”, lembrando que todos os “Chuck Norris Facts” estão em inglês, vale a pena conferir, certamente irá proporcionar momentos de diversão e descontração para todos que a utilizarem.

6. Deck of Cards An API

Essa API é maravilhosa para quem quer aprender conceitos bem importantes sobre programação como conceitos de filas, pilhas, etc. Através dela você pode criar qualquer variação de jogos de cartas de baralho, como buraco, poker, paciência entre outros.

A Deck of Cards API fornecer acesso a um baralho de cartas virtual e todas as suas funcionalidades. Essa API permite que desenvolvedores criem aplicativos, jogos e projetos interativos que envolvam a manipulação e exibição de cartas de baralho.

Com ela, é possível simular um baralho completo de cartas, embaralhar, distribuir e realizar diversas operações relacionadas ao mundo dos jogos de cartas de forma programática.

A utilização da Deck of Cards API é gratuita e não requer autenticação ou chave de acesso.

Através dela é possível criar uma ampla variedade de jogos de cartas, soluções para cassinos online, ferramentas de treinamento de poker e muito mais, tudo de forma programática e interativa. A Deck of Cards API permite trazer a diversão dos jogos de cartas para a era digital, proporcionando aos desenvolvedores uma ferramenta poderosa e versátil para criar experiências únicas e envolventes para os jogadores, eu que cresci com meu tio jogando o famoso paciência spider que vinha no windows, depois vou fazer uma aplicação para ele,espero que ele curta ;) .

7. SWAPI — The Star Wars API

Essa API é bem famosa no mundo Dev, ainda, mas na comunidade fã de Star War, a Star Wars API (SWAPI) oferece acesso a uma ampla coleção de dados relacionados ao universo de Star Wars. Desenvolvida por fãs e entusiastas da franquia, a SWAPI disponibiliza informações detalhadas sobre filmes, personagens, planetas, naves, espécies e muito mais.

Com a SWAPI, os desenvolvedores e fãs de Star Wars têm a oportunidade de explorar e interagir com dados relevantes das séries de filmes e do universo expandido de Star Wars, que cativam a imaginação de milhões de pessoas ao redor do mundo. Também não necessita de chave de autenticação ou chave de acesso para usar.

Um problema que acabei encontrando ao utilizá-la, é sobre a demora dos dados, visto que é uma API gratuita, tem muita gente utilizando, então seus end points costumam demorar um pouco.

Uma solução para isso através do React é utilizar do Context API, visto que os dados dos filmes são fixos e não serão alterados com os lançamentos de novos, você pode chamar uma vez essa API e já deixar salvo através do Context em uma espécie de cache em sua aplicação.

Vou deixar o link do meu repositório no github em que fiz uma aplicação para trazer as famosas intros dos textos, logo no começo de cada filme da saga Star Wars, marca registrada da franquia.

Outro ponto é que até o momento desse artigo e quando eu fiz a minha aplicação os últimos filmes lançados não estavam ainda no banco dessa API, então tive que fazer uma espécie de mock na minha aplicação para trazer os intro text desses filmes, também outro ponto a salientar é que essa API até o momento só traz informações sobre os personagens, filmes etc.

E não traz nenhuma especie de imagem tendo que ou buscar na internet, ou usar alguma outra API, para isso a qual eu indico a IMDb API, porém, como no meu caso tinha que ter uma chave de acesso e outros fatores, para minha aplicação, por ser apenas dos pôsteres eu resolvi utilizar de outro meio, mas vale a pena dá uma olhada nessa API, que também é bem interessante, deixo essa menção a ela aqui.

8. D&D 5e API

Como amante de RPG e mestre há anos, não poderia deixar de fora dessa lista essa API, que descobri recentemente, maravilhosa para quem curte RPG adepto do sistema Dungeons & Dragon 5° edição.

A D&D 5e API, foi criada para fornecer acesso a informações detalhadas sobre o mundo do jogo de RPG (Role-Playing Game) Dungeons & Dragons 5ª Edição (D&D 5e). Com ela você consegue buscar dados sobre as mecânicas do jogo, incluindo informações sobre classes, raças, magias, habilidades, equipamentos e muito mais.

Só Recapitulando, Dungeons & Dragons 5ª Edição é um dos jogos de RPG mais populares e conhecidos do mundo, onde os jogadores assumem o papel de personagens em um universo de fantasia e colaboram para viverem emocionantes aventuras. A D&D 5e API oferece um vasto conjunto de informações, para facilitar a criação de ferramentas, aplicativos e projetos relacionados ao jogo.

Para aquele mestre dev assim como eu, que curte criar projetos, é um prato cheio para desenvolver uma aplicação para sua mesa de RPG, garanto que seus jogadores vão amar.

Com suporte a GraphQL, a lista das coisas que você pode fazer com essa API é enorme, desde geração aleatória de nomes, até um app que gera itens mágicos aleatórios por dungeons, etc. Só tirar suas ideias do papel agora mesmo, assim como algumas citadas anteriormente, ela não necessita de chave de autenticação ou chave de acesso.

9. Magic: The Gathering — Developers

Após ter falado sobre RPG, não podia deixar de fora o bom e velho Magic. Acho meio difícil alguém do meio geek, não conhecer Magic, mas lá vai um breve resumo, Magic: the Gathering ou simplesmente Magic, é um jogo de cartas colecionáveis, no qual os jogadores utilizam de um baralho de cartas construído conforme o seu modo individual de jogo para tentar derrotar o baralho adversário, existem vários tipos de deck, cada qual para seu tipo de jogador, podendo ter várias combinações possíveis.

A Magic: The Gathering API traz consigo uma série de informações detalhadas sobre o mundo de Magic, como os dados sobre as cartas, conjuntos, tipos, cores, artistas e muito mais.

Sua documentação é extramente detalhada assim como a D&D 5e API, trazendo vários detalhes de cada carta de seu respectivo deck, a API é totalmente paginada retornando um máximo de 100 cards por chamada.

A API também suporta buscas e filtragens, permitindo que os usuários encontrem facilmente as informações específicas que desejam, como tipo de deck, ano lançado, etc.

Ainda conta com uma vasta comunidade de devs, pelo Discord segue o link caso interessa em fazer parte e contribuir com essa maravilhosa comunidade.

10. Valorant-API

E para fechar com chave de Ouro, não podia deixar de fora essa API, que mesmo não sendo oficial está de parabéns, a comunidade caprichou demais nela.

Para quem não conhece ou nunca jogou, Valorant é um jogo competitivo FPS, distribuído pela RIOT Games, em que os jogadores assumem o papel de agentes com habilidades únicas, participando de partidas em equipes, abre aspa, no momento desse artigo eu dei uma pausa para jogar uma partida, fecha aspas ;).

A Valorant API, traz consigo dados detalhados de todo o universo do jogo, a comunidade se empenhou nisso, tendo atualizações constante como, por exemplo, quando lança algum agente novo no jogo pela Riot, logo em seguida a API já está atualizada.

Essa API traz consigo informações detalhadas sobre agentes, armas, mapas, partidas, além de várias imagens de ótima qualidade de cada item, agente e muito mais, o que facilita em muito na hora de desenvolver um aplicativo agradável visualmente, só usando essa API para se comunicar.

Alguns pontos fortes de API e que ela permite trazer estatísticas de partidas, incluindo placares, histórico de partidas e informações sobre vitórias e derrotas, além de ranking e classificação, permitindo acompanhar o desempenho em partidas competitivas.

A API permite também suporta recursos de busca e filtragem, facilitando a localização de informações específicas.

Também não necessita de chave de autenticação ou chave de acesso, deixando mais rápido ainda, na hora de implementar.

A Valorant API é uma ótima oportunidade para a comunidade de jogadores e desenvolvedores explorarem ainda mais o emocionante mundo do jogo Valorant, aprofundando-se nas táticas e nas mecânicas desse jogo competitivo e repleto de ação.

Resumo

Existem outras, milhares de APIs assim como essas que eu trouxe aqui, que facilitam ainda, mas o desenvolvimento da galera geek, e outras que continuam sendo desenvolvidas até o momento desse artigo.

Vale lembrar que todos os links e descrições como modo de uso, funcionalidades e afins que informei nesse artigo, estava funcionando e testado enquanto eu publiquei ele, não me responsabilizo caso alguma API se torne paga, mude suas funcionalidades ou até precise de chave de autenticação agora, etc.

No mais é isso, aproveitem e já comece a tirar aquela ideia do papel, com toda certeza irá gerar projetos maravilhosos com cada uma daqui.

Polished: Simplificando a Manipulação de Estilos CSS em Projetos React

Hebert Montarroyos — Mon, 31 Jul 2023 10:39:06 +0000

Simplifique sua Abordagem de Estilização com o Polished em Componentes React.

Ultimamente tenho utilizado este camarada em meus projetos pessoais e gostaria de falar um pouco sobre o polished, numerando o que achei como positivo e negativo de utilizar essa lib, que tem sido um grande utilitário dentro das minhas aplicações.

Polished é uma biblioteca JavaScript que oferece uma série de funções utilitárias para trabalhar com estilos CSS de maneira mais eficiente e prática. Neste artigo, vou apontar suas vantagens e desvantagens pela minha perspectiva, fornecendo exemplos de código e usos para demonstrar como ele pode ser útil. Além disso, irei trazer o problema da comunidade que o Polished se propõe a resolver.

Essa biblioteca é muito apreciada pela comunidade por sua simplicidade e funcionalidades úteis. Se você está trabalhando em projetos React e CSS-in-JS, o Polished pode ser uma ótima adição para aprimorar seus estilos e tornar seu código mais elegante, vale lembrar que ela é mantida pela mesma comunidade que mantém o Styled-Components, outra lib excelente para quem trabalha com CSS-in-JS, para quem não conhece vale muita a pena dá uma olhada.

Vantagens do Polished

Sintaxe simplificada: O Polished permite escrever estilos CSS em JavaScript o famoso CSS-in-JS, de forma mais concisa e legível, evitando a necessidade de strings complexas de CSS. Por exemplo, para definir uma cor em CSS, normalmente escreveríamos algo assim:

Com Polished, podemos usar uma função utilitária para obter o mesmo resultado:

Manipulação avançada de cores: A biblioteca oferece uma série de funções para manipular cores de forma mais avançada, como criar tons, sombras e muito mais. Essas funcionalidades são extremamente úteis para criar designs mais atraentes e acessíveis, como, por exemplo, a função darken que escurece a cor em 20% desse jeito:

Compatibilidade com CSS-in-JS: O Polished é altamente compatível com bibliotecas de CSS-in-JS, como styled-components. Ele pode ser facilmente integrado a essas bibliotecas para estender suas funcionalidades e tornar a estilização mais dinâmica.

Melhor legibilidade do código: Com o Polished, é possível criar estilos mais legíveis e reutilizáveis, melhorando a manutenção do código e tornando-o mais organizado.

Desvantagens do Polished

Mais uma dependência: Adicionar o Polished ao projeto significa adicionar mais uma dependência, o que pode aumentar o tamanho do pacote final e potencialmente causar impactos negativos na velocidade de carregamento.

Curva de aprendizado: Se os devs do time não estão familiarizados com a lib, pode ser necessário um tempo adicional para aprender a usar suas funcionalidades e entender suas nuances.

Como utilizar o Polished em seus projetos

Instale a biblioteca polished usando o npm ou o yarn.

npm install polished

yarn add polished

Nesse exemplo em específico vou utilizar em conjunto uma lib CSS-in-JS, o Styled-Components.

Para instalar o Styled-Components faça o seguinte

npm install styled-components

yarn add styled-components

Digamos que estamos criando um componente React com Styled-Components e queremos estilizar um botão com um gradiente de cor usando o Polished:

Criando um componente Button em gradiente no React via Styled-Components em conjunto com o Polished.

Pronto, a partir disso você já consegue importar ele em alguma view do seu projeto e utilizar da maneira que desejar, ficando algo assim:

Métodos populares do Polished

Para finalizar vou citar alguns dos métodos, mas utilizados dessa lib, facilitando o reuso em outros lugares.

rgba:

A função rgba é usada para definir cores com transparência. Ela recebe quatro parâmetros: os valores de vermelho, verde, azul e alfa (transparência) em uma escala de 0 a 1.

Define um vermelho semi-transparente.

lighten e darken:

As funções lighten e darken permitem ajustar a luminosidade de uma cor, tornando-a mais clara ou mais escura, respectivamente. Isso pode ser útil para criar efeitos de destaque ou sombreamento.

O lighten torna o azul mais claro em 20% enquanto o darken torna o azul mais escuro em 20%.

radialGradient:

Assim como linearGradient, a função radialGradient permite criar gradientes radiais. Ela também aceita o objeto colorStops, mas a direção não é necessária para esse tipo de gradiente.

Cria um radial gradiente de cores utilizando o vermelho e azul.

transparentize:

A função transparentize permite tornar uma cor mais transparente, ajustando o valor alfa. Isso pode ser útil para criar efeitos de sobreposição ou mistura de cores.

Torna o vermelho 50% transparente.

Resumo

O Polished foi criado para resolver o problema de simplificar a manipulação e escrita de estilos CSS em JavaScript. Ele oferece funções utilitárias que permitem trabalhar com cores, sombras e outras propriedades CSS de maneira mais fácil e eficiente. Com sua sintaxe simplificada e compatibilidade com CSS-in-JS, o Polished ajuda a melhorar a legibilidade do código e a criar estilos mais sofisticados e dinâmicos, proporcionando uma experiência de desenvolvimento mais agradável. Embora seja uma adição útil para muitos projetos, é importante pesar as desvantagens, como a introdução de mais uma dependência, antes de decidir usá-lo em um projeto específico, fique a vontade para usar do jeito que desejar em seus projetos.