music practice tools

Toolas de práctica musical

Herramientas para ayudar con la práctica musical y mejorar la musicalidad, así como las lecciones remotas.

El formato es un blog / revista que contiene elementos interactivos para facilitar la vida. Estos incluyen:

• Metronómicos con BPM predefinido pero ajustable
• [cuasi] Selectores de números y notas aleatorias (se presentan todos los elementos en un rango)
• Temporizador de actividad con tiempos transcurridos y totales que persisten entre páginas y sesiones
• Temporizador de video de You Tube que siempre es visible independientemente del desplazamiento
• Botones de búsqueda de video
• Música anotando usando la notación ABC. Proporciona características de juego interactivas

Utiliza esta pila de Awesome Opensource Technology.

Todas las páginas viven en la carpeta pages y se escriben utilizando Markdown plantulado de Nunjucks que son representados por el impresionante generador de sitios estáticos 11. Los widgets se agregan con códigos cortos.

Esto utiliza una plataforma de desarrollo de NodeJS típica, así que:

• clonar el repositorio
• npm install
• npm run devall
• editar páginas
• Explore a la URL local host impresa en la CLI (generalmente http://localhost:8080/ ).

---

Obtenga su propia versión de https://musicpracticetools.net/ en la web con netlify usando este botón. Clonará este repositorio a su propia cuenta de GitHub y lo vinculará a un nuevo sitio para usted en Netlfy.

---

Desarrolladores

El código fuente no de las páginas está en el src . Los archivos de configuración de la herramienta Dev habitual están en la raíz del proyecto.

Notas

Este es básicamente un sitio estático que utiliza plantillas Nunjucks con un poco de JavaScript del lado del cliente agregado para los comportamientos para proporcionar widgets interactivos. Este proyecto se basa en el ejemplo de 11 en el blog que admite etiquetas.

Los códigos cortos de plantilla se utilizan para los widgets interactivos personalizados. Estos proporcionan una experiencia de autoría limpia, pero significa que algún código de widget es el lado del servidor y algún lado del cliente. En general, el código fuente en src es:

• Plantillas de página en pages
• 11 Configuración en _11ty*
• Plantillas parciales y diseño en _includes y _layouts
• El código del widget del lado del servidor (HTML + alpinejs) está en _11tyadd-shortcodes.js
• El código del lado del cliente, incluidos los widgets (JavaScript y AlpineJs) está en js*
• CSS del lado del cliente está en css*

El código del cliente asume un navegador actualizado que usa funciones de ES6 para mejorar DX.

Cuando se ejecuta npm run dev 11Ty, genera el sitio web desde src en _site que luego se sirve. Los cambios en los archivos del lado del cliente causan una reconstrucción del sitio y Browsersync obliga a una actualización de un navegador. Sin embargo, cuando los archivos de Serverside en _11ty cambian, el sitio debe ser regenado. npm run devall obliga a una reconstrucción en este caso, pero luego el navegador no se actualiza. Presionar F5 para refrescar el navegador es necesario en este caso.

Desarrollo en Windows usando el código VS. En teoría, las plataformas de desarrollo de Linux y Mac deberían funcionar.