music practice tools

음악 실습-툴

음악 연습을 돕고 음악성을 향상시킬 수있는 도구 및 원격 교훈.

이 형식은 삶을 더 쉽게 만들기위한 대화식 요소를 포함하는 블로그 / 저널입니다. 여기에는 다음이 포함됩니다.

• 사전 정의되었지만 조정 가능한 BPM이있는 메트로노미
• [준] 랜덤 노트 및 번호 선택기 (범위의 모든 항목이 제시됨)
• 페이지와 세션 사이에 지속되는 경과 및 총 시간이있는 활동 타이머
• 스크롤링에 관계없이 항상 보이는 You Tube 비디오 타이머
• 비디오 찾기 버튼
• ABC 표기법을 사용한 음악 점수. 대화식 재생 기능을 제공합니다

이 멋진 OpenSource 기술의 스택을 사용합니다.

모든 페이지는 pages 폴더에 살고 있으며 멋진 110 개의 정적 사이트 생성기가 렌더링하는 Nunjucks Templeated Markdown을 사용하여 작성됩니다. 위젯에는 단축 코드가 추가됩니다.

이것은 일반적인 nodejs 개발 플랫폼을 사용하므로 다음과 같습니다.

• 레포를 복제하십시오
• npm install
• npm run devall
• 페이지 편집
• CLI에 인쇄 된 LocalHost URL을 찾아보십시오 (일반적으로 http://localhost:8080/ ).

---

이 버튼을 사용하여 NetLify를 사용하여 웹에서 https://musicpracticetools.net/의 나만의 버전을 받으십시오. 이 리포트를 자신의 Github 계정으로 복제하고 NetLfy의 새 사이트에 연결합니다.

---

개발자

비 페이지 소스 코드는 src 에 있습니다. 일반적인 DEV 도구 구성 파일은 프로젝트 루트에 있습니다.

메모

이것은 기본적으로 대화 형 위젯을 제공하기 위해 동작에 추가 된 작은 클라이언트 측 JavaScript가있는 Nunjucks 템플릿을 사용하는 정적 사이트입니다. 이 프로젝트는 태그를 지원하는 11 장 블로그 예제를 기반으로합니다.

템플릿 단축 코드는 사용자 정의 대화식 위젯에 사용됩니다. 이들은 깨끗한 저작 경험을 제공하지만 일부 위젯 코드는 서버 측 및 일부 클라이언트 측임을 의미합니다. 일반적으로 src 의 소스 코드는 다음과 같습니다.

• pages 의 페이지 템플릿
• _11ty* 의 11티 구성
• _includes 및 _layouts 의 부분 및 레이아웃 템플릿
• 서버 측 위젯 코드 (html + alpinejs)는 _11tyadd-shortcodes.js 에 있습니다.
• 위젯 (JavaScript 및 Alpinejs)을 포함한 클라이언트 측 코드는 js* 에 있습니다.
• 클라이언트 측 CSS는 css* 에 있습니다.

클라이언트 코드는 ES6 기능을 사용하여 최신 브라우저를 가정하여 DX를 개선합니다.

npm run dev 11TY는 src 에서 웹 사이트를 _site 로 생성 한 다음 제공됩니다. 클라이언트 측 파일의 변경으로 인해 사이트가 재건되고 BrowserSync는 브라우저 새로 고침을 강요합니다. 그러나 _11ty 의 Serverside 파일을 변경하면 사이트를 재생해야합니다. npm run devall 경우 재 구축을 강제하지만 브라우저는 새로 고침되지 않습니다. 이 경우 브라우저를 리테시하기 위해 F5를 눌러야합니다.

VS 코드를 사용하여 Windows에서 개발합니다. 이론적으로 Linux 및 Mac Dev 플랫폼은 작동해야합니다.