music practice tools

Музыкальные контакты

Инструменты, которые помогут с музыкальной практикой и улучшением музыкальности, а также отдаленными уроками.

Формат - это блог / журнал, который содержит интерактивные элементы для облегчения жизни. К ним относятся:

• Метроном с предопределенным, но регулируемым BPM
• [Quasi] Случайные селекторы ноты и номеры (представлены все элементы в диапазоне)
• Таймер деятельности с истешенными и общими временами, которые сохраняются между страницами и сеансами
• You Tube Video Timer, который всегда виден независимо от прокрутки
• Кнопки поиска видео
• Музыка с использованием нотации ABC. Обеспечивает интерактивные функции игры

Использует эту стопку потрясающей технологии OpenSource.

Все страницы живут в папке pages и авторируются с использованием шаблонов Nunjucks Templated Marckdown, которая отображается удивительным генератором статического сайта 11ty. Виджеты добавляются с помощью шорткодов.

Это использует типичную платформу разработки Nodejs, так что:

• клонировать репо
• npm install
• npm run devall
• Редактировать страницы
• Просмотрите URL -адрес Localhost, напечатанный на CLI (обычно http://localhost:8080/ ).

---

Получите свою собственную версию https://musicpracticetools.net/ в Интернете с netlify с помощью этой кнопки. Он будет клонировать это репо с вашей собственной учетной записью GitHub и свяжет его с новым сайтом для вас в Netlfy.

---

Разработчики

Исходный код не страниц находится в src . Обычные файлы конфигурации инструмента Dev находятся в корне проекта.

Примечания

Это в основном статический сайт с использованием шаблонов Nunjucks с небольшим клиентским JavaScript, добавленным для поведения для обеспечения интерактивных виджетов. Этот проект основан на примере блога 11ty, который поддерживает теги.

Шорткоды шаблонов используются для пользовательских интерактивных виджетов. Они обеспечивают чистый опыт работы, но означает, что какой -то код виджетов является серверной стороной, а какая -то клиентская сторона. В общем, исходный код в src :

• Шаблоны страниц на pages
• 11ty config в _11ty*
• Шаблоны частичных и макет в _includes и _layouts
• Код виджета на стороне сервера (html + alpinejs) находится в _11tyadd-shortcodes.js
• Код на стороне клиента, включая виджеты (JavaScript и Alpinejs) в js*
• Клиентская сторона CSS находится в css*

Клиентский код предполагает обновленный браузер с использованием функций ES6 для улучшения DX.

При запуске npm run dev 11ty генерирует веб -сайт от src в _site , который затем обслуживается. Изменения в файлах на стороне клиента вызывают восстановление сайта, а BrowserSync заставляет обновить браузер. Однако, когда серверные файлы в _11ty изменяют сайт, должен быть восстановлен. npm run devall в этом случае восстановить, но затем браузер не обновляется. Нажатие F5 для хранения браузера требуется в этом случае.

Я разрабатываю в Windows, используя VS -код. Теоретически платформы Linux и Mac Dev должны просто работать.