Forem: NuryCaroline

Sites, Newsletters e Podcasts que todo dev deveria conhecer

NuryCaroline — Fri, 13 Sep 2024 18:56:48 +0000

Olá!

Ao longo dos anos, descobri diversos sites e podcasts incríveis que me ajudaram muito nessa jornada. Por isso, resolvi compartilhar essa lista com vocês, na esperança de que ela possa ser útil para quem também busca conhecimento nessa área.

Sites

Podcast

E aí, gostaram da lista? Quais são os seus sites e podcasts preferidos?

Compartilhem nos comentários! E se você conhece alguém que possa se beneficiar dessas dicas, não deixe de compartilhar este post.

Otimizando Custos: Desligamento do RDS na AWS

NuryCaroline — Tue, 16 Apr 2024 18:45:08 +0000

Em nosso ambiente de desenvolvimento, contamos com o banco de dados RDS - Aurora PostgreSQL hospedado na AWS para gerenciar nossos dados de forma eficiente. No entanto, percebemos recentemente que manter o RDS ativo continuamente estava impactando consideravelmente nossos gastos mensais na nuvem. Para enfrentar esse desafio, decidimos implementar uma solução simples: programar o desligamento do RDS após as 18h e sua reinicialização às 9h do dia seguinte. Essa medida básica me resultou em uma economia mensal de $40.

Passo a Passo: Configurando o Desligamento Automático do RDS

Criando uma Permissão

a. Navegue até o IAM

b. No sub menu, acesse Policies

c. Clique em Create Policy:

d. Em Policy editor coloque, e clique em Next:

 {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "rds:Describe*",
                "rds:Start*",
                "rds:Stop*",
                "rds:Reboot*"
            ],
            "Resource": "*"
        }
    ]
}

e. Clique em Create policy

f. Com a policy criada, no sub menu acesse Roles
g. Clique em Create Role

h. Escolha a opção Custom trust policy, e clique em next

i. Selecione a permissão criada anteriormente, e clique em next.

j. Confirme os dados e clique em Create role

k. Navegue até o Systems Manager

Criando associação

a. No submenu, acesse: Gerenciador de estado e clique em Create association:

b. O primeiro campo é o nome que gostaria de dar a associação. Ex: StopRds
c. Na seção Document, busque por AWS-StartStopAuroraCluster

d. Na seção Input parameters, preencha o nome do cluster rds que deseja iniciar, e a role que criamos no passo 2

e. Na seção Specify schedule, vamos configurar o horário que a ação seja executada, considere o horário UTC.

f. Por fim, clique em Create Association

Repita o passo 5, mudando o passo d. para stop na seleção do action

Com essas configurações em vigor, seu RDS será automaticamente desligado às 18h e reiniciado às 9h todos os dias, proporcionando economia de recursos e redução de custos na AWS.

Caso necessite executar a ação imediatamente, você pode fazê-lo na lista de Associações.

Espero que este guia seja útil para otimizar seus custos na AWS enquanto mantém a eficiência operacional. Se você tiver alguma dúvida ou quiser compartilhar sua experiência com essa dica, sinta-se à vontade para deixar um comentário abaixo. Estou aqui para ajudar!

Obrigado por ler.

Explorando o Firebase: Uma Plataforma Poderosa para Desenvolvimento de Aplicativos

NuryCaroline — Wed, 27 Mar 2024 11:22:38 +0000

Introdução ao Firebase

O Firebase é uma plataforma de desenvolvimento de aplicativos que oferece uma gama de ferramentas para criar e aprimorar aplicativos e jogos amados pelos usuários. Com o suporte do Google e a confiança de milhões de empresas em todo o mundo, o Firebase simplifica o desenvolvimento de infraestrutura e backend, proporcionando uma variedade de funcionalidades essenciais para aplicativos, como autenticação de usuários, armazenamento de arquivos e análises.

Principais Características

Backend como serviço (BaaS): Simplifica a infraestrutura e o backend, permitindo que os desenvolvedores se concentrem na criação de recursos para seus aplicativos.
Versão gratuita com escalabilidade: Comece sem a necessidade de adicionar um cartão de crédito, com opções de migração de planos conforme o crescimento do aplicativo.
Suporte multiplataforma: Disponível para desenvolvimento em web, mobile e desktop.
Agilidade no desenvolvimento: Facilita o desenvolvimento de soluções com implementação rápida e eficiente.

Ferramentas de desenvolvimento

RN Firebase

O RN Firebase permite a integração do Firebase com aplicativos React Native, oferecendo pacotes modulares para instalação apenas dos recursos necessários.

Saiba mais: React Native Firebase | React Native Firebase

Firebase Cli

A Firebase CLI simplifica o desenvolvimento e o gerenciamento de projetos Firebase diretamente na linha de comando.

Instalação

npm install -g firebase-tools

Testar

firebase emulators:start --only firestore --project [ID PROJETO]

Ao abrir o link http://127.0.0.1:4000/firestore, deve mostrar interface de dados.

Cloud Firestore

O Cloud Firestore é um banco de dados NoSQL de documentos projetado para armazenar, sincronizar e consultar dados em aplicativos móveis e da web em escala global.

Recursos e Estrutura

Flexibilidade: Armazena dados em documentos organizados em coleções, permitindo consultas expressivas.
Atualizações em tempo real: Sincroniza dados em dispositivos conectados e oferece suporte off-line com cache de dados.
Estruturação de dados: Utiliza uma estrutura JSON para documentos e coleções.

Documentos

Tipos possíveis: boolean, int, float, string, arrays, datas e null

https://firebase.google.com/docs/firestore/manage-data/data-types?hl=en

{
    “chave”: “valor”,
    “chave”: “valor”,
    “chave”: “valor”,
}

Coleções

São conjuntos de documentos.

{
    "[ID]": {
        “chave”: “valor”,
        “chave”: “valor”,
        “chave”: “valor”,
    },
    "[ID]": {
        “chave”: “valor”,
        “chave”: “valor”,
        “chave”: “valor”,
    }
}

Realtime Database vs. Cloud Firestore

Consulte a documentação para entender qual banco de dados atende melhor às necessidades do seu projeto: Firebase Documentation

Emulador Firebase

O emulador Firebase replica com precisão o comportamento dos serviços do Firebase, permitindo testes sem afetar os dados de produção.

Cloud Storage

O Cloud Storage para Firebase oferece armazenamento de objetos simples, avançado e econômico, projetado para escalabilidade.

Recursos e Utilização

Operações confiáveis: Garante a retomada automática de operações interrompidas.
Segurança integrada: Integrado ao Firebase Authentication para garantir a segurança dos arquivos.
Alta escalabilidade: Projetado para lidar com grandes volumes de dados.

Autenticação

O Firebase Authentication simplifica o desenvolvimento de sistemas de autenticação seguros, oferecendo suporte a diversos métodos de login, como e-mail/senha, autenticação por telefone e login social.

Custos e Outras Features

Consulte os preços do Firebase e explore outras funcionalidades interessantes, como Performance, Análises, Crashlytics, Test Lab, Cloud Messaging, Remote Config, Functions e Machine Learning.

Saiba mais: Firebase Pricing

Tem alguma dúvida ou curiosidade?

Quer saber mais sobre o Firebase ou tem alguma pergunta sobre as ferramentas mencionadas? Deixe seu comentário abaixo! Estou aqui para ajudar e adoraria saber o que você está pensando. As melhores conversas começam com uma pergunta, então não hesite em compartilhar suas dúvidas! Mal posso esperar para ler seus comentários! 🚀

Github Projects

NuryCaroline — Wed, 20 Mar 2024 11:30:11 +0000

Introdução

O Github Projects é uma ferramenta poderosa para planejar e acompanhar o progresso dos seus projetos diretamente no Github. Funciona como um quadro kanban integrado ao seu repositório, onde os cards estão diretamente ligados às suas Issues e Pull Requests.

Vantagens do Github Projects

Avaliação Básica do Desempenho: Permite medir de forma básica a performance das entregas.
Integração com Issues e Pull Requests: Os cards estão vinculados diretamente às suas Issues e Pull Requests, facilitando o acompanhamento do desenvolvimento.
Visualização dos Arquivos Alterados: Ao visualizar um card, é fácil encontrar os arquivos alterados para a implementação.
Atribuição ao Responsável: Possui vínculo com o usuário responsável pela implementação.
Campos Customizados: Oferece a possibilidade de criação de campos customizados nos cards para uma melhor organização.

Guia Passo a passo

Criando um projeto

Acesse a aba "Projetos" em seu perfil.

Selecione um template de início, escolhendo entre Tabela ou Quadro. Recomendamos o modelo de Quadro pela sua visualização em cards.

Até então é um quadro como em qualquer outra ferramenta e os cars podem ser inseridos clicando em Add item ou como atalho command + space (Mac).

Criando campos customizados

É possível criar campos para ajudar na organização, analise da sprint e de vários projetos. Para o meu quadro criei um campo para dizer sobre qual projeto é o card.

Acesse as configurações do projeto.

Crie um novo campo, como por exemplo "Projeto" e as possíveis opções, para melhor organização e análise.

Voltando no board e selecionando um card, esse novo campo chamado Project, aparece nas configurações do card.

E também aparece no board com o projeto selecionado para o card.

Criando uma issue

No card desejado, clique no botão para criar uma Issue.
Selecione o repositório relevante.

Criando um Pull Request

No card, utilize o atalho para abrir uma Issue.

Na página da Issue, crie ou vincule uma branch.

Como para implementar esse layout eu preciso iniciar o react native, vou separar isso em uma branch de start e vou criar outra para a implementação do layout

Após feito push da criação do react native, na aba Pull Request, aparece uma sugestão de criação.

Após preencher o que você fez e confirmar, vai ter uma PR como esta.

No seu card mostra um link para a PR.

Configurações Automáticas

O Github Projects oferece opções de automação para otimizar o workflow, como mover automaticamente um card para a coluna "Concluído" quando uma Issue ou Pull Request é fechada.

Conclusão

Este tutorial apresentou as funcionalidades básicas do Github Projects, uma ferramenta essencial para o gerenciamento eficiente de projetos no Github. Você já utilizava essa ferramenta? Compartilhe suas dicas nos comentários!

Dashboard - Validações e formatação

NuryCaroline — Tue, 22 Feb 2022 18:23:17 +0000

Campos de data e hora

Existem vários tipos de inputs como date, time, tel, email que modificam o formato do input ( cada navegador tem uma interface diferente) e deixam o HTML mais semântico.

Para adicionar uma nova task temos os campos Data e Hora:

src/components/ModalFormTasks/index.js:

<div>
 <label>
   Date
   <input type="date" onChange={e => setDate(e.currentTarget.value)} />
 </label>

 <label>
   Hour
   <input type="time" onChange={e => setHour(e.currentTarget.value)} />
 </label>
</div>

E para dar uma 'descolada' do texto dos campos na lateral, vamos dar um espacinho nesses inputs:

src/components/ModalFormTasks/styles.js:

label {
...
    input[type=time],
    input[type=date] {
      padding-left: 5px;
    }
...
}

Toda as modificações acima podem ser encontradas aqui

Obrigando o preenchimento de todas as informações

Hoje temos um problema, que se o usuário não preencher as informações, mesmo assim estamos criando uma task, e assim deixando a task em branco. Para resolver isso, sempre que o usuário não preencher as informações vamos mostrar um alerta, para lembra-lo.

Uma maneira simples de fazer isso é verificando se os valores estão preenchidos antes de adicionar uma nova tarefa, e caso não estejam, mostramos um alerta:

src/components/ModalFormTasks/index.js:

function handleSaveTask() {
    if ( title && description && date && hour && responsable && status) {
   handleAddTask({
     title,
     description,
     date,
     hour,
     responsable,
     status,
   })
   onClose()
 } else {
   alert('Preencha todos os campos.')
 }
}

Toda as modificações acima podem ser encontradas aqui

Dashboard - Criando Task

NuryCaroline — Thu, 10 Feb 2022 11:13:17 +0000

Adicionar um botão fechar no modal

Adicionar o botão no componente ModalFormTask

receber `onClose` como prop

<button onClick={onClose}>fechar</button>

adicionar um style para o botão não ficar em cima do outro

button + button {
  right: 8rem;
}

Na page Task/index.js criar um estado para abrir/fechar o modal

const [showModal, setShowModal] = useState(false)

{showModal &&
    <ModalFormTasks
      onClose={() => setShowModal(false)}
    />
  }

Abrir modal ao clicar no `+` da coluna

No componente da coluna recebermos a prop onShowModal, e passamos para o botão

<button onClick={onShowModal}>
  <img src={IconPlus} alt="Add" />
</button>

E na chamada do componente passamos a função para abrir o modal como prop para o componente filho (Column)

<Column
  name="In progress"
  value="0"
  theme="yellow"
  icon={IconInProgress}
  **onShowModal={() => setShowModal(true)}**
>
  <CardsTasks />
</Column>

Abrir o modal com o status pré preenchido

Criamos um estado para o status default

const [defaultStatus, setDefaultStatus] = useState('to do')

Criamos uma função para alem de abrir o modal, também atualizar o status default, que recebe um status como parâmetro.

function handleOpenModalWithDefaultStatus(status) {
  setDefaultStatus(status)
  setShowModal(true)
}

Agora podemos modificar a função de onShowModal para alem de abrir o modal também atualizar o status conforme o botão da coluna

<Column
  name="To do"
  value="0"
  theme="pink"
  icon={IconTodo}
  onShowModal={() => handleOpenModalWithDefaultStatus('to do')}
>
  <CardsTasks />
</Column>
<Column
  name="In progress"
  value="0"
  theme="yellow"
  icon={IconInProgress}
  onShowModal={() => handleOpenModalWithDefaultStatus('in progress')}
>
  <CardsTasks />
</Column>
<Column
  name="Done"
  value="0"
  theme="green"
  icon={IconDone}
  onShowModal={() => handleOpenModalWithDefaultStatus('done')}
>
  <CardsTasks />
</Column>

Com o status default sendo preenchido conforme o click da coluna, podemos passar o status para o modal. Recebemos defaultStatus como prop, e adicionamos o valor no select

<select defaultValue={defaultStatus}>
    <option value="to do">To do</option>
    <option value="in progress">In progress</option>
    <option value="done">Done</option>
  </select>

Modificando o form do modal para utilizar o estado

Começamos criando os estados

const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
const [date, setDate] = useState('')
const [hour, setHour] = useState('')
const [responsable, setResponsable] = useState('')
const [status, setStatus] = useState(defaultStatus)

E depois adicionamos uma função para o onChange de cada input

<input onChange={e => setTitle(e.currentTarget.value)} />

Vamos adicionar um console ao clicar em salvar, para visualizar se os estados estão sendo preenchidos corretamente

function handleSaveTask() {
  console.log({
    title,
    description,
    date,
    hour,
    responsable,
    status,
  })
}

<button type="button" onClick={handleSaveTask}>Save</button>

Adicionar uma nova task

Começamos criando um estado para armazenas as atividades

const [tasks, setTasks] = useState([])

Vamos criar uma função bem simples para receber uma task e adiciona-la a lista

function handleAddTask(task) {
  setTasks([...tasks, task])
}

Vamos passar para o modal a função para adicionar uma nova tarefa

<ModalFormTasks
  onClose={() => setShowModal(false)}
  defaultStatus={defaultStatus}
    handleAddTask={handleAddTask}
/>

No modal, recebemos a nova prop, e ao clicar em salvar chamamos a função de adicionar tarefas passando as informações da nova tarefa

function handleSaveTask() {
  handleAddTask({
    title,
    description,
    date,
    hour,
    responsable,
    status,
  })
}

Mostrando as tasks criadas

Para mostrarmos as tasks criadas, vamos criar um map e passar para o componente CardsTasks as informações

<Column
  name="To do"
  value="0"
  theme="pink"
  icon={IconTodo}
  onShowModal={() => handleOpenModalWithDefaultStatus('to do')}
>
  {
    tasks.map(task => (
      <CardsTasks
        title={task.title}
        description={task.description}
        date={task.date}
        hour={task.hour}
        responsable={task.responsable}
        status={task.status}
      />
    ))
  }
</Column>

e temos que modificar o componente CardsTasks para ser dinâmico e receber as informações como props

<ContainerCardsTasks>
    <h4>{title}</h4>
    <p>{description}</p>

    <FooterCards>
      <time>{date} {hour}</time>
            <p>{responsable}</p>

      <div>
        <ContainerAvatar />
        <img src={IconEdit} alt="Edit" />
      </div>
    </FooterCards>
  </ContainerCardsTasks>

Separando as tasks por status

Para listarmos somente a tarefa de cada status em sua respectiva coluna, podemos adicionar uma função de filtro antes do map

{
  tasks.filter(t => t.status === 'to do').map(task => (
    <CardsTasks
      title={task.title}
      description={task.description}
      date={task.date}
      hour={task.hour}
      responsable={task.responsable}
      status={task.status}
    />
  ))
}

Adicionando KEY no map

Para o React atualizar o seu componente corretamente, é uma boa prática adicionar a prop key ao seu componente, quando utilizar a função map

{
  tasks.filter(t => t.status === 'in progress').map((task, index) => (
    <CardsTasks
      key={index}
      title={task.title}
      description={task.description}
      date={task.date}
      hour={task.hour}
      responsable={task.responsable}
      status={task.status}
    />
  ))
}

Iniciando com Next.JS

NuryCaroline — Fri, 12 Nov 2021 18:29:58 +0000

Olá dev!

O intuito desse post é explicar um pouquinho o que é Next.js e o que podemos fazer com ele.

O que é Next.js?

É um Framework React para Produção.
Next.js oferece a melhor experiência de desenvolvedor com todos os recursos de que você precisa para produção: renderização híbrida estática e de servidor, suporte a TypeScript, agrupamento inteligente, pré-busca de rota e muito mais. Nenhuma configuração necessária.

Vantagens:

Next.js tem várias ferramentas para te auxiliar, algumas delas:

Otimização de imagem
- Com o Next.js podemos trocar a tag <img src="" /> pelo componente <Image src="" />, assim é incluído uma variedade de otimizações como: carregar somente o tamanho utilizado e quando a imagem for utilizada.
Next.js Analytics
- Ao publicar a sua aplicação na Vercel você tem acesso a uma ferramenta de analise em tempo real. Podendo assim, medir quantidade de visitantes, tempo de carregamento da página, entre outros.
Zero Config
- Utilizando um simples comando no terminal, é criado uma estrutura pronta para iniciar um projeto.
Suporte a CSS e CSS Modules
- O CSS Modules nos permitem separar o css em escopos, para evitar colisões.
Roteamento
- A navegação entre paginas é bem simplificado, basta criar um novo arquivo com o nome da pagina desejada e o roteador já identifica como uma página.
Rotas Api
- Com as Rotas você pode criar endpoints para retornar informações para sua aplicação.
Híbrido SSG e SSR
- SSR (Server Side Render) - Renderização do lado do Servidor:
  
  Ao solicitarmos uma página de perfil de usuário, por exemplo, o servidor efetua as buscas necessárias na aplicação e banco de dados, e retorna ao navegador um HTML pronto para ser apresentado ao usuário.
  
  Fonte: https://woliveiras.com.br/posts/qual-diferenca-server-side-render-ssr-e-static-site-generator-ssg/
- SSG (Static Site Generator) - Geração de Site Estático:
  
  São sites que não possuem conteúdos dinâmicos, uma pagina de apresentação de uma empresa, por exemplo.
  
  Fonte: https://woliveiras.com.br/posts/qual-diferenca-server-side-render-ssr-e-static-site-generator-ssg/

Como aprender Next.js

No próprio site do Next.js (https://nextjs.org/learn/basics/create-nextjs-app) há um curso interativo com os fundamentos de Next.js, como monitorar a performance, SEO e outras funcionalidades.

Referências

Nextjs.org
Qual a diferença entre SSR e SSG

Extensões para VSCode

NuryCaroline — Wed, 03 Nov 2021 20:50:20 +0000

Olá dev! Aqui está uma seleção de extensões para VSCode para te ajudar no dia a dia e trazer mais produtividade.

Medir produtividade

Antes de melhorarmos a nossa produtividade, primeiro precisamos ter dados de como ela está. Para obter esses dados, eu conheço essas três extensões:

Wakatime

Assim como a Code Time, essa extensão ajuda a mediar a sua atividade enquanto está desenvolvendo no dia dia, o quanto esta trabalhando em qual linguagem e várias outras informações.

Code Time

Além de ser uma pata de animal que com certeza á bem fofinha rsrs, com ele você tem um dashboard de como você trabalha no dia a dia, quais horários está mais produtivo, entre várias outras informações.

100 days of code

Os mesmos criadores do Code Time criaram essa extensão para ajudar você a alcançar seus desafios, e ganhando botons a cada conquista.

Conjunto de atalhos ( Snippets )

Algo que me deixa bem produtiva no dia a dia, é utilizar alguns atalhos para construção de códigos padrões, por exemplo, criar componentes React, arquivos de estilização, arquivo de configuração de api.

Para desenvolvimento com React e React Native, tem essas 2 extensões da Rocketseat:

Rocketseat ReactJS

Rocketseat React Native

Os atalhos que eu mais uso são:

rnfc → React Native Functional Componente: que cria a estrutura de um componente React Native
rfc → React Functional Componente: que cria a estrutura de um componente React
styled-react → Styled React: que cria uma estrutura inicial com styled componentes
api → Cria uma estrutura de configuração Axios.

Na página de cada extensão tem uma lista de comandos possíveis.

Facilitadores

SVG Viewer

Quando abrimos um .svg no VSCode ele nos mostra o seu código, mas na maioria das vezes queremos ver a imagem em si, e é isso que essa extensão faz.

ToDo Three

Essa é uma extensão que eu gosto de usar bastante, para adicionar comentários no meu código de coisas que ainda tenho que implementar e não esquecer nenhuma regra. Apenas adicionar um comentário como // TODO: e // FIXME:, a extensão coloca um destaque, que o torna mais visível e mais difícil de esquecer quando estiver analisando as suas alterações antes de enviar. Além disso ela também cria uma árvore, com os arquivos onde você adicionou.

Template String Converter

Com a atualização do JS, passamos a poder concatenar string facilmente com o Template String, o que pode ser chato no dia a dia, ficar mudando de aspas ( ' ou " ) para acentos graves (), e essa extensão vem para nos ajudar nisso, assim que colocamos ${}, dentro de aspas elas mudam para acentos graves.

Brackets Pair

Sabem quando esquecemos de abrir ou fechar parênteses ou chaves, e não sabemos onde colocar?! Essa extensão coloca uma cor diferente para cada conjunto de Abre e Fecha, facilitando encontrarmos onde está faltando.

Blockman

Acredito que essa extensão tenha o mesmo objetivo da Brackets Pair, mas com uma forma diferente de visualização. Com ela é criado uma borda envolta de cada conjunto de Abre e Fecha, facilitando um pouco mais descobrir onde está faltando abrir ou fechar algum parênteses ou chaves e também facilitando a visualização de cada bloco

Embelezamento

Como passamos o dia olhando para o VSCode, podemos deixar ele mais com a nossa cara, aqui eu separei algumas extensões legais.

VSCodeThemes - Preview Visual Studio Code Themes.

Omni Theme - Visual Studio Marketplace

Ballerini Theme - Visual Studio Marketplace

Material Theme Icons - Visual Studio Marketplace

Pink-Cat-Boo Theme - Visual Studio Marketplace

Nyan Cat - Visual Studio Marketplace

Power Mode - Visual Studio Marketplace

Clippy - Visual Studio Marketplace

E você, quais extensões você mais utiliza?
Deixe aqui nos comentários e até mais. 😄