A step sequencer for programming drum beats, written in Elm. Published on Smashing Magazine.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
samples
src
.gitignore
README.md
elm-package.json
index.html
package-lock.json
package.json
postcss.config.js
reactor.html
sublime.sublime-project
yarn.lock

README.md

Elm Drum

A step-sequencer for programming drum beats written in Elm. I've written a case-study which has been published in Smashing Magazine in two parts: Part 1 Part 2.

Installation

Everything should automatically install by running yarn

Installation Issues

Some packages may need to be install globally if they're not running correctly:

  • Elm: npm install -g elm
  • Postcss-cli npm i -g postcss-cli

Development

To start the Elm development server (Elm Reactor) and the Postcss-cli run yarn start

Visit http://localhost:3000/reactor.html

Visiting http://localhost:3000/ and navigating to your Elm files utilizes the standard Elm Reactor, which doesn't contain CSS styles.

IDE Settings

It's recommended to install Prettier and Elm Language Support for your IDE. These tools will auto-format Elm, CSS, and JS code.

Development issues in reactor.html

At times, reactor.html logs a ReferenceError: Can't find variable: Elm. This occurs when the Elm bundle has not recompiled fast enough or when the Elm code can't be compiled. To fix, ensure your Elm code can be compiled, and do a hard refresh.

Deploy/Building

To build/update the dist folder (which will update the Github Page repo), run yarn build

The build process should be run prior to every commit.

CSS

CSS is run through PostCSS. Available CSS variables are in ./postcss.config.js.

When adding a new CSS file, you may need to restart the development server.

Useful Links

Next Steps

  • Clear tracks
  • Clear entire sequence
  • Hash url sequences to share
  • Preview track?
  • Mute track?
  • Local storage sequences?
  • Keyboard control 1-8, q-i, a-k, z-, = 8 steps; - move down = move up; [ move left ] move right