Forem: Gustavo

Stop building for scale. Start building for users.

Gustavo — Fri, 05 Sep 2025 15:20:18 +0000

Stop Building for "Scale." You Don't Have Users Yet.

Shayan ・ Sep 4

#webdev #programming #javascript #ai

Great post if you have a spare Android phone laying around

Gustavo — Fri, 13 Jun 2025 11:51:15 +0000

Guilherme Araujo for Quave

Apr 20 '25

Hosting web app on your old Android phone

Comments 1

3 min read

Automatizando requisições que exigem autenticação no Postman com pre-requests

Gustavo — Tue, 20 May 2025 19:17:24 +0000

No Postman, como você testa as rotas da sua API REST ou as queries da sua API GraphQL que precisam de autenticação JWT? Você provavelmente cria uma rota/mutation para login e depois copia o token e coloca no header de authorization, certo? Nesse post eu vou te mostrar como você pode fazer todo esse processo de forma automatizada, seja em uma API REST ou GraphQL 🚀

Caso tenha algum problema, veja esta seção.

Criando variáveis

Primeiro, precisamos ter variáveis para usar como Bearer Token na requisição/mutation.

Criar uma variável é bem simples:

Clique na sua collection criada (seu projeto) no Postman
Vá para a seção variables e crie a variável:

Criando scripts

Primeiro, você precisa criar um request/mutation que seja responsável por retornar um token que será utilizado. Por exemplo:

Agora na request/mutation, vá para a seção scripts.

Script para query GraphQL

const url = 'http://localhost:3000/graphql';
const method = 'POST';
const header = {
    'Content-Type': 'application/json',
};
const graphqlMutation = {
    query: `
        mutation UserSignIn($email: String!, $password: String!) {
            userSignIn(input: { 
                email: $email, 
                password: $password 
            }) {
                token
                error {
                    field
                    message
                }
            }
        }
    `,
    variables: {
        email: "postman_user@test.com",
        password: "pass123"
    }
};

pm.sendRequest({
    url,
    method,
    header,
    body: {
        mode: 'raw',
        raw: JSON.stringify(graphqlMutation)
    }
}, (err, res) => {
    if (err) {
        console.error(err);
        return;
    }

    const response = res.json();
    if (response.errors) {
        console.error("GraphQL Errors:", response.errors);
    } else if (response.data.userSignIn.error) {
        console.error("Authentication Error:", response.data.userSignIn.error);
    } else {
        pm.collectionVariables.set("bearerToken", response.data.userSignIn.token);
    }
});

Script para API Rest

let url = `http://localhost:3000/auth`;
let method ='POST';
let header = {
    'Content-Type': 'application/json',
};
let payload = {
    login: "seu_login",
    password: "sua_senha",
};

pm.sendRequest({
    url,
    method,
    header,
    body: {
        mode: 'raw',
        raw: JSON.stringify(payload)
    },
}, (err, res) => {
    if(err) {
        console.log(err)
        return;
    }
    pm.environment.set("bearerToken", res.json().access_token)
});

Mais algumas palavrinhas - troubleshooting e ajuda

Tenha em mente que os requests foram feitos de acordo com o meu schema, adapte-o para o seu caso de uso.
- Você pode ver como eu adaptei para o meu projeto aqui
Caso precise debuggar o próprio postman, você pode utilizar Ctrl+Alt+C para abrir o console
Caso precise de ajuda, você pode:
- Dar uma olhada neste post do Postman
- Comente aqui mesmo :)
- Entra em contato comigo em uma das minhas redes

Migrando koa-graphql para grahpql-http

Gustavo — Sun, 18 May 2025 21:10:49 +0000

Recentemente eu desenvolvi o desafio da Woovi com Koa.js e GraphQL (link do projeto). Uma das especificações opcionais era o uso do graphql-http, substituto do koa-graphql, que está presente no playground disponibilizado. No entanto, me deparei com alguns problemas iniciais: diversas funcionalidades não estavam presentes no graphql-http, visto que ele é apenas uma implementação do GraphQL sobre HTTP, isto é, é simples e minimalista.

Introdução - Por quê? E alguns problemas

Primeiro, por quê? Bom, principalmente, porque koa-graphql foi praticamente descontinuado e graphql-http deve ser utilizado ao invés disso. Tomei esta decisão baseada em uma discussão que inclusive recomendava o uso do yoga, uma alternativa mais completa para servidores graphql, no entanto, eu vi que seria completamente capaz de resolver apenas com graphql-http. Caso queira uma opção mais robusta, tente o Yoga.

Vamos aos problemas. Eu utilizava algumas funcionalidades interessantes já presentes no koa-graphql, como:

o uso de uma customErrorFn para retornar erros do servidor de uma maneira específica, além de logar no console em ambientes de teste e desenvolvimento
graphiql: um playground GraphQL para fazer queries e mutations de maneira intuitiva pelo navegador
alterar o context da requisição, já que o projeto armazenava o usuário caso estivesse logado (por meio de token JWT)

Migrando para o graphql-http

A primeira coisa a ser feita é remover koa-graphql completamente.

pnpm un koa-graphql

E adicionar graphql-http:

pnpm i graphql-http

Com isso, é começar a adaptar as funcionalidades.

Criando o handler

Seguindo o snippet que está presente no próprio README do graphql-http, para criar o handler é bem simples, é só importar o createHandler para o koa e passar o schema e o context:

import { createHandler } from 'graphql-http/lib/use/koa';

const graphqlHandler = createHandler({
  schema,
  context: async (ctx) => {
    const { user } = await getUser(ctx);
    return getContext({ ctx, user });
  },
});

Ok, o schema é a parte mais fácil, apenas passei o schema definido anteriormente. No entanto, tive alguns problemas com os tipos do context, especialmente porque a forma de conseguir as informações do header são diferentes.

Adaptando os tipos do context

No get-context.ts, criei o tipo que deveria receber para o contexto:

import type { Request } from 'graphql-http';
import type { IncomingMessage } from 'node:http';
import type { RequestContext } from 'graphql-http/lib/use/koa';

export type RequestGraphQLContext = Request<IncomingMessage, RequestContext>;

Agora para o get-user.ts, antes eu simplesmente pegava o valor de context.headers.authorization, mas agora a tipagem para o headers é completamente diferente:

é preciso utilizar context.headers.get
get pode ser uma função, uma string, ou conter array no seu valor

Portanto, criei uma função para validar corretamente, o get-graphql-http-headers.ts:

import { Request } from 'graphql-http';
import { RequestContext } from 'graphql-http/lib/use/koa';
import { IncomingMessage } from 'node:http';

type HeaderKeyType = 'authorization';

export function getGraphQLHttpHeaders(
  ctx: Request<IncomingMessage, RequestContext>,
  headerKey: HeaderKeyType
) {
  if (typeof ctx.headers.get === 'function') {
    return ctx.headers.get(headerKey);
  }

  if (typeof ctx.headers === 'object') {
    const header = (
      ctx.headers as Record<string, string | string[] | undefined>
    )[headerKey];
    if (Array.isArray(header)) {
      return header[0] ?? null;
    } else if (typeof header === 'string') {
      return header;
    }
  }

  return null;
}

Agora, para conseguir o authToken, basta utilizar a função criada:

const authHeader = getGraphQLHttpHeaders(ctx, 'authorization');

Schema e Context prontos! Agora faltam as funcionalidades: graphiql e tratamento de erros.

Tratamento de erros

Agora ficou ainda mais simples! Não precisamos passar uma função para o handler novo, basta apenas adicionar um middleware!

// graphql error handling middleware
app.use(async (ctx, next) => {
  try {
    await next();
  } catch (error) {
    if (error instanceof GraphQLError) {
      if (logEnvironments.includes(config.NODE_ENV)) {
        console.log(error.message);
        console.log(error.locations);
        console.log(error.stack);
      }

      ctx.body = {
        errors: [
          {
            message: error.message,
            locations: error.locations,
            stack: config.NODE_ENV === 'development' ? error.stack : undefined,
          },
        ],
      };
    } else {
      throw error;
    }
  }
});

GraphiQL - playground

Aqui eu mudei um pouco a forma que o playground é acessado. Como ele é utilizado apenas em ambiente de desenvolvimento, resolvi utilizar o ruru e adicionar um script no package.json do server para acessá-lo. Para isto, ele pede que o pacote ruru seja instalado, este inclusive pode ser utilizado em qualquer endpoint graphql disponível!

npx ruru -SP -p 3001 -e http://localhost:3000/graphql

-p especifica a porta do playground
-e especifica a rota para o servidr graphql

Concluindo

Acabou! Com isso, poupei alguns KBs:

E, principalmente, atualizei para uma lib mais atualizada.

No meu projeto no GitHub você pode visualizar exatamente como foi minha linha de pensamento visualizando a issue e o pull request. E outra: tem um bônus onde eu configurei o graphiql em um app react-router v7 (antigo Remix), vale a pena dar uma olhada!

Caso tenha alguma dúvida, não hesite em comentar ou me chamar em qualquer um dos meus links

Referencias

Meu projeto no GitHub: https://github.com/gustav0d/wbonk
https://github.com/graphql/graphql-http/discussions/95

Foto de Mohammad Rahmani na Unsplash

My First Arch Linux Installation

Gustavo — Wed, 12 Jun 2024 18:07:49 +0000

During a specific vacation from college, I figured I should try installing Arch Linux just because I was curious (and I wanted to say I use Arch btw).

My expectations

Learn! Since it's the first time I'm installing Arch Linux in a physical machine, I want to learn as much as I can, and write them down as much as possible
Minimal installation
Disk encryption
Snapshots

What you should expect (disclaimer)

This is not a tutorial (although I wrote it as a tutorial for me). This is just a report from my first time installing Arch in a physical computer.

You can use it as a kickstart for your own Arch install, or just see how I take notes.

Make sure to double check the information since they might not be completely up-to-date or outlined in a more simplistic way compared to the reality (always check the Arch Wiki).

Anyways, if you have any doubt or suggestions, make sure you reach me.

First things first

Download the ISO
Prepare an installation medium (I use Ventoy)

Installation

You can change the keyboard layout as well. Layouts can be listed with:

localectl list-keymaps

Since my laptop is ABNT-2 (Brazil's default), I can change it with:

loadkeys br-abnt2

Also, this is completely optional, but I like to change the font:

setfont Lat2-Terminus16

Network and Internet connection

In the installation image, systemd-networkd,
systemd-resolved, iwd and
ModemManager are preconfigured and enabled by default.

Since I was using wired connection, I didn't need to setup anything, but, if it's not your case (something's not right or you're using wireless connection, check this).

To test if you're connected to the internet, ping any website:

  ping archlinux.org

System clock

Now it's time to check if everything is right running timedatectl.

You can list the timezones with:

timedatectl list-timezones

Then you can select your timezone, for example America/Sao_Paulo:

timedatectl set-timezone America/Sao_Paulo

Disk partitioning

I strongly recommend you to disconnect other disks except for the one you'll be Installing Arch so you don't erase anything you didn't want to
If there's any error, first check the docs to see if any of the notes can help
- Identify the disk you'll be partitioning

fdisk -l

I'll be using /dev/sda/ but you should change it according to your case
Use the fdisk specifying the disk

fdisk /dev/sda

If the device does not contain a recognized partition table, fdisk will automatically create a DOS (MBR) disklabel. Although it changes automatically to gpt once you create a GPT partition, you can already start the disk with GPT using the -t flag:

  fdisk -t gpt /dev/sda

Assuming you're in fdisk:

To create a partition table, type g
Now in order to create the boot partition, now type n
- Select the first sector (kind of the starting point of the partition), the default (for the first partition) is 2048
- Select the last sector. There are a few tips on how to select them:
- Use the + symbol by the partition size
- The size can be specified in kibibytes (K), mebibytes (M), gibibytes (G), tebibytes (T), or pebibytes (P)
- Since it's the boot partition I'll set 1GiB with +1G
- The default type for newly created partitions is Linux Filesystem
- Since it's the boot partition, the type has to be changed. For that, type t
- Then specify the type (type L to list all available types)
- The EFI System type is 1
Repeat this process as needed in order to create the desired partitions
- Personally, I just create another partition with the rest of the available space (all defaults)
When you finish creating the partitions, type w to write changes to the disk

Create a FAT 32 system on the EFI partition (in my casse it's /dev/sda1):

mkfs.fat -F 32 /dev/sda1

System encryption

Initialize encryption on the Linux Filesystem partition. It'll prompt a password to encrypt your system:

cryptsetup -y -v luksFormat /dev/sda2

Map /dev/sda2 to /dev/mapper/cryptroot:

cryptsetup open /dev/sda2 root

BTRFS parititioning and Swapfile

Create BTRFS on the encrypted Linux Filesystem partition:

mkfs.btrfs /dev/mapper/cryptroot

Now mount it:

mount /dev/mapper/cryptroot /mnt

cd to /mnt and create the subvolumes as recommended for use with snapper (a program I found on Cody Hou's Arch installation, reference below):

cd /mnt
btrfs subvolume create @
btrfs subvolume create @home
btrfs subvolume create @snapshots
btrfs subvolume create @var_log
btrfs subvolume create @swap

Unmount root and remount the subvolumes and the boot partition. noatime is used for better performance zstd as file compression:

cd
umount /mnt
mount -o noatime,compress=zstd,space_cache=v2,subvol=@ /dev/mapper/cryptroot /mnt
mkdir -p /mnt/{boot,home,.snapshots,var/log,swap}
mount -o noatime,compress=zstd,space_cache=v2,subvol=@home /dev/mapper/cryptroot /mnt/home
mount -o noatime,compress=zstd,space_cache=v2,subvol=@snapshots /dev/mapper/cryptroot /mnt/.snapshots
mount -o noatime,compress=zstd,space_cache=v2,subvol=@var_log /dev/mapper/cryptroot /mnt/var/log
mount -o noatime,subvol=@swap /dev/mapper/cryptroot /mnt/swap
mount /dev/sda1 /mnt/boot

Make sure the swap subvolume is not being snapshoted.

Create a swap file. Change the count parameter in order to specify the size of the swap file:

cd /mnt/swap
chattr +C /mnt/swap
dd if=/dev/zero of=./swapfile bs=1M count=8192 status=progress
chmod 0600 ./swapfile

Now you can install the essential packages in your system. (replace intel-ucode with intel-ucodeif you're using an Intel processor):

pacstap -K /mnt base base-devel linux linux-firmware amd-ucode vim git networkmanager btrfs-progs dosfstools e2fsprogs exfat-utils ntfs-3g smartmontools dialog man-db man-pages texinfo pacman-contrib

Configuring the system

Fstab

Generate fstab:

genfstab -U /mnt >> /mnt/etc/fstab

Chroot

Change root into the system:

arch-chroot /mnt

Time

Set the time zone accordingly (you can look in /usr/share/zoneinfo for your region and city):

ln -sf /usr/share/zoneinfo/America/Sao_Paulo /etc/localtime

Run hwclock to generate /etc/adjtime:

hwclock --systohc

Localization

Edit /etc/locale.gen and uncomment the needed UTF-8 locales (In my case, I'll uncomment en_US.UTF-8 UTF-8 and pt_BR.UTF-8 UTF-8):

vim /etc/locale.gen

After you uncomment the locales, you have to generate the locales:

locale-gen

Now you can create /etc/locale.conf file:

vim /etc/locale.conf

And set the LANG variable accordingly:

LANG=pt_BR.UTF-8

Also, if you're using a keyboard layout other than US, you might want to persist the current keyboard layout. In /etc/vconsole.conf:

KEYMAP=br-abnt2

Network configuration

Set the hostname (name of your machine) by creating the /etc/hostname and adding the name of your hostname inside it.

Now, in order to prevent software unsafely resolving localhost over the network because they migh still read /etc/hosts, add the following entries to /etc/hosts:

127.0.0.1        localhost
::1              localhost
127.0.1.1        yourhostname

User configuration

Create a root password:

passwd

Create your user with administrative privileges (the -s can be omitted as bash is the default shell). In my case, my username will be gus:

useradd -m -G wheel,rfkill -s /bin/bash gus

Specify the password for the created user:

passwd gus

In order to enable the recently created user to have administrative privileges (e.g. be able to use sudo), you'll need to uncomment the wheel line on:

EDITOR=vim visudo

If you want, you can specify the full user name with:

chfn -f "Gustavo Dantas" gus

Initramfs

In /etc/mkinitcpio.conf, add btrfs to MODULES

Still in /etc/mkinitcpio.conf, make sure the HOOKS looks like the following

HOOKS=(base udev autodetect microcode modconf kms keyboard keymap consolefont block encrypt filesystems fsck)

The order of the hooks matter, so make sure block and encrypt are before filesystems

Regenerate initramfs:

mkinitcpio -P

Boot loader

You can use grub or systemd. I'll use grub because it enables more customization and there are some packages that allows restoring snapshots from the grub interface as well.

pacman -S grub efibootmgr

Generate the bootloader:

grub-install --target=x86_64-efi --efi-directory=/boot --bootloader-id=GRUB

Now you need to obtain the UUID of the partition the system was installed:

blkid

Use the UUID of the partition itself (in my case it's /dev/sda2, or if you're using NVME it should be something like /dev/nvme0n1p2)

Edit /etc/default/grub and at the line beginning with GRUB_CMDLINE_LINUX_DEFAULT, insert at the end with a space after quiet. Replace the content of [UUID] with the correspondent UUID of your system partition:

root=/dev/mapper/cryptroot cryptdevice=UUID=[UUID]:root

Regenerate grub.cfg:

grub-mkconfig -o /boot/grub/grub.cfg

Now it's time to add or configure additional software, like:

Enabling networking on reboot:

systemctl enable NetworkManager.service

Pacman cache clearner:

systemctl enable paccache.timer

And if you're using SSD, enable TRIM:

systemctl enable fstrim.timer

It's time to exit chroot, reboot the system and remove the installation medium.

You should be prompted to enter the password of the encrypted partition right before loggin in.

If what described above didn't happened, something not right happened along the process, like the UUID isn't correct.
- In this case, you should use your installation medium again, remount all the partitions and use arch-chroot to fix this

Snapshots

Install snapper:

sudo pacman -S snapper

When the snapshot configuration is created with snapper, it will also create a subvolume and a folder called /.snapshots, even thouth the snapshots subvolume was alreay created and mounted on /.snapshots

To fix this:

Unmount snapshots subvolume

sudo umount /.snapshots

Delete the /.snapshots folder

sudo rm -r /.snapshots

Create snapper config
```
sudo snapper -c root create-config /
```

- Check that snapper created the subvolume

```bash
sudo btrfs subvolume list /
```

Delete the newly created subvolume and folder

sudo btrfs subvolume delete /.snapshots

Create the /.snapshots folder again

sudo mkdir /.snapshots

Remount it to snapshots subvolume

sudo mount -a

Now give the right read, write and execute permissions to the snapshots:

sudo chmod 750 /.snapshots

Add your user to ALLOW_USERS="yourusername" in the snapper config at /etc/snapper/configs/root. You can also change the frequency and the history listed on the snapper wiki page:

sudo vim /etc/snapper/configs/root

Enable the snapper services:

sudo systemctl enable --now snapper-timeline.timer
sudo systemctl enable --now snapper-cleanup.timer

AUR helper

An AUR helper automates the usage of the Arch User Repository (which is one of the great pros about using Arch really).

Even when I used Arch on WSL, I really liked yay, because it's really fun to type :)

But you can also choose another one (like paru which is written in Rust), or if you're really going in Arch Linux way, get familiar with the manual build process

Anyway, I'm installing yay. From the docs:

pacman -S --needed git base-devel && git clone https://aur.archlinux.org/yay-bin.git && cd yay-bin && makepkg -si

In order to take a snapshot after every single install with pacman so you can revert if an upgrade breaks something, we can use snap-pac-grub.
But, because of the way the partitions were configured, the /boot is not being snapshotted, so in order to copy the files of /boot on every Linux kernel upgrade, rsync will be installed.

yay -S snap-pac-grub rsync

There's also the possibility to enable booting the snapshots from grub. For that, in /etc/mkinitcpio.conf add grub-btrfs-overlayfs to the end of HOOKS. And don't forget to regenerate your initramfs:

sudo mkinitcpio -P

Kernel snapshots

As said above, the /boot is not being snapshotted, so if an update causes instability, you'll need to restore the older kernel image. For that:

Create the folder /etc/pacman.d/hooks

sudo mkdir /etc/pacman.d/hooks

In the recently created folder, create a hook that will sync /boot before a kernel upgrade

sudo vim /etc/pacman.d/hooks/0-bootbackup-preupdate.hook

[Trigger]
Operation = Upgrade
Operation = Install
Operation = Remove
Type = Path
Target = usr/lib/modules/*/vmlinuz

[Action]
Depends = rsync
Description = Backing up /boot before updating...
When = PreTransaction
Exec = /usr/bin/rsync -a --delete /boot /.bootbackup/preupdate

Duplicate the hook to copy the new kernel after updating

sudo cp /etc/pacman.d/hooks/0-bootbackup-preupdate.hook /etc/pacman.d/hooks/95-bootbackup-postupdate.hook

[Trigger]
Operation = Upgrade
Operation = Install
Operation = Remove
Type = Path
Target = usr/lib/modules/*/vmlinuz

[Action]
Depends = rsync
Description = Backing up /boot after updating...
When = PostTransaction
Exec = /usr/bin/rsync -a --delete /boot /.bootbackup/postupdate

Reboot the system.

Now make an image for rollback to the system as it is in case something goes wrong in the near future:

sudo snapper -c root create --description “Clean BTRFS install with Snapper”

Conclusion

Of course, from here there are endless possibilities for the system to be configured and since I don't have a preference yet, I'll leave it up to your creativity.

But, if you're really curious about what I do from here, you can check my dotfiles.

That's it! Hope you enjoyed it. Please contact me if you have any suggestions, recommendations, tips, questions or if you just want to have philosophical conversations!

Troubleshoot

During the installation with pacstrap, I received some errors about someone's signature key is unknown trust or invalid or corrupted package (PGP signature).
- I had to refresh the keys for it to work properly (this might take some time)

pacman-key --refresh-keys

Reference

Arch Wiki (In almost every section there are references to specific things that were being configured, make sure to check them as well)
Cody Hou's Arch installation with encrypt and swap

Descrevendo e criando issues como um profissional

Gustavo — Thu, 17 Aug 2023 03:15:01 +0000

Domine a arte de criar descrições profissionais de problemas no GitHub! Este post revela como usar templates de issues para agilizar a documentação de bugs, incluindo elementos-chave como ambiente, comportamento esperado, passos para reproduzir e soluções.

Introdução
Descrevendo issues como um profissional
Utilizando templates para criar issues
Exemplo de template
Exemplos no mundo real

Introdução

Esse é o segundo post da série falando sobre issues e GitHub Projects. Já expliquei sobre as issues no primeiro post, recomendo que comece por ele.

Agora vou focar na descrição das issues e mostrar uma forma mais automatizada de criar issues.

Descrevendo issues como um profissional

Dados do Ambiente: Este é o contexto em que o problema ocorre. Pode incluir a versão do software, versão do sistema operacional, dependências relevantes e qualquer outra informação relevante.
Comportamento Esperado: O que você achava que o software faria ou deveria fazer.
Comportamento Real: O que o software está realmente fazendo. Aqui é onde você detalha o problema.
Passos para Reproduzir: Um guia passo a passo para recriar o problema.
Imagens/Capturas de Tela: Ajudas visuais para ilustrar o problema ou a sua ideia.
Registros de Erro: Os famosos logs, se disponíveis, podem fornecer informações valiosas sobre o problema.
Possível Solução/Sugestões: Ideias ou sugestões que possam ajudar a resolver o problema.

Utilizando templates para criar issues como um profissional

Agora que você já sabe como descrever as issues de forma profissional, é hora de dar um passo adiante e otimizar ainda mais o processo, tornando-o mais consistente e eficiente. Uma ótima maneira de fazer isso é utilizando templates para criar issues no GitHub.

Vantagens de usar templates de issues

Padronização: Os templates garantem que todas as issues sigam um formato consistente, o que facilita a compreensão por parte de todos os envolvidos no projeto.
Informações Relevantes: Com campos específicos para o ambiente, comportamento esperado, comportamento real e outros detalhes importantes, os templates ajudam a capturar as informações necessárias para uma análise eficiente do problema.
Economia de Tempo: Ao criar issues a partir de templates, você economiza tempo ao não precisar pensar repetidamente em quais informações incluir. Isso acelera o processo de documentação e resolução de problemas.

Como criar e usar templates de issues

Acesse as Configurações do Repositório: No GitHub, vá até o seu repositório e clique na aba "Settings".
Desça até a seção "Features" e clique em "Set up Templates"
Depois disso, você pode escolher o tipo de issue mais usuais: Bug, Feature. Ou você pode criar um template customizado para outro propósito em "Custom template"
Preencha o Template: Quando você cria uma nova issue, você terá a opção de escolher um template e preencher os campos correspondentes. Isso garante que todas as informações relevantes sejam inseridas de maneira organizada.
Quando terminar, não se esqueça de salvar as alterações ao clicar no botão "Propose Changes". Aparecerá uma tela para aplicar as alterações no repositório por meio de um commit, é só especificar a mensagem e fazer o commit clicando em "commit changes"!

Exemplo de template

## Descrição do Problema

[Descreva aqui o problema de maneira sucinta]

### Dados do Ambiente

- **Versão do Software:** [inserir versão]
- **Versão do Sistema Operacional:** [inserir versão]
- **Dependências Relevantes:** [listar dependências, se aplicável]

### Comportamento Esperado

[Descreva aqui o comportamento que era esperado]

### Comportamento Real

[Descreva aqui o comportamento observado]

### Passos para Reproduzir

1. [Descreva o primeiro passo]
2. [Descreva o segundo passo]
3. [E assim por diante...]

### Imagens/Capturas de Tela

[Insira imagens ou capturas de tela para ilustrar o problema]

### Registros de Erro

[Inclua logs ou mensagens de erro relevantes]

### Possível Solução/Sugestões

[Tenha espaço para ideias ou sugestões para resolver o problema]

Exemplos no mundo real

React

Issue de bugs:

FreeCodeCamp

Issue do freeCodeCamp para entregar desafios de código da plataforma

Conclusão

Dominar a arte de descrever issues de maneira profissional e aproveitar os templates do GitHub é fundamental para um gerenciamento eficiente de projetos. Essas práticas não apenas aprimoram a comunicação, mas também impulsionam a resolução de problemas de forma estruturada e colaborativa. À medida que você avança em sua jornada de desenvolvimento, lembre-se sempre de aplicar esses conhecimentos para alcançar resultados mais sólidos e produtivos!

A Comp Júnior!

A Comp Júnior é uma EJ (não sabe o que é? Então clique aqui) que atua no mercado de tecnologia há mais de 20 anos em Lavras e região, prestando serviço de desenvolvimento web, mobile e multiplataforma.

Nossa missão é oferecer a transformação digital aos nossos clientes, expandindo os seus negócios para o mercado digital e alcançando um potencial desconhecido.

Se você quer saber mais, acesse nosso site!
Ou, se preferir, acesse nosso Instagram!

Documentando o desenvolvimento com issues

Gustavo — Tue, 15 Aug 2023 18:58:01 +0000

Conteúdos

Introdução
O que é uma Issue
A anatomia de uma issue
Acompanhando uma issue
Conclusão
Links e referências

Introdução

Quero bater um papo sobre algo que está sempre presente no nosso dia a dia, mas nem sempre damos a devida atenção: o mundo do GitHub. Se você já passou pela situação de olhar para um código que fez há meses e se perguntar "O que diabos eu estava pensando aqui?", então, meu amigo, este post é para você!

Muitas vezes nos pegamos focados no ato de codar, implementar, criar, e esquecemos que a documentação é como a bússola que nos guia em meio ao caos do código. É aquele mapa detalhado que não apenas nos ajuda a lembrar o que fizemos quando voltamos para o projeto depois de um tempo, mas também permite que outros colegas de equipe se juntem e consigam contribuir sem ficarem completamente perdidos.

Disclaimer: Se você nunca ouviu falar de Git ou GitHub, recomendo fortemente que leia o Git4Noobs e pratique antes de continuar!

O que é uma Issue?

Em inglês, issue quer dizer problema, porém, utilizamos para diversas coisas além disso, como rastrear ideias, comentários, tarefas ou erros nos repositórios no GitHub.

Criando uma issue

Acesso ao Repositório: Primeiro, acesse o repositório no GitHub. Certifique-se de estar logado em sua conta.
Navegando para Issues: No menu superior do repositório, clique na guia "Issues". Aqui podemos visualizar todas as issues do repositório (por padrão, são mostradas as issues que ainda não foram resolvidas, fechadas):
Criando uma Nova Issue: Para criar uma nova issue, clique no botão verde "New Issue". Agora, você estará pronto para preencher os detalhes.

A anatomia de uma issue

Título: Um título conciso, porém descritivo, que resume o problema.
Etiquetas/Tags: Etiquetas ou tags aplicáveis para categorizar o problema, facilitando a ordenação e o gerenciamento.
Labels: As labels ajudam a categorizar e identificar o tipo de issue.
Assignees: A issue pode ser atribuída a um ou mais colaboradores do projeto utilizando essa seção
Descrição: Qualquer informação que possa auxiliar na compreensão ou resolução da issue (lembrando que uma issue pode ser desde um bug até uma ideia de feature nova).
- Você pode marcar outras issues, com #, ou marcar pessoas com @

Até aqui podemos ver o poder e a quantidade de informação que podemos armazenar com as issues, mas é só isso? Não!! Há um ponto importante que temos que destacar quando estamos lidando com várias pessoas contribuindo em um projeto.

Acompanhando uma issue

Criar a issue é apenas o primeiro passo! Acompanhar uma issue é uma parte fundamental do gerenciamento de projetos e colaboração eficaz no GitHub. Mas como se manter atualizado das discussões? Bem, temos algumas formas:

Ative as notificações para acompanhar qualquer atividade relacionada a ela. Clique na opção "Subscribe" na parte superior direita da issue para receber alertas por e-mail sempre que houver novos comentários, mudanças de status ou atualizações.
Participe ativamente das discussões na issue. Comente, forneça feedback e colabore com a equipe. Essas discussões podem levar a ideias melhores e a uma compreensão mais clara dos requisitos da tarefa.
Atribua a issue ou marque-o (com @) a um membro da equipe responsável pelo desenvolvimento. Isso ajuda a evitar confusões sobre quem está trabalhando na tarefa e permite um acompanhamento direcionado.
Utilize milestones para definir marcos ou metas específicas para a issue. À medida que o trabalho avança, atualize o status da issue e mova-a para o milestone correspondente. Isso proporciona uma visão clara do progresso geral do projeto.
Mantenha a descrição da issue atualizada à medida que o desenvolvimento progride. Isso inclui adicionar informações relevantes, capturas de tela, links ou quaisquer detalhes importantes que surgirem durante o processo.

E por último mas não menos importante... Quando a tarefa estiver concluída, certifique-se de que o trabalho seja revisado e testado. Comente na issue indicando que a tarefa está pronta para revisão ou integração. Após a revisão bem-sucedida, feche a issue. Se houver ajustes futuros, é só mencionar, a issue continuará salva e poderá ser reaberta se necessário.

Conclusão

Agora você está equipado com o poder das issues no GitHub! Elas são como post-its digitais que mantêm seu projeto na linha. Lembram o que você estava pensando (ou não) e ajudam a galera toda a trabalhar junto, mesmo quando o mundo está de cabeça para baixo.

Lembrou de uma ideia brilhante no meio da noite? Pode criar uma issue! Quer atribuir tarefas? É só marcar alguém com um 'arroba'. E não se preocupe, quando você tiver feito o seu trampo, é só revisar, testar e fechar a issue.

Então, da próxima vez que você mergulhar no código, lembre-se das suas amigas issues, elas vão fazer seu trabalho render mais e podem te poupar de futuros momentos "que diabos eu estava fazendo aqui".

Psst, você aí! Quer agilizar ainda mais a criação de issues num projeto? Fica ligado no GitHub Projects

Links e referências

Issues | Doc do GitHub
Git4Noobs - Passo a passo para quem está começando agora
Cover por Mimi Thian no Unsplash

A Comp Júnior!

Nossa missão é oferecer a transformação digital aos nossos clientes, expandindo os seus negócios para o mercado digital e alcançando um potencial desconhecido.

Se você quer saber mais, acesse nosso site!
Ou, se preferir, acesse nosso Instagram!

O que é uma Empresa Júnior?

Gustavo — Mon, 14 Aug 2023 17:44:17 +0000

Introdução
Por que entrar em uma empresa júnior?
O Movimento Empresa Júnior
TL;DR; - Resumão
A Comp Júnior

Introdução

Uma empresa é uma organização que reúne recursos humanos, financeiros e materiais com o objetivo de desenvolver e oferecer produtos, serviços ou soluções para atender às necessidades do mercado.

Ser júnior refere-se a uma fase inicial da carreira profissional, geralmente associada a indivíduos que estão nos primeiros anos de atuação em uma determinada área ou empresa. Profissionais juniores estão em processo de aprendizado e desenvolvimento, frequentemente sob a orientação e supervisão de colegas mais experientes. Essa etapa é marcada por oportunidades de crescimento, aquisição de habilidades práticas e conhecimento específico, além de proporcionar um ambiente propício para explorar diferentes aspectos do trabalho e construir uma base sólida para o progresso profissional futuro.

Mas como uma empresa se encaixa nisso?

Uma empresa júnior é uma organização estudantil sem fins lucrativos, associada a uma universidade ou faculdade.

Ela opera como uma entidade empresarial controlada por alunos, proporcionando uma experiência prática, por meio de projetos reais, os membros da empresa júnior aplicam conhecimentos teóricos adquiridos em sala de aula para enfrentar desafios reais do mercado. Essa abordagem permite que os estudantes desenvolvam habilidades profissionais, como trabalho em equipe, liderança e resolução de problemas, enquanto oferecem serviços de qualidade a clientes reais a preços acessíveis. O termo "júnior" denota o caráter educacional da organização, indicando que os participantes estão em uma fase de aprendizado e crescimento, sob a supervisão de professores e profissionais do setor, preparando-se para suas futuras carreiras.

Por que entrar em uma empresa júnior?

Muitos no ambiente universitário nunca tiveram contato com empresas do seu segmento de estudo, ou seja, não sabem como colocar em prática o conteúdo teórico aprendido durante o curso.

Além disso, a universidade acaba deixando de lado as soft skills, que são habilidades interpessoais e sociais que afetam a maneira como nos relacionamos com os outros e lidamos com situações do dia a dia.

Com isso em mente, uma empresa júnior é responsável por acolher e desenvolver seus membros, oferecendo a primeira oportunidade profissional e contato com o mercado de trabalho, suas metodologias e estruturas.

Em uma empresa júnior, você é encorajado a tomar suas próprias decisões e a pedir ajuda, não somente para os membros da sua empresa, mas para toda a rede.

Mas que rede é essa?

O MEJ

O Movimento Empresa Júnior (MEJ para os íntimos) atua como uma rede que reúne diversas empresas juniores, oferecendo suporte, capacitação e troca de experiências entre essas organizações. Ele busca fomentar a cultura empreendedora entre os estudantes universitários, estimulando-os a aplicar os conhecimentos adquiridos em sala de aula em projetos reais, e ao mesmo tempo contribuir para o desenvolvimento de empresas e comunidades locais.

A estrutura está pelos membros, e não os membros pela estrutura

Isso quer dizer que, se tivermos alguma dificuldade, seja estratégica, tática ou operacional, temos toda uma rede que provavalmente já passou pela mesma coisa. E temos total liberdade (na verdade, somos encorajados) a pedir por conselhos e ajuda de toda a rede!

TLDR

Empresa Júnior:

Organização estudantil sem fins lucrativos associada a uma universidade.
Controlada por alunos, oferece experiência prática por meio de projetos reais.
Aplica conhecimentos teóricos em desafios de mercado.
Desenvolve habilidades profissionais e oferece serviços a clientes reais.

Benefícios de uma empresa júnior:

Colocar em prática conhecimentos teóricos do curso.
Desenvolver soft skills (habilidades interpessoais).
Oferecer primeira oportunidade profissional e contato com o mercado.
Tomar decisões e buscar ajuda dentro de uma rede.

Movimento Empresa Júnior:

Rede que reúne empresas juniores.
Oferece suporte, capacitação e troca de experiências.
Estimula cultura empreendedora e aplicação de conhecimentos em projetos reais.
Ênfase na colaboração e apoio mútuo entre membros.

A Comp Júnior

A Comp Júnior é uma EJ (Empresa Júnior) que atua no mercado de tecnologia há mais de 20 anos em Lavras e região, prestando serviço de desenvolvimento web, mobile e multiplataforma.

Nossa missão é oferecer a transformação digital aos nossos clientes, expandindo os seus negócios para o mercado digital e alcançando um potencial desconhecido.

Se você quer saber mais, acesse nosso site!
Ou, se preferir, acesse nosso Instagram!

Solving prop drilling in React with ContextAPI

Gustavo — Mon, 10 Apr 2023 13:34:28 +0000

Prop Drilling

The most simple way to pass data between components is using props, but it can lead to a messy code and probably making it unmaintainable, specially with prop drilling, where a props have to be passed to multiple layers of components:

Solving this (and maybe others) issue(s) with Context

| Context lets you write components that “adapt to their surroundings and display themselves differently depending on where (or, in other words, in which context) they are being rendered. - react.dev

Basically, Context enables us to pass data through the component tree without having to pass props down manually at every level (prop drilling for example).

How to use it?

First, we need to create a Context using React.createContext and then we can use it in our components

  import { createContext } from 'react';

  export const MyContext = createContext()

  // If you'se using TypeScript, you can also pass a default value to the context with the type of the value you're going to pass
  export const MyContext = createContext({} as MyContextType)

then we need to wrap all the components we want to use the context in a Provider component

  import { MyContext } from './MyContext';

  export function App() {
    return (
      <MyContext.Provider value={/* value of your context */}>
        <ComponentA />
        <ComponentB />
        <ComponentC />
      </MyContext.Provider>
    );
  }

now you can access the data from your context in any component that is wrapped in the Provider component using useContext:

  import { MyContext } from './MyContext';

  export function ComponentA() {
    const value = useContext(MyContext);
    return <div>{value}</div>;
  }

Conclusion

That's it! I honestly believe that the best way to learn anything is trying for yourself, so I encourage you to try to create a simple counter app using Context.
Also, if you want to see it in action, check this simple timer app on my Github
- In this app I used Context to share the state of the timer between the Home, Countdown and NewCycleForm components

Reference

Get the distance between the given date and now in words using date-fns

Gustavo — Fri, 07 Apr 2023 14:07:29 +0000

import the formatDistanceToNow function from date-fns:

import { formatDistanceToNow } from 'date-fns'

format the date to now:

const date = new Date('2020-01-01T12:00:00Z')
console.log(formatDistanceToNow(date, { addSuffix: true }))

as you've seen, we can also pass the second parameter as an object to specify the options, such as adding the suffix.
you can see all the available options for formatDistanceToNow here

Using a different language

we need to import the language from date-fns, for example, portuguese from Brazil:

import ptBR from 'date-fns/locale/pt-BR'

then use the second parameter to specify the locale

import { formatDistanceToNow } from 'date-fns'
import ptBR from 'date-fns/locale/pt-BR'

const date = new Date('2020-01-01T12:00:00Z')
console.log(
  formatDistanceToNow(date, {
    addSufix: true,
    locale: ptBR,
  })
)

Reference

date-fns docs
Cover image from Roman Bozhko on Unsplash

How to clean up useEffect's code

Gustavo — Tue, 04 Apr 2023 12:41:54 +0000

What is useEffect?

| "useEffect is a React Hook that lets you synchronize a component with an external system." - react.dev

So, whenever there is something on screen we want to update when another variable changes, we can use useEffect. But be careful, always think twice before using it.

How to clean it up

you can return a function inside useEffect's first parameter, so it runs after the main code is executed
this was really useful for me when I was coding a pomodoro-like app to know wether to update or interrupt the amounts of seconds past

useEffect(() => {
  if (activeCycle) {
    const interval = setInterval(() => {
      const secondsDifference = differenceInSeconds(
        new Date(),
        activeCycle.startedAt
      );

      if (secondsDifference >= totalSeconds) {
        // interrupt the cycle code
        // ...

        clearInterval(interval);
      } else {
        // update the amount of seconds past in the current cycle
        // ...
      }
    }, 1000);
  }
}, [activeCycle, totalSeconds]);

in this example, I needed a way to close the intervals, since useEffect created a new interval each time it executed and this interval kept executing every time
- so the timer was basically not working as it should.
for it to work, I needed to clean up every execution
that's the result:

useEffect(() => {
  let interval: number;

  if (activeCycle) {
    interval = setInterval(() => {
      const secondsDifference = differenceInSeconds(
        new Date(),
        activeCycle.startedAt
      );

      if (secondsDifference >= totalSeconds) {
        // interrupt the cycle code
        // ...

        clearInterval(interval);
      } else {
        // update the amount of seconds past in the current cycle
        // ...
      }
    }, 1000);
  }
  return () => {
    clearInterval(interval);
  };
}, [activeCycle, totalSeconds]);

I declared interval before, so I could clear it on the setup function

Reference

react.dev
Cover image from Juanjo Jaramillo on Unsplash

If you have any doubts or advice, feel free to leave a comment or ping me on Twitter

Quick sort algorithm in C++

Gustavo — Tue, 07 Mar 2023 13:52:37 +0000

In this post I'll show what I learned from the quicksort algorithm. I'll be sorting in ascending order an int array in C++.

The pivot

The quicksort algorithm is based on the pivot you choose. It can be the first, last, the middle or you can have other ways of choosing the pivot, like median-of-three.

Where the pivot is supposed to be

You should be asking where are we putting this pivot. Well, the pivot should abide by some rules so we know it is in its right place:

It occupies the right sorted position on the given array.
All items to the left are smaller
All items to the right are bigger

The partition function

In this example, I'll be choosing the last element as the pivot.
In the function we call partition, we are going to find the right index where the pivot is supposed to be and return it to use in our quicksort function.

#include <iostream>

using namespace std;

const int ARR_SIZE = 7;

int partition(int arr[], int left, int right)
{
  int pivot = arr[right]; // get the last element as pivot
  int sortedIndex = left - 1;

  for (int j = left; j < right; j++)
  {
    if (arr[j] < pivot)
    {
      sortedIndex++;
      swap(arr[sortedIndex], arr[j]);
    }
  }

  swap(arr[sortedIndex + 1], arr[right]);
  return sortedIndex + 1;
}

sortedIndex will store the previous index that the pivot will occupy at the end of the function
We iterate from left to right.
If the element is smaller than the pivot, we add + 1 to sortedIndex and swap the elements arr[sortedIndex] and arr[j]
At the end of the function, we swap the pivot (last element) with the sortedIndex + 1th element, and we return the new index of the pivot.

The Quick Sort recursive function

In the quicksort function, we receive the array, the left and the right index.
Here we are basically getting the correct pivot position with the partition function and dividing the array in two:
- from left to pivot - 1
- from pivot + 1 to right
The stop criteria is when the function receives left equal or bigger than right.
And like that, we have our quicksort function:

void quicksort(int arr[], int left, int right)
{
  if (left < right)
  {
    int pivot = partition(arr, left, right);

    quicksort(arr, left, pivot - 1);
    quicksort(arr, pivot + 1, right);
  }
}

Final code

Let's use an array with 7 positions and sort it using the quicksort function:

#include <iostream>

using namespace std;

const int ARR_SIZE = 7;

int partition(int arr[], int left, int right)
{
  int pivot = arr[right];
  int sortedIndex = left - 1;

  for (int j = left; j < right; j++)
  {
    if (arr[j] < pivot)
    {
      sortedIndex++;
      swap(arr[sortedIndex], arr[j]);
    }
  }

  swap(arr[sortedIndex + 1], arr[right]);
  return sortedIndex + 1;
}

void quicksort(int arr[], int left, int right)
{
  if (left < right)
  {
    int pivot = partition(arr, left, right);

    quicksort(arr, left, pivot - 1);
    quicksort(arr, pivot + 1, right);
  }
}

int main()
{
  int arr[ARR_SIZE] = {3, 7, 8, 4, 6, 2, 5};

  cout << "\n-------------Original array-------------\n";
  for (int i = 0; i < ARR_SIZE; i++)
  {
    cout << arr[i] << " ";
  }

  quicksort(arr, 0, ARR_SIZE - 1);

  cout << "\n-------------Sorted array-------------\n";
  for (int i = 0; i < ARR_SIZE; i++)
  {
    cout << arr[i] << " ";
  }

  return EXIT_SUCCESS;
}

Hope you could find it useful! If you have any advice, tips, recommendations or doubts, just ping me on Twitter