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.
Everything should automatically install by running
yarn
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
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.
It's recommended to install Prettier and Elm Language Support for your IDE. These tools will auto-format Elm, CSS, and JS code.
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.
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 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.
- Elm Guide
- Elm Docs
- Elm Core Package
- Elm Html Package
- Elm Packages
- Hex Colour Tool - Brightens and Darkens Colours
- Flat UI Colours
- Howler.js - Audio API Library
- 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