Executando verificação de segurança...
10
Programmer404
4 min de leitura ·

[ Reflexão ] Como um único projeto To-do List me ajudou aprender programação.

Introdução:

Hoje gostaria de compartilhar uma situação que me ajudou muito a desenvolver minhas habilidades desde o inicio desta carreira. Quero aprensentar um fato interessante que me dei conta recentemente!

Começo de carreira

Já faz mais ou menos 1 anos e pouca coisa desde que comecei na programação. De lá para cá vi bastante coisa! Porém, sei que deveria estar muito mais longe do que estou hoje... Logo no começo eu fiz um pequeno projeto, um projeto simples e praticamente canônico na vida de todo programador, um To-do List. No começo, tinha apenas funções simples como adicionar elementos e remover.

O que eu aprendi com isso:

  • Criar elementos HTML com javaScript
  • Adicionar elementos HTML no documento via javaScript
  • Eliminar um elemento em particular com JavaScript
  • Responsividade no CSS
  • Estilização simples com CSS
  • condicional

Começando a se desenvolver

Claro que eu não só fiz um To-do list minha carreira toda! Fiz vários projetos e ainda faço, porém a maioria é privado pois estão inacabados (ainda). Vendo que outros projetos estavam me ajudando, decidi retornar as origins e mexer no To-do List novamente para aplicar o que aprendi em um projeto já pronto, eu queria melhorar ele!

Senti a necessidade de fazer os dados se tornaram persistentes e melhorar outros detalhes. O que eu aprendi:

  • Manipulação de Arrays
  • Métodos como Map, forEach e Filter em Arrays
  • Conheci LocalStorage
  • Aprendi a como serializar um arquivo JSON para objeto literal e vice-versa.
  • Aprendi mais sobre UI/UX
  • Aprendi Sass (pré-processador CSS)

Frameworks

Depois das atualizações acima, eu aprendi bastante coisa sobre javaScript e senti a necessidade de pegar um framework e começar a fazer uns projetinhos mais completos e rápido. E como de prache, eu decidi aplicar tudo que aprendi em React primeiro no meu To-do List.

O que eu aprendi:

  • Tratamento de erros de forma adequada
  • UseState, UseEffect, UseRef, useCallback, useMemo
  • Conheci o JSX
  • Componetização
  • Modularizar o código
  • Melhorias no UX/UI
  • CSS module
  • Lidar com SVG de forma mais adquada

Pré-eliminar

Depois dessa atualização eu parei de mexer no to-do list por vários meses e foquei em outros projetos como jogo da velha, landing pages e etc... Ai eu conheci o Next.js, e foi aqui que eu comecei a desandar um pouco... Sem aprender tudo do ecossistema React, pulei para o Next.js e novamente tentei implementar no meu To-do List e tudo quebrou de um jeito que era quase impossível recuperar, **delete o projeto. **

Depois de ter deletado o projeto, eu fiquei frustado por estar "fugindo" do Next.js, só porque tudo deu muito errado no inicio eu simplesmente apaguei o projeto que me ajudou tanto. Pensando muito nisso refiz tudo do zero com Next.js, desta vez com muita calma.

O que eu aprendi:

  • Criação de rotas com Next.js App
  • Manipulação de rotas
  • rotas paralelas
  • Lidar com erros de rota (404)
  • Rotas dinâmicas
  • Server-components
  • Client-components
  • Básico de Eslint
  • O que era o prettier
  • TypeScript
  • TSX
  • Tipagem de eventos (isso foi bem chatinho)

Atualmente

Eu refatorei muito o projeto, e depois do seu resultado final, eu não publiquei no github, algumas coisas eu retirei pois para mim não fazia sentido estar ali. O resultado final foi postado aqui, inclusive não foi tão bem recebido por aqui, mas melhores. O projeto hoje tem algumas pendências que não resolvi ainda por estar buscando o prejuízo que foi pular vários conteúdos. Como por exemplo onde tem "filtrar por prioridade", na verdade seria ordenar por prioridade!

Atualmente senti a necessidade de aprender sobre banco de dados, e escolhi um bem simples para começar que foi o indexedDB. Estou implementando ele neste exato momento inclusive.

O que eu aprendi hoje:

  • O que é um banco de dados
  • O que é ACID
  • Como manter o banco de dados seguros
  • Transactions
  • Estratégias para manter os dados seguros
  • Unit of Work
  • Como manipular indexedDB
  • Como manipular erros no IndexedDB
  • como adicionar, remover e atualizar o indexedDB.

Conclusão

Como eu disse, não estou preso a apenas este projeto, mas de longe ele foi o que eu mais trabalhei. Me ajudou muito e muito deste aprendizado eu uso em outros projetos que estão privados pois estão inacabados no momento. Tenho projetos para criar algo com o intuito de contribuir mais com a comunidade Front-end.

Para quem quiser ver o resultado atual: To-do List

Aceitos todos os feedbacks! Podem criticar da forma mais cruel que quiserem. Eu estou aqui para evoluir e me tornar ainda mais erudito que sou hoje.

Carregando publicação patrocinada...
4
cerqueirinha

Parbéns, amigo!

Uma sugestão que pode parecer meio óbvia para desafiar você seria a adição de um simples CRUD . Uma página para logar e registrar e mostrar suas respectivas tasks. Se já existir, ignore!

1
Programmer404
Autor
Autor

Eu estive pensando nisso o tempo inteiro! Ainda não existe, e busco aprimorar adicionando. Quero algo bem completo com várias implementações que façam sentido para um To-do List. Com certeza no futuro farei isso! Agradeço a sugestão.

3
GabrielGSC

Acho que é desnecessário ser cruel, gentileza é boa sempre que possível. Dito isso, quero rressaltar a importância da acessibilidade. Grande parte dos softwares, sites e quase 95% dos jogos são feitos tendo em foco apenas usuários sem deficiência, mas pessoas com deficiência existem, e também usam esses produtos. No caso do seu projeto notei que os botões de adicionar e excluir uma tarefa possuem ícones, mas nao possuem nomes como os de priorização possuem. Desse jeito, um usuário cego passa por esses objetos e tudo o que o leitor de tela lê é “botão”. Outra observação é sobre a relação entre os elementos. Criei uma tarefa, mas não tenho noção de como poderia exclui-la, cliquei em um botão que achei que faria isso e recebi o aviso de que tudo seria limpo.
Espero que não veja isso como uma crítica destrutiva, mas como algo que veio a agregar. Uma das minhas principais motivações para aprender desenvolvimento é poder criar tecnologias mais inclusivas, mas não posso fazer isso sozinho, então me proponho a incentivar outros desenvolvedores a terem essa mentalidade.
Abraço e continue se desenvolvendo!

1
Programmer404
Autor
Autor

Iae, @GabrielGSC! Valeu por ressaltar um ponto fraco em meu projeto. Estou implementando uma versão "2.0" do To-do List, e certamente darei uma atenção a acessibilidade! Percebo que não há nada muito acessível no To-do List, e certamente é um ponto fraco que eu irei cuidar melhor! Em breve eu mostrei aqui as atualizações.

Sobre a deletação de tarefas: Existe um botão para deletar todas as tarefas (limpar todo o Storage) e ao clicar em uma task, mostrará uma sessão onde você pode renomear, adicionar uma descrição, específicar a prioridade e deletar uma task em particular. Deixarei mais claro no aviso de "deletação geral" sobre a possibilidade de deletar uma task em particular. Esse é um problema de UX que estarei cuidado! Agora mesmo estou adicionando essas informações no Figma e posteriomente implementarei em código.

2
SimpleDev

Não existe nada mais canônico na vida de um programador do que fazer uma lista de tarefas. Só é mais canônico que isso o ‘Hello World’.

Esse também foi um dos meus primeiros projetos. Eu fiz ele em Python todo no meu celular, bem no começo do meu aprendizado. Nem sabia que existiam funções, fiz o código todo cheio de redundância já que não sabia o que eram essas tais de "funções".

Mas é sempre bom fazer um projeto que utilize todo o seu conhecimento.

1
Programmer404
Autor
Autor

Pois é meu amigo. É um projeto muito flexível! Pretendo implementar MongoDB com ele, fazer aplicativo desktop com electron e fazer uma versão dele em flutter para mobile!