DEV Community: Victor Hugo

The most useful data structure for leetcode

Victor Hugo — Tue, 27 May 2025 00:43:51 +0000

Recently I decided to enhance my programming logic so I started making some leetcode problems daily just to exercise, but as always I feel a lot of difficulty doing this logic exercises until youtube recommended this video from a Brazilian tech content creator where he teach how to solve one of the most common exercises from tech interviews using a map.

what is a map

Map is a data structure where can store a value combined with a key, so if you need to access this data later you can use the key instead of interating an entire array to find a value (just like the filter and find methods in javascript).

But why should I use a map instead of array?

You can simplify the logic with a map instead of using a lot of for loops to make the exercise, being more legible and understandable. When you iterate an array, your code have the complexity of O(n) where n is the size of the array because you have to iterate the entire array, when using a Map, operations such as get and set have a time complexity of O(1) because the Map relies on a hash table internally. This structure allows the engine to compute the exact location of a value based on its key, so it can access or update entries directly without iterating through all keys and values. As a result, the performance of these operations remains constant regardless of the size of the Map, depending only on the key being used rather than the total number of elements stored.

lexical analysis / tokenization

Victor Hugo — Wed, 05 Mar 2025 23:36:45 +0000

A long time ago some friends showed me one project, one screen split in a half, on the left has a code editor with prisma models and on the right a diagram with nodes with the prisma model. It is a really good whey to see your models but I forgot about this project.

In this year I decided to learn Golang and was thinking about projects that I could do to learn more this language, in my research I discovered a technique called Lexical analysis, also known as tokenization, when I discovered it the first thing that came into my mind was that project with prisma models and diagrams and them I decided to recreate this project using this tokenization technique.

what is tokenization

Lexical analysis (also called tokenization) is the process of converting raw source code into structured tokens, which are the smallest meaningful units of a programming language. This technique was created to create programming languages. But you can use this technique to anything you want.

In that whey I created an API in Golang that reads the prisma models and tokenize it with a struct with type and value, the program uses position to know where the program is currently reading when it gets a piece of the text and tokenize it, it advances the position in the text until it finds the next token.

After the Tokenization, it gets the models tokens and formats it with an object with id, model name, the content of the model with the columns and the relations between the models and returns to the api.

How do I use it

in frontend I have a code editor that accepts prisma models and a diagram canvas. Every code you put into the code editor it sends to the api and render the nodes in the canvas with the data returned

Here is the link of the project if you want to test

What is Trunk Based Development

Victor Hugo — Mon, 24 Feb 2025 17:40:40 +0000

It is a source-control branching model where developers collaborate on code in a single branch called trunk, They therefore avoid merge hell, with having only one source of true, the trunk branch and with smaller commits. Do not break the build, since you have to check if the build it is still working on every commit.

This means that they're code will go to the trunk (main) branch and the repository will not have more than one main branch (e.g: a development branch or a release branch).

Who use it?

Giants from the tech like: Google, Atlassian, Facebook (meta), Microsoft, Amazon, etc...

CI/CD

Trunk-Based Development is a key enabler of Continuous Integration (CI)and by extension Continuous Delivery (CD). When individuals on a team are committing their changes to the trunk multiple times a day it becomes easy to satisfy the core requirement of Continuous Integration that all team members commit to trunk at least once every 24 hours.

How it works

Every developer will create smaller but continuous commits to the trunk through Pull Requests checking the build (it must pass before sending the code to the trunk). You can create a Continuous Integration (CI) with Github Actions to run the build, linter and tests on every new commit in the Pull Request to check it for you.

Continuous code review

After you finish your work and the Continuous Integration (CI) passed, someone should review your code, and after that merge your pull request with squash and merge, to create one commit with sub-commits were the sub-commits will be the smaller commits you have send to the pull request.

Indeed, in Trunk Based Development your commits will be small but continuous to guarantee the Continuous Integration (CI) but that also means that you will have continuous code review, since the commits will be smaller than usual it will enable a fast and simple code review of your code.

Continuous Delivery

With small commits, easy code review and the Continuous Integration (CI) checking the build, lint and tests you have a trunk (main)branch always ready for deploys and tests without having the necessity to create a new release branch to test the commits and deploys, your main branch can do it for you.

History

Trunk Based Development is not a new branching model. The word ‘trunk’ is referent to the concept of a growing tree, where the fattest and longest span is the trunk, not the branches that radiate from it and are of more limited length.

It has been a solution of the merge hell that the gitflow development causes with the multiple branches

Creating a hashmap from scratch in Golang

Victor Hugo — Wed, 12 Feb 2025 18:21:22 +0000

Recently I was watching this video from a Brazilian youtuber called Augusto Galego about creating a hashmap from scratch, while I was watching this video something came to my mind: what if I do the same but with go? and that is what I did! here is the repo If you want to try, in the main file there is a lot of tests with the hashmap, you will need to have installed go version 1.18 or superior because of the go generics.

first you will need to copy the code on your machine, check if you have installed git on it:

git clone https://github.com/hxsggsz/hashmap-go.git

now run the main.gofile to see the tests:

go run main.go

What is a hashmap

A hashmap is a data structure that stores key-value pairs. It uses a hash function to compute an index where the value is stored, enabling average O(1) time complexity for insertions, deletions, and lookups, so for example, if you want to store some data in the key "age" it will hash this key, this will generate a large number, we get this large number and divide it by the factorial of the size of your data structure, in my case I use the slices from Golang, it will returns always the same number by the length of the key, this will be the index to search in the data structure. But what if I store two values with a key with the same index?

For example I store the value 21 in key age and 200 in key now, the hash function will return the same index for both of the keys because both of them have the same size of characters, that's a conflict problem and to solve this I use the chaining solution that consists in using another slice inside the slice to store the values, so for example in the index 3 of the slice it will have another slice with key age and value 21 and the key now with the value 200.

Methods

This hashmap have 4 public methods:

set
- store a key with a value.
- if there already have key stored, he updates the value.
get
- gets the value stored to a key.
- if not founds the key it throws a error.
put
- update the value stored to a key.
- if not founds the key it throws a error.
delete
- deletes the value and key stored to a key.
- if not founds the key it throws a error.

And on private method:

hash:
- hashs the string passed by param and divide by factorial of the size of the slice.

Generics

I am a typescript developer and I love using generics in my code, because of that I saw an opportunity to learn to use generics on Golang, since it was implemented in the version >1.18, and that is what I did, instead of allowing only a type of data in the hashmap I use the generics to allow any type of the data in the hashmap.

How to install a Window Manager on Linux

Victor Hugo — Wed, 29 Jan 2025 21:50:18 +0000

What is a Window manager

A window manager is a system software that controls the placement and appearance of windows within a graphical user interface. It serves as the fundamental component responsible for managing how windows are displayed, manipulated, and organized on your screen. This is a fundamental software if you have only one monitor and have some trouble managing you windows.

I have my own dotfiles with all the configuration for the softwares that we will use in this article, here is the github repo.

I like to use i3 as a window manager and it's what I will use in this article.

What is i3

i3 (i3wm) is a tiling window manager designed for X11 operating systems it represents a minimalist yet powerful approach to window management on Linux.

Let's start! First I need to install the window manager:

Let's install it:

sudo apt install i3

Alright, we already have the window manager installed but he by he self is a little bit raw, we need a few things to increment it!

Now we need a nice font.

Nerdfonts

Nerd Fonts is an open-source project that enhances developer-focused fonts by adding numerous additional glyphs and icons, making them more functional for programming environments, we need a font from them to have the icons displayed in our i3.

first you need to go to the official nerdfonts site and choose your font
click in the download button with the right mouse button and copy the link of it
now you need to run this command:

wget -P ~/.local/share/fonts <url-link-you-copied> \
&& cd ~/.local/share/fonts \
&& unzip <name-of-the-downloaded-zip>.zip \
&& rm <name-of-the-downloaded-zip>.zip \
&& fc-cache -fv

What is Picom

Picom is a lightweight standalone compositor for the X Window System, specifically designed to enhance window managers that lack built-in compositing capabilities
and it have a few enhancements by using picom:

Eliminates screen tearing and stuttering during video playback
Provides smooth transitions between windows
Enables transparency control for both active and inactive windows

Let's install it:

sudo apt install picom

Now we need to install polybar

What is polybar

Polybar is a fast and lightweight status bar tool designed for Linux desktop environments and window managers, particularly useful for minimalist window managers like i3

Launch applications through a searchable interface

sudo apt install polybar

Now we need to install rofi

What is rofi

Rofi is a customizable status bar for Linux that displays essential system information like time, battery, WiFi, and running programs. Think of it as a smart dashboard that sits at the top or bottom of your screen, showing exactly what you need at a glance. It's particularly popular with minimal window managers like i3 because it's lightweight and doesn't slow down your system. You can easily customize what information to show, where to place it, and how it looks through simple configuration files. Whether you want to monitor system resources, control music, or switch between tasks, Rofi handles it all in a clean, organized way.

sudo apt install rofi

In my case, inside my rofi configuration I have this bash file to make the setup and install everything that it needs to run you will have to run this file with this command

./setup.sh

after that, we need a software to take screenshots here I will use maim for screenshot

sudo apt install maim

What is feh

feh is a software to manage your background image.

sudo apt install feh

What is lxappearance

LXAppearance is a lightweight and versatile GTK+ theme switcher that allows users to customize the visual appearance of their Linux system without requiring a full desktop environment. In our case we will use this to customize the theme and cursor with our i3wm.

sudo apt install lxappearance

if everything works fine your result will be something like this:

Como rodar um projeto Expo por um Virtual Device no WSL

Victor Hugo — Mon, 04 Mar 2024 20:30:00 +0000

Para seguir com esse artigo, você precisará concluir o ultimo artigo ensinando a configurar o WSL para o Expo

1. INSTALANDO O WSA

Agora para rodar o Expo em um Virtual Device no WSL (Window Subsystem for Linux) nós precisamos instalar o WSA (Windows Subsystem for Android)
Abra este link e procure por essa tabela no README, feito isso baixe a ultima versão estável do WSA.

Mova o arquivo ZIP que você acabou de baixar para a Root da pasta C:\ igual você fez com o script de PowerShell no artigo 1.
Agora com o ZIP no lugar certo extraia o arquivo com winRAR ou 7z e exclua o arquivo .ZIP, entre na pasta que acabou de ser extraída e veja se tem uma pasta dentro, se houver, recorte ela e cole-a no root do seu C: novamente.
Abra a pasta, clique com o botão direito no Install.ps1 e clique em Executar com o PowerShell.
- Caso você encontre esse erro
- Clique no arquivo Run.bat e execute ele.
Depois que o comando rodar, vão aparecer algumas popups e umas caixas de dialogo clique em continue e deixe os processos carregarem. Não feche inicialmente nenhuma aba, apenas minimize.
Procure a aba que se chame Windows Subsystem for Android com o titulo System
Vá no canto superior esquerdo e selecione advanced settings e ative o developer mode e permita as coisas que precisarem permitir em nível de admin.

2. INSTALANDO O SDK DO ANDROID

Nós precisamos desse sdk para termos acesso as API's Nativas do android pelo javascript, sem isso nós não conseguiremos criar os nossos aplicativos de forma adequada. Além disso precisamos do sdk para prosseguir pro próximo passo
Siga o passo de instalação desse GIST
- Rode os comandos um por um pra evitar qualquer problema.
- Lembre-se de trocar o path de Sdk para sdk pois o padrão do expo é sdk.
  - NÃO rode o ultimo comando do gradle. ## 3. INSTALANDO O ADB
O ADB (Android Debug Bridge) é uma ferramenta de linha de comando que faz parte do SDK do Android. Ele cria a conexão do nosso WSL ao WSA, sem ele nós não conseguiremos fazer essa conexão e por consequência não conseguiremos usar o WSA para rodar o nosso projeto em um Virtual Device.
Acesse esse link e baixe a versão mais recente encontrada nesse repositório.
Pegue o ZIP que você acabou de baixar e coloque na HOME do seu WSL

Depois de jogar o seu ZIP lá, extraia ele pelo terminal usando o seguinte comando:

</li>
</ul>

<p>unzip </p>

<p></p>
<div class="highlight"><pre class="highlight plaintext"><code>- Se tudo der certo, você terá a pasta `platform-tools` na home do seu terminal

![mostrando a pasta na home do terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecvf6gciwr6dthpdqbmw.png)
- Acesse essa pasta e rode o seguinte comando:
```bash


./adb connect &lt;ip-do-wsl&gt;:&lt;porta-do-WSA&gt;


</code></pre></div><h3>
  <a name="como-descobrir-o-ip-do-wsl" href="#como-descobrir-o-ip-do-wsl">
  </a>
  COMO DESCOBRIR O IP DO WSL
</h3>

<ul>
<li>No seu terminal do WSL, execute o mesmo comando:
```bash
</li>
</ul>

<p>netsh.exe interface ip show address</p>

<p></p>
<div class="highlight"><pre class="highlight plaintext"><code>- Procure pelo `vEthernet (WSL)`

![mostrando o resultado do comando no terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32j40187atghmdy2hn12.png)

- No `Endereço IP`terá o IP do WSL que precisamos usar no comando acima.
### COMO DESCOBRIR A PORTA DO WSA
- Abra o WSA (clique na barra de pesquisa do `windows` e escreva `android` nele)

![WSA na barra de pesquisa do windows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ho32xejy91me2tynpss.png)

- Acesse a aba de Advanced settings

![mostrando a aba advanced settings no wsa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afmclgf4m0o0qecoz1hl.png)

- Esses números depois do `:` são a porta do `WSA`.

![porta do WSA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztnyo4n46u1fsk6vtv2z.png)

- caso você não encontre a porta do `WSA` aqui, você terá que baixar a versão de `pre release` do WSA.
- O padrão é `58526`, mas no seu caso pode mudar, é bom verificar.
- Pronto, agora você sabe  o IP do seu WSL e a porta do WSA, agora você pode rodar  o comando.
- Depois de fazer isso, você pode rodar o projeto `Expo` de novo e aperte  o botão `a` para abrir o projeto com o `WSA`.

![mostrando o expo rodando corretamente com o virtual device](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqq3pyy5uqlgy8lqtnd3.png)

Finalizamos, caso esse artigo tenha sido útil para você, de uma olhada na nossa comunidade, a [devhat](https://discord.gg/3gsMAEumEd). É aqui, que encontramos apoio, compartilhamos ideias e nos inspiramos mutuamente. A comunidade DevHatt não é apenas um conjunto de desenvolvedores, mas uma família unida pela paixão pela tecnologia e inovação.

Se você ainda não faz parte desta comunidade dinâmica, convidamos você a se juntar a nós no [Discord DevHatt](https://discord.gg/3gsMAEumEd).
</code></pre></div>

Como Configurar o Expo no WSL

Victor Hugo — Mon, 04 Mar 2024 20:30:00 +0000

pré-requisitos:

Windows 11/10, Direitos de administrador no WSL2, dotenv

O Expo é uma ferramenta open source para facilitar a sua vida na hora de criar aplicativos em React Native. É possível usa-lo em qualquer sistema operacional que você quiser: Windows, Linux e MacOs mas e se eu quiser usa-lo no meu WSL (Windows Subsystem of Linux)? Bem... até a data de criação desse artigo isso seria uma tarefa que beiraria o impossível, mas nós da Devhat nos juntamos para te ajudar nessa missão!

observação

Esse artigo será separado em duas partes: a primeira parte ensinará a configurar e conectar o Expo ao seu celular pelo QR code, a segunda parte ensinará a conectar o Expo a um Virtual Device.

1: ABRIR AS PORTAS DE IP DO SEU COMPUTADOR

Dentro deste GIST tem um arquivo Powershell, você precisará baixar ou copiar esse arquivo (garanta que é um arquivo .ps1 e não um arquivo .txt) .
- Caso você precise trocar a porta, edite a variável na 6ª linha, entre parênteses. ```bash

$ports = @(8081, 8082);

- Pegue esse arquivo e jogue ele na Root da pasta C  `C:\`.

![foto mostrando o script powershell na root da pasta C](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mkhbk3bfc9hf43mf41b.png)
- Agora abra o `PowerShell` como administrador (precisa ser como administrador).

![mostrando como abrir o powershell como adminstrador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obiejwpxsxwv5ysou2rv.png)

- Agora com o seu `PowerShell` como `administrador` aberto, você irá fazer algumas coisas:
    - feche todas as abas do `WSL` abertas no seu computador e execute o seguinte comando.
```bash


wsl --shutdown

essa mensagem de erro aparecerá caso você pule essa etapa.
Execute o seguinte comando. ```bash

powershell.exe -ExecutionPolicy Bypass -f C:\forward_wsl2_ports.ps1


- se tudo der certo, esse será o resultado no seu `terminal`.

![sucesso executando o script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6z8wklpl8xi3r061s7rx.png)

Se tudo deu certo até aqui significa que você conseguiu configurar o `WSL` para rodar o `Expo`! Agora precisamos configurar o `Expo` para rodar o `WSL`.

## 2. CRIANDO E CONFIGURANDO UM PROJETO EXPO

- Abra o seu terminal com `WSL` e rode o seguinte comando para criar um projeto `Expo`.
```bash


npx create-expo-app

Após criar o projeto você irá criar um script node chamado get_network_local_ip.js na Root do seu projeto.
Dentro desse arquivo,
Nesse script nós usamos duas variáveis de ambiente chamadas: LOCAL_CONNECTION_INTERFACE_NAME e LOCAL_CONNECTION_IPV4_SEARCH.

Nós precisamos dessas duas envs para poder rodar o projeto no WSL, vamos aprender a achar os valores necessários pras essas envs, para isso vamos rodar o seguinte comando

</li>
</ul>

<p>netsh.exe interface ip show address</p>

<p></p>
<div class="highlight"><pre class="highlight plaintext"><code>- Procure pela `Ethernet` que tenha o `DHCP habilitado` como sim, no meu caso é apenas `Ethernet`, mas no seu caso pode ser `Ethernet 1` ou `Ethernet 2` ou `WiFi`, etc. 

![imagem mostrando os dados que precisamos pro tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8aqkv2ttx2hyul8ed7q.png)

- Dessas informações nós queremos o `Ethernet` e o `endereço IP` pro nosso `script` e esses serão os valores das nossas `envs`!
- Agora vamos criar o arquivo de `envs` e preenche-las para o nosso script
- Na Root do seu projeto crie um arquivo chamado `.env.local` e coloque as seguintes `envs` lá:
```bash


LOCAL_CONNECTION_INTERFACE_NAME="Ethernet"
LOCAL_CONNECTION_IPV4_SEARCH="Endere"


</code></pre></div><h3>
  <a name="observa%C3%A7%C3%B5es-importantes" href="#observa%C3%A7%C3%B5es-importantes">
  </a>
  OBSERVAÇÕES IMPORTANTES!!!!!
</h3>

<ul>
<li>Por que a segunda <code>env</code> <code>LOCAL_CONNECTION_IPV4_SEARCH</code> tem como valor <code>Endere</code> e não <code>Endereço IP</code>?

<ul>
<li> Alguns terminais podem ter um erro de <code>utf-8</code> e podem não reconhecer a letra <code>ç</code>, nesse caso ele não vai achar o valor correto na hora de executar o script e irá dar <strong><code>erro</code></strong>! Por isso colocaremos apenas <code>Endere</code> na <code>env</code></li>
</ul>
</li>
<li>Se a linguagem do seu sistema estiver em inglês, o <code>windows</code> retornará o IP em <code>IP Adress</code> em vez de <code>Endereço IP</code>, caso essa seja a sua situação, troque no <code>.env.local</code> <code>Endere</code> por <code>IP Adress</code> senão, você não conseguirá rodar o projeto.</li>
</ul>
<h2>
  <a name="3-comando-para-rodar-o-expo-no-wsl" href="#3-comando-para-rodar-o-expo-no-wsl">
  </a>
  3. COMANDO PARA RODAR O EXPO NO WSL
</h2>

<ul>
<li>
<p>Após essas configurações nós precisaremos apenas criar o comando no <code>package.json</code> para rodar o projeto. Faremos da seguinte forma:</p>

<ul>
<li> Abriremos o arquivo <code>package.json</code> do nosso projeto</li>
<li>Colocaremos o seguinte comando na parte de <code>script</code> 
```bash
</li>
</ul>

<p>"start:wsl": "REACT_NATIVE_PACKAGER_HOSTNAME=$(node get_network_local_ip.js) expo start",</p>
</li>
</ul>

<p></p>
<div class="highlight"><pre class="highlight plaintext"><code>
- Ficando dessa forma

![scripts no package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6kcdpr1dqn1gl05zs7g.png)

- Agora rode o comando que acabamos de criar no terminal com `npm run start:wsl`
- Se tudo der certo, ele irá mostrar um `QR code` na tela, baixe o aplicativo `Expo GO` e escaneie esse `QR code` e pronto, você tá rodando o Expo pelo `WSL`!

Caso você goste dessa opção de rodar o seu projeto no seu celular você pode parar por aqui, mas caso você queira rodar o seu projeto no seu computador e  o melhor de tudo, **SEM PRECISAR DE ANDROID STUDIO PARA ISSO**, [acesse a parte 2 desse artigo e entenda como.](https://dev.to/devhat/como-rodar-um-projeto-expo-por-um-virtual-device-no-wsl-2i16)

Caso esse artigo tenha sido útil para você, de uma olhada na nossa comunidade, a [devhat](https://discord.gg/3gsMAEumEd). É aqui, que encontramos apoio, compartilhamos ideias e nos inspiramos mutuamente. A comunidade DevHatt não é apenas um conjunto de desenvolvedores, mas uma família unida pela paixão pela tecnologia e inovação.

Se você ainda não faz parte desta comunidade, convidamos você a se juntar a nós no [Discord DevHatt](https://discord.gg/3gsMAEumEd).
</code></pre></div>

TIL - Today I Learn 12-11 18-11

Victor Hugo — Fri, 08 Dec 2023 20:30:00 +0000

@piluvitu

ㅤ

.env

Para quem não sabe o seu sistema por padrão tem variáveis de ambiente, que servem para armazenar alguma informação e padronizar o acesso dela pela mesma.
- É possível inserir váriáveis no próprio sistema sem precisar de nem uma abstração, mas ela não são inserções persistentes, por isso a fim de facilitar a definição dessas variáveis, existe o módulo do NPM .env, que foi criado a fim de facilitar isso.
Para usa-lo tudo que é necessário fazer é criar um arquivo .env na raiz do projeto e inserir as variáveis com a seguinte sintaxe:
O modelo é chave - valor, com a chave sendo por padrão MAIUSCULA

OPENIA_KEY = informação sensivel URL = localhost PORT = 3000

Muito se é discutido em upar ou não o .env então devemos explicar o comportamento dele no sistema:
.env.development - serve para um ambiente de desenvolvimento
.env.example - serve como um arquivo de exemplo
.env - é o arquivo padrão, que em teoria seria usado para inserir as variáveis de produção.
Muitos dos provedores onde podemos subir nossas aplicações de maneira facilitada, disponibilizam uma parte para inserirmos as variáveis de ambiente que serão utilizadas na nossa aplicação e por ordem de importância essas variáveis inseridas antes do deploy, são as que vão realmente sobrepor as que ficam no .env.

ㅤ

GIT

Pensando nisso o GitHub fez um artigo que sugere usar uma ferramenta do próprio git ou uma ferramenta open-source
- Falando em git, descobri que tem como renomear arquivos usando o próprio git usando o comando git mv: git mv <nome do arquivo atual> <novo nome do arquivo>

ㅤ

Absolute PATH

Eu nunca tinha parado para pensar que, quando queremos acessar algum arquivo que está fora da pasta atual: 1 - Navegamos para fora da pasta atual 2 - Entramos na pasta do arquivo 3 - Por fim referenciamos o mesmo.
O nome disso é relative PATH e percebemos que priemeiro voltamos para depois seguir em frente, que em um projeto com muitos arquivos gera um PATH longo e nada didático
- Já o absolute PATH é o caminho absoluto, que toma como padrão sempre sair da raiz do projeto e ir para o arquivo desejado, encurtando o PATH e deixando didático
Fica a dúvida de como eles fazem para referenciar o diretório raiz do projeto ?
Existem várias soluções no mercado, mas a microsoft desenvolveu os arquivos jsconfig.json e tsconfig.json que servem para indicar ao editor que ali é a raiz do projeto.

ㅤ

TypeScript

Por fim o typescript, meu primeiro contato sem auxilio de curso tem sido aqui na devhat, no projeto octopost, mal conheço e já considero pacas esse TS, estou fazendo minha introdução pelo curso da origamid.

Estudei conceitos básicos de annotation, inferface e inferência.

// Annotation
const produt0: string = 'Livro'

let prec0: number = 856

No TypeScript podemos tipar, e isso é interessante pois evitamos erros na hora de lidar com os dados

Interface

// Interface
const carr0: {
  marca: string
  portas: number
  motor: number
} = {
  marca: 'audi',
  portas: 2,
  motor: 3.0
}

carro.marca = 245
carro.portas = '2'
carro.motor = ['aspirado', 'alumínio']

Inferência

/* Mesmo sem declarar a tipagem, alguns tipos de variáveis o TS, 
já identifica a tipagem correta */

// Annotation
const produtos = 'Livro'

let preco = 856

preco = 'jajaja'

// Interface
const carro = {
  marca: 'audi',
  portas: 2,
  motor: 3.0
}

carro.marca = 245
carro.portas = '2'
carro.motor = ['aspirado', 'alumínio']

Como pode-se ver no exemplo acima, podemos deixar de declarar a tipagem de alguns dados que o proprio TypeScript já reconhece.

function somar(a: number, b: number){
    return a + b;
}
soma(4, 10)
soma(4, "10")

No exemplo acima é possivel ver um otimo motivo para tipar, pois saberemos o que é para chegar no parâmetro e o que será retornado

FunFact

O vsCode tem intelisense de JS graças ao TS nativamente no editor, caso queira ter um pouco da experiência de usar TS no JS é só adicionar //@ts-check na primeira linha do seu arquivo JS e o editor vai passar a indicar alguns erros que o TS pegaria no seu código

@hxsggsz

ㅤ

Typescript

Essa semana eu estudei bastante Typescript pra tentar resolver um problema. Durante esse estudo eu descobri alguns Utilities Types criados pelo próprio time do Typescript pra facilitar a nossa vida difícil de bugs.

Como esses "Utilities Types" funcionam

Todos eles se beneficiam dos "Generics", algo muito útil na hora de tipagem e que é presente em diversas linguagens estaticamente tipadas.

Partial

O que ele faz? Ele transforma tudo em um objeto opcional. Olha esse exemplo:

interface User {
    id: string
    name: string
    role: "admin" | "user"
}

Agora se a gente taca essa interface no Partial assim:

type OptionalUser = Partial<User>

É como se a gente fizesse isso

interface User {
    id?: string
    name?: string
    role?: "admin" | "user"
}

Required

Existe o oposto do Partial que é o Required, e como o nome já diz, ele transforma todos os tipos que ele receber para necessário fornecer, até os que originalmente são opicionais

type OptionalUser = Partial<User>

type RequiredUser = Required<OptionalUser>

E agora o tipo RequiredUser fica assim

interface User {
    id: string
    name: string
    role: "admin" | "user"
}

Omit

Agora imagina que a gente quer omitir o nome da interface User sem alterar a interface original, essa é a função do Omit.

type UserWithouName = Omit<User, "name">

Pick

E tem o contrario também, imagina que a gente quer pegar apenas a propriedade nome da interface mas sem alterar a interface original, o Pick serve pra isso.

type UserName = Pick<User, "name">

Se você quiser pegar ou excluir mais de uma propriedade, basta usar o pipeline

type UserName = Pick<User, "id" | "name">

// ou 

type UserName = Omit<User, "id" | "name">

É possível combinar todos esses Utilities Types também

type UserNameOptional = Partial<Pick<User, "name">>

ReturnType

Agora imagina que a gente tem esse tipagem de função aqui:

type HandleSomething = () => string

E você precisa ter a tipagem do retorno dessa função, pra isso existe o ReturnType

type ReturnOfHandleSomething = ReturnType<HandleSomething>

Awaited

Imagina que você tem uma tipagem que é uma promise

type AwaitSomething = Promise<string>

E você quer a tipagem que essa promise vai retornar, pra isso serve o Awaited

type Result = Awaited<AwaitSomething>

Agora um caso um pouco mais real, você tipou uma função que retorna uma promise e você quer separar um type diferente o retorno dessa função, simples:

type UserNameOptional = () => Promise<string>;



type Result = Awaited<ReturnType<UserNameOptional>>;

Um exemplo com uma função real

async function awaitSomething() {
  await new Promise(() => setTimeout(() => "demorei mas cheguei", 1000));
}

// string
type Result = Awaited<ReturnType<typeof awaitSomething>>;

TIL - Today I Learn 12-11 18-11

Victor Hugo — Fri, 01 Dec 2023 20:30:00 +0000

Alvaro

Make System Under Test

O nome vem de Make System Under Test` (fazer sistema sob teste).
Isso é usado em Testes Unitários para criar uma função que retorna uma Instância da Classe ou Componente que está sendo testado.
Vocês devem encontrar exemplos disso com Classes e Testes em Java, eles preparam um setup/Factory para fazer testes unitários.
A função MakeSut recebe parâmetros que podem ser usados para personalizar o comportamento ou a aparência do componente, e dentro dessa função você cria a lógica de renderização do componente no contexto dos testes, reutilizando a função entre vários testes para não precisar reescrever o código de setup em cada teste.

`javascript

// Uma função que vai retornar a renderização do seu teste toda vez que for chamada
const makeSut = ({
prop = false, // Aqui você seta algum parametro padrão para todos os testes. É útil quando alguma prop é obrigatória
...props
}: Partial) => {
// Aqui fica a lógica de renderização do componente. Pode ser qualquer uma.
return render();
};

describe('Component', () => {
describe('when', () => {
it('do', () => {
// Você pode modificar os parâmetros para adaptar a renderização do componente
makeSut({ prop: false });
});
});
`

Nicoletti

ThreeJs

Primeiramente essa semana dei uma pegada no ThreeJs. A parte interessante aqui é que ele também está sendo muito usado no Electron Aqui tem um Get Started ) que eu tava dando uma lida.

Git

Também dei uma avançada no de Git Essa semana dei uma olhada pra alguns Rewriting history que são bem uteis, principalmente pra mim que envio commit errado toda hora.
Changing the Last Commit: git commit --amend O amend pode ser usado para "Editar" seu último commit enviado sem precisar enviar um novo. Ele também serve caso queira apenas trocar o comentário do commit. Mas vale uma atenção especial já que o --amend não apenas "editará" o commit antigo, e sim substituirá o antigo por um novo, trocando assim suas hashs já que o git tem a ideia de ser imutável. git commit --amend -m "an updated commit message" Aqui deixo um dos materiais de referencia ) caso queiram entender mais afundo.

Andre Almeida

variaveis scss

Se importar o arquivo que possui as variáveis scss dessa forma @use '../../styles/global' as *; Voce nao precisa usar o prefixo global.$varname, é só chamar $varname evitando a repetição desnecessária.

Zoldyck

Error Boundary

Error boundary é um componente especial, utilizado na captura de erros gerados durante a renderização da sua aplicação.

Com ele você consegue por exemplo renderizar uma UI específica para quando houver um erro na aplicação, também pode capturar esses erros para um sistema de log.

Uma curiosidade sobre o componente é que apesar do React atualmente usar Function Component por padrão ele só pode ser escrito como um Class Component.

Exemplo de um Error Boundary Component:

`ts

class ErrorBoundary extends React.Component {

constructor(props) {

super(props);

this.state = { hasError: false };

}

static getDerivedStateFromError(error) {

return { hasError: true };

}

componentDidCatch(error, info) {

logErrorToMyService(error, info.componentStack);

}

render() {

if (this.state.hasError) {

return this.props.fallback;

}

return this.props.children;

}

}
`

TIL - Today I Learn 12-11 18-11

Victor Hugo — Fri, 01 Dec 2023 20:30:00 +0000

@alvarogfn

Make System Under Test

O nome vem de Make System Under Test (fazer sistema sob teste).
Isso é usado em Testes Unitários para criar uma função que retorna uma Instância da Classe ou Componente que está sendo testado.
Vocês devem encontrar exemplos disso com Classes e Testes em Java, eles preparam um setup/Factory para fazer testes unitários.
A função MakeSut recebe parâmetros que podem ser usados para personalizar o comportamento ou a aparência do componente, e dentro dessa função você cria a lógica de renderização do componente no contexto dos testes, reutilizando a função entre vários testes para não precisar reescrever o código de setup em cada teste.

// Uma função que vai retornar a renderização do seu teste toda vez que for chamada
const makeSut = ({
  prop = false, // Aqui você seta algum parametro padrão para todos os testes. É útil quando alguma prop é obrigatória
  ...props
}:  Partial<TProps>)  =>  {
// Aqui fica a lógica de renderização do componente. Pode ser qualquer uma.
  return render(<Component prop={prop} {...props} />);
};

describe('Component',  ()  =>  {
  describe('when',  ()  =>  {
    it('do',  ()  =>  {
      // Você pode modificar os parâmetros para adaptar a renderização do componente
      makeSut({ prop:  false  });
    });
});

@nicolettifps

ThreeJs

Primeiramente essa semana dei uma pegada no ThreeJs. A parte interessante aqui é que ele também está sendo muito usado no Electron Aqui tem um Get Started que eu tava dando uma lida.

Git

Também dei uma avançada no de Git Essa semana dei uma olhada pra alguns Rewriting history que são bem uteis, principalmente pra mim que envio commit errado toda hora.
Changing the Last Commit: git commit --amend O amend pode ser usado para "Editar" seu último commit enviado sem precisar enviar um novo. Ele também serve caso queira apenas trocar o comentário do commit. Mas vale uma atenção especial já que o --amend não apenas "editará" o commit antigo, e sim substituirá o antigo por um novo, trocando assim suas hashs já que o git tem a ideia de ser imutável. git commit --amend -m "an updated commit message" Aqui deixo um dos materiais de referencia ) caso queiram entender mais afundo.

@aalmeida00

variaveis scss

@zoldyzdk

Error Boundary

Error boundary é um componente especial, utilizado na captura de erros gerados durante a renderização da sua aplicação.

Com ele você consegue por exemplo renderizar uma UI específica para quando houver um erro na aplicação, também pode capturar esses erros para um sistema de log.

Uma curiosidade sobre o componente é que apesar do React atualmente usar Function Component por padrão ele só pode ser escrito como um Class Component.

Exemplo de um Error Boundary Component:

class ErrorBoundary extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { hasError: false };  
  }  
  static getDerivedStateFromError(error) {  
    return { hasError: true };  
  }  
  componentDidCatch(error, info) {  
    logErrorToMyService(error, info.componentStack);  
  }  
  render() {  
    if (this.state.hasError) {  
    return this.props.fallback;  
    }  
    return this.props.children;  
  }  
}

useLongPress Custom Hook

Victor Hugo — Mon, 10 Jul 2023 01:53:32 +0000

Hello! My name is Victor Hugo and today i will show you why and how to use the useLongPress custom hook!

Events on frontend is the basic when you start to learn javascript, manipulating the DOM with clicks and forms is the basic, but sometimes we need something a litle bit more complex, a example is the double click that we can use the onDoubleClick event but what if we need to handle a long press, when the user click and hold the button, how do we handle this? This is the reason that we use the useLongPress hook!

First of all, let's start a new blank project, fell free to use any React framework that you want. I will use Vite with Typescript, if you're using Javascript just ignore the types, it will work in the same way.

Now that we already have create the project, let's create a folder named "hooks", in there we will store all custom hooks that we will create, in this example will be only one. We will create a new file with the name of the hook dot ts (useLongPress.ts), if you're using only javascript, the extension of the file need to be dot js (useLongPress.js).

Note that how it is a custom hook, it will not have any HTML and CSS inside only logic with typescript, that's why we're using the .ts extension and not .tsx.

After that, we will create and export the hook with the state and refs that we will use in this hook, this is how it will looks like:

import { useRef, useState } from "react";

export function useLongPress() {
const [event, setEvent] = useState('')

  const isLongPress = useRef(false)
  const timerRef = useRef<ReturnType<typeof setTimeout>>()
}

Now that we have setup everything that we will need to create this hook, let's make the first function of it:

function startPressTimer() {
    isLongPress.current = false
    
    timerRef.current = setTimeout(() => {
      isLongPress.current = true
      // this need to be here
      setEvent('longpress')
    }, 500)
  }

This function will see the user click and will tell us if is a longpress or just a normal click.

How do he do that?

On every click he wil see if the user stop the click after 500 ms or not, if yes he will set the isLongPress ref as true, else it will be just a normal click and the ref will be false.

But how do he will know when the user will click?

We will create the functions that will do that:

function handleOnClick() {
    // click actions here
    setEvent('click')

    if (isLongPress.current) {
      // longpress actions here
      setEvent('longpress')
    }
  }

  function handleOnMouseDown() {
    startPressTimer()
  }

  function handleOnMouseUp() {
    clearTimeout(timerRef.current)
  }

  function handleOnTouchStart() {
    startPressTimer()
  }

  function handleOnTouchEnd() {
    clearTimeout(timerRef.current)
  }

We will pass this functions to the onClick, onMouseDown, onMouseUp, onTouchStart and onTouchEnd events. Everytime the user touch or mouse down the button, it will trigger the startPressTimer function. The handleOnClick function is where we set the onClick event or longpress event, you can put specific logic inside and outside the if or just set the event state there like in this example.

The final step, return all this functions from the hook to we use whenever we want, it need to be exactly in this way:

return {
    event,
    handlers: {
      onClick: handleOnClick,
      onMouseDown: handleOnMouseDown,
      onMouseUp: handleOnMouseUp,
      onTouchStart: handleOnTouchStart,
      onTouchEnd: handleOnTouchEnd,
    },
  }

In this way will be more easy to pass all the functions to the respectives events.

The final result will be like this:

import { useRef, useState } from "react";

export function useLongPress() {
  const [event, setEvent] = useState('')

  const isLongPress = useRef(false)
  const timerRef = useRef<ReturnType<typeof setTimeout>>()

  function startPressTimer() {
    isLongPress.current = false
    timerRef.current = setTimeout(() => {
      isLongPress.current = true
      // this need to be here
      setEvent('longpress')
    }, 500)
  }

  function handleOnClick() {
    // click actions here
    setEvent('click')
    if (isLongPress.current) {
      // longpress actions here
      setEvent('longpress')
    }
  }

  function handleOnMouseDown() {
    startPressTimer()
  }

  function handleOnMouseUp() {
    clearTimeout(timerRef.current)
  }

  function handleOnTouchStart() {
    startPressTimer()
  }

  function handleOnTouchEnd() {
    clearTimeout(timerRef.current)
  }

  return {
    event,
    handlers: {
      onClick: handleOnClick,
      onMouseDown: handleOnMouseDown,
      onMouseUp: handleOnMouseUp,
      onTouchStart: handleOnTouchStart,
      onTouchEnd: handleOnTouchEnd,
    },
  }
}

Now, how do we use this hook in any component?

I will show you:

function App() {
  const { event, handlers } = useLongPress()

  return (
{/* in this way we can pass all the functions to the respectives events in this button */}
    <button {...handlers}>
        ...
    </button>
  )
}

Here is the example that i made:

Usefull links:

Video where i find this hook here:
Repository of this hook on Github: