upstream

.eslintrc.yml

@@ -0,0 +1,35 @@
+{
+    "parser": "babel-eslint",
+    "env": {
+        "es6": true,
+        "browser": true,
+        "node": true
+    },
+    #"extends": "eslint:recommended",
+    "rules": {
+        "indent": ["warn", 4, {
+            "SwitchCase": 1
+        }],
+        "no-mixed-spaces-and-tabs": "warn",
+        #"no-unused-vars": "warn",
+        "quotes": ["warn", "double", {
+            "avoidEscape": true
+        }],
+        "semi": ["warn", "always", {
+            "omitLastInOneLineBlock": true
+        }],
+        "max-len": ["warn", {
+            "code": 100,
+            "ignoreTrailingComments": true,
+            "ignoreComments": true,
+            "ignoreStrings": true,
+            "ignoreTemplateLiterals": true
+        }],
+        "no-trailing-spaces": ["error", {
+            "skipBlankLines": true,
+            "ignoreComments": true
+        }],
+        "no-duplicate-case": "error",
+        "no-irregular-whitespace": "error"
+    }
+}

.github/linters/.eslintrc.yml

@@ -0,0 +1,35 @@
+{
+    "parser": "babel-eslint",
+    "env": {
+        "es6": true,
+        "browser": true,
+        "node": true
+    },
+    #"extends": "eslint:recommended",
+    "rules": {
+        "indent": ["warn", 4, {
+            "SwitchCase": 1
+        }],
+        "no-mixed-spaces-and-tabs": "warn",
+        #"no-unused-vars": "warn",
+        "quotes": ["warn", "double", {
+            "avoidEscape": true
+        }],
+        "semi": ["warn", "always", {
+            "omitLastInOneLineBlock": true
+        }],
+        "max-len": ["warn", {
+            "code": 100,
+            "ignoreTrailingComments": true,
+            "ignoreComments": true,
+            "ignoreStrings": true,
+            "ignoreTemplateLiterals": true
+        }],
+        "no-trailing-spaces": ["error", {
+            "skipBlankLines": true,
+            "ignoreComments": true
+        }],
+        "no-duplicate-case": "error",
+        "no-irregular-whitespace": "error"
+    }
+}

.github/workflows/linter.yml

@@ -0,0 +1,23 @@
+name: Linter
+
+# Triggers the workflow on push or pull request events only for the master branch
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    # Checks-out repository under $GITHUB_WORKSPACE, so job can access it
+    - uses: actions/checkout@v2
+
+    # Runs the linter
+    - name: Super-Linter
+      uses: docker://github/super-linter:v3.3.0
+      env:
+        VALIDATE_ALL_CODEBASE: false
+        DISABLE_ERRORS: true

.github/workflows/node.js.yml

@@ -0,0 +1,29 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x, 14.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test

.gitignore

@@ -1,2 +1 @@
 node_modules/
-package-lock.json

README.md

@@ -10,7 +10,7 @@ Music Blocks is a programming language and collection of manipulative
 tools for exploring musical and mathematical concepts in an
 integrative and fun way.
 
-**Refer the following sections below to get familiar with this awesome project:**
+**Refer the following sections below to get familiar with this project:**
 
 * [Running Music Blocks](#RUNNING_MUSIC_BLOCKS)
 * [How to set up a local server](#HOW_TO_SET_UP_A_LOCAL_SERVER)
@@ -25,6 +25,8 @@ integrative and fun way.
 
 ![alt tag](https://raw.githubusercontent.com/sugarlabs/musicblocks/master/screenshots/Screenshot-2.png)
 
+Some background on why music and programming can be found [here](http://github.com/sugarlabs/musicblocks/tree/master/WhyMusicBlocks.md).
+
 ## <a name="RUNNING_MUSIC_BLOCKS"></a>Running Music Blocks
 
 Music Blocks is available under the GNU Affero General Public License (AGPL), a free, copyleft license.
@@ -53,8 +55,9 @@ Blocks (e.g., <code>cd /musicblocks</code>)
 (2) If you do not have Python installed, you'll need to install
 it. (Get it from https://www.python.org) You can test for Python in a
 terminal: <code>python</code>. Type <code>exit()</code> to exit
-Python.
-
+Python. (Note that on some older systems, the python3 command is not
+bound to python. You may need `sudo apt install python-is-python3`.
+
 (3) After cloning the musicblocks repository, run the command:
 
 ```
@@ -63,7 +66,7 @@ $ npm run serve
 
 This works on all Operating Systems with Python.
 
-On Windows sytems with multiple Python installations, it is
+On Windows systems with multiple Python installations, it is
 recommended to use this command instead:
 
 ```
@@ -102,7 +105,7 @@ modules are described in more detail in [js
 README.md](https://github.com/sugarlabs/musicblocks/blob/master/js/README.md)
 
 Note: As with any change, please make your own copy by cloning this
-[respository](https://github.com/sugarlabs/musicblocks.git). Make
+[repository](https://github.com/sugarlabs/musicblocks.git). Make
 your changes, test them, and then make a pull request.
 
 See [Contributing
@@ -126,14 +129,18 @@ Associates, LLC, [Center for Music and the Arts in Education
 Education](http://music-in-education.org/) Some of the initial graphics
 were contributed by [Chie Yasuda](http://www.chieyasuda.com).
 
-Much of the initial coding specific to Music Blocks was done by
-Yash Khandelwal as part of Google Summer of Code (GSoC) 2015. Hemant
-Kasat contributed to additional widgets as part of GSoC
-2016. Additional contributions are being made by Tayba Wasim, Dinuka
-Tharangi Jayaweera, Prachi Agrawal, Cristina Del Puerto, and Hrishi
-Patel as part of GSoC 2017. During GSoC 2018, Riya Lohia developed a
+Much of the initial coding specific to Music Blocks was done by Yash
+Khandelwal as part of Google Summer of Code (GSoC) 2015. Hemant Kasat
+contributed to additional widgets as part of GSoC 2016. Additional
+contributions are being made by Tayba Wasim, Dinuka Tharangi
+Jayaweera, Prachi Agrawal, Cristina Del Puerto, and Hrishi Patel as
+part of GSoC 2017. During GSoC 2018, Riya Lohia developed a
 Temperament Widget. Ritwik Abhishek added a keyboard widget and a
-pitch-tracking widget.
+pitch-tracking widget. During GSoC 2019, Favor Kelvin refactored much
+of the code to use promises. During GSoC 2020, Anindya Kundu did a major
+refactoring of the code base to support JavaScript export. Aviral Gangwar
+enhanced the internal representation of mode and key. Saksham Mrig fixed 70+
+bugs and added support for pitch tracking and MIDI import.
 
 Many students contributed to the project as part of Google Code-in
 (2015&ndash;2020). Sam Parkinson built the Planet during GCI. Emily

WhyMusicBlocks.md

@@ -0,0 +1,71 @@
+Why the arts and why music?
+===========================
+
+Music is the perfect entry point for learning computation. For one, music, like computation, requires a person to think on an abstract level. Another reason is because computation and music share important concepts (detailed below in “Pedagogical Approach”). Moreover, music has some benefits that the traditional computer pedagogy does not, including the potential to improve social-emotional skills. 
+
+According to the NEA: Childhood arts education provides important gateway and formative experiences in the arts... School-based arts education is of particular importance because schools are the only institutions that reach vast numbers of children, particularly low-income children, who are unlikely to receive arts education any other way... [A] body of solid research and innovative practice continues to grow and show that arts education has serious benefits to students as students, and that arts learning is strongly associated with higher levels of achievement, positive social and emotional development, and successful transitions into adulthood. (NEA Survey of Public Participation in the Arts, 2010) 
+
+In another study, “an analysis of longitudinal data on 25,000 students showed that those with higher levels of involvement with the arts did better across a wide range of outcome variables than those with lower arts involvement, and that low-income students benefited from their involvement in the arts more significantly than did higher-income students” (Catterall et al. 1999). 
+
+Pedagogical approach: Computation, not coding 
+=============================================
+While few argue that children should not have access to computing, the role of computation in learning, however, remains open to debate. In a recent article in the New York Times (Singer 2017), Tim Cook, CEO of Apple, representing the point of view of Silicon Valley, said “Coding should be a requirement in every public school.” But to what end? To ensure a “skilled workforce”? Beyond the false promise that by learning Java you will get a job at Google, we take the position that “learning to code” is not the same as becoming competent in “computational thinking”. Computational thinking, rather, is “solving problems using techniques from computing” (Sharples et al. 2015) and it has ramifications far beyond job training; it is about expression of ideas, problem solving, and creativity, all important life skills. 
+
+Asserting that computational thinking is about more than learning to program leads to a number of questions: How should we go about leveraging the latent capacity to learn? How can we transform a consumer-oriented culture into a learning-oriented culture? And is it possible to design a learning platform that respects the diversity of educational context found across the diversity of the learning populations? 
+
+Firm footing in computation as a “Cognitive Tower” 
+==================================================
+In a 2008 memo (Minsky, 2019) questioning “general” education, Minsky proposed that we “re- aim our schools towards encouraging children to pursue more focused hobbies and specialties —to provide them with more time for (and earlier experience with) developing more powerful sets of mental skills, which they later can extend to more academic activities.”
+
+Minsky argues that the organization of our cognitive resources into towers with different levels of processes is what “enables our minds to generate so many new kinds of things and ideas.” (Minsky, 2019) These levels span agencies, each of which specializes in areas such as gaining knowledge from experience, planning and causal attribution, the construction of models, and identifying values and ideals. A focus on achieving meaningful goals, not just the accumulation of simple knowledge objects, exercises all of the levels in a cognitive tower, helping a child “develop proficiencies that can be used in other domains.” 
+
+As a model for learning, the levels within Minsky’s cognitive towers represent skills that can be applied broadly. Minsky argues that we can redesign school with the goal of providing learners with powerful tools: "things to think with." A specific focus is on tools for expression (writing, programming, drawing, composing, etc.), collaboration (sharing and mentoring), and reflection (commentary and critique). These tools encourage open-ended problem-solving and debugging through engagement in authentic projects, during which time they would develop and hone their mental skills, and over, time strengthen their cognitive towers. 
+
+A focus on achieving meaningful goals, not just the accumulation of trivial knowledge, exercises all of the levels in a cognitive tower, helping a child “develop proficiencies that can be used in other domains.” A focus on hobbies, where interest is authentic and sustained, as opposed to curricula organized around the sequential achievement of fragmented goals, has the potential for deep engagement across multiple levels. Albert Einstein summed up the focus on hobbies succinctly when he said, “Love is a better master than duty.” It is in this spirit that we are proposing music as a vehicle for deep engagement. 
+
+Music Blocks is a “thing to think with” that allows for enough flexibility for young learners to explore math, music, and code—both independently and mutually integrated.
+
+Hard fun: What EdTech of today needs 
+====================================
+There is a strong temptation in today’s EdTech industry to make things as simple as possible so as to reach the broadest possible audience. However some things are inherently complex. Single purpose “Apps”, for example might be fun, but they are simple, lacking complexity. Multi- purpose tools, such as we have created with Music Blocks, is fun and hard—”hard fun”. The hard part of “hard fun” of learning is in reaching towards complexity. Children should not miss out on the learning that takes place when learning to use tools. 
+
+Music: A great vehicle for computer science instruction 
+=======================================================
+“All musicians are subconsciously mathematicians” – Thelonius Monk, Jazz Pianist and Composer
+
+Music composition and performance require practitioners to follow basic control flow such as sequences, conditionals and loops, data abstractions such as changes in timbre, tone, and meter, functions and operators such as transpositions, inversions, and retrograde, and debugging (e.g. making corrections to a composition, perfecting a transcription, or working a section of music on an instrument) and through an understanding of music theory (i.e. “Does this have a meaningful musical structure?”). 
+
+The social aspect of musical performance also parallels the perspective that computing is both collaborative and creative (Brennan & Resnick, 2012). An analog can be built between the way in which programmers work together, building communities around sharing and remixing code, and the way in which musicians build communities of interest through performance, sharing, and debating best practices. Programmers review code and musicians critique performances. Both musicians and programmers modify, improvise, and take inspiration from the work of peers and mentors. 
+
+Shared Concepts – Programming and Music
+=======================================
+
+| Programming | Music |
+| --- | --- |
+| Sequences | A series of notes (or phrases), in order |
+| Loops | Repeating phrases, drum loops |
+| Conditionals | Using conditionals for 1st and 2nd endings |
+| Data | Note structure (note length, pitch name, and pitch octave) and phrase structure |
+| Modularity and Abstraction | Actions, transpositions, intervals, ornamentation, inversions, etc. |
+| Debugging | 1. Using one’s ear (i.e. does the result sound correct?) and |
+| | 2. understanding of music theory (i.e. does the code have a meaningful musical structure?) |
+
+Musical problem solving: A glimpse into our toolbox 
+===================================================
+Music, like computer science, offers a rich environment for exploration and problem solving, of which the intersection of their shared concepts allow for integrative learning. The Music Blocks approach is to take well-established scaffolding in music instruction and build an analogous tool (or “widget”) in our software platform. The software widget is then tied to concepts in computer science. In other words, the widgets don’t just produce music, they output code that is descriptive of concepts found in music.
+
+Music Blocks and Curriculum
+===========================
+While Music Blocks is largely agnistic about curriculum design, it is inspired by the work of Seymour Papert. Papert used the term “Microworld” to describe the world of geometry explored when children used Logo. A microworld is a “subset of reality or a constructed reality whose structure matches that of a given cognitive mechanism so as to provide an environment where the latter can operate effectively. The concept leads to the project of inventing microworlds so structured as to allow a human learner to exercise particular powerful ideas or intellectual skills.” (Papert 1980) 
+
+In a microworld, an individual is able to use a technological tool for thinking and cognitive exploration that would not be possible without the technology. But not just any technology. “The use of the microworld provides a model of a learning theory in which active learning consists of exploration by the learner of a microworld sufficiently bounded and transparent for constructive exploration and yet sufficiently rich for significant discovery.“ (Papert 1980) 
+
+Music Blocks is a collection of technological tools specific to a microworld of music, starting with pitch and rhythmic note values, but also providing affordances for repetition, transposition, etc. The tools are more than an interface to a synthesizer and more than a transcription/engraving tool (i.e. Finale, Sibelius, Musescore, etc)—they are scalable and modular collections of essential building blocks that are at the crux of all powerful ideas in music. 
+
+As learners engage with Music Blocks, they are introduced to specific concept with parallels in both music and computer science. For example, while exploring rhythm, she may choose to utilize a rhythm making tool that introduces the concept of loops, which are used for drum machines implemented by “while” loops.
+
+We encourage learners to engage in a semi-structured discussion about their goals in terms of music and computing. We use open-ended prompting questions around the topic areas, such as: “What interests you about computer programming? Why?” “What would you expect from a workshop that teaches you how to build a drum machine?” Follow-up questions to these will be improvised and guided by participant discussion, to support a productive conversation where all learners feel included and heard. Finally, we encourage learners to react and reflect.
+
+Beyond Music Blocks
+===================
+Music Blocks is not a destinations. Rather, it is a waypoint along a road to achieving fluency in both musical comprehension and computational thinking. We want the students to dive deeper into musical representations and programming constructs than they could do in a single session. Therefore we provide mechanism to go beyond tools such as Music Blocks to give the learner both the ability to communicate with the mainstream worlds of music and computer science and access to a rich set of tools that they may use to further augment their explorations. Music Blocks, by design, does not confine a user to its tools—rather it is a tool to propel the ambitious learner to other rich and authentic discoveries. (See Bender, Ulibarri, and Khandelwal 2016 for more details.)