DEV Community: Vinicius Basilio

LeetCode journal: Remove Duplicates from array

Vinicius Basilio — Thu, 15 May 2025 12:33:09 +0000

When I started these posts, I was just having fun as a hobbyist programmer, but recently I started to CS in college, so my posts will become more technical.

For this serie, I wanna post my LeetCode solutions; everytime when I achive 100% in runtime analysis or at least 80% in memory efficiency, I will share my code here.

Posts will follow leetcode model:

Intuition

Another simple two pointers trick. Let a pointer for the first item of array (call it index). Then use another pointer to search, keep waiting a different item to appear. At this time, just increase by one our index pointer and copy the value pointed by the other one.

Approach

We will build a "for loop", is easy to loop through array with this loop. We'll need to mutable vars, one to hold our "lazy" pointer, the one that memorized the next index, and another for search, this var will be updated just when the index value became different from the search pointer.

Complexity

Time complexity:
o(n)

Space complexity:
o(1)

Code

impl Solution {
    pub fn remove_duplicates(nums: &mut Vec<i32>) -> i32 {
      let mut lastNonDup = nums[0];
      let mut new_size= 1;

        for index in 0..nums.len() {
            if nums[index] != lastNonDup {
                nums[new_size] = nums[index];
                new_size += 1;
                lastNonDup = nums[index];
            }
        }
        new_size as i32  
    }
}

My leetcode: https://leetcode.com/problems/remove-duplicates-from-sorted-array/solutions/6745076/solution-in-rust-for-remove-duplicates-f-njsb/

Webscraping com Python: usando CSV como base de dados

Vinicius Basilio — Sun, 22 Dec 2024 13:45:20 +0000

Tive uma demanda bem interessante esses dias. Uma pessoa estava migrando dados de um lugar para o outro, usando CSV. Os dados são cadastros de livros para um projeto de leitura. Certo momento, ela me disse: “bom, agora o resto do trabalho é de robô. Vou ter que pegar o ISBN de cada título.” Como ela mesmo disse, um trabalho de robô, então por que não deixar um robô fazer?

Sigla para International Standard Book Number.

Uma obra pode ter vários ISBNs, isso acontece porque as edições têm um ISBN próprio. Para esse caso, qualquer ISBN serviria, se for compatível a mídia. No CSV foram cadastrados:
-> ebook
-> fisical
-> audio

Vamos à lógica:
-> Carregar e abrir o arquivo CSV.
-> Extrair a coluna com os títulos.
-> Extrair a coluna das mídias.
-> Para cada títulos, pesquisar no Google pelo ISBN.
-> Extrair da página o título.
-> Extrair uma lista de ISBNs.
-> Extrair uma lista de mídias.
-> Verificar a mídia de cadastro e procurar o ISBN mais próximo, caso nosso critério não seja encontrado, retornar o primeiro item da lista.
-> Informar de qual mídia retiramos o ISBN para conferência posterior.

Vamos as libs necessárias:

import requests # para fazer as requisições
from bs4 import BeautifulSoup # para manipular o html recebido
import pandas as pd # para manipular os arquivos CSV
import time
import random # as duas são para gerarmos intervalos aleatórios de acesso

Essa lista de livros tem mais de 600 itens, e como não quero ser bloqueado pelo Google, vamos fazer acessos aleatórios e com espaço mais humano. Também vamos usar um header para informar que queremos a versão de navegador a página. Para isso, vá em “rede” no seu navegador e procure por "User-Agent".

Para fazer buscas no Google, usamos o seguinte padrão de URL:

url_base = "https://www.google.com/search?q=isbn" # o que vem depois '=' é a pesquisa

Lembrando que URLs não tem espaço, por isso vamos substituir os espaços nos títulos por “+”. No pandas, as “planilhas” são chamadas de DataFrame e é bem comum que se use df como abreviação. Por último, talvez você esteja no Windows como eu, neste caso, as barras de endereço de sistema são investidas com relação ao Unix. Vamos escrever uma função que pega a URL que colarmos e inverta para o outro formato.

path = r"C:\caminho\livros.csv"

def invert_url_pattern(url):
    return url.replace("\\","/")

path = invert_url_pattern(path)

def search_book(path):
    url_base = "https://www.google.com/search?q=isbn"
    headers = {
    "User-Agent":"seu pc"
    }
    
    df = pd.read_csv(path, encoding='utf-8')
    books = df["Name"].tolist()
    media = df["media"].tolist()
    # vamos colocar as pesquisas aqui e depois inserir todas no DataFrame
    title_books = []
    isbn_books = []
    media_books = []  

    for index, book in enumerate(books):

        time.sleep(random.uniform(20, 30))
        url = url_base + "+" + book.replace(" ", "+")
        req = requests.get(url, headers=headers)

        site = BeautifulSoup(req.text, "html.parser")
        title = site.find("span", class_="Wkr6U")
        isbns = site.find_all("div", class_="bVj5Zb")
        medias = site.find_all("div", class_="TCYkdd")

        if not(hasattr(title, "text")):
            title_books.append("")
            isbn_books.append("")
            media_books.append("")
            continue

        isbns = isbns[::-1]
        unified_data = {}
        title_books.append(title.text)

        for i in range(len(medias)):
            unified_data[medias[i].text] = isbns[i].text


        match media[index]:
            case "ebook":
                if "Livro digital" in unified_data:
                    isbn_books.append(unified_data["Livro digital"])
                    media_books.append("Livro digital")
                    continue

                first_key = list(unified_data)[0]
                isbn_books.append(unified_data[first_key])
                media_books.append("")

            case "fisical":
                if "Livro de capa dura" in unified_data:
                    isbn_books.append(unified_data["Livro de capa dura"])
                    media_books.append("Livro capa dura")
                    continue
                if "Livro de bolso" in unified_data:
                    isbn_books.append(unified_data["Livro de bolso"])
                    media_books.append("Livro capa dura")
                    continue
                first_key = list(unified_data)[0]
                isbn_books.append(unified_data[first_key])
                media_books.append("")

            case "audio":
                if "Audiolivro" in unified_data:
                    isbn_books.append(unified_data["Audiolivro"])
                    media_books.append("Audiolivro")
                    continue

                first_key = list(unified_data)[0]
                isbn_books.append(unified_data[first_key])
                media_books.append("")

            case _:
                first_key = list(unified_data)[0]
                isbn_books.append(unified_data[first_key])
                media_books.append("")

    df["Titulo do Livro"] = title_books
    df["ISBN"] = isbn_books
    df["Tipo de Livro"] = media_books

    return df

Beleza, tudo pronto para testarmos! Vou deixar uma linha de exemplo do que recebi para você poder testar aí.

Name	language	media
this other eden	🇬🇧 english	audio

df = search_book(path)

df.to_csv(invert_url_pattern("C:seu\caminho\para\salvar\nome_do_arquivo.csv"), encoding='utf-8', index=False)

Espero que tenha sido útil para você, e que possa automatizar algo do seu dia-a-dia!

Corrigido bugs de seleção no dic.

O que aprendi criando um simluador simples de radar com HMTL Canvas e JS?

Vinicius Basilio — Tue, 20 Aug 2024 21:43:39 +0000

Introdução

Bom, esse projeto veio do famoso dito popular, “mente vazia é oficina do vamos iniciar outro projeto”. Brincadeiras a parte, queria contar uma história, primeiro, nunca estudei programação formalmente e até hoje não entendo o porquê, sempre aparece outra coisa mais “urgente”, e a segunda é: não lembro de nada das aulas de matemática.

Então, decidi mudar esse cenário e encarar um projeto que me ajudasse a programar melhor e, de quebra, me ensinasse alguns conceitos de matemática. Foi aí que lembrei de um projeto do freeCodeCamp.org sobre como criar um simulador de carro guiado por IA, feito pelo Radu (link aqui). O cara fez tudo na unha, nem TS ele usou! Lembro que quando terminei esse mini curso, olhei para o código e pensei “é, acho que não vou lembrar de nada disso no futuro.”

O Desafio

O que eu queria com todo esse preambulo era dizer: acordei com isso na cabeça e decidi criar algo similar, mas um pouco mais simples. Resolvi fazer um sensor, sem recorrer a nenhuma biblioteca ou revisitar o código original. Queria que fosse só eu e meu assistente GPT nessa jornada.

Reflexões e Aprendizados

Para quem tá preso no “tutorial hell”, aqui estão alguns pontos que achei importantes:

Aumentando suas referências: Esses vídeos, na minha opinião, ajudam a expandir sua forma de pensar. Você não vai sair de lá com o mesmo conhecimento que a pessoa no vídeo, mas vai sair com novas referências. É como um artista que aprende técnicas de grandes mestres antes de criar seu próprio estilo. No final, eu lembrava de muitas coisas das aulas, mesmo que foram há meses.
Desafios são legais: O mais bacana foi terminar o projeto e sentir que, apesar de passar 90% do tempo tentando entender e não programando de fato, quando o projeto rodou, foi uma sensação incrível. Esses projetos têm aplicações reais; os fundamentos são os mesmos usados em jogos, por exemplo.
Entenda os fundamentos: Se eu tivesse usado uma lib ou uma engine de jogo, acho que não entenderia tão bem o conceito por trás. Gosto de levantar o capô e ver como tudo funciona. Para projetos grandes, isso é impossível, mas para aprender conceitos, é essencial.

O Projeto: Radar Simples com HTML Canvas e JS

Agora, quero mostrar para vocês o resultado desse aprendizado: uma versão extremamente simples de radar usando HTML Canvas e JavaScript. O mais interessante foi implementar tudo isso sem usar nenhuma biblioteca.

O projeto está em: https://stackblitz.com/edit/vitejs-vite-bu1acf?file=main.js

Pretendo mexer mais nele num futuro não muito próximo!

Dicas Finais

Valorize os fundamentos: Entender o básico te ajuda a enfrentar qualquer desafio.
Não tenha medo de errar: A maior parte do tempo vai ser de tentativas e erros, e tá tudo bem com isso.
Encare desafios de cabeça erguida: Cada projeto finalizado é uma vitória e uma oportunidade de aprendizado.

Conclusão

Se você está começando ou quer se desafiar, sugiro que tente criar um projeto do zero, sem libs. Compartilhe suas experiências e desafios, mas por favor, não crie mais um framework js!

Google Sheets: SUMIFS para durações (horas), parte 2

Vinicius Basilio — Fri, 16 Aug 2024 22:35:14 +0000

Esses dias fiz um post mostrando como criar duas fórmulas personalizadas para o Google sheets para somar horas com base em critérios (aqui). O problema delas na minha opinião é que elas não eram flexiveis. E se eu quiser N critérios? Bom, agora você pode!

Agora a fórmula toma 3 conjuntos de dados: as durações, os critérios, e as instruções para filtrar. Vamos de novo a planilha de testes:

Título	Duração	Categoria	Status	Curti
Perdido em Marte	01:00:00	Filme	Já assisti	Sim
Interestelar	02:49:00	Filme	Já assisti	Não
John Wick	01:30:00	Filme	Já assisti	Não
Vingadores: Ultimato	03:00:00	Filme	Quero assistir
Stranger Things	00:45:00	Série	Assistindo
The Witcher	01:00:01	Série	Assistindo
O Mandaloriano	00:40:00	Série	Assistindo
Breaking Bad	00:50:00	Série	Já assisti	Sim
A Casa de Papel	00:55:00	Série	Quero assistir
Game of Thrones	01:10:00	Série	Quero assistir

Vamos atualizar nosso app script, sugiro criar outra planilha de testes e começar um novo, lembrando que as horas devem estar como “texto simples”. O código está aqui:

/**
 * Converte uma string no formato HH:MM:SS para o total em segundos.
 *
 * @param {string} hms - A string no formato HH:MM:SS.
 * @returns {number} O total em segundos.
 */
function converterHMSParaSegundos(hms) {
  const partes = String(hms).split(":");
  const [horas, minutos, segundos] = partes;
  return Number(horas) * 3600 + Number(minutos) * 60 + Number(segundos);
}

/**
 * Converte um número de segundos para o formato HH:MM:SS.
 *
 * @param {number} segundos - O total de segundos.
 * @returns {string} O tempo no formato HH:MM:SS.
 */
function converterSegundosParaHMS(segundos) {
  const horas = Math.floor(segundos / 3600);
  const minutos = Math.floor((segundos % 3600) / 60);
  const segundosRestantes = segundos % 60;
  return `${String(horas).padStart(2, "0")}:${String(minutos).padStart(
    2,
    "0"
  )}:${String(segundosRestantes).padStart(2, "0")}`;
}

/**
 * Filtra as linhas da matriz de dados com base nos critérios fornecidos e retorna as durações correspondentes.
 *
 * @param {Array<string>} duracoes - Array de durações em formato de texto.
 * @param {Array<Array<string>>} dados - Matriz de dados onde cada linha corresponde a um conjunto de valores.
 * @param {Array<string>} criterios - Array de critérios para filtrar as linhas da matriz de dados.
 * @returns {Array<string>} Retorna as durações que correspondem aos critérios.
 */
function filtroDeLinhas(duracoes, dados, criterios) {
  const linhas_na_matriz = duracoes.length;
  const matriz_de_criterios_concatenada = [];

  for (let linha = 0; linha < linhas_na_matriz; linha++) {
    let incluirLinha = true;

    for (let coluna = 0; coluna < dados[linha].length; coluna++) {
      if (!criterios.includes(dados[linha][coluna])) {
        incluirLinha = false;
        break; // Sai do loop se algum critério não for atendido
      }
    }

    if (incluirLinha) {
      matriz_de_criterios_concatenada.push(duracoes[linha]);
    }
  }

  return matriz_de_criterios_concatenada;
}

/**
 * Soma as horas filtradas de acordo com os critérios fornecidos.
 *
 * @param {Array<string>} duracoes - Array de durações em formato de texto.
 * @param {Array<Array<string>>} intervalo_de_criterios - Matriz de dados onde cada linha corresponde a um conjunto de valores.
 * @param {...string} criterios - Um ou mais critérios para filtrar as linhas da matriz de dados.
 * @returns {string} A soma das durações no formato HH:MM:SS.
 */
function somarHorasComCriterios(
  duracoes,
  intervalo_de_criterios,
  ...criterios
) {
  // Verifica se todos os argumentos são arrays
  if (
    !Array.isArray(duracoes) ||
    !Array.isArray(intervalo_de_criterios) ||
    !Array.isArray(criterios)
  ) {
    return "Passe os intervalos para o cálculo!";
  }

  const horasParaSomar = filtroDeLinhas(
    duracoes,
    intervalo_de_criterios,
    criterios.flat(Infinity)
  );
  const horasEmSegundos = horasParaSomar.map((n) =>
    converterHMSParaSegundos(n)
  );
  const somaDosSegundos = horasEmSegundos.reduce(
    (acumulador, valorAtual) => acumulador + valorAtual,
    0
  );

  return converterSegundosParaHMS(somaDosSegundos);
}

Vamos dizer que eu passe:

Filme | Já assisti | Não

Minha soma seria: 04:19:00

E lembrando que posso envolver isso com a função nativa: =VALOR e formatar como “duração” e o sheets volta a trabalhar somas como se tivesse usando uma fórmula nativa!

Como disse no último post, deixem seu comentários de sugestões, ou dúvidas. Abraços.

Google Sheets: How to Build a SUMIFS for Hours

Vinicius Basilio — Thu, 15 Aug 2024 00:21:43 +0000

Hello, everyone! Today I want to share a super useful script I created to solve a common problem in daily life.

If you've ever tried summing "duration" in Google Sheets, you might have noticed that the SUMIF and SUMIFS formulas don't work to sum durations of events or products based on specific criteria. This can be an obstacle depending on the type of calculation you need to do. But don't worry! Google Sheets allows you to create scripts in JavaScript and use them as custom formulas.

In my script, I created two variations: the first one accepts one criterion and the second one accepts up to two. I'm planning to improve this in the future to make the function even more flexible.

It's worth mentioning that custom formulas don't return values directly computable by the program. To work around this, you can wrap the result with the =VALUE() function. Then, just apply the corresponding formatting to the data type—in our case, "duration". Ready to check out the script?

Creating generic data for testing

First of all, let's generate data to test the formula. I used our friend GPT for this.

Title	Duration	Category	Status
The Martian	01:00:00	Movie	Watched
Interstellar	02:49:00	Movie	Watched
John Wick	01:30:00	Movie	Watched
Avengers: Endgame	03:00:00	Movie	Want to watch
Stranger Things	00:45:00	Series	Watching
The Witcher	01:00:01	Series	Watching
The Mandalorian	00:40:00	Series	Watching
Breaking Bad	00:50:00	Series	Watched
Money Heist	00:55:00	Series	Want to watch
Game of Thrones	01:10:00	Series	Want to watch

Script

I tried to document everything as best as possible. I decided to break it down into smaller functions and use something more declarative to increase code clarity.

function allAreArrays(...arrays) {
  return arrays.every(Array.isArray);
}

function allArraysHaveSameLength(...arrays) {
  const lengths = arrays.map((arr) => arr.length);
  return lengths.every((val) => val === lengths[0]);
}

function convertHMSToSeconds(hms) {
  // Breaks the string in HH:MM:SS format into parts
  const parts = String(hms).split(":");

  // Converts the parts into integers
  const [hours, minutes, seconds] = parts;

  // Converts hours and minutes into seconds and adds the seconds
  const totalSeconds =
    Number(hours) * 3600 + Number(minutes) * 60 + Number(seconds);

  return Number(totalSeconds);
}

function convertSecondsToHMS(seconds) {
  // Calculates the number of hours, minutes, and seconds
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const remainingSeconds = seconds % 60;

  // Adds a leading zero to ensure it always has two digits
  const hourFormat = String(hours).padStart(2, "0");
  const minuteFormat = String(minutes).padStart(2, "0");
  const secondFormat = String(remainingSeconds).padStart(2, "0");

  // Returns the HH:MM:SS format
  return `${hourFormat}:${minuteFormat}:${secondFormat}`;
}

/**
 * Sums hours based on a criterion.
 *
 * @param {string[]} sum_range - Set of time intervals in HH:MM:SS format.
 * @param {number[]} criteria_range - Set of criteria corresponding to the time intervals.
 * @param {number} criterion - The criterion for which hours should be summed.
 * @returns {string} Sum of the passed durations, or an error message.
 */
function sumHoursIf(sum_range, criteria_range, criterion) {
  if (!allAreArrays(sum_range, criteria_range))
    return "Pass the intervals for the calculation!";

  if (!allArraysHaveSameLength(sum_range, criteria_range))
    return "Intervals must be the same size";

  // Filters the time intervals for the specific criterion
  const hoursToSum = sum_range.filter(
    (row, index) =>
      String(criteria_range[index]).trim() == String(criterion).trim()
  );

  // Converts the filtered hours to seconds
  const hoursInSeconds = hoursToSum.map((n) => convertHMSToSeconds(n));

  // Sums all the seconds
  const sumOfSeconds = hoursInSeconds.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
  }, 0);

  // Converts the total seconds back to HH:MM:SS format
  return convertSecondsToHMS(sumOfSeconds);
}

/**
 * Sums hours based on criteria.
 *
 * @param {string[]} sum_range - Set of time intervals in HH:MM:SS format.
 * @param {number[]} criteria_range1 - First set of criteria corresponding to the time intervals.
 * @param {number} criterion1 - The first criterion for which hours should be summed.
 * @param {string[]} criteria_range2 - Second set of criteria corresponding to the time intervals.
 * @param {string} criterion2 - The second criterion for which hours should be summed.
 * @returns {string} Sum of the passed durations, or an error message.
 */
function sumHoursIf2(
  sum_range,
  criteria_range1,
  criterion1,
  criteria_range2,
  criterion2
) {
  if (
    !allAreArrays(
      sum_range,
      criteria_range1,
      criteria_range2
    )
  )
    return "Pass the intervals for the calculation!";

  if (
    !allArraysHaveSameLength(
      sum_range,
      criteria_range1,
      criteria_range2
    )
  )
    return "Intervals must be the same size";

  // Filters the time intervals for the passed criteria
  const hoursToSum = sum_range.filter(
    (row, index) =>
      String(criteria_range1[index]) == String(criterion1).trim() &&
      String(criteria_range2[index]).trim() === String(criterion2).trim()
  );

  // Converts the filtered hours to seconds
  const hoursInSeconds = hoursToSum.map((n) => convertHMSToSeconds(n));

  // Sums all the seconds
  const sumOfSeconds = hoursInSeconds.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
  }, 0);

  // Converts the total seconds back to HH:MM:SS format
  return convertSecondsToHMS(sumOfSeconds);
}

How to use?

The criteria can be text or numbers, but the hours must be formatted as "Plain Text". Go to the app script and paste the script and press "CTRL + S". Done. To use it, it's the same process as a native formula.

Once the formula is applied, we can treat it again as a type the program understands by using VALUE; your code should look like this:

=VALUE(sumHoursIf2($C$2:$C$11;$D$2:$D$11;C$14;$E$2:$E$11;$B15))

If everything worked out, this should be your result:

Categoria	Filme	Série
Assistido	5:19:00	0:50:00
Assistindo	0:00:00	2:25:01
Quero assistir	3:00:00	2:05:00

Just a tip, I hope you liked it, and if you have suggestions, leave them in the comments. Cheers.

Original post: https://dev.to/casewinter/como-somar-horas-no-google-sheets-usando-criterios-para-filtrar-linhas-364p

Como somar horas no Google Sheets usando critérios para filtrar linhas?

Vinicius Basilio — Wed, 14 Aug 2024 00:54:52 +0000

Olá, pessoal! Hoje quero compartilhar um script super útil que criei para resolver um problema comum no dia a dia.

Se você já tentou somar "duração" no Google Sheets, deve ter percebido que as fórmulas SUMIF e SUMIFS não funcionam para somar durações de eventos ou produtos com base em critérios específicos. Isso pode ser um obstáculo dependendo do tipo de cálculo que você precisa fazer. Mas não se preocupe! O Google Sheets permite criar scripts em JavaScript e usá-los como fórmulas personalizadas.

No meu script, criei duas variações: a primeira aceita um critério e a segunda até dois. Estou planejando melhorar isso no futuro para tornar a função ainda mais flexível.

Vale lembrar que as fórmulas personalizadas não retornam valores diretamente computáveis pelo programa. Para contornar isso, você pode envolver o resultado com a função =VALUE(). Depois, basta aplicar a formatação correspondente ao tipo de dado — no nosso caso, "duração". Pronto para conferir o script?

Criando dados genéricos para teste

Antes de mais nada, vamos gerar dados para testar a fórmula. Usei nosso amigo GPT para isso.

Título	Duração	Categoria	Status
Perdido em Marte	01:00:00	Filme	Já assisti
Interestelar	02:49:00	Filme	Já assisti
John Wick	01:30:00	Filme	Já assisti
Vingadores: Ultimato	03:00:00	Filme	Quero assistir
Stranger Things	00:45:00	Série	Assistindo
The Witcher	01:00:01	Série	Assistindo
O Mandaloriano	00:40:00	Série	Assistindo
Breaking Bad	00:50:00	Série	Já assisti
A Casa de Papel	00:55:00	Série	Quero assistir
Game of Thrones	01:10:00	Série	Quero assistir

Script

Tentei documentar tudo o melhor possível. Resolvi separar em funções menores e usar algo mais declarativo para aumentar a clareza do código.

function todosSaoArrays(...arrays) {
  return arrays.every(Array.isArray);
}

function todosArraysTemOMesmoTamanho(...arrays) {
  const lengths = arrays.map((arr) => arr.length);
  return lengths.every((val) => val === lengths[0]);
}

function converterHMSParaSegundos(hms) {
  // Quebra a string do formato HH:MM:SS em partes
  const partes = String(hms).split(":");

  // Converte as partes em números inteiros
  const [horas, minutos, segundos] = partes;

  // Converte horas e minutos para segundos e soma com os segundos
  const totalSegundos =
    Number(horas) * 3600 + Number(minutos) * 60 + Number(segundos);

  return Number(totalSegundos);
}

function converterSegundosParaHMS(segundos) {
  // Calcula o número de horas, minutos e segundos
  const horas = Math.floor(segundos / 3600);
  const minutos = Math.floor((segundos % 3600) / 60);
  const segundosRestantes = segundos % 60;

  // Adiciona zero à esquerda para garantir que tenha sempre dois dígitos
  const formatoHoras = String(horas).padStart(2, "0");
  const formatoMinutos = String(minutos).padStart(2, "0");
  const formatoSegundos = String(segundosRestantes).padStart(2, "0");

  // Retorna o formato HH:MM:SS
  return `${formatoHoras}:${formatoMinutos}:${formatoSegundos}`;
}

/**
 * Soma as horas baseado um critério.
 *
 * @param {string[]} intervalo_soma - Conjunto de intervalos de tempo em formato HH:MM:SS.
 * @param {number[]} intervalo_de_criterios - Conjunto de critérios correspondentes aos intervalos de tempo.
 * @param {number} criterio - O critério para o qual as horas devem ser somadas.
 * @returns {string} Soma das durações passadas, ou uma mensagem de erro.
 */
function somarHorasSe(intervalo_soma, intervalo_de_criterios, criterio) {
  if (!todosSaoArrays(intervalo_soma, intervalo_de_criterios))
    return "Passe os intervalos para o calculo!";

  if (!todosArraysTemOMesmoTamanho(intervalo_soma, intervalo_de_criterios))
    return "Os intervalos devem ter o mesmo tamanho";

  // Filtra os intervalos de tempo para o critério específico
  const horasParaSomar = intervalo_soma.filter(
    (linha, index) =>
      String(intervalo_de_criterios[index]).trim() == String(criterio).trim()
  );

  // Converte as horas filtradas para segundos
  const horasEmSegundos = horasParaSomar.map((n) =>
    converterHMSParaSegundos(n)
  );

  // Soma todos os segundos
  const somaDosSegundos = horasEmSegundos.reduce((acumulador, valorAtual) => {
    return acumulador + valorAtual;
  }, 0);

  // Converte o total de segundos de volta para o formato HH:MM:SS
  return converterSegundosParaHMS(somaDosSegundos);
}

/**
 * Soma as horas baseado em critérios.
 *
 * @param {string[]} intervalo_soma - Conjunto de intervalos de tempo em formato HH:MM:SS.
 * @param {number[]} intervalo_de_criterios1 -  Primeiro conjunto de critérios correspondentes aos intervalos de tempo.
 * @param {number} criterio1 - O primeiro critério para o qual as horas devem ser somadas.
 * @param {string[]} intervalo_de_criterios2 -  Segundo conjunto de critérios correspondentes aos intervalos de tempo.
 * @param {string} semestre - O segundo critério para o qual as horas devem ser somadas.
 * @returns {string} Soma das durações passadas, ou uma mensagem de erro.
 */
function somarHorasSe2(
  intervalo_soma,
  intervalo_de_criterios1,
  criterio1,
  intervalo_de_criterios2,
  criterio2
) {
  if (
    !todosSaoArrays(
      intervalo_soma,
      intervalo_de_criterios1,
      intervalo_de_criterios2
    )
  )
    return "Passe os intervalos para o calculo!";

  if (
    !todosArraysTemOMesmoTamanho(
      intervalo_soma,
      intervalo_de_criterios1,
      intervalo_de_criterios2
    )
  )
    return "Os intervalos devem ter o mesmo tamanho";

  // Filtra os intervalos de tempo para os critérios passados
  const horasParaSomar = intervalo_soma.filter(
    (linha, index) =>
      String(intervalo_de_criterios1[index]) == String(criterio1).trim() &&
      String(intervalo_de_criterios2[index]).trim() === String(criterio2).trim()
  );

  // Converte as horas filtradas para segundos
  const horasEmSegundos = horasParaSomar.map((n) =>
    converterHMSParaSegundos(n)
  );

  // Soma todos os segundos
  const somaDosSegundos = horasEmSegundos.reduce((acumulador, valorAtual) => {
    return acumulador + valorAtual;
  }, 0);

  // Converte o total de segundos de volta para o formato HH:MM:SS
  return converterSegundosParaHMS(somaDosSegundos);
}

Como usar?

Os critérios podem ser texto, ou números, mas as horas devem ser obrigatoriamente formatadas como tipo “Texto simples”.

Vá até o app script:

Cole o script e de "CTRL + S". Pronto. Para usar é o mesmo processo de uma fórmula nativa.

Uma vez aplicada a fórmula, podemos voltar a tratar como um tipo que o programa entenda usando a VALUE, seu código deve ficar assim:

=VALUE(somarHorasSe2($C$2:$C$11;$D$2:$D$11;C$14;$E$2:$E$11;$B15))

Caso tudo tenha dado certo, esse deve ser seu resultado:

Foi só uma dica, espero que tenham gostado, e se tiverem sugestões deixem no comentário. Abraços.

Máscara de Input para duração de tempo (horas acima de 24)

Vinicius Basilio — Mon, 06 Nov 2023 00:45:17 +0000

Olá, pessoal! Vou escrever o post em português e traduzir para inglês. Há uns meses para um projeto do meu trabalho estava escrevendo uma calculadora de horas. Nossos projetos excedem a duração de vinte e quatro horas diversas vezes, então precisava de um input que pudesse passar.

Depois de muito tempo pesquisando achei umas coisas, mas nada pronto. Copiei (sim, não sei RegEx até hoje) uma RegEx por aí e ela me ajudou por um tempo, mas olhar aquela calculadora era saber que não tinha feito o meu trabalho completo. Enfim, hoje deu um estalo e fui remixar esse projeto e achei uma gambiarra. Segue o código para que você não sofra como eu!

interface props {
  hour: (n: any) => void;
}

import { useState } from "react";
const Input = ({ hour }: props) => {
  const [useArray, setArray] = useState([]);
  const [useAcc, setAcc] = useState(0);
  const [useValue, setValue] = useState("00:00:00");

  const mask = (value: string) => {
    const s = String(value);
    return s
      .replace(/\D/g, "")
      .replace(/(\d{2})(\d)/, "$1:$2")
      .replace(/(\d{2})(\d)/, "$1:$2")
      .replace(/(\d{2})(\d)/, "$1:$2");
  };

  const masking = (n: string) => {
    const r = mask(n).split(":");
    const pattern = ["00", "00", "00"];
    const correctedValue = pattern.map((n: number | string, i: number) =>
      r[i] != null ? r[i].padEnd(2, "0") : n
    );
    setValue(correctedValue.join(":"));
    hour(correctedValue.join(":"));
  };

  const maskingTest = (e: any) => {
    const arr: any = useArray;
    const expr = e.key;

    if (expr == "Backspace" && useAcc != 0) {
      arr.pop();
      setAcc(useAcc - 1);
      return masking(arr.join());
    }

    if (useAcc == 6 && expr != "Backspace") return;
    if (isNaN(expr)) return;
    arr[useAcc] = expr;
    setArray(arr);
    setAcc(useAcc + 1);
    return masking(arr.join());
  };

  return (
    <>
      <input
        className={`
          rounded-md
          p-2
          text-sm
          bg-neutral-700
          focus:outline-none
          w-40
          `}
        type="text"
        onKeyUp={(e) => maskingTest(e)}
        value={useValue}
      />
    </>
  );
};

export default Input;

Não use onChange

O problema do onChange é que você não quer o que o input mude! Nós queremos criar uma sombra que vai pemitir rastrear o estado original do input e reescrever uma versão modificada pela nossa RegEx. O React acha isso uma péssima ideia, e o motivo é que ele tem dificuldade de rastrear as alterações na DOM com isso, por isso é uma gambiarra. Mas em meus teste nada deu errado, então até agora tudo bem.

Vamos usar um array para armazenar o texto real digitado pelo usuário. Cada tecla vai ser adicionada como um novo elemento, vamos verificar se a tecla é "Backspace" para apagar, se não for, vamos deixar passar. Agora vamos verificar se deixamos passar um número ou outra coisa. Ao mesmo tempo, temos que alimentar um acumulador, ele serve para nos dizer onde estamos no array, é com ele que vamos limitar o tamanho do input. Ah, caso você esteja cogitando em usar useRef, o React não recomenda leitura e escrita nela durante o render.

Depois vamos pegar o padrão que criamos de display de horas e vamos e conferir o texto que a RegEx exportou para nós, assim podemos substituir nosso padrão pelo texto que ela gerou, caso algo esteja com menos de dois dígitos, vamos corrigir com padEnd; caso o texto seja menor que o padrão vamos usar as partes que restarem dele para completar.

E pronto! Agora é só usar hour das props passadas e resgatar o valor usando um setState a partir do elemento pai.

Esse código ainda precisa de muitas melhorias. Fala aí nos comentários como posso fazer isso. A url do codeSandBox =>

codesandbox.io

Valeu!

How to change "state" during render without infinite loops

Vinicius Basilio — Mon, 26 Jun 2023 13:42:27 +0000

You may have encountered a situation where you want to update a state variable inside a component function, but you can't because it triggers an infinite loop of re-rendering. You may also think of using useRef, but the React documentation says "Do not write or read ref.current during rendering." So what can you do? Here's a trick: if you use an external variable, you can write and read it during render. But be careful, it could cause side effects or unexpected behavior. Always make sure you have a clear logic for when and how to update your external variable.


let globalVar = 'default value';

export default function App() {
  //somethings happen
  const example = false;
  example ? globalVar : (globalVar = 'New value');
  //setState make a infinity loop here

  return (
    <div>
      <h1>Hello!</h1>
      <p>{globalVar}</p>
    </div>
  );
}

Make React from scratch for fun

Vinicius Basilio — Sat, 24 Jun 2023 02:38:19 +0000

Hello, fellow React enthusiasts! I'm super excited to share with you a little project I've been working on: creating my own “React” library from scratch. You might be wondering why you would want to create your own React library when there are so many great ones out there already. In my case, just for fun.

This project is all about pure javascript and html, no other libraries or frameworks needed. We will create our own state hooks to manage the data and the UI. It will be fun and challenging, but also rewarding and educational.

First, we need to create a central place to store our states. Instead of using a plain object, we'll use a Map, which is a data structure that lets us store key-value pairs and perform operations on them easily. MDN recommends using a Map when you need to add or remove keys frequently, which is exactly what we'll do. We'll also create a custom function to access and update our Map, using functional programming principles (because it function).

let memory = new Map();

const defaultGetter = (signature) => () => memory.get(signature);
const defaultSetter = (signature) => (data) => {
  memory.set(signature, data);
  return render();
};

It's time to learn how to make our own custom hooks. We will explore three different types of hooks: a general one, a switch one, and an array one. A general hook can be used for any kind of state management. A switch hook can toggle between true and false values. An array hook can add or remove items from an array. Sounds exciting, right? Let's get started!

First hook:

const createState = (init) => {
  const signature = memory.size;
  memory.set(signature, init);
  const getter = defaultGetter(signature);
  const set = defaultSetter(signature);

  const setter = (newValue) => {
    return set(newValue);
  };
  return [getter, setter];
};

How to use:

const [stringExample, setStringExemple] = createState('Joe');
console.log(stringExample()); // joe
setStringExemple('Joe Joe');
console.log(stringExample()); // Joe Joe

Boolean hook:

const createBoolean = (init, condition) => {
  const signature = memory.size;
  memory.set(signature, init);
  const getter = defaultGetter(signature);
  const set = defaultSetter(signature);

  const setter = (newValue) => {
    switch (newValue) {
      case condition[0]:
        set(true);
        break;
      case condition[1]:
        set(false);
        break;
      default:
        console.error(`Sorry, something wrong`);
        set(false);
    }
  };
  return [getter, setter];
};

How to use:

const [IsLightOn, setIsLightOn] = createBoolean(false, ["turnOn", "turnOff"]);

console.log(IsLightOn()); // false
setIsLightOn("turnOn");
console.log(IsLightOn()); // true
setIsLightOn("turnOff");
console.log(IsLightOn()); // false

Array hook:

const createArray = (init) => {
  const signature = memory.size;
  const get = defaultGetter(signature);
  const set = defaultSetter(signature);

  Array.isArray(init)
    ? memory.set(signature, init)
    : memory.set(signature, [init]);

  const getter = (index) => {
    if (typeof index == "number") {
      return get()[index];
    }
    return get();
  };

  const setter = (index, newValue) => {
    if (newValue !== undefined && !Array.isArray(index)) {
      const newArr = [];
      newArr[0] = index;
      set(newArr);
    } else if (Array.isArray(index)) {
      set(index);
    } else {
      const arr = get();
      arr[index] = newValue;
      set(arr);
    }
  };
  return [getter, setter];
};

How to use:

const [array, setArray] = createArray("index 0");
console.log(array()); // [ 'index 0' ]
setArray([...array(), "index 1"]);
console.log(array()); // [ 'index 0', 'index 1' ]
console.log(array(1)); // index 1

We are almost done with our app! Now it's time to make our render function to update UI. This function will take the state of our app and display it on the screen. It will also handle any user interactions and events. Let's get started!

const appDiv = document.getElementById("app");

function render() {
  appDiv.innerHTML = App();
}

Alright, time to write our first component and test! This is going to be fun and easy.

const [hellomsg, setHellomsg] = createState("Hello, world!");
const update = () => setHellomsg("Hi, there!");

const App = () => {
  return `<div>
            <h1>${hellomsg()}</h1>
            <button onclick="update()">Change the msg</button>
          </div>
`;
};

Your code will be like this:

const [hellomsg, setHellomsg] = createState("Hello, world!");
const update = () => setHellomsg("Hi, there!");

const App = () => {
  return `<div>
            <h1>${hellomsg()}</h1>
            <button onclick="update()">Change the msg</button>
          </div>
`;
};

const appDiv = document.getElementById("app");

function render() {
  appDiv.innerHTML = App();
}

render(); //don't forget to initialize

Don't worry, I have more tricks up my sleeve, I'm working on another hook that I'll share soon. Let me know what you think. You can find the code on my github later.