Executando verificação de segurança...
34

Eu criei uma versão web (Tailwind + React) do meu MIDI Keyboard para estudar música e aprendi algumas coisas interessantes

👉 Você pode visualizar e interagir com o projeto aqui

Contexto

Eu estou estudando Music Theory, estava procurando na web que faciitasse a visualização de escalas musicais e achei que seria interessante fazer um projeto em torno disso.

Recentemente eu comprei um MIDI Keyboard (Arturia MiniLab 3) e decidi recriá-lo com React e CSS.

Alguns takeaways depois de finalizar o projeto

Esses pontos são completamente opinionated

  1. TailwindCSS é provavelmente a melhor forma de prototipar algo com CSS no momento.
    • Muita gente (eu incluso) já teve algum pé atrás com tailwind
    • Mas se você conseguir passar dessa barreira inicial vai conseguir acessar um valor muito grande.
    • Zero configuração com Next.js e uma Developer Experience excelente.
  2. ChatGPT também tem dificuldades com CSS
    • Estava tentando fazer algo um pouquinho mais complexo com flexbox e tentei pedir ajuda para o ChatGPT, porém as respostas foram bem aquém, dando respostas repetidas de coisas que não estavam funcionando
    • Acho que fez falta para o ChatGPT a prática de escrever uma linha de CSS e ver como o browser renderiza ¯\_(ツ)_/¯
  3. React ainda tem muito boilerplate para fazer coisas básicas (como gerenciar estado global)
  4. É curioso como o DHH está errado sobre typings
    • Mesmo num projeto simples, os benefícios de tipagem superam muito overhead que possa vir junto
Carregando publicação patrocinada...
3
3
2

Wow, simlpesmente sensacional a qualidade da execução. Até tirei um print para quem não tenha entrado ainda no link e está decidindo entrar, olha isso:

Print do projeto

2
1
1
1

Ai sim em. Curti bastante. Inclusive gostei das "teclas de referências". Digo, as que fazem referência as notas do teclado, correspondente ao teclado do PC. Segura meu Tabcoin meu garoto !!!

1

Meu amigo, que projeto incrível. Parabéns. Recentemente fiz algumas "brincadeiras" com a AudioContext API nativa, mesmo. A web é maravilhosa.

0