music practice tools

Musikpraxis-Tools

Werkzeuge, mit denen Musikpraxis und Verbesserung der Musikalität sowie Fernunterricht helfen.

Das Format ist ein Blog / Journal, das interaktive Elemente enthält, um das Leben zu erleichtern. Dazu gehören:

• Metronomen mit vordefinierter und dennoch anerkannter BPM
• [Quasi] Zufällige Notiz- und Zahlenauswahl (alle Elemente in einem Bereich werden angezeigt)
• Aktivitäts -Timer mit verstrichenen und Gesamtzeiten, die zwischen Seiten und Sitzungen bestehen bleiben
• Ihr Röhren -Video -Timer, der immer sichtbar ist, unabhängig vom Scrollen
• Video -Such -Schaltflächen
• Musikbewertung mit der ABC -Notation. Bietet interaktive Spielfunktionen

Verwendet diesen Stapel fantastischer OpenSource -Technologie.

Alle Seiten leben im Ordner pages und werden mit nunjucks templated markdown verfasst, die vom Awesome 11ty Static Site Generator wiedergegeben werden. Widgets werden mit Shortcodes hinzugefügt.

Dies verwendet eine typische NodeJS -Entwicklungsplattform SO:

• Klonen Sie das Repo
• npm install
• npm run devall
• Seiten bearbeiten
• Durchsuchen Sie die auf der CLI gedruckte Localhost -URL (normalerweise http://localhost:8080/ ).

---

Holen Sie sich Ihre eigene Version von https://musicPracticetools.net/ mit Netlify mit dieser Schaltfläche. Es wird dieses Repo auf Ihr eigenes Github -Konto klonen und es mit einer neuen Website für Sie auf Netlfy verknüpfen.

---

Entwickler

Der Non -Pages -Quellcode befindet sich im src . Die üblichen Entwicklungs -Tool -Konfigurationsdateien befinden sich im Projektstamm.

Notizen

Dies ist im Grunde eine statische Site, die Nunjucksvorlagen mit ein wenig clientseitigem JavaScript für Verhaltensweisen zur Bereitstellung interaktiver Widgets verwendet. Dieses Projekt basiert auf dem 11ty -Blog -Beispiel, das Tags unterstützt.

Vorlagen -Shortcodes werden für die benutzerdefinierten interaktiven Widgets verwendet. Diese bieten ein sauberes Autoring -Erlebnis, bedeutet jedoch, dass ein Widget -Code eine Serverseite und eine Client -Seite ist. Im Allgemeinen lautet der Quellcode unter src :

• Seitenvorlagen auf pages
• 11ty config in _11ty*
• Vorlagen Partials und Layout in _includes und _layouts
• Server-Seiten-Widget-Code (HTML + AlpineJS) befindet sich in _11tyadd-shortcodes.js
• Client -Seitencode einschließlich Widgets (JavaScript und AlpineJs) befindet sich in js*
• Client Side CSS befindet sich in css*

Der Client -Code setzt einen aktuellen Browser mit ES6 -Funktionen zur Verbesserung der DX über.

Wenn Sie npm run dev 11ty die Website von src in _site , die dann zugestellt wird. Änderungen an clientseitigen Dateien führen zu einem Umbau der Website und die BrowserSync erzwingen eine Browser-Aktualisierung. Wenn jedoch Serverside -Dateien in _11ty ändern, müssen die Site wiederhergestellt werden. npm run devall zwingt in diesem Fall einen Umbau, aber dann wird der Browser nicht aktualisiert. In diesem Fall ist das Drücken von F5 zum Refitieren des Browsers erforderlich.

Ich entwickle unter Windows mit VS -Code. Theoretisch sollten Linux- und Mac -Dev -Plattformen einfach funktionieren.