DEV Community: Felipe 0liveira

🚀 SemVer: por que esse `1.2.3` muda sua vida (e seus bugs)

Felipe 0liveira — Sat, 09 Aug 2025 15:50:03 +0000

Você já deve ter visto algo assim no package.json:

"react": "^18.2.0"

E aí surge a dúvida:

“Mas que raios significam esses números? É só o dev mostrando que sabe contar?”

Não, jovem padawan. Isso é Semantic Versioning — o famoso SemVer — e ele é mais importante do que parece.

📦 O formato

SemVer segue o padrão:

MAJOR.MINOR.PATCH

Exemplo: 2.5.1 significa:

MAJOR (2) → Mudanças que quebram compatibilidade (breaking changes).

Tipo quando você atualiza e metade do seu código para de funcionar 😅.
MINOR (5) → Novos recursos, mas compatíveis com a versão anterior.

É como adicionar novas pizzas no cardápio sem tirar as antigas.
PATCH (1) → Correções de bugs e ajustes pequenos.

Aquele “remendinho” que ninguém percebe… até perceber.

💡 Por que importa?

Te ajuda a saber o tamanho da treta antes de atualizar.
Facilita comunicação entre equipes.
Evita “surpresas” no deploy — embora a gente saiba que sempre rola.

⚠️ O cuidado com `^` e `~`

No npm/yarn, esses símbolos definem como a versão pode variar:

^1.2.3 → Pode atualizar MINOR e PATCH, mas não MAJOR.
~1.2.3 → Pode atualizar só o PATCH.

📌 Ou seja: aquele npm install inocente pode te trazer um bug fresquinho se você não prestar atenção.

🎯 Moral da história

Confie no SemVer (mas verifique o changelog).
MAJOR = risco alto
MINOR = recurso novo
PATCH = bug corrigido

E lembre-se: nem todo projeto segue SemVer direito… às vezes, a galera inventa moda. 😏

💬 E aí, você segue SemVer ou só atualiza e reza? Conta aí nos comentários.

Definitivamente pontuando tasks

Felipe 0liveira — Thu, 27 Mar 2025 17:03:50 +0000

Matriz de Complexidade e Incerteza

A Matriz de Complexidade e Incerteza é uma ferramenta visual que ajuda equipes e organizações a compreenderem melhor o grau de dificuldade de um projeto ou iniciativa, levando em consideração dois eixos principais:

Complexidade Técnica: Representa o nível de conhecimento tecnológico disponível na equipe, a dependência de outros times e o domínio sobre as soluções técnicas necessárias.
Incerteza de Negócios: Refere-se ao grau de clareza das regras de negócio envolvidas, o entendimento do problema a ser resolvido e o alinhamento com os objetivos estratégicos.

A combinação desses dois eixos gera uma classificação em diferentes níveis de dificuldade, que vão desde contextos simples (baixa complexidade e baixa incerteza) até cenários altamente desafiadores (alta complexidade e alta incerteza).

Para facilitar a compreensão e comunicação entre times, cada nível de dificuldade é representado por um animal simbólico, que reflete de forma lúdica e intuitiva a situação enfrentada. Além disso, os níveis de dificuldade são numerados com base na sequência de Fibonacci, que ilustra a progressão natural do aumento de esforço e incerteza à medida que os desafios se tornam mais complexos.

1. Cachorro

Pontuação: 1
Complexidade: Baixa
Incerteza: Baixa
Definição:

Conhecemos a tecnologia
Não temos dependência de outros times
Regras de negócio bem definidas
Todos conhecem as regras de negócio

2. Cavalo

Pontuação: 2
Complexidade: Baixa
Incerteza: Média
Definição:

Conhecemos a tecnologia
Não temos dependência de outros times
Regras de negócio não estão claras
Alguém do time conhece as regras de negócio

5. Rinoceronte

Ação: Refinar
Pontuação: 3
Complexidade: Baixa
Incerteza: Alta
Definição:

Conhecemos a tecnologia
Não temos dependência de outros times
Regras de negócio confusas e/ou complexas
Ninguém conhece as regras de negócio

3. Cavalo

Pontuação: 5
Complexidade: Média
Incerteza: Baixa
Definição:

Alguém do time conhece a tecnologia
Temos pouca dependência de outros times
Regras de negócio bem definidas
Todos conhecem as regras de negócio

4. Camelo

Pontuação: 8
Complexidade: Média
Incerteza: Média
Definição:

Alguém do time conhece a tecnologia
Temos pouca dependência de outros times
Regras de negócio não estão claras
Alguém do time conhece as regras de negócio

6. Girafa

Ação: Refinar
Pontuação: 13
Complexidade: Média
Incerteza: Alta
Definição:

Alguém do time conhece a tecnologia
Temos pouca dependência de outros times
Regras de negócio confusas e/ou complexas
Ninguém conhece as regras de negócio

7. Rinoceronte

Ação: Quebrar e Refinar
Pontuação: 21
Complexidade: Alta
Incerteza: Baixa
Definição:

Ninguém do time conhece a tecnologia
Temos dependência de outros times
Regras de negócio bem definidas
Todos conhecem as regras de negócio

8. Girafa

Ação: Quebrar e Refinar
Pontuação: 34
Complexidade: Alta
Incerteza: Média
Definição:

Ninguém do time conhece a tecnologia
Temos dependência de outros times
Regras de negócio não estão claras
Alguém do time conhece as regras de negócio

9. Elefante

Ação: Quebrar e Refinar
Pontuação: 55
Complexidade: Alta
Incerteza: Alta
Definição:

Ninguém do time conhece a tecnologia
Temos dependência de outros times
Regras de negócio confusas e/ou complexas
Ninguém conhece as regras de negócio

Esse artigo foi gerado com o auxilio de uma IA Generativa

Fontes:

Iniciando na área de desenvolvimento (guia prático)

Felipe 0liveira — Mon, 18 Nov 2024 13:38:03 +0000

Entrar na área de desenvolvimento pode parecer desafiador no início. Com termos técnicos, múltiplas linguagens de programação, ferramentas e frameworks surgindo constantemente, é natural sentir-se perdido. No entanto, o desenvolvimento de software é uma carreira repleta de oportunidades, desafios empolgantes e possibilidades de crescimento.

Neste post, vamos compartilhar uma visão prática e acessível para quem está começando na área de desenvolvimento, com base em quase uma década de experiência em desenvolvimento Frontend e Fullstack. Nosso objetivo é ajudar você a entender o que é necessário para iniciar sua jornada, os primeiros passos que você deve dar e como se manter motivado ao longo do caminho.

Mas por onde começar?

Se você está pensando em entrar no mundo do desenvolvimento, o primeiro passo é entender as diferentes áreas dentro dessa carreira. Isso ajuda a decidir onde concentrar seus esforços inicialmente. Vamos explicar de forma prática e clara:

Frontend: A “cara” do software

O Frontend é a parte visível de um site ou aplicação, tudo o que o usuário interage diretamente. É como o “design funcional”, onde se criam botões, menus, animações e layouts bonitos e intuitivos.

O que faz um desenvolvedor Frontend?
Ele transforma designs (em ferramentas como Figma ou Photoshop) em código funcional, usando linguagens como HTML, CSS e JavaScript.

Exemplos práticos:

Criar o botão de “comprar” em uma loja virtual.
Fazer uma página se ajustar automaticamente a telas de celular (responsividade).
Adicionar animações, como imagens que aparecem suavemente ao rolar a página.

Se você gosta de combinar lógica com criatividade, o Frontend pode ser um ótimo ponto de partida.

Backend: O cérebro por trás da aplicação

O Backend é o que acontece “nos bastidores”. Ele cuida de tudo que o usuário não vê, como lógica, banco de dados e servidores.

O que faz um desenvolvedor Backend?
Ele garante que os dados fluam corretamente, que as regras de negócio funcionem e que o sistema seja rápido e seguro. Linguagens como Python, Java, Node.js e PHP são comuns aqui.

Exemplos práticos:

Salvar os dados de um formulário em um banco de dados.
Processar pagamentos em um e-commerce.
Implementar uma lógica para recomendar filmes ou produtos com base no perfil do usuário.

Se você gosta de resolver problemas lógicos e trabalhar com dados, o Backend pode ser o caminho.

Fullstack: O "faz tudo"

Um desenvolvedor Fullstack é como um “canivete suíço” da programação. Ele trabalha tanto no Frontend quanto no Backend, conectando os dois lados.

O que faz um desenvolvedor Fullstack?
Ele entende o suficiente de ambos os mundos para construir um sistema completo, desde a interface até a lógica e o banco de dados.

Exemplos práticos:

Criar um blog do zero: da página inicial ao armazenamento das postagens.
Construir uma aplicação que mostre produtos e permita comprá-los, lidando com o design e o pagamento.

Ser Fullstack é ideal para quem gosta de aprender um pouco de tudo e busca flexibilidade.

Qual escolher primeiro?

Frontend: Se você gosta de design, interação visual e de ver resultados rápidos.
Backend: Se prefere lógica, trabalhar “nos bastidores” e lidar com dados.
Fullstack: Se quer explorar tudo e ter uma visão ampla (ideal para quem não sabe por onde começar).

Independentemente do caminho, o importante é dar o primeiro passo! O próximo tópico trará as ferramentas e linguagens essenciais para cada área. 🚀

JavaScript: O Alicerce da Web e Além

Se existe uma linguagem de programação que todo iniciante deveria considerar, essa linguagem é o JavaScript. Extremamente versátil, o JavaScript (ou simplesmente JS) é uma das tecnologias mais utilizadas no desenvolvimento de software. Ele começou como a “linguagem da web”, mas hoje é muito mais do que isso, sendo uma poderosa ferramenta tanto para Frontend, Backend e até mesmo áreas além do desenvolvimento tradicional.

Por que aprender JavaScript?

Onipresença na Web:
Quase todos os sites que você acessa dependem de JavaScript. Ele é responsável por adicionar dinamismo e interatividade às páginas, como menus, animações e formulários que “respondem” ao usuário.

Versatilidade

Com JavaScript, você pode desenvolver para diferentes plataformas:

Frontend: Criar interfaces visuais com frameworks como React, Vue.js ou Angular.

Backend: Construir servidores robustos usando Node.js.

Aplicativos Mobile: Desenvolver apps para Android e iOS com React Native.

Aplicações Desktop:
Criar softwares multiplataforma com Electron.

Inteligência Artificial e Data Science:
Sim, até áreas como IA estão sendo exploradas com bibliotecas JS, como TensorFlow.js.

Comunidade e Recursos

O JavaScript tem uma comunidade global gigantesca. Isso significa que você encontrará muitos tutoriais, vídeos, fóruns e ferramentas gratuitas para aprender e resolver dúvidas.

Alta Empregabilidade:

JS é uma habilidade essencial para desenvolvedores Frontend e muito valorizada por Fullstack e Backend. Empresas de todos os tamanhos, de startups a gigantes como Google e Facebook, usam JavaScript em seus projetos.

O Potencial do JavaScript

Imagine que você quer construir um sistema completo. O JavaScript permite isso com as seguintes ferramentas:

Frontend: Com frameworks como React, você pode criar interfaces modernas e dinâmicas, como as que vemos em redes sociais ou e-commerces.

Backend: Usando Node.js, é possível criar servidores que processam milhões de solicitações por dia. Exemplo? A Netflix usa Node.js para parte de sua plataforma.

Banco de Dados: O JavaScript trabalha bem com bancos de dados modernos como o MongoDB, que usa a mesma estrutura de objetos que o JS (JSON).

API e Integrações: Você pode construir sistemas que se conectam com outros serviços, como gateways de pagamento, redes sociais ou sistemas internos.

Projetos Criativos: Com bibliotecas como Three.js, você pode criar experiências 3D para a web. Quer fazer jogos? Experimente o Phaser.js.

Começando com JavaScript

Aqui está um plano inicial para explorar o JS:

Aprenda o básico: Entenda variáveis, funções, loops e eventos.
Explore o DOM: Descubra como manipular elementos de uma página web.
Crie pequenos projetos: Um jogo simples, um cronômetro ou uma lista de tarefas.
Avance para frameworks: Experimente React para o Frontend e Node.js para o Backend.
Aprofunde-se com APIs e bancos de dados: Conecte suas aplicações ao mundo real.

O JavaScript é a porta de entrada para muitas áreas do desenvolvimento e continua sendo uma das linguagens mais procuradas no mercado. Nos próximos tópicos, vamos falar sobre ferramentas práticas e dicas para você se aprofundar ainda mais. Seu futuro na tecnologia pode começar aqui!

Chegamos ao final deste guia prático, e espero que você tenha se sentido inspirado(a) e mais preparado(a) para dar o primeiro passo na sua carreira em desenvolvimento. A tecnologia é um campo dinâmico, cheio de desafios e oportunidades, e o mais importante é começar, mesmo que pareça desafiador no início. Cada linha de código escrita é um passo em direção a um futuro cheio de possibilidades.

Seja explorando o Frontend, o Backend ou se aventurando como Fullstack, lembre-se: a curiosidade e a prática constante são suas maiores aliadas. E, como vimos, o JavaScript é uma ferramenta poderosa para iniciar essa jornada, conectando você às várias possibilidades da programação.

Agradeço por dedicar seu tempo à leitura deste post e por confiar nessa visão prática de quem já passou pelos desafios e conquistas dessa área. Agora é a sua vez de brilhar!

👉 Compartilhe suas ideias! Tem dúvidas, quer compartilhar sua experiência ou até mesmo sugerir outros tópicos para explorarmos? Deixe um comentário! Vou adorar saber o que você pensa e ajudar na sua caminhada.

Bem-vindo(a) à área de desenvolvimento! O mundo da tecnologia precisa de pessoas como você. 🌟

Até a próxima...

Autor: Felipe Oliveira

Liberar espaço deletando os node_modules/

Felipe 0liveira — Mon, 17 Aug 2020 13:20:27 +0000

Pra quem não sabe a pastinha node_modules, armazena todos os "modulos" e bibliotecas que usamos em nosso projeto, porém na maioria das vezes nós temos mais de 1 projeto que usam uma mesma dependência, na minha maquina em questão, tenho por volta de 40 repositórios que usam o npm.

Por conta disso, tenho muito espaço sendo utilizado em disco e pra dar uma boa aliviada, uma alternativa super interessante é simplesmente apagar as pastas node_modules de cada projeto.

Para não precisar acessar cada diretório, basta abrir o seu terminal e ir para a pasta do seu workspace e rodar o seguinte comando:

~ $ find . -name node_modules -type d -print0|xargs -0 rm -rf --

Esse comando basicamente é dividido em duas partes, a primeira é responsável por procurar todos os diretórios com o nome node_modules e retornar seu caminho completo para o segundo comando que tem a atribuição de deletar, a partir de um caminho e,

All Done Galera!

Espero ter ajudado <3

Frontend - Testes E2E

Felipe 0liveira — Tue, 14 Apr 2020 19:20:39 +0000

Atualmente, são vários os motivos para implementar testes end-to-end em uma aplicação.

Basicamente, o principal motivo de um teste automatizado é a prevenção de futuros problemas e bugs, que em muitos casos são invisíveis para o desenvolvedor, principalmente em grandes projetos.
Outro cenário bem comum que os testes e2e se aplicam, são as execuções em massa como: cadastro, login, consulta, etc.

Um teste e2e permitirá testar todos os cenários, sendo eles válidos ou inválidos, em muito menos tempo que uma pessoa pode fazer.
Dos frameworks disponibilizados atualmente, um dos mais famosos para JavaScript é o Protractor que, juntamente ao Jasmine, entregará as ferramentas necessárias para cobrir com testes toda a sua aplicação.

O site oficial do Protractor fornece uma ótima documentação que te ajudará a iniciar nesse mundo dos testes.
Se você tem uma dúvida ou até mesmo uma observação, sinta-se à vontade para comentar esse post.

E não se esqueça de aplicar DocSoul!

Sua alma na documentação - DocSoul

Felipe 0liveira — Tue, 14 Apr 2020 19:19:39 +0000

Em minha concepção, é necessário entender que ter “boas práticas” não é como aprender uma nova linguagem e sim aplicar uma vertente de lógica visando um entendimento e manutenção futura de um código.

O mais comum é quando um desenvolvedor precisa alterar uma aplicação que não foi codificada com “boas práticas”, sendo necessário muitas vezes, refatorar e perder tempo com coisas que deveriam ser muito mais simples.

Outra situação, é quando um desenvolvedor tem um projeto em desenvolvimento e decide parar a codificação para continuar futuramente.

Se este desenvolvedor fez seu código utilizando boas práticas e até mesmo fazendo DocSoul, terá um ganho de tempo, simplificando e agilizando seu trabalho.

Nomenclatura de variáveis

É muito importante que você deixe que uma variável seja auto explicativa, ou seja, quando um Dev se deparar com ela, ele saberá exatamente o propósito da mesma.

Por exemplo, ao invés de utilizar:

let d
let elapsed
const ages = arr.map((i) => i.age)

Utilize:

let daysSinceModification
const agesOfUsers = users.map((user) => user.age)

Jamais pense em usar:

let nameString
let theUsers

Quando somente o necessário é o melhor:

let name
let users

Funções

Uma função tem o propósito de nomenclatura muito semelhante ao de uma variável, portanto, deixe sua função nomeada de forma com que o desenvolvedor, ao acessar, saiba exatamente sua finalidade.

Por exemplo, imagine que temos uma função que convida um usuário, utilizando seu e-mail. Nesse caso, poderíamos fazer desta forma (uma das formas mais comuns):

function conv (usuario) { }

Basicamente, a abreviação ‘conv’ no nome da função acima significa ‘convidar’ e o parâmetro é chamado de ‘usuário’ pois identificará este por meio de seu email.
Porém, o ideal seria fazer:

function convidarUsuario (email) { }

Desta maneira, a função tem um nome claro independente de onde for chamada!

Ter boas práticas é somente o primeiro passo para ter organização, qualidade e eficiência em seus projetos. O ideal é conciliar com DocSoul, que vai além das boas práticas, é uma cultura a ser desenvolvida e incentivada, tanto por desenvolvedores quanto pela empresa, deixando sua marca no documento, para que quando um desenvolvedor visualize seu código, além de entender a lógica e suas tomadas de decisões, reconheça e entenda que além da linha de raciocínio desenvolvida para aquele código, tem sua marca registrada.

Valeu pessoal!

[MacOS] Biometria para 'sudo' no terminal

Felipe 0liveira — Wed, 25 Mar 2020 17:04:23 +0000

Por que?

Todos nós sabemos que para utilizar o sudo no terminal precisamos digitar nossa senha de super usuário ou admin. Não seria muito interessante se sempre que precisarmos usar nossa senha, pudessemos usar a biometria do nosso Macbook?

Para quem?

Esse tutorial é válido somente para usuários dos Macbooks com Sensor Biométrico.

Como fazer?

1 - Vamos abrir o arquivo /etc/pam.d/sudo através do terminal utilizando o editor de sua preferência, no meu caso utilizarei o nano, que já vem por padrão instalado no MacOS a partir do comando: sudo nano /etc/pam.d/sudo

2 - Com o arquivo aberto, vamos adicionar uma nova forma de autenticação para ele por meio da linha auth sufficient pam_tid.so que deve ser adicionada na segunda linha do arquivo

3 - Para fechar o arquivo basta pressionar control + x (^X) em seguida digite y para confirmar que quer salvar o arquivo e depois é só apertar return para sobrescrever o arquivo atual.

Obs.: Com tudo feito, não se esqueça de encerrar o terminal para que ele recarregue as configurações de permissão e então você pode validar a alteração com o comando sudo echo hello

É isso pessoal, qualquer coisa é só comentar...

Visual Studio Online - Minhas considerações

Felipe 0liveira — Tue, 05 Nov 2019 08:33:16 +0000

Vejo como um enorme passo para a galera dev, principalmente aqueles que trabalham com múltiplos ambientes e em múltiplos dispositivos.

Já vejo a alta possibilidade de ser produtivo utilizando um tablet, o real desenvolvimento por meio de alguma plataforma mobile parece estar crescendo de uma forma muito concreta.

Segue um dos posts falando sobre o #vsonline

Bora discutir sobre galera...

CSS Buttons - Dopamina

Felipe 0liveira — Mon, 26 Aug 2019 08:39:59 +0000

O que nos precisamos fazer, como desenvolvedores, designers, project owners, etc.

É satisfazer o usuário em cada passo que ele avança dentro da aplicação, sendo desde um login, até uma aprovação.

É claro que existem muitas formas de fazer isso, a questão é que muitas vezes podemos dar esse gostinho de dopamina totalmente satisfatória com simples botões.

Upload buttons

💡Tips: submit, survey, file upload, to shop...

Floating action button (FAB)

💡Tips: quick actions, social media, main menu...

Pre action button

💡Tips: delete, confirm, submit...

Slide dopamine

💡Tips: delete submit, to shop...

Share buttons

Tips: quick actions, social networks, menu...

Comenta aí qual é sua animação favorita.

Espero que tenha gostado 🤘

DEV Community: Felipe 0liveira

🚀 SemVer: por que esse `1.2.3` muda sua vida (e seus bugs)

📦 O formato

💡 Por que importa?

⚠️ O cuidado com ^ e ~

🎯 Moral da história

Definitivamente pontuando tasks

Matriz de Complexidade e Incerteza

1. Cachorro

2. Cavalo

5. Rinoceronte

3. Cavalo

4. Camelo

6. Girafa

7. Rinoceronte

8. Girafa

9. Elefante

Iniciando na área de desenvolvimento (guia prático)

Mas por onde começar?

Frontend: A “cara” do software

Backend: O cérebro por trás da aplicação

Fullstack: O "faz tudo"

Qual escolher primeiro?

JavaScript: O Alicerce da Web e Além

O Potencial do JavaScript

Começando com JavaScript

Liberar espaço deletando os node_modules/

Frontend - Testes E2E

Sua alma na documentação - DocSoul

Nomenclatura de variáveis

Funções

[MacOS] Biometria para 'sudo' no terminal

Por que?

Para quem?

Como fazer?

Visual Studio Online - Minhas considerações

CSS Buttons - Dopamina

Upload buttons

Floating action button (FAB)

Pre action button

Slide dopamine

Share buttons

⚠️ O cuidado com `^` e `~`