music practice tools

Toolas da prática musical

Ferramentas para ajudar na prática musical e melhorar a musicalidade, bem como lições remotas.

O formato é um blog / diário que contém elementos interativos para facilitar a vida. Estes incluem:

• Metrônomes com BPM predefinido, porém ajustável
• [quase] Nota aleatória e seletores de números (todos os itens em um intervalo são apresentados)
• Timer de atividade com tempos decorridos e totais que persistem entre páginas e sessões
• You Tube Video Timer que é sempre visível, independentemente da rolagem
• Botões de busca de vídeo
• Pontuação musical usando a notação ABC. Fornece recursos de reprodução interativa

Usa essa pilha de uma tecnologia impressionante OpenSource.

Todas as páginas vivem na pasta pages e são de autoria usando o Markdown de Nunjucks, que é renderizado pelo incrível gerador de 11 anos estático. Os widgets são adicionados com códigos de atalho.

Isso usa uma plataforma típica de desenvolvimento do NodeJS, então:

• Clone o repo
• npm install
• npm run devall
• editar páginas
• Navegue até o URL de localhost impressa na CLI (geralmente http://localhost:8080/ ).

---

Obtenha sua própria versão de https://musicpracticetools.net/ na web com o netlify usando este botão. Ele clonará esse repositório à sua própria conta do GitHub e a vinculará a um novo site para você na Netlfy.

---

Desenvolvedores

O código -fonte de não páginas está no src . Os arquivos usuais de configuração da ferramenta de desenvolvimento estão na raiz do projeto.

Notas

Este é basicamente um site estático usando modelos de Nunjucks com um pequeno JavaScript do lado do cliente adicionado para comportamentos para fornecer widgets interativos. Este projeto é baseado no exemplo do 11ty Blog, que suporta tags.

Os códigos de curta duração são usados ​​para os widgets interativos personalizados. Isso fornece uma experiência de autoria limpa, mas significa que algum código do widget é o lado do servidor e algum lado do cliente. Em geral, o código -fonte do src é:

• Modelos de página nas pages
• 11ty Config em _11ty*
• Modelos parciais e layout em _includes e _layouts
• O código do widget do servidor (html + alpinejs) está em _11tyadd-shortcodes.js
• O código do lado do cliente, incluindo widgets (JavaScript e Alpinejs), está em js*
• CSS do lado do cliente está em css*

O código do cliente assume um navegador atualizado usando os recursos ES6 para melhorar o DX.

Ao executar npm run dev 11ty, gera o site da src para _site , que é então servido. Alterações nos arquivos do lado do cliente causam uma reconstrução do site e o BrowSerSync força uma atualização do navegador. No entanto, quando os arquivos do servidor no _11ty alterem o site devem ser regenerados. npm run devall força uma reconstrução neste caso, mas o navegador não atualiza. Pressionando F5 para refazer o navegador é necessário neste caso.

Eu desenvolvo no Windows usando o código VS. Em teoria, as plataformas Linux e Mac Dev devem apenas funcionar.