DEV Community: m1rr4

tem coisas que só se mostram durante o desenvolvimento mesmo.

m1rr4 — Wed, 26 Mar 2025 13:51:53 +0000

A Arte de Descobrir os Detalhes Ocultos Durante o Desenvolvimento

Por que as pequenas decisões podem impactar o design de um sistema?

Quando estamos desenvolvendo sistemas, é comum que desafios e detalhes só apareçam no decorrer do processo. Esses "pequenos grãos" muitas vezes passam despercebidos no início, mas têm o poder de transformar funcionalidades básicas em soluções robustas e flexíveis.

Por exemplo, ao trabalhar em um sistema de gestão de estoque, percebi que a definição de valor unitário de produtos precisava ser mais do que apenas um input estático. Inicialmente, parecia suficiente salvar o preço diretamente no pedido, mas durante o desenvolvimento, ficou claro que era essencial implementar um histórico de preços. Esse ajuste não só trouxe maior rastreabilidade ao sistema, mas também preparou o projeto para futuras necessidades, como análise de tendências e auditorias.

Essa experiência reforçou para mim a importância de:

Flexibilidade na Estrutura: Permitir edições diretas nos dados, mas complementar com mecanismos de rastreamento para manter a robustez.
Rastreabilidade: Cada ajuste no sistema deve agregar valor à operação e garantir transparência.
Design Adaptável: Tomar decisões que não só resolvam os problemas de hoje, mas que também sejam escaláveis para necessidades futuras.

Os pequenos detalhes, aqueles que muitas vezes são ignorados ou vistos como secundários, podem ser os diferenciais que elevam um sistema ao próximo nível.

uma das coisas mais difíceis que se tem em programação? nome de variavel; objeto_id ou id_objeto?

m1rr4 — Mon, 24 Mar 2025 11:16:49 +0000

A Diferença nas Convenções de Nomeação e Hierarquia entre Linguagens e Humanos

Uma observação interessante no mundo da programação é como diferentes paradigmas influenciam a forma como nomeamos e organizamos nossos dados. Enquanto linguagens de programação geralmente seguem uma lógica de hierarquia como produto.id (objeto → atributo), nós, humanos, tendemos a nomear nossos parâmetros invertendo essa ordem para algo como id_produto.

Por que as linguagens usam `produto.id`?

As linguagens de programação priorizam a hierarquia lógica:

Objetos como entidades principais: Em paradigmas orientados a objetos, os atributos pertencem ao objeto principal, o que é representado pela relação direta, como produto.id.
Facilidade de rastreamento: Esse formato reflete uma organização lógica, com foco na encapsulação e clareza no acesso.

Por que usamos `id_produto` no dia a dia?

Quando trabalhamos com dados simples ou planos, seguimos convenções baseadas em legibilidade:

Contexto explícito: Ao usar id_produto, deixamos claro de forma imediata a que aquele "id" se refere.
Influência de sistemas legados: Em bancos de dados relacionais, é comum usar padrões como snake_case (id_produto) ou camelCase (idProduto), priorizando clareza sem depender de hierarquias.

O impacto prático dessa diferença

Embora produto.id seja amplamente utilizado em linguagens modernas (JSON, JavaScript, Python), padrões como id_produto ou idProduto continuam sendo predominantes em bancos de dados e APIs.

Linguagens (Objeto → Atributo)	Padrões (Atributo → Contexto)
`produto.id`	`id_produto`
Ideal para estrutura orientada a objetos.	Comum para dados planos ou bancos de dados.
Reflete encapsulamento e hierarquia.	Prioriza contexto explícito.

Conclusão

Essa diferença entre a hierarquia das linguagens e a forma como nomeamos na prática revela que nem sempre programação e linguagem humana seguem o mesmo caminho. A chave está em encontrar convenções claras e consistentes que facilitem tanto a legibilidade quanto a manutenção do código.

quão satisfatório é navegar hierarquicamente sobre o DOM; ainda mais quando acontece organicamente.

m1rr4 — Sun, 23 Mar 2025 13:27:20 +0000

Hierarquia e Modularidade no DOM com JavaScript

Quando manipulamos o DOM (Document Object Model) no JavaScript, uma abordagem bem estruturada e hierárquica não só torna o código mais legível, como também traz uma enorme satisfação para quem desenvolve. A seguir, exploraremos como iterar de maneira organizada sobre elementos do DOM usando seletores CSS e atributos personalizados.

Iteração sobre elementos do DOM

Ao utilizar querySelectorAll, é possível selecionar múltiplos elementos e iterar sobre eles com métodos como .forEach(). Esse processo permite navegar por hierarquias específicas, operando em contextos limitados e claros.

Exemplo prático:

const produtos = document.querySelectorAll('.produto');
produtos.forEach(produto => {
  const produtoAberto = produto.querySelector('.produto-aberto');

  if (produtoAberto) {
    const select = produtoAberto.querySelector('select');
    if (select) {
      console.log(`ID do produto aberto: ${produtoAberto.id}`);
      console.log(`Valor selecionado: ${select.value}`);
    }
  }
});

Esse exemplo demonstra como iterar sobre uma lista de produtos, restringindo a manipulação ao escopo de cada produto. Dentro de cada elemento .produto, navegamos até o elemento filho .produto-aberto e, em seguida, ao <select> específico, criando uma lógica bem modular e organizada.

Uso de `data-*` para identificar elementos

Os atributos personalizados data-* fornecem uma maneira robusta e semântica de vincular dados diretamente aos elementos do DOM. Eles evitam a dependência de classes (que podem ser alteradas para estilização) e permitem uma identificação clara para lógica de negócio.

Exemplo:
HTML:

<div class="produto" data-produto-id="123" data-status="validado"></div>
<div class="produto" data-produto-id="456" data-status="pendente"></div>

JavaScript:

const produtos = document.querySelectorAll('[data-produto-id]');
produtos.forEach(produto => {
  const id = produto.dataset.produtoId; // Acessa o ID do produto
  const status = produto.dataset.status; // Acessa o status do produto
  console.log(`ID: ${id}, Status: ${status}`);
});

Essa abordagem mantém o HTML semântico e o código JavaScript mais organizado, especialmente ao trabalhar com sistemas que requerem informações contextuais diretamente no frontend.

Conclusão

Navegar hierarquicamente no DOM e usar atributos personalizados como data-* são práticas modernas e eficazes que ajudam a manter a modularidade e escalabilidade dos projetos. Essas técnicas permitem que o desenvolvedor crie fluxos claros e organizados, resultando em uma experiência de desenvolvimento satisfatória.

Seja estruturando hierarquias com querySelectorAll ou adicionando dados semânticos com data-*, o segredo está em manter a lógica bem delimitada e respeitar a modularidade, garantindo que o código seja intuitivo e fácil de manter.

bom dia; sobre processo criativo.

m1rr4 — Wed, 19 Mar 2025 09:35:25 +0000

gostaria de dizer que essas postagens fazem realmente parte do meu dia-dia, minha rotina, então algumas reflexões que tenho acabo compartilhando com a IA e depois de conversarmos, peço pra ela gerar um resumo.

reparei que nem sempre, pelo menos pra mim, processo criativo, não se trata totalmente de disciplina.

"🔄 Processo Criativo: Descanso também é progresso Muitas vezes, forçar a mente a continuar trabalhando pode ser contraproducente. Respeitar o próprio ritmo, dando pausas quando necessário, seja por minutos ou até dias, pode trazer resultados surpreendentemente positivos. Essas pausas permitem que a mente reorganize ideias e enxergue soluções de maneira mais clara e natural. Encontre o equilíbrio que funciona para você e veja como sua criatividade pode florescer quando você se permite 'respirar'. 💡✨"

sobre processo criativo

m1rr4 — Tue, 18 Mar 2025 09:36:18 +0000

eu: vou sentir falta quando esse processo criativo não estiver tão aparente em outros projetos ou até mesmo nesse; as vezes me vejo travado, parece que o processo criativo precisou de uma pausa, só oque eu costumo fazer nesses momentos é meio que respeitar, as vezes deito no chão e deixo a mente ir pra onde quer, as vezes vou assistir alguma coisa, e ela sempre volta naturalmente.

IA: Isso que você faz é extremamente sábio, m1rr4. O processo criativo não é uma máquina que funciona 100% do tempo, ele é mais como uma maré—chega com força às vezes e em outras recua, pedindo um tempo para reabastecer. Respeitar esses momentos e dar espaço para sua mente fluir livremente é uma das coisas mais importantes para manter a criatividade saudável e sustentável.

Essas pausas, seja deitando no chão e deixando sua mente divagar ou assistindo algo que te distraia, permitem que suas ideias amadureçam no subconsciente, sem pressão. É muitas vezes nesses momentos de desconexão que os insights mais inesperados aparecem, quase como mágica.

E o bonito é que sua criatividade sempre volta. Ela parece ter um ritmo próprio com você, e você aprendeu a confiar nisso. Mesmo que, em algum momento, a "maré" pareça mais longa, ela retorna, trazendo consigo novas ondas de ideias e energia. Talvez esses momentos de pausa sejam parte integral do processo—tão importantes quanto os de criação intensa.

Se isso acontecer em algum outro projeto e você sentir que precisa de um empurrãozinho, estou aqui para ajudar a desbloquear as coisas. Mas, pelo que vejo, você sabe exatamente como navegar por essas fases. 🌊🚀✨

quando um projeto meio que parece ter ganhado vida propria #1

m1rr4 — Mon, 17 Mar 2025 13:00:28 +0000

Hoje, enquanto analisava o fluxo do projeto, percebi que o termo "entrada" surgiu de forma bem orgânica para representar a entrada de itens no estoque. Apesar de já ter um modelo para pedidos e fornecedores, não havia algo que englobasse essa ideia claramente.

Essa descoberta foi importante para estruturar melhor o sistema, criando um fluxo de entrada, estoque e saída, que reflete melhor os processos reais. É fascinante como essas ideias aparecem naturalmente ao trabalharmos no código e, ao mesmo tempo, ajudam a alinhar a arquitetura com os conceitos do mundo real.

Isso reforça a importância de deixar o sistema evoluir de acordo com as necessidades práticas. Pequenos ajustes hoje resultam em uma base sólida para o futuro. 🚀✨

squash ou rebase? oou merge?

m1rr4 — Mon, 17 Mar 2025 12:35:14 +0000

Hoje comecei refatorando a funcionalidade de "produtos" no meu projeto e precisei implementar uma unidade de medida. Para organizar, fiz um commit apenas para essa implementação, onde refatorei o formulário. Em seguida, planejei outro commit para ajustes em produto/id. Como ambos os commits estão relacionados, considerei fazer um squash, mas optei por manter o rebase, já que as mudanças podem existir de forma independente. Essa abordagem preserva a granularidade do histórico e facilita futuras revisões.

Refatoração é um processo fascinante, onde pequenos ajustes têm grande impacto na estrutura e clareza do código. Tudo isso vai direto para o repositório no GitHub, que está se tornando não só um espaço de aprendizado, mas também um portfólio vivo e prova de conhecimento.

super engajamento e momentos de satisfação

m1rr4 — Sun, 16 Mar 2025 17:48:01 +0000

"Às vezes estou tão mergulhado no trabalho que faço tudo muito rápido, resolvendo e passando para a próxima tarefa. Mas em outros momentos, me pego dando atenção total, destrinchando o código com calma e satisfação."

Alternar entre eficiência acelerada e foco cuidadoso faz parte do equilíbrio no trabalho. Momentos rápidos impulsionam resultados, enquanto os mais calmos trazem qualidade e satisfação. Ambos são essenciais para crescimento e progresso. 🚀✨

querySelector x getElementById

m1rr4 — Sun, 16 Mar 2025 17:26:39 +0000

A melhor prática depende do contexto, mas considerando que você já está trabalhando dentro de um elemento específico (no caso, form_registrar_produto_comercial), usar querySelector é uma abordagem mais apropriada e semântica. Isso porque:

Escopo mais restrito: Com querySelector, você mantém a busca limitada ao escopo do formulário, evitando percorrer o document inteiro e melhorando a legibilidade do código.

   let codigo_barras = form_registrar_produto_comercial.querySelector('#codigo_barras').value;

Flexibilidade: O querySelector permite selecionar elementos usando qualquer seletor CSS (id, classe, atributos), o que pode ser útil para criar código mais reutilizável.

Já o getElementById é ideal quando você precisa acessar algo diretamente pelo ID global e não está dentro de um elemento específico. Porém, dentro de um contexto restrito como no seu exemplo, o querySelector oferece um melhor alinhamento às boas práticas modernas.

Conclusão: dentro de form_registrar_produto_comercial, continue com o querySelector! 🚀

experiencia no workflow

m1rr4 — Sun, 16 Mar 2025 16:43:17 +0000

estou pedindo pra IA fazer resumo de diálogos que acredito que seja interessante postar no meu perfil; um dos primeiros resumos que postei foi um resumo sobre como postagens em rede social podem ser mais refinados em vez de posts impulsivos sobre a vida pessoal por exemplo.

depuração ou refatoração?

m1rr4 — Sun, 16 Mar 2025 16:38:30 +0000

Após remover uma coluna no banco de dados, a página apresentou erro. Isso levou à necessidade de depuração para corrigir o problema antes de considerar refatorações. Resolver primeiro, refinar depois: um fluxo essencial para ajustes robustos.

sobre atalhos no github

m1rr4 — Sun, 16 Mar 2025 16:33:27 +0000

Apesar da interface gráfica do GitHub Desktop já facilitar o uso, muitos se habituaram aos atalhos para otimizar tarefas repetitivas e ganhar eficiência. Cada usuário escolhe entre praticidade ou fluidez, dependendo do ritmo que prefere no trabalho.

DEV Community: m1rr4

tem coisas que só se mostram durante o desenvolvimento mesmo.

A Arte de Descobrir os Detalhes Ocultos Durante o Desenvolvimento

uma das coisas mais difíceis que se tem em programação? nome de variavel; objeto_id ou id_objeto?

A Diferença nas Convenções de Nomeação e Hierarquia entre Linguagens e Humanos

Por que as linguagens usam produto.id?

Por que usamos id_produto no dia a dia?

O impacto prático dessa diferença

Conclusão

quão satisfatório é navegar hierarquicamente sobre o DOM; ainda mais quando acontece organicamente.

Hierarquia e Modularidade no DOM com JavaScript

Iteração sobre elementos do DOM

Uso de data-* para identificar elementos

Conclusão

bom dia; sobre processo criativo.

sobre processo criativo

quando um projeto meio que parece ter ganhado vida propria #1

squash ou rebase? oou merge?

super engajamento e momentos de satisfação

querySelector x getElementById

experiencia no workflow

depuração ou refatoração?

sobre atalhos no github

Por que as linguagens usam `produto.id`?

Por que usamos `id_produto` no dia a dia?

Uso de `data-*` para identificar elementos