Blog do Kauê

Criando um projeto simples com react router

Sat, 05 Apr 2025 16:15:34 GMT

Olá! Como vai?

Já pensou em criar um projeto com algumas telas e operações no local storage usando o react das massas mas se viu perdido procurando a melhor forma de criar o projeto, instalar as dependências e configurá-las? Sim?

Eu também! São inúmeras opções mesmo com certas tecnologias já definidas... usando Bun ou não? create-vite? Next.js? create-react-router? Zustand ou redux? TailwindCSS com postcss ou a própria CLI? Shadcn UI, Radix UI, Daisy UI...? 😵‍💫

Nesse final de semana estou construindo um site com o treino do Sung Jinwoo de Solo Leveling (adoro o anime inclusive) e estava perdido nessas opções que mencionei para começar e terminar o projeto.

Este guia vai te ajudar quanto configuração das tecnologias que eu escolhi:

TypeScript e Bun
React
React Router Declarativo
TailwindCSS
Eslint

Pensando nestes pontos:

Projeto relativamente pequeno
Sem necessidade de server-side rendering
Estilização fácil e, de preferência, já pronta
Single-page application
Dados no local storage ou search params

Base do projeto

Começaremos com o projeto React, vamos criá-lo usando Bun e a ferramenta Vite com o seguinte comando:

bun create vite projeto-simples --template react-ts

Adicionaremos o React Router para fazer o roteamento das "páginas" no lado do cliente.

bun add react-router

Para finalizar esta parte precisamos configurar o modo declarativo do React Router com 3 linhas de código, no arquivo src/main.tsx:

import { BrowserRouter } from 'react-router';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

O diff atualmente fica assim.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.tsx';
+ import { BrowserRouter } from 'react-router';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
+    <BrowserRouter>
      <App />
+    </BrowserRouter>
  </StrictMode>
);

Estilos

Agora, seguindo o guia do TailwindCSS, vamos colocá-lo para usarmos as classes utilitárias.

bun add tailwindcss @tailwindcss/vite

No arquivo vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
    // ...outros plugins
    react(),
    tailwindcss(),
  ],
});

No arquivo src/index.css

@import "tailwindcss";

Em uma postagem futura vou abordar formas de implementar temas, porém existem duas páginas importantes desse tema (ba-dum-tss): dark-mode e themes variables.

Local storage hook

Também vamos adicionar o hook para acessar e manipular o localStorage. No arquivo src/hooks/use-local-storage.ts:

import { useState } from 'react';

export function useLocalStorage<T extends string | boolean | number | object>(
  key: string,
  initialValue: T
): [T, (value: T) => void] {
  const storedValue = localStorage.getItem(key);
  const parsedStoredValue = storedValue ? (JSON.parse(storedValue) as T) : initialValue;

  const [value, setInternalValue] = useState(parsedStoredValue);

  const setValue = (v: T) => {
    localStorage.setItem(key, JSON.stringify(v));
    setInternalValue(v);
  };

  return [value, setValue];
}

Explicando o que este hook faz na assinatura e no bloco:

Pega um tipo genérico T para melhorar o autocomplete e ter uma API com type-safety (obs.: não precisa ser definido explicitamente porque pode ser inferido pelo parâmetro initialValue)
Pega os parâmetros key (chave do que queremos buscar no local storage) e initialValue (valor inicial caso não exista um atrelado à chave)
No bloco da função, pega o valor armazenado no local storage usando o método getItem(key) e depois, caso exista um valor (string), faz o parsing dele com JSON.parse e aceita que ele é do tipo T (as T), do contrário usa o initialValue
Usa o hook useState do React para criar um estado reativo do tipo T a partir do valor guardado
Cria uma função para atualizar o item do local storage e o estado reativo
Retorna um array com o estado reativo na primeira posição e a função para altera-lo na segunda

Linting e formatação

Depois de horas lendo sobre ferramentas conhecidas (eslint, prettier, biome) e convenções, decidi usar o eslint como linter e formatter já que ele é capaz e maduro (soluções e integrações com editores).

Para isso precisei instalar o typescript-eslint e o @stylistic/eslint-plugin.

bun add -D typescript-eslint @stylistic/eslint-plugin

E a configuração eslint.config.js ficou assim:

import stylistic from '@stylistic/eslint-plugin';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import globals from 'globals';
import tseslint from 'typescript-eslint';

// Cria configuração do eslint
export default tseslint.config(
  tseslint.configs.strictTypeChecked, // estende as configurações estritas com checagem de tipos do typescript-eslint
  stylistic.configs.recommended, // estende as configurações recomendadas do stylistic
  stylistic.configs.customize({ semi: true }), // customiza a configuração `semi` (ponto e vírgula)
  {
    // configuração que vem do create-vite
    ignores: ['dist'],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        projectService: true, // https://typescript-eslint.io/getting-started/typed-linting
        tsconfigRootDir: import.meta.dirname,
      },
    },
    plugins: {
      '@stylistic': stylistic, // adiciona o plugin stylistic
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  }
);

Conclusão

Resumindo, com esse setup você deve conseguir criar pequenos projetos ou protótipos facilmente implantáveis e que não requerem um back end dedicado com API e banco dados para funcionar 100%.

Escrevi esse artigo justamente porque adoro construir projetos úteis e que não fogem desse escopo, o problema é que sempre que começo um novo projeto preciso pesquisar novamente alguns comandos, dependências e configurações.

Inclusive, aqui estão os sites:

Muito obrigado por ter lido até aqui :green_heart:

Estou disponível para contato no Twitter/X, Bluesky e LinkedIn. Até a próxima!

Conhecendo o Node JS

Sat, 26 Oct 2024 20:56:12 GMT

Neste final de semana eu decidi revisar um pouco sobre o JavaScript e o Node. Isso porque eu esbarrei na definição enquanto testava um projeto que apareceu no feed do meu GitHub.

Também planejo estudar alguns tópicos como o event loop e as promises mais profundamente, então uma revisão cai muito bem.

Aqui vão minhas anotações.

O que é Node.js

É um ambiente (runtime) que permite a execução de JavaScript pelo lado do servidor. Com ele é possível criar aplicações que executam fora do navegador (aplicações back end, mobile, desktop...).

Só pra relembrar, JavaScript é uma linguagem de programação interpretada e multiparadigma criada para adicionar interatividade nas páginas web, ou seja, ela foi desenvolvida com o intuito de ser usada no navegador.

Foi o Node que trouxe essa possibilidade de executar JavaScript fora do navegador.

Hoje em dia já existem outros ambientes de execução de JavaScript como Deno ou Bun, mas o Node foi o pioneiro, lançado em 2009.

A capacidade de desenvolver tanto o front end quanto o back end de uma aplicação usando apenas uma linguagem de programação é fantástica. É uma das grandes vantagens do JavaScript, embora alguns profissionais questionem a utilização no lado do servidor.

Pensando no lema "Write once, run anywhere" do Java, temos o nosso: learn once, run everywhere.

O Node é baseado no motor V8, que é o mesmo do Google Chrome, ele que lê e executa o código JavaScript no navegador. Uma característica importante é que um motor JavaScript é independente do navegador em que ele executa, essa característica foi o que permitiu a criação do Node e dos outros ambientes.

Existem outros motores de JavaScript:

SpiderMonkey, usado pelo Firefox
JavaScriptCore, utilizado pelo Safari e pelo Bun
Chakra, era usado pelo Edge, que usa o motor V8 atualmente

Eu disse anteriormente que o JavaScript é considerado uma linguagem interpretada, porém os motores possuem uma etapa de compilação just-in-time (JIT), levando-o a ser uma linguagem interpretada e compilada.

Importante ressaltar que o Node não tem acesso as APIs de manipulação do DOM, window, localStorage, etc. No lugar dessas ele tem sua biblioteca padrão que permite ter acesso ao sistema de arquivos, escutar requisições HTTP, gerar UUIDs, emitir eventos e tantas outras coisas.

// ❌
const element = document.getElementById('js-in-server')
console.log(element.textContent)

// ✅
import fs from 'fs'

fs.readFile('js-is-really-cool.md', 'utf-8', (err, content) => {
  console.log(content)
})

O Node vem equipado com o gerenciador de pacotes NPM (Node Package Manager) que serve para organizar, instalar e resolver as dependências de projetos.

NPM também é o registrador de pacotes padrão, é onde as bibliotecas e frameworks são registrados para serem utilizados posteriormente.

Só para esclarecer, existe a ferramenta de gerenciamento de pacotes NPM e o registrador desses pacotes, que também se chama NPM. Mais sobre aqui.

Alternativas à ferramenta são yarn e pnpm. O ambiente Bun também tem um gerenciador de pacotes compatível com o Node e que tem a proposta de ser o substituto mais rápido entre as opções que citei antes.

Falando do registrador, esse ano surgiu uma espécie de alternativa moderna que diz ser feita para especialmente pensando em Typescript e ESM, o JSR. Só a título de conhecimento, continuo usando e recomendo o NPM.

Resumindo, se você está começando seus estudos de JavaScript e Node, use o Node e o NPM.

Depois você decide se vai usar o yarn porque é mais bonitinho, o pnpm pois é mais rápido ou o Bun porque é o melhor (🔥).

Instalando o Node

Na instalação você pode seguir o tutorial do site mas eu recomendo usar um gerenciador de versões porque vai facilitar bastante caso você precise trocar de versão.

Acredito que esses sejam os principais:

Eu uso o asdf junto com o plugin do node. O asdf é um gerenciador de versões genérico, com ele basta adicionar o plugin da ferramenta/runtime que você quer gerenciar e pronto.

Prefiro não colocar nada aqui para que não fique desatualizado, minha dica é: use um gerenciador de versões. Abra a documentação dos que citei e leia.

Novas funcionalidades

Não são novas novas, mas são legais e não existem desde o começo. Perdão pelo bait...

Tem um arquivo .env e quer carregar os valores? Carregamento de variáveis de ambiente.

// Digamos que você tenha a váriavel SECRET_KEY=jsmelhorquejava

// $ node env.js
console.log(process.env.SECRET_KEY) // undefined

// $ node --env-file=.env env.js
console.log(process.env.SECRET_KEY) // jsmelhorquejava

Quer escrever testes sem ter que adicionar dependências como Jest, Mocha ou Vitest? O executor de testes nativo foi introduzido de forma estável na versão 20.x .

import assert from 'assert'
import { it, describe } from 'test'

describe('user entity', () => {
  it('should create user instance', () => {
    // ...
  })
})

Quer executar TypeScript? Usa Bun! Brincadeiras à parte, é possível executar código .ts usando Node, ainda experimental.

# Usando o Node V22.6.0 pra cima
node --experimental-strip-types tsisawesome.ts

Por enquanto é isso, pretendo ir atualizando essa revisão pra cobrir mais alguns tópicos que vou revisar, além do que é event loop e sua importância.

Um fato divertido é que eu desenvolvi meu primeiro servidor HTTP usando Node e foi com ele que descobri que gostava de desenvolvimento back end, um caminho sem volta.

Obrigado por ler!

Open source, learn in public e minha experiência

Sun, 20 Oct 2024 18:00:00 GMT

Tudo certo? Quero começar a semana fomentando as iniciativas de projetos públicos e trazer um pouco da minha experiência construindo projetos open source.

Vamos começar colocando os pingos nos is.

O que é open source

Open source significa "código aberto" e é uma corrente no mundo da tecnologia que busca a construção transparente e colaborativa de software. É possível ver o código fonte de um projeto open source, entendê-lo, sugerir alterações ou fazê-las por conta própria, entre outras possibilidades.

Alguns projetos open source:

O conhecido kernel Linux
O sistema de versionamento de código mais utilizado, git
Zen browser, um recente navegador baseado no Firefox
A rede social Bluesky
O emulador de terminal que uso, WezTerm

E a lista segue. Quantas aplicações e ferramentas que você usa são open source?

O GitHub é uma plataforma de hospedagem de software (código e afins) que é bastante usada pela comunidade open source porque

Usa Git
Tem ótimas ferramentas
Tem várias funcionalidades que facilitam o trabalho colaborativo

Outro ponto importante, um projeto open source deve ter uma licença que restrinja o acesso e as modificações do código para proteger os criadores, contribuidores e até mesmo os usuários.

O que é learn in public e build in public

Learn in public, aprenda em público ou aprendizado público é a prática de compartilhar a sua jornada de aprendizado. É ir na sua rede social favorita e postar isso

Estou aprendendo x! O conceito y é bem simples mas o z me pegou, alguém pode me ajudar?

Não tenha vergonha! Você vai ter diferentes respostas, como:

"Que legal! Também estou aprendendo x, porém não entendi o conceito y ainda..."
"Isso é fácil demais, como você não compreende?"
"O artigo w me ajudou a entender z, dá uma olhada."

O importante é você saber extrair o melhor disso.

Caso alguém se identifique e diga que não sabe algum tópico que você compreende (um pouco pelo menos), tente explicar da melhor forma que conseguir. Ensinar é uma das melhores formas de reforçar o conhecimento.

Se a pessoa te oferece ajuda ou mentoria, aproveite, agradeça e pergunte.

Se alguém for rude ou insensível, pergunte qual foi o erro ou simplesmente ignore/bloqueie.

Não tenha medo de errar. Se você errar, vão te corrigir e você vai aprender também.

Vale ressaltar que você não tem só sua rede social pra ser público. Mantenha um blog, comece uma newsletter, poste vídeos no YouTube, faça live na Twitch...

Build in public ou construa em público é uma especialização do aprendizado público, nele você expõe as dificuldades, erros e aprendizados que você teve na construção de um projeto pessoal ou profissional.

É uma maneira orgânica e funcional de converter leads, atrair investidores e criar marca. Um bom exemplo disso é a alertpix do Daniel e do Christopher que cresceu bastante por conta das publicações no Twitter/X, Instagram e TikTok.

Pra mim, dois benefícios absurdos de todo esse processo de compartilhar, ensinar, construir, errar e ser ensinado (além do aprendizado) são:

Documentação do teu processo. Você cria um histórico, uma trajetória visível que pode ser acompanhada ou revivida no futuro.
Visibilidade. As pessoas se identificam, querem acompanhar seu progresso e você pode acabar virando referência em determinado assunto.

A visibilidade não é o objetivo, você não deve esperar likes, mas é verdade que ela também aumenta sua "sorte". Inclusive, uma vez li no blog do GitHub um artigo muito bom sobre como publicar o seu trabalho aumenta sua "sorte", "Publishing your work increases your luck", um trecho a seguir:

For every snarky comment, there are 10x as many people admiring your work.

Como o criador do movimento descreveu em "Learn In Public", o aprendizado público é o jeito mais rápido de aprender.

Por que praticar o learn in public (tl;dr)

Acelera seu aprendizado
Ajuda a criar conexões, o famoso networking
Contribui para o aprendizado alheio
Novas oportunidades como consequência da visibilidade

Como praticar

Construindo um projeto open source (e divulgando ele)
Postando um vídeo no YouTube explicando um conceito
Postando um vídeo ensinando como criar um projeto usando uma tecnologia específica
Mantendo um blog e escrevendo sobre a construção dos seus projetos, seu dia a dia, suas filosofias sobre software
Criando um canal na Twitch e fazendo stream construindo software e explicando (live coding)
Postando vídeos curtos no YouTube ou TikTok dando dicas rápidas

A verdade é que existem muitas maneiras de praticar o learn in public, se você está aprendendo e tornando seu aprendizado público em alguma plataforma/rede social, você está praticando o learn in public.

Existem várias soluções de blogging como Substack, Medium, Hashnode, WordPress, etc.

Também existem diversos fóruns onde você pode publicar seus escritos, tipo o TabNews, dev.to e o Reddit.

Não esqueça das redes sociais: Twitter/X, Bluesky, Instagram, TikTok, YouTube, Twitch, LinkedIn...

Unindo learn in public e open source

Não tem segredo, começar um projeto open source por si só já é praticar o learn in public, a questão é maximizar o alcance dos seus projetos por meio das redes sociais que você usa.

Quando iniciei meus estudos de desenvolvimento web optei por estudar sozinho, sem falar publicamente sobre, isso em meados de 2021.

Eu fiquei quase 3 anos na "caverna" e em 2024, quando decidi criar minha conta no Twitter e interagir diretamente com a comunidade dev, minha carreira começou.

O "boom" da minha integração com a bolha dev foi durante a segunda edição da Rinha de Backend, uma competição de soluções back end. Nesse evento compartilhei o desenvolvimento da minha solução, meu aprendizado da linguagem Go e participei de várias discussões sobre o desafio.

Desde de então postei sobre meus projetos pessoais, estudos e códigos.

Depois disso fui contratado para fazer uma modificação em um blog sobre computarias e recebi um convite valioso para trabalhar em um projeto confidencial.

Eu concordo que as oportunidades vieram ao acaso, mas acredito que ser mais público influenciou minha "sorte". Sou grato a isso, ao learn in public, as pessoas que me impulsionaram e as pessoas que interagi e agregaram de alguma forma.

Sobre os projetos que eu construí publicamente, gostaria de ressaltar

Os repositórios aprendendo alguma tecnologia, onde eu documentei vários tópicos que aprendi sobre as tecnologias
Esquilo Aniquilador - minha solução da segunda edição da Rinha de Backend
ruke - uma ferramenta para executar comandos configurados em um projeto, inspirada no GNU Make e just
themis - analisador de perfil do Bluesky, conta 7 contribuidores atualmente

Enfatizei esses porque foram os que eu mais divulguei e tive um feedback bacana. Eu normalmente crio meus projetos públicos e com licença MIT, porém esses escolhidos se sobressaem.

Obrigado por ter lido! Espero que tenha te ajudado de alguma maneira.

Onde me encontrar:

LinkedIn: kauefraga
GitHub: kauefraga
Bluesky: kauefraga.dev
Twitter/X: rkauefraga
Dev.to: kauefraga
TabNews: kauefraga

Referências:

Recriando um jogo clássico com Python

Sun, 01 Sep 2024 12:00:00 GMT

Esse é o primeiro capítulo de uma série em que eu compartilho o meu processo de construção de um jogo clássico, o ping pong ou pong.

Essa história começou na escola, onde eu criei um protótipo bem rápido utilizando a linguagem de programação Python durante a aula de programação de aplicativo.

Minha implementação consistia em

tela com cor de fundo
duas raquetes controladas pelas setas e teclas <kbd>wasd</kbd>
bolinha com detecção de colisão (parede e raquete)
placar centralizado no topo

Isso foi feito usando a biblioteca Pygame.

Em 2023 também fiz um ping pong para Windows usando c++ e a biblioteca Raylib, até publiquei sobre no TabNews, "Ping pong, um grande clássico".

Meu objetivo com essa terceira versão que estou fazendo é ter um ping pong definitivo, completo, bonito e multiplataforma. Também quero impressionar meus colegas 😅

Acima dessas metas, quero me divertir construindo um joguinho.

Usando Python e Pygame, comecei a terceira versão do clássico, o Pyng Pong.

Minha primeira dificuldade foi configurando um ambiente virtual para isolar as dependências e preparar um interpretador do Python.

Felizmente a resolução foi simples:

# usando Linux e fish

python -m venv .venv # para criar um ambiente virtual em .venv

source .venv/bin/activate.fish # para usar o ambiente virtual

Depois arrumei meu Visual Studio Code para usar o Python, instalando essas extensões:

Abri meu VSCode e comecei a codar.

code . --profile Python

Essa funcionalidade de perfis é bem legal, você pode ver mais sobre na documentação do VSCode.

Preparando a base

Um jogo é um aplicativo que executa em tempo real, ou seja, as instruções do jogo são executadas em loop até que o mesmo seja encerrado. A partir disso, enxergamos uma parte importante do nosso jogo, o chamado "game loop".

Pensando de maneira simplista, um jogo pode ser dividido em 3 etapas:

Inicialização
Game loop
Finalização

Na inicialização nós criamos o processo e reservamos os recursos que vamos usar no nosso jogo, como os efeitos sonoros, imagens de fundo, dados de entidades, etc.

Já no game loop tratamos de 2 partes: atualização dos dados e renderização. Aqui a gente detecta colisões, escuta eventos, atualiza as coordenadas das entidades e muito mais.

Na finalização, simplesmente fechamos conexões e liberamos os recursos reservados na primeira etapa.

Esse foi um resuminho bem grosseiro do que é um jogo e quais são as fases genéricas do mesmo.

Vamos para o código, começando com o game loop que aparece logo no início da documentação do Pygame.

import pygame

# inicialização (1)
pygame.init()
screen = pygame.display.set_mode((1280, 720))
clock = pygame.time.Clock()
running = True

# game loop (2)
while running:
  # atualização (2.1)
  for event in pygame.event.get():
    if event.type == pygame.QUIT:
      running = False

  # renderização (2.2)
  screen.fill("purple")

  # sim, vai aparecer uma tela roxa, apenas

  pygame.display.flip()

  clock.tick(60)

# finalização (3)
pygame.quit()

Bem direto, não?

Buscando modularidade para gerenciar os dados e as cenas, eu pensei na seguinte estrutura:

# src/
#   main.py <-- estamos nesse arquivo
#   gameplay.py
#   menu.py

from game import Game
from menu import menu_scene
from gameplay import gameplay_scene

scenes = {
  0: menu_scene,
  1: gameplay_scene
}

def run_game():
  game = Game()

  while game.running:
    scene = scenes.get(game.scene)
    scene(game)

if __name__ == '__main__':
  run_game()

Obs.: não tem nada de clean code, functional programming, solid, kiss, design patterns ou outros princípios sendo aplicados nesse projeto. Estou apenas desenvolvendo...

Como é um jogo relativamente pequeno, escolhi criar uma classe que contém todos os atributos compartilhados e recursos necessários, acoplamento 100%.

Uma classe tem o método construtor def __init__ e o método destrutor def __del__, que funcionam perfeitamente nas nossas etapas de inicialização e finalização.

Sobre as cenas, usei uma lookup table (ou dicionário) para facilitar na execução de uma cena específica. O dicionário consiste em uma chave (cena atual) e um valor (função de atualização e renderização da cena). No objeto do jogo (game) tem um atributo scene que guarda o valor da cena atual, valor esse que corresponde a uma chave do dicionário, então eu só preciso pegar no dicionário a função que vai cuidar da cena atual com a chave correspondente e executa-la.

Por enquanto é isso! Ainda preciso organizar melhor as outras partes (entidades, componentes de texto, botões...) e como tudo isso vai se comunicar em cada cena antes de escrever um texto completo sobre, por isso decidi separar essa jornada em uma sériezinha. Assim posso escrever a medida que vou aprimorando o jogo e lidando com os desafios.

Espero que tenha gostado e aprendido algo novo. De qualquer forma, muito obrigado por ler!

Desbravando o poder do markdown

Mon, 12 Aug 2024 18:23:45 GMT

Salve, salve! Vamos aprofundar nossos conhecimentos em markdown.

Este é o quarto capítulo de uma série sobre markdown, caso queira ler os capítulos anteriores

Sem mais delongas, bora pro markdown!

Lista de tarefas

Você deve conhecer as listas ordenadas e não-ordenadas, correto?

fulano
ciclano
beltrano

item
item
item

E se eu te dissesse que é possível fazer uma lista com marcações?

- [x] tarefa x
- [ ] tarefa y
- [ ] tarefa z

[x] tarefa x
[ ] tarefa y
[ ] tarefa z

Tabelas

Com linhas e colunas, uma tabela pode melhor a visualização e facilitar a busca de informações.

| Coluna 1 | Coluna 2 | Coluna 3 |
|----------|----------|----------|
| Item 1   | Item 1   | Item 1   |

Resultado:

Coluna 1	Coluna 2	Coluna 3
Item 1	Item 1	Item 1

Você pode escolher como os textos ficam alinhados e usar os estilos de texto dentro da tabela também.

Coloque : no início do divisor e as células vão ficar alinhadas à esquerda. No final, alinhadas à direita. E se você colocar : no início e no fim do divisor o texto vai ficar centralizado.

Um exemplo:

| Nome completo  |         Idade |
|:--------------:|--------------:|
|  João `Silva`  | <kbd>27</kbd> |
| Ana *Carvalho* |            20 |
| Beatriz Souza  |        **35** |

Nome completo	Idade
João `Silva`	<kbd>27</kbd>
Ana Carvalho	20
Beatriz Souza	35

A tag kbd serve pra mostrar entradas do teclado, veja mais na documentação da mdn sobre kbd.

Sobre tabelas é isso, bem simples, não?

A formatação das tabelas no markdown pode dificultar bastante a leitura, então tente sempre manter as tabelas bem formatadas.

Uma dica pra quem usa o Visual Studio Code: instale a extensão Markdown Table Prettifier.

Vídeos

Colocar uma demonstração visual de um conceito ou projeto pode ser poderoso, mas nem todos os processadores de markdown tem uma sintaxe pronta pra isso.

A forma mais simples e totalmente compatível é usando HTML puro.

<div align="center">
  <video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4" />
  </video>
  <p>esta é a legenda do vídeo (caption)</p>
</div>

<div align="center"> <video width="500" height="300" controls> <source src="video.mp4" type="video/mp4" /> </video> sim, não tem um vídeo -_- </div>

A div para centralizar e o parágrafo (p) não são necessários, você pode remover caso queira. Recomendo que dê uma olhada na documentação da tag video.

Não testei mas quero compartilhar que de acordo com uma postagem no blog do GitHub é possível apenas colocar um link que termine com a extensão mp4 ou mov e o GitHub cuida da renderização para você.

Outra forma de expor uma demonstração é usando um gif, que foi o que eu fiz no projeto Ruke (porque eu não conhecia a tag video). Você converte o vídeo para o formato gif usando uma plataforma ou ferramenta e usa a sintaxe de imagem.

![texto alternativo](demonstracao.gif)

Tenha em mente que gifs têm a qualidade reduzida e ausência de áudio.

Notas de rodapé (footnotes)

Sabe aquelas referências da Wikipédia[^1], então...

Nunca utilizei mas pode fazer sentido no seu documento ou em documentos grandes.

Aqui está meu texto falando e do nada pneumoultramicroscopicossilicovulcanoconiótico[^pneu].

[^pneu]: doença pulmonar causada ao inalar partículas finas de sílica provenientes de atividades vulcânicas.

Identificação de títulos (heading IDs)

Mesmo invisível é muito útil. Serve para você mudar a âncora daquele título/subtítulo e isso é útil quando você tem um título grande ou com emojis.

Qual link você prefere:

github.com/kauefraga/anubis#um-titulo-realmente-muito-grande-lorem-ipsum-blablabla
github.com/kauefraga/anubis#titulo-lorem

Imagino que a segunda opção, afinal, o título vai estar escrito no texto e não precisa necessariamente estar na url.

# Um título realmente muito grande lorem ipsum blablabla {#titulo-lorem}

### Um subtítulo não muito grande mas grande {#subtitulo}

O resultado do texto é o mesmo mas a âncora não, estará encurtada.

Superscript e subscript

Aquele texto em cima ou embaixo, tipo em expoentes ou quantidade de moléculas.

Também vai depender do seu processador markdown, mas a solução em HTML é a seguinte:

x<sup>2</sup> e H<sub>2</sub>O

Este texto <sup>é muito</sup> <sub>legal</sub>

x2 e H2O

Este texto é muito legal

Diagramas mermaid

Em plataformas que usem Mermaid é possível usar markdown para fazer diagramas (e vários tipos deles). O GitHub e o GitLab, por exemplo, suportam esses diagramas.

Como existem diversos tipos de diagramas e está tudo documentado, quero mostrar só dois exemplos.

Um fluxograma:

\```mermaid
flowchart LR
  cliente --- servidor
\```

flowchart LR
  cliente --- servidor

Uma representação de ramificações Git:

\```mermaid
---
title: Branches git
---
gitGraph
  commit
  commit
  branch develop
  checkout develop
  commit
  commit
  checkout main
  merge develop
  commit
  commit
\```

---
title: Branches git
---
gitGraph
  commit
  commit
  branch develop
  checkout develop
  commit
  commit
  checkout main
  merge develop
  commit
  commit

Muito massa, né?

Só não esquece de tirar as contra barras \ ali...

É isso! Te agradeço por acompanhar até aqui, espero que tenha gostado e aprendido algo novo ao longo do caminho.

Com este capítulo, eu finalizo essa série de markdown. É claro que na medida necessária irei atualizando esses 4 textos.

Instalando o Ruke pelo GitHub Releases

Mon, 20 May 2024 12:00:00 GMT

Opa! Bão? Segundei aqui com scripting (bash e powershell).

Decidi criar um pipeline para disponibilizar o binário do ruke direto no GitHub. Com isso, quem não tem um setup Rust pode instalar o ruke e usar sem nenhum problema.

Para facilitar mais ainda a instalação e configuração, nada melhor do que um scriptzão, não é mesmo?

Instalando no Linux/WSL e MacOS

Primeiro utilitário que veio em mente foi o curl.

Abri um arquivo .sh e comecei assim:

#! /bin/bash

curl -OLs https://github.com/kauefraga/ruke/releases/latest/download/ruke-x86_64-unknown-linux-gnu.tar.gz

curl [url] para fazer uma requisição para a url
-O para criar um arquivo local nomeado tal qual o arquivo remoto (curl -O)
-L para seguir redirecionamentos (curl -L)
-s para silenciar a saída (curl -s)

Depois de baixar, tem que descompactar esse .tar.gz e remove-lo.

tar -xzf ruke-x86_64-unknown-linux-gnu.tar.gz

rm ruke-x86_64-unknown-linux-gnu.tar.gz

tar [arquivo] para trabalhar um arquivo .tar
-x para extrair o arquivo
-z para descompactar com gzip
-f para criar o arquivo final, eu acho

Poderia adicionar a flag -v (verbose) para ter mais informações na saída, mas não é necessário.

Perfeito! Mas agora eu preciso criar outro script para pegar o arquivo do MacOS certinho, não? Não mesmo.

Dei uma pesquisada e achei uma resposta legal no Stack Overflow sobre como detectar o sistema operacional com bash.

Existe uma variável chamada $OSTYPE que armazena o sistema operacional atual. Creio que seja possível guardar o resultado do comando uname em uma variável e usa-la também. Com o sistema operacional em mãos, basta mudar o arquivo dependendo do SO.

Usando uma variável ($binary) juntamente com a variável $OSTYPE eu cheguei nessa solução:

#! /bin/bash

binary='ruke-x86_64-unknown-linux-gnu.tar.gz'

if [[ "$OSTYPE" == "darwin"* ]]; then
    binary='ruke-x86_64-apple-darwin.tar.gz'
fi

curl -OLs https://github.com/kauefraga/ruke/releases/latest/download/$binary

tar -xzf $binary

rm $binary

echo 'Reminder: add ruke in your PATH or move it to a local where PATH is already set'
echo '$ mv ruke /usr/bin/'

Para Linux, WSL e MacOS é isso!

Instalando no Windows

Para Windows, a ideia não vai ser diferente: faz o download, extrai e limpa a sujeira. Sem enrolação, veja o resultado:

Invoke-WebRequest 'https://github.com/kauefraga/ruke/releases/latest/download/ruke-x86_64-pc-windows-msvc.zip' -OutFile 'ruke-x86_64-pc-windows-msvc.zip'

Expand-Archive -Force -Path 'ruke-x86_64-pc-windows-msvc.zip' -DestinationPath '.'

Remove-Item 'ruke-x86_64-pc-windows-msvc.zip'

Write-Host 'Reminder: add ruke in your PATH or move it to a local where PATH is already set'

O powershell é bem reconhecível pelo início das palavras em maiúsculo. Powershell "idiomático" talvez...

Vale ressaltar também que Invoke-WebRequest pode ser só iwr, assim como Remove-Item e Write-Host poderiam ser apenas rm e echo, respectivamente.

Novamente, foi pesquisando que encontrei a forma de extrair um arquivo zipado com Expand-Archive, aqui.

Pelo que vi também é possível usar tar para extrair no Windows ("Native tar extraction in powershell"). E usar o utilitário 7z seria outra opção viável.

A lição

Depois disso, eu pude refletir e concluir:

Hoje em dia, com acesso à Internet e tempo, só lhe resta encontrar a pergunta certa.

Acho que esse pensamento é bem comum. Você não sabe nada sobre scripting, em seguida você pesquisa e é capaz de criar uma automação para algum processinho chato do seu projeto ou do seu dia a dia. Provavelmente você não aprendeu a usar as ferramentas que utilizou, mas o que importa é que você conseguiu facilitar sua vida.

Se quiser trocar uma ideia comigo, pode me mandar uma DM no Twitter/X.

Boa semana e muito obrigado por ler! Espero ter ajudado ❤

O projeto e os arquivos citados podem ser encontrados nos links abaixo.

Personalizando o README do seu perfil do GitHub

Sun, 12 May 2024 12:00:00 GMT

Opa, tranquilo? Bora deixar o README do teu GitHub bonitão!

Antes de começar realmente, se você não sabe o que é README nem markdown eu recomendo fortemente que veja os outros artigos dessa série.

O README do GitHub é o cartão de visita do seu perfil. Antes de personalizar ele, você precisa criar ele.

Criando README

Crie um repositório com o mesmo nome do seu perfil. Como meu nome de usuário é "kauefraga" o nome do repositório seria "kauefraga" também.

Para facilitar seu trabalho já inclua o arquivo README no seu repositório.

Feito isso você está pronto para customizar o seu README.

Eu recomendo que você coloque as seguintes informações:

O que você gosta de fazer
Planos para o ano atual
Projetos
As tecnologias (tech stack) e ferramentas que você usa
Contato

Vale ressaltar que o README deve ficar com a sua cara, com o que você gostar e achar que deve ter. Reflita sua extravagância, seu minimalismo, suas cores favoritas, tudo que te represente.

Para editar pelo próprio GitHub clique no lápis para editar, veja a seguir.

A partir de agora é contigo, totalmente pessoal. Vou deixar vários materiais e inspirações de estilos e layouts.

Uma coisa que eu gostaria de ressaltar, eu gosto de ter um README bonitinho e algumas pessoas (recrutadores, outros desenvolvedores, etc.) olham sim, porém não leve tão a sério. Faça porque você quer falar um pouco sobre quem você é e expor informações técnicas suas.

GitHub Readme Stats

Com esses cards você pode mostrar informações relevantes do seu perfil do GitHub e personalizar as cores.

Veja o repositório ou vá direto para a seção dos cards.

Skill Icons

Quer expor as tecnologias que você usa, está estudando ou querendo estudar? Tá na mão!

Veja o site ou vá direto na documentação.

Se você não viu ainda, na seção sobre mim do blog eu uso os skill icons.

Markdown Badges

Veja o repositório markdown badges e o badges for readme.md profile.

Snake Game

Você deve conhecer o jogo da cobrinha, certo? Imagina uma cobrinha comendo suas contribuições no seu gráfico de contribuições.

Veja o repositório e um tutorial de como adicionar no seu perfil.

Wakatime

Quer exibir métricas do seu tempo em x projeto ou usando y linguagem de programação? Comece a usar o wakatime e veja esse artigo também, "Exibindo no Github métricas de tempo gasto em linguagens usando Wakatime".

Inspirações

Não tem nada melhor que ter opções para se inspirar, né? Aqui vão alguns READMEs que eu considero legais. Clique na imagem para ir até o README.

Começando com o meu 😂

Sem frufru? Olha esse do Filipe

Simples mas nem tanto? O Lucas amassou aqui

Nessa mesma ideia, a Tifany arrasou também

Continuando...

Recomendações

Estarei aberto para dúvidas ou sugestões pelo Twitter/X.

Muito obrigado por ter lido até aqui ❤.

Ruke, uma ferramenta de automação de tarefas

Sun, 05 May 2024 12:00:00 GMT

Opa, tudo bem? Queria compartilhar um projeto que estou fazendo e mantendo.

O Ruke é uma ferramenta simples para automatizar tarefas de um projeto. Com ele, você pode definir uma tarefa com comandos que serão executados de maneira sequencial. Essas tarefas e comandos ficam em um arquivo TOML bem fácil de ler e configurar.

O projeto é feito em Rust e tem uma interface de linha de comando (CLI).

Veja uma demonstração do Ruke na versão 0.1.3.

Escolhas importantes

Decidi desenvolver esse projeto usando Rust porque é uma linguagem de programação que estou aprendendo e ela tem uma boa reputação quanto a criação de ferramentas para desenvolvedores.

O Ruke foi totalmente inspirado pelo GNU Make e pelo just, porém uma diferença relevante está na escolha do arquivo de configuração. Enquanto esses projetos citados optaram por ter um formato próprio, eu escolhi usar o TOML por alguns motivos:

Dados os objetivos, não há necessidade de um controle total da implementação (sintaxe, funcionalidades, estruturas de dados).
A diferença do esforço para os ganhos de escrever um parser próprio é drástica.
Usar um formato simples e conhecido faz com que a curva de aprendizado seja mínima.

E esse nome, veio de onde?

O nome "ruke" é uma combinação de "rust" e "make".

O primeiro nome era "rufile" de "rust" e "makefile", mas em um post meu no Twitter o coelho Jeff Quesado comentou sobre o comando que seria utilizado e deu uma sugestão: Makefile -> make, Rufile -> ruke.

A partir desse momento, o projeto começou a se chamar ruke e o arquivo Rukefile (por implicações práticas, atualmente o arquivo principal é Ruke.toml).

Primeiros contribuidores

Eu tenho pouquíssimos repositórios privados, tudo que fiz e faço gosto de deixar público para os outros verem, se inspirarem, sugerirem alterações ou melhorias.

Open source and build in public are the ways!

Felizmente, conheci pessoas incríveis no Twitter (uma surpresa, não?) que me ajudaram e decidiram contribuir para o Ruke.

Uma delas já foi citada, o Jeff, que deu a ideia do nome.

O Felipe Cassiano foi o primeiro contribuidor do projeto em si, forkou, desenvolveu e mandou alguns pull requests. As mudanças mais significativas que ele fez foram:

Implementar o comando list que serve para listar as tarefas existentes.
Desenvolver os comandos add e remove que serviam para adicionar e remove tarefas do arquivo Ruke.toml (ainda existem mas foram modificados).
Adicionar um modo interativo para os comandos add e remove.
Implementar a troca da estrutura de dados principal de vetor para hash map.

E por último mas não menos importante, o Shwuy, que implementou uma busca pelo arquivo Ruke.toml usando o iterador Ancestors.

Essas contribuições agregaram na performance e, principalmente, na usabilidade da ferramenta.

Agradeço muito a eles por terem me ajudado a construir esse projeto (e não só), têm um espaço no meu coração. Foram os primeiros contribuidores de um projeto meu.

Atualização mais recente

A última atualização do Ruke (0.1.6) incrementou ainda mais a usabilidade. Inspirado no Bun, modifiquei as saídas do executor de tarefa e do comando list para que apareçam mais informações úteis.

Dá uma olhada em como ficou.

Tenho gostado bastante do projeto pois adoro criar ferramentas para desenvolvedores e também porque está sendo útil para mim, tanto no âmbito do aprendizado quanto da utilização. Inclusive, estou usando o Ruke em um projeto full stack que comecei recentemente chamado Inu (aquele ali em cima no gif, é o back end).

Caso tenha ficado interessado em testar o Ruke, recomendo que instale pelo Cargo usando o comando abaixo:

cargo install ruke

Para iniciar um arquivo de configuração, basta executar:

ruke init

Pra executar a tarefa "main", execute:

ruke # ou ruke main

Com o comando ruke --help você pode ver um menu de ajuda com os comandos que existem e o que eles fazem. O comando ruke {comando} --help irá mostrar mais detalhes de um comando específico.

Você pode aprender como adicionar tarefas e especificar comandos na documentação, nas seções "Mastering the CLI" e "Mastering the Rukefile" no repositório do projeto.

Estarei aberto para dúvidas ou sugestões por aqui ou pelo Twitter/X se preferir.

Muito obrigado por ter lido até aqui ❤🦀.

Fonte: repositório do Ruke

Colocando coelhinhos no computaria e enlouquecendo

Sat, 06 Apr 2024 12:00:00 GMT

Publicado originalmente no Computaria

Olá! Me chamo Kauê, tenho 16 anos e é um prazer estar redigindo este texto como o primeiro convidado do Computaria 😊

Eu tava no intervalo da escola, de boa, quando de repente chegou uma mensagem na minha DM do Twitter/X. Era o Jeff Coelho Quesado me perguntando se eu sabia CSS e se eu poderia colocar alguns coelhos desenhados pelo @arorok_ no Computaria.

Fiquei animado porque ele estava pedindo para mim e seria minha primeira experiência resolvendo o problema de outra pessoa com código. Por outro lado, fiquei com o pé atrás pois eu tenho um conhecimento superficial de CSS e o pedido do Jeff caiu como um caso de aplicação do CSS que meu conhecimento não contempla. Mesmo com essa desvantagem clara, resolvi aceitar. Afinal não é todo dia que alguém me pede para solucionar seu problema.

Cheguei em casa, instalei o ruby, gems e o jekylls. Clonei o Computaria e botei pra rodar. Dando uma olhada percebi que minhas alterações seriam no _layouts/post.html e no _sass/_layout.scss. Mexi aqui, ali e nada do que eu queria acontecia, então decidi iniciar uma POC só com HTML e CSS.

Trabalhando na POC

Comecei com a tag <img /> + um WIP do coelho só para posicionar e ter uma ideia de como ficaria porque o Jeff queria esse trabalho CSS-only.

O Jeff disse que poderia ficar atrás do título também e quando fui tentar fazer isso, usei o combo position: relative; + position: absolute; + z-index: 0 e 1;. Se você conhece CSS provavelmente sabe que position: absolute; é cilada quase sempre.

Falei pro Jeff que cheguei perto do resultado esperado usando posição absoluta e ele prontamente ficou com o pé atrás:

"Absolute 😨"

"Será que seria possível botar como um :after associado a classe do título?"

Dei uma pesquisadinha sobre o :after e consegui remover o posicionamento absoluto. A primeira vitória!

.post-title:after {
  position: relative;
  content: "";
  display: inline-block;
  transform: translateY(20%);
  width: 80px;
  height: 80px;
  background-image: url('caminho/para/a/imagem-do-coelho.png');
  background-size: cover;
  z-index: -1;
}

Posicionando coelhos nas laterais

A primeira coisa que pensei aqui, foi: "vou usar um background-repeat e dar um espacinho entre cada repetição". Depois de vários tentativas e combinações diferentes das propriedades background-algumacoisa o melhor resultado foi esse:

Abalou tudo! Eu não tinha entendido o que o Jeff queria com o "coelhos nas laterais", porém certamente não era isso. Tentei, tentei e a cada teste eu entendia menos sobre as diferenças entre as propriedades em torno do background-repeat. Enlouqueci...

Aplicando no Computaria

Voltando ao Computaria após entender algumas coisas com a POC, fui direto no _sass/_layout.scss que eu comentei e adicionei aquele código ali em cima na classe .post-title:after.

Rodei o Computaria com bundle exec jekyll serve e depois de abrir alguns posts percebi que quando o título era grande demais o coelho podia ficar sozinho na linha de baixo ou obstruir parte do texto acima. E agora?

Mandei pro Jeff e ele disse que o coelho podia ficar na esquerda (espelhado horizontalmente) e aqui está a versão final do coelho no título:

- .post-title:after {
+ .post-title:before {
    position: relative;
    content: "";
    display: inline-block;
-   transform: translateY(20%);
+   transform: scaleX(-1) rotate(-15deg) translateY(20%);
    width: 80px;
    height: 80px;
    background-image: url('caminho/para/a/imagem-do-coelho.png');
    background-size: cover;
    z-index: -1;
}

Agora falta colocar os coelhos nas laterais. O maior desafio de todos os tempos (para um não-especialista em CSS como eu)!

Se liga no que aconteceu, eu comecei a encarar a página do Computaria e reparei nos ícones do lado dos metadados do artigo. Os ícones em questão são as logos do GitLab e do pixmeacoffee 🤩

Na hora me lembrei do fundo do dashboard do pixmeacoffee. Esse aqui:

Mandei pro Jeff e ele gostou da ideia. Peguei a arte final do coelho, desenhado pelo artista @arorok_, abri um canvas no Krita e fiz um fundo inspirado no pixmeacoffee. Se você está lendo esse post, provavelmente pode ver o fundo que eu fiz.

Inclusive, quer me pagar um café 😅? Pix me a coffee!

Obrigado por ler e ao Jeff pelo convite ❤

Personalizando o README do seu projeto

Sun, 24 Mar 2024 12:00:00 GMT

Opa, tudo tranquilo?

Continuando a série sobre READMEs, agora vamos falar da personalização 🤩

Vamos usar markdown para customizar o README do seu projeto com seções, frases, ícones/insígnias, etc. Se você não tem ideia do que é markdown e README, recomendo ler o primeiro artigo desta série, Introdução ao markdown e aos READMES.

Estruturando o README

Pense no modo que você quer expor as informações do seu projeto. Defina uma hierarquia e use vários identificadores (seções, negrito, código...).

Depois de fazer alguns projetos e espiar um bocado de projetos alheios, eu normalmente estruturo meu projeto da seguinte forma:

Título ou nome do projeto
Descrição
Funcionalidades
Como instalar/rodar/usar
Licença

É isso! Simples, não?

Você pode adicionar mais informações, mas eu acredito que essas sejam essenciais.

Se você não sabe o que adicionar, pense em quais informações são importantes para o projeto. Eu tenho algumas sugestões:

documente as tecnologias e a escolha delas
descreva a arquitetura, os padrões de projetos e o porquê dessas decisões
dedique uma seção a sua API (interna ou não)
liste as variáveis de ambiente necessárias para executar o projeto
exemplifique a utilização do projeto (código ou imagem/vídeo)
explique os passos necessários para contribuir
mencione os contribuidores
diga se tem testes e como roda-los

Estilizando essas informações com markdown

Fique atento, em algumas partes eu vou adicionar só a opção discutida (incremental mesmo) e em outras eu vou reescrever boa parte do código já mostrado porque alguma coisinha ali foi alterada.

Especifique o título

Dica: tente criar um nome explicativo e memorável para o seu projeto, por mais difícil que isso seja 😅

# Título do projeto

Centralizado:

<h1 align='center'>Nome do projeto</h1>

Não é possível centralizar com markdown, por isso usamos HTML.

Adicione insígnias legais ao seu projeto

Veja no site shields.io. Segue as que eu mais uso:

Linguagem mais utilizada
Último commit
Palavras/frase estática
Licença
Downloads (GitHub releases, crates.io, npm...)
Versão mais recente

# Título do projeto

![Linguagem mais utilizada](https://img.shields.io/github/languages/top/:nomedeusuario/:nomedorepositorio)
![Último commit](https://img.shields.io/github/last-commit/:nomedeusuario/:nomedorepositorio)
![README bem legal](https://img.shields.io/badge/readme-bem_legal-8A2BE2)

Centralizado:

<div align='center'>
	<h1>Nome do projeto</h1>
	<img src='https://img.shields.io/github/languages/top/:nomedeusuario/:nomedorepositorio' alt='Linguagem mais utilizada' />
	<img src='https://img.shields.io/github/last-commit/:nomedeusuario/:nomedorepositorio' alt='Último commit' />
	<img src='https://img.shields.io/badge/readme-bem_legal-8A2BE2' alt='README bem legal' />
</div>

Lembre-se de trocar as informações :nomedeusuario e :nomedorepositorio.

Coloque uma descrição

# Título do projeto

![Linguagem mais utilizada](https://img.shields.io/github/languages/top/:nomedeusuario/:nomedorepositorio)
![Último commit](https://img.shields.io/github/last-commit/:nomedeusuario/:nomedorepositorio)
![README bem legal](https://img.shields.io/badge/readme-bem_legal-8A2BE2)

Esta é a descrição do meu projeto super legal.

Descrição como citação:

> Esta é a descrição do meu projeto super legal.

Centralizado:

<div align='center'>
	<h1>Nome do projeto</h1>
	<p>Esta é a descrição do meu projeto super legal.</p>
	<img src='https://img.shields.io/github/languages/top/:nomedeusuario/:nomedorepositorio' alt='Linguagem mais utilizada' />
	<img src='https://img.shields.io/github/last-commit/:nomedeusuario/:nomedorepositorio' alt='Último commit' />
	<img src='https://img.shields.io/badge/readme-bem_legal-8A2BE2' alt='README bem legal' />
</div>

Diga quais são as funcionalidades

As funcionalidades podem ser capacidades, rotas ou o que seu projeto fizer.

### Funcionalidades

- Este projeto é capaz de automatizar um processo muito chato
- Este projeto é muito performático
- Este projeto é amigável e intuitivo

## Features

- [x] Este projeto é capaz de receber requisições e responder
- [x] Este projeto é capaz de lidar com requisições simultaneamente, graças ao controle de concorrência implementado
- [ ] Este projeto pode teletransportar uma pessoa para qualquer lugar do planeta a qualquer momento

Perceba a alteração das palavras (funcionalidades e features), nível da seção (h3 e h2) e lista (não-marcada e marcada). Faça como quiser.

Como instalar e rodar

Aqui você precisa descrever o processo de instalação e execução/utilização do seu projeto.

## Como instalar e rodar

1. Clone o repositório
2. Instale as dependências
3. Execute o comando x

<----->bash
git clone https://github.com/usuario/repositorio.git
cd repositorio

npm i
go mod download
cargo build

npm run start
go run cmd/main.go
cargo run src/main.rs
<----->

Obs.: uma observação muito interessante.

Substitua esses <-----> por crases triplas (bloco de código).

Instrua contribuidores

Uma seção dedicada a como contribuir pode ser muito útil. Detalhe o processo de contribuição.

## Contribuindo

Sinta-se livre para contribuir, criar uma issue para reportar um bug, sugerir um alteração na API, uma melhoria ou uma feature. Fique à vontade.

### Como contribuir

1. Faça um fork desse repositório
2. Clone seu fork na sua máquina
3. Faça alterações, commit e dê push
4. Abra um pull request (escreva uma mensagem descritiva sobre o que você alterou)

Mencionar os seus contribuidores e declarar sua gratidão é bacana também. Coloque o ícone dos seus contribuidores.

### Contribuidores

Meus agradecimentos a essas pessoas incríveis:

[![notshwuy GitHub profile picture](https://github.com/notshwuy.png?size=50)](https://github.com/notshwuy)
[![FelipeMCassiano GitHub profile picture](https://github.com/FelipeMCassiano.png?size=50)](https://github.com/FelipeMCassiano)

Exponha a licença

## Licença

Este projeto está sob a licença y - Veja a [LICENÇA](https://github.com/usuario/repositorio/blob/main/LICENSE) para mais informações.

Resultado final

Veja como ficou o README copiando e colando direto daqui:

Basicamente é isso. Lembra que o README é um "cartão de visitas" para o seu projeto? O que você quer mostrar aos seus visitantes? Você deve montar seu README pensando nas informações que são relevantes para o seu projeto. A partir disso, escreva e refine ao longo do tempo.

Fun fact: dependendo do lugar que você pretende colocar seu README (GitHub, GitLab, Bitbucket...) pode existir um superset do markdown como diz o Markdown Guide em extended syntax, que adiciona marcações e melhora o comportamento de algumas existentes.

Se você usa o Visual Studio Code para escrever seus READMEs, eu tenho extensões para recomendar:

Também selecionei alguns dos meus melhores READMEs para você ter uma ideia de como eu faço:

Obrigado por ler 💜

Introdução ao markdown e aos READMEs

Mon, 18 Mar 2024 12:00:00 GMT

Olá, tudo certo?

Hoje vou falar sobre o que é um README, o que é markdown, como escrever um README básico e por que você deveria aprender a sintaxe markdown e escrever READMEs. Bora?

O que é um README

Começando pelo começo, você provavelmente já viu projetos de outros desenvolvedores ou instalou um projeto, uma solução ou um jogo de origem duvidosa e se deparou com aquele arquivo README, README.txt ou README.md. Caso nunca tenha visto, tudo bem.

A tradução de read me é "leia me" e, resumidamente, um README é um arquivo que fica junto de um projeto e serve como um cartão de visita para o mesmo, contendo informações sobre o projeto como: objetivo, capacidade, instalação, documentação em geral, licença, etc.

Deu pra perceber a importância dos READMEs?

Um README geralmente é escrito em markdown, uma linguagem de marcação assim como o HTML. Dito isso, a forma mais comum desse arquivo é essa: README.md.

O que é markdown

Markdown é uma linguagem de marcação simplificada e de fácil uso. O primeiro processador de markdown foi o próprio Markdown feito pelo John Gruber com a linguagem de programação Perl. Ele tinha o objetivo de ser uma ferramenta de conversão de markdown para HTML.

Atualmente existem vários processadores Markdown e variações (ou supersets) da sintaxe, permitindo novas marcações e diferentes saídas. Por exemplo, de markdown para PDF.

Veja um resumo ou cheatsheet da sintaxe markdown:

# Isto é um título ou um h1 em HTML
## Isto é um subtítulo ou um h2 em HTML
### Você já entendeu... vai até o h6 ou ######

Isto é um parágrafo e a palavra **negrito** está em negrito, enquanto a palavra *itálico* está em itálico. ~~riscado~~ e [link](https://example.com).

- eu sou um item em uma lista desordenada
- eu sou outro item na lista desordenada
- eu sou mais um item

> Uma citação blablablablablabla

1. eu sou o primeiro item de uma lista ordenada
2. eu sou o segundo item
3. eu sou o terceiro!

![este é o texto alternativo de uma imagem](https://example.com/imagem.png)

---

Estou abaixo do divisor horizontal.

E o resultado:

Isto é um subtítulo ou um h2 em HTML

Você já entendeu... vai até o h6 ou

Isto é um parágrafo e a palavra negrito está em negrito, enquanto a palavra itálico está em itálico. ~~riscado~~ e link.

eu sou um item em uma lista desordenada
eu sou outro item na lista desordenada
eu sou mais um item

Uma citação blablablablablabla

eu sou o primeiro item de uma lista ordenada
eu sou o segundo item
eu sou o terceiro!

Estou abaixo do divisor horizontal.

Uma ótima referência para você se aprofundar é o Markdown Guide.

Por que aprender markdown e escrever READMEs

Escrever é algo muito importante na vida de um desenvolvedor. Todo projeto, decisão ou solução deveria ter uma documentação que defina, explique e/ou demonstre essas coisas.

Saber markdown facilita muito sua vida ao oferecer uma sintaxe simples e ser convertido em HTML, além de ser quase uma convenção (se não for) no quesito escrita técnica.

Resumo (tl;dr)

Markdown é uma linguagem de marcação que tem uma sintaxe simples, pode ser convertida para HTML e, com isso, ela pode ser usada para escrever textos formatados. Por ser fácil de ler e escrever, o markdown tem uma alta adoção na comunidade de desenvolvimento de software.

O README é como um cartão de visitas e serve para expor os detalhes mais relevantes de um projeto. Pode ser qualquer tipo de arquivo mas normalmente é escrito usando markdown, então um README geralmente tem a extensão .md para demonstrar isso.

Para conhecer a sintaxe, veja essa cheatsheet: Markdown Cheat Sheet.

Fun fact: esse texto foi escrito inteiramente em markdown e faz parte de uma série sobre READMEs :)

Obrigado por ler ❤

Eco, minha implementação em Rust do programa echo

Sat, 24 Feb 2024 12:00:00 GMT

Links: TabNews, DevTo e Twitter/X.

Hey, folks! Hoje quero falar sobre o meu mini-projeto, chamado "eco".

O programa echo basicamente pega argumentos (entrada) e imprime eles na tela do seu console (stdout). O eco, atualmente, faz isso também. Escolhi esse nome porque eu sempre li o programa echo como /ɛko/. Como eu disse, o echo pega a entrada e devolve a mesma coisa, similar a uma reverberação, um eco.

A iniciativa do projeto surgiu quando pesquisei por projetos para fazer em Rust, quero praticar!

A implementação inicial (v0.1.0) foi bem simples, como esperado. Veja o código do commit 516992e:

use std::env;

fn main() {
    let mut args: Vec<String> = env::args().collect();

    /*
     * Read the `remove` docstring.
     * This `remove(0)` is the worst case,
     * all the arguments are going to be
     * shifted to the left, everytime.
     */
    args.remove(0);

    let mut output = String::new();

    for arg in args {
        output.push_str(&format!("{arg} "));
    }

    println!("{}", output.trim());
}

Pega os argumentos passados;
Remove o primeiro argumento, pois ele é o caminho do executável;
Inicializa uma string dinâmica, chamada output;
Itera sobre os argumentos adicionando cada argumento com o formato "argumento-tal " (argumento + espaço) ao final da string output;
Imprime a string output.

Agora na versão 0.1.2, o código está assim:

use std::collections::VecDeque;
use std::env;
use std::process::exit;

fn main() {
    let mut args: VecDeque<String> = env::args().collect();

    args.pop_front();

    let is_help_needed = (args.len() == 1 && args[0] == "-h")
        || (args.len() == 1 && args[0] == "--help");
    if is_help_needed {
        println!("Example: eco-rs Bom dia!");
        exit(0);
    }

    let mut output = String::new();

    for arg in args {
        output.push_str(&format!("{arg} "));
    }

    println!("{}", output.trim());
}

Alterações:

Na linha args.remove(0) havia possibilidade de otimização e mesmo sem conhecer VecDeque, que deve ser um vetor bidirecional (entrada e saída por ambos os lados), a fiz. Essa estrutura de dados possibilita a saída de um elemento do início sem precisar mover os elementos posteriores para trás, o que é vantajoso aqui.
Adicionei um menu de ajuda, que tá bem vazio por sinal.

A distribuição está sendo feito pelo crates.io em eco-rs. Infelizmente a crate "eco" já existia. O legal é que ao executar o comando cargo install eco-rs o Cargo pega a crate e compila na arquitetura do seu computador. Com isso, eu não preciso compilar para todas as arquiteturas disponíveis e manter as releases no GitHub também (deveria, quem não gosta de só baixar o executável e pronto?).

Conclusão

tl;dr: o projeto eco é, atualmente, apenas uma implementação em Rust do programa echo que pega os argumentos de entrada, junta eles em uma string e imprime a string final na saída do terminal.

Pretendo fazer mais umas funcionalidades como colorir palavras específicas e criar uma sintaxe de marcação para estilizar também.

Se quiser acompanhar o projeto, veja o repositório eco.

Você pode me achar no:

GitHub: kauefraga
TabNews: kauefraga
DevTo: kauefraga
Twitter/X: rkauefraga

Obrigado por ler! ❤

Funcionalidades do Rust

Mon, 19 Feb 2024 12:00:00 GMT

Olá! Se você quer saber um pouco mais sobre as principais funcionalidades do Rust, então acho que posso ajudar. Bora 👊

A linguagem de programação Rust tem várias features peculiares e legais! Uma coleção de técnicas que deram certo em outras linguagens e paradigmas.

Features abordadas:

Zero-cost abstractions
Data Ownership ou Ownership
Algebraic Type System ou Algebraic Data Types
Polymorphism
Async/await
Meta programming
Cargo

Zero-cost abstractions

"What you don't use, you don't pay for. What you do use, you couldn't hand code any better"

Direto do C++.

As abstrações (pattern matching, iterators, generics, collections...) de recursos-base (for loops, if/else, raw pointers...) da linguagem não devem consumir nenhum recurso além daqueles já consumidos. Zero custo!

Ownership

Baseado no RAII (Resource Acquisition Is Initialization) design pattern do C++. Esse padrão de projeto diz: recursos como memória alocada, file handles e database connections devem estar presos a um tempo de vida. Quando um objeto é criado, os recursos são adquiridos e quando o objeto é destruído, os recursos são liberados. Simples. Esse padrão é tão útil porque liberar os recursos é algo facilmente esquecido, você pode ter escrito bastante código antes de precisar liberar e esqueceu, resultando em memory leaks.

Tão útil que... Rust integrou ele diretamente na linguagem e assim surgiu o Ownership. Para não precisar lembrar de usar esse padrão, o próprio compilador vai te forçar a seguir um conjunto de regras chamado de "ownership rules".

Ownership Rules

Cada valor em Rust tem uma variável que é sua dona, ou seja, cada valor tem um dono.
Só pode existir um dono de uma vez.
Quando um dono sai de escopo, o valor é largado ou dropped.

Essas regras são combinadas com as chamadas borrowing rules.

Borrowing Rules

Em um momento qualquer, você pode ter uma referência mutável ou infinitas referências imutáveis.
Referências DEVEM sempre ser válidas. SEM NULL/NIL NESSA PO@#$!!

Veja também exemplos em [[Rust Ownership]].

Algebraic Type System

Algebraic data types ou ADTs permitem a criação de tipos compostos usando sum types e product types. Geralmente implementado em linguagens funcionais, como Haskell.

Um product type é um tipo composto de dois ou mais tipos. Pense em um tipo usuário que tem nome e idade, outros dois tipos, dentro dele. Classes (OO) são um exemplo de product type. Basicamente, toda linguagem que tem um sistema de tipos, tem product types.

Um sum type é um tipo que pode ser representado por uma lista finita de opções válidas (como um enum).

Polymorphism

Direto do paradigma de orientação a objetos (OOP), polimorfismo é a capacidade que um objeto ou uma função têm de assumir múltiplas formas ou se comportar diferente dependendo do contexto em que é usada. O polimorfismo geralmente é implementado a partir da herança (inheritance). Já no Rust, o polimorfismo é implementado com traits e generics.

Traits definem um conjunto de funções/métodos que um tipo pode implementar, parecido com interfaces em outras linguagens. Lembre-se, tipos podem implementar múltiplos traits e traits podem ter implementações por padrão (default).

Generics te permitem escrever código abstrato em relação ao tipo, que te leva a código reutilizável e eficiente. Você pode dizer que um tipo necessário para uma função, não é algo específico, mas algo que implemente funções específicas.

O sistema de traits (trait system) em Rust tem sua raiz nas type classes do Haskell. Rust implementa o trait system juntamente do ownership/borrowing e lifetimes, que são um dos motivos da garantia de memory-safety. Alguns benefícios em relação a herança:

Flexibilidade e composição
Não-invasivo e extensível
Evita o problema de classes bases frágeis (fragile base class problem)
Static dispatch by default e performance

Async/await

Rust roubou a sintaxe async/await para programação assíncrona da linguagem de programação JavaScript. O paradigma assíncrono permite que tarefas sejam executadas independentemente e concorrentemente sem bloquear a execução do programa principal. O JavaScript usa Promises para representar o resultado de uma operação assíncrona e para utilizar esse resultado é necessário usar os métodos .then(), .catch() e .finally(). O problema é que esses métodos podem levar a um código aninhado e complexo. A sintaxe async/await no JavaScript permite que código assíncrono seja escrito da forma como código síncrono é escrito, sem usar then, catch e finally. No final é só um syntactic sugar para trabalhar com as Promises.

O Rust adotou a programação assíncrona de maneira parecida. Notação async antes de fn e .await? a cada chamada assíncrona. O ponto de interrogação serve para propagar erros. Como em JavaScript, async/await em Rust é um syntactic sugar para trabalhar com Futures (similar a Promises). Algumas diferenças do Rust para o JavaScript:

O async/await em Rust segue o princípio de abstração sem custo (zero-cost abstraction).
Em Rust, Futures foram moldados para serem preguiçosos (lazy), ou seja, eles não começam até que sejam explicitamente chamados e "esperados" (awaited). Com isso, Futures podem ser agendados, compostos e combinados com outros Futures sem esforço desnecessário. No JavaScript, quando uma Promise é criada a operação assíncrono já começa em seguida, mesmo se a Promise não tiver sido "esperada" (awaited) ainda.
JavaScript é single-threaded e tem uma implementação que cria a ilusão do paralelismo. Rust tem paralelismo de verdade, podendo executar operações concorrentes em paralelo usando múltiplas threads.

Meta programming

O Rust tem uma feature muito poderosa, os macros. Para entender os macros, vamos falar de meta programação.

Meta programação é uma técnica que permite um programa a manipular ou gerar código durante a compilação (compile time) ou execução (runtime). Macros são um recurso do Rust que permite o desenvolvedor a definir uma sintaxe customizada e fazer geração de código ou transformação de código. Eles permitem a meta programação com uma forma de escrever código que gera ou altera outro código durante a compilação (compile time).

Cargo

Inspirado no NPM (node package manager) do NodeJS, o Cargo é a ferramenta oficial de building e gerenciamento de pacotes do Rust. Com simples comandos no terminal é possível instalar as dependências de um projeto, compilar o projeto, testar o projeto, etc. O crates.io é onde ficam as caixas/crates, os pacotes do ecossistema Cargo. O package.json em JavaScript é o cargo.toml em Rust.

Obrigado por ler! ❤

Fontes:

Introdução ao Rust

Sun, 18 Feb 2024 12:00:00 GMT

Olá! Se você quer aprender ou está estudando a linguagem de programação Rust assim como eu, acho que aqui consegui sintetizar bem a linguagem nesse texto introdutório. Bora lá!!

Rust é uma linguagem de programação eficiente e segura.

Na seção "Por que Rust?" do site Rust Lang eles dizem: Rust é rápido e tem consumo de memória eficiente; Rust é confiável porque tem um rico sistema de tipos, além do modelo "ownership" que garante memory-safety e thread-safety; Programar em Rust é produtivo pois tem uma ótima documentação, boas mensagens de erro do compilador e fantásticas ferramentas (como compilador, gerenciador de pacotes, formatador...). No mesmo site, a linguagem é recomendada para fazer CLIs (interfaces de linha de comando), WebAssembly, Networking e Embedded programming (embarcados).

Não se limitando a esses campos, Rust é visto no desenvolvimento de sistemas operacionais, jogos, APIs, Web, Crypto e a lista continua aumentando. Tem um futuro brilhante.

As principais ferramentas do Rust são: Rustup e Cargo.

Rustup serve para gerenciar o Rust (versão, plataforma...)
Cargo serve para gerenciar seu projeto em Rust, desde a criação até o build.

Sobre o gerenciador de pacotes:

Cada pacote no Rust tem diversas features que podem ser desabilitadas ou não, reduzindo o tempo de compilação e o tamanho do executável final.

Os pacotes são instalados e publicados com a ferramenta Cargo e são distribuídos pelo crates.io (assim como o npmjs.com). Além disso, a documentação dos pacotes é centralizada em docs.rs/nome-no-pacote.

Para aprender Rust:

De acordo com esse vídeo (Rust is not a faster horse), Rust não é um substituto para C, você está procurando Zig. Rust não é um substituto para C++, você está procurando Go. "Rust não é um cavalo mais rápido, é um foguete!".

É isso! Pretendo postar mais conteúdo sobre Rust. Inclusive, quem viu minha primeira postagem (Aprendendo Rust) sabe que eu já tenho alguns textos escritos, vou adapta-los e publicá-los, ao final espero ter uma espécie de guia introdutório da linguagem de programação Rust.

Obrigado por ler! ❤

Meu primeiro post no dev.to

Sun, 18 Feb 2024 12:00:00 GMT

A verdade é que escrevi para o TabNews, copiei e colei no DevTo, mas ninguém precisa saber... 😂

Texto

Olá! 👋

Assisti uma live do Navarro sobre a Rinha de Backend em que ele usa a linguagem de programação Rust. Ao assisti-lo codando e explicando (não vou mentir, ele tem uma ótima didática) fiquei fascinado pela linguagem. Eu já tive contato com ela ao fazer o curso de Rust da Alura, mas confesso que não dei continuidade.

Dessa vez, cativado, pretendo ir adiante com a linguagem e fazer dela, parte das minhas ferramentas. Com o meu espírito entusiasta, acabei me empolgando nos estudos hoje e escrevi três textos introdutórios para mim, sobre Rust, algumas de suas funcionalidades e seu carro-chefe, Ownership. Para quem quiser ver (e quem sabe corrigir):

Partindo disso, gostaria de saber quais tópicos vocês recomendam para entender Rust e ser um Rustáceo de verdade 🤣

Brincadeiras à parte, pretendo me aprofundar no Ownership/Borrowing e seguir meus estudos pela documentação principal e pelo Rust by examples.

Quais funcionalidades, projetos, conceitos da linguagem Rust vocês recomendam para entender a linguagem Rust e se tornar minimamente proficiente?

O que são variáveis e constantes

Sun, 28 Jan 2024 12:00:00 GMT

Veja a postagem do twitter/x aqui e veja a postagem do tabnews aqui. Comentei no TabNews também.

Tópicos abordados

O que é uma variável
- Referência a um pedaço de memória aleatória
- Podem ser acessadas (leitura) ou alteradas (escrita)
- Podem pertencer a um escopo
- Podem ter um tipo
Por que existe e usar
Como usar uma variável
- Declaração, atribuição, inicialização e definição

Olá! Tudo bem? Esse é o primeiro post de uma série sobre conceitos e funcionalidades elementares das linguagens de programação em geral. Meu objetivo é me aproximar da comunidade e ajudar explicando tópicos essenciais para começar a usar uma nova linguagem. Bora?

O que é uma variável e por que usar?

Uma variável, em um programa, é uma referência a um pedaço (uma posição) de memória que guarda um valor. E geralmente vai ser usado no futuro.

Pense que uma variável é uma etiqueta colocada numa caixa que tem algo dentro e está em um montante de caixas. Alguém colocou aquelas caixas lá, mas o que importa é que você colou uma etiqueta e agora se você precisar daquela caixa específica você só precisa procurar pela etiqueta.

As variáveis existem para simplificar e possibilitar a criação de soluções mais complexas e flexíveis. Como você lembraria de algo específico como um valor númerico, um nome, um objeto inteiro? Como acessaria e manipularia dados de outro escopo? E dados vindos do usuário?

O @maniero escreveu algo interassante sobre variáveis em uma resposta no Stack Overflow, acho que vale a menção:

"Variável é um padrão de projeto (design pattern) tão usado, tão simples, e tão presente em linguagens que ninguém enxerga assim. É um padrão para acessar uma posição da memória. Esse padrão torna independentes nome e valor. Isso cria várias oportunidades para expressar algoritmos complexos de forma poderosa e flexível."

Eu nunca tinha pensado em variáveis dessa forma e acho que faz muito sentido.

Já pensou como seria se variáveis não existissem? Acho que não daria pra ir tão longe sem enlouquecer completamente 😅😆.

Como usar uma variável?

Uma variável tem algumas propriedades principais, são elas:

Poder ser acessada (leitura)
Poder ser alterada (escrita)
Poder ter um tipo (número, ponto-flutuante, booleano, etc...)
Poder pertencer a um escopo (um local do código)
Poder ser declarada e atribuída

Sintaxe

Vamos ver a estrutura de uma variável. A sintaxe pode ser um pouco diferente de linguagem para linguagem (vai ser), mas a ideia segue a mesma.

Palavra reservada para DECLARAR a variável*
Nome da variável
Tipo da variável**
Valor da variável***

*Algumas linguagens de programação podem não ter palavra reservada para declarar variáveis ou ter e não ser necessária, falando a grosso modo.

**Algumas linguagens conseguem inferir tipos automaticamente (pelo valor atribuído e/ou outras técnicas) e não têm especificação de tipos para o desenvolver utilizar (tipos sempre vão existir por de baixo dos panos). Outras linguagens tem especificação de tipos mas conseguem fazer inferência também, como Python e Go. Isso tem nome: linguagem fortemente tipada, fracamente tipada, estaticamente tipada ou dinamicamente tipada (cada um desses nomes descrevem comportamentos diferentes, acho que valeria um texto só para explicar esse tópico de tipagem das linguagens).

***O valor da variável não necessariamente precisa ser atribuído quando declaramos uma variável, salvo exceções.

Veja abaixo um exemplo em Golang:

O que é declaração, atribuição, inicialização e definição?

Declaração e atribuição são métodos para dizer ao compilador/interpretador da linguagem de programação que uma variável precisa ser reservada e tem um valor, respectivamente.

Inicialização e definição por outro lado, são só nomenclaturas pra especializações.

Declaração (declaration) é quando você diz que uma variável deve existir pra ser usada no programa.

Atribuição (assignment) é quando você diz que determinada variável tem tal valor.

Inicialização (initialization) é uma espécie de atribuição. Quando você ATRIBUI um valor a uma variável pela primeira vez.

Definição (definition) é só uma forma de dizer que você está DECLARANDO e ATRIBUINDO de uma vez.

Veja um exemplo de cada:

O que é uma constante?

Bom, você verá implementações um pouco diferentes em torno do que é uma constante. No geral, uma constante é uma espécie de variável que não varia durante toda a execução do programa, ou seja, você não pode alterar o valor de uma constante depois de defini-la no seu código. Isso significa que constantes não podem ser redefinidas, redeclaradas nem reatribuídas.

Alguns compiladores inclusive fazem o processo de inline das suas constantes, ou seja, onde elas forem referenciadas o compilador troca pelo valor delas em tempo de compilação, nesse caso, uma constante não tem um endereço na memória, não é uma espécie de variável, é apenas um valor no seu código que vai ser trocado em tempo de compilação. Legal, não?

Fun fact

Se você usa uma linguagem que disponibiliza ponteiros e referências para uso, você pode ver onde sua variável "mora" na memória reservada, que eu comentei anteriormente, por exemplo:

Com esse código em Golang

Ao executar, você deve ver

Acho que é isso. Tentei abordar da maneira mais genérica para que quando você estiver dando os primeiros passos em determinada linguagem, você saiba mais ou menos o que pesquisar sobre variáveis e constantes.

Fez sentido pra você? Gostou da explicação? Se sim, considere um 👍. Se não, o que você acha que faltou?

Por sinal, a próxima publicação vai ser sobre estruturas condicionais, fica ligado! Obrigado por ler 💜.