music practice tools

Music-Practice-Tools

Outils pour aider à la pratique musicale et améliorer la musicalité ainsi que les leçons à distance.

Le format est un blog / journal qui contient des éléments interactifs pour faciliter la vie. Ceux-ci incluent:

• Métronomies avec BPM prédéfini mais exerçant
• [quasi] sélecteurs de notes et de nombres aléatoires (tous les éléments d'une plage sont présentés)
• Minuterie d'activité avec des temps écoulés et totaux qui persistent entre les pages et les séances
• Votre minuterie vidéo tube qui est toujours visible indépendamment du défilement
• Boutons de recherche vidéo
• Music Scoring en utilisant la notation ABC. Fournit des fonctionnalités de jeu interactives

Utilise cette pile de technologies OpenSource impressionnantes.

Toutes les pages vivent dans le dossier pages et sont rédigées à l'aide de la marque des modèles Nunjucks qui sont rendues par le génial générateur de sites statiques 11ty. Les widgets sont ajoutés avec des codes short.

Cela utilise donc une plate-forme de développement NodeJS typique:

• cloner le repo
• npm install
• npm run devall
• Modifier les pages
• Parcourez l'URL localhost imprimé sur la CLI (généralement http://localhost:8080/ ).

---

Obtenez votre propre version de https://musicpracticetools.net/ sur le Web avec Netlify en utilisant ce bouton. Il clonera ce dépôt sur votre propre compte GitHub et le liera à un nouveau site pour vous sur netlfy.

---

Développeurs

Le code source non pages est dans le src . Les fichiers de configuration de l'outil de développement habituels sont dans la racine du projet.

Notes

Il s'agit essentiellement d'un site statique utilisant des modèles Nunjucks avec un petit JavaScript côté client ajouté pour les comportements afin de fournir des widgets interactifs. Ce projet est basé sur l'exemple du blog 11ty qui prend en charge les balises.

Les codes de gabarits de modèle sont utilisés pour les widgets interactifs personnalisés. Ceux-ci offrent une expérience de création propre, mais signifient qu'un code de widget est côté serveur et du côté client. En général, le code source sous src est:

• Modèles de pages en pages
• 11ty config in _11ty*
• Modèles partiels et disposition en _includes et _layouts
• Le code du widget côté serveur (html + alpinejs) est dans _11tyadd-shortcodes.js
• Le code côté client, y compris les widgets (JavaScript et Alpinejs) est dans js*
• Le côté client CSS est dans css*

Le code client suppose un navigateur à jour en utilisant les fonctionnalités ES6 pour améliorer DX.

Lors de l'exécution npm run dev 11ty génère le site Web de src dans _site qui est ensuite servi. Les modifications des fichiers côté client provoquent une reconstruction du site et Browsersync force un rafraîchissement du navigateur. Cependant, lorsque les fichiers serveurs dans _11ty changent, le site doit être régénéré. npm run devall force une reconstruction dans ce cas, mais le navigateur ne se rafraîchit pas. Appuyer sur F5 pour refaire le navigateur est requis dans ce cas.

Je me développe sous Windows en utilisant le code vs. En théorie, les plates-formes Linux et Mac devraient simplement fonctionner.