Code Monkey home page Code Monkey logo

duo-ludio's Introduction

Favicon

Duo Ludio

Check it out here!

For a person who needs help concentrating, Duo Ludio is a web app that provides categorized binaural beats. Unlike other binaural beats players, this product is accessible anywhere since it has the option of being installed offline on any device.

The name Duo Ludio is Latin for "Two Player" ("Two" for binaural beats).

Demo

Installation

  1. Install node.js 10.
  2. Clone the repository using one of the following methods.
    • SSH: git clone [email protected]:neelkamath/duo-ludio.git
    • HTTPS: git clone https://github.com/neelkamath/duo-ludio.git
  3. cd duo-ludio
  4. npm i
  5. Generate service worker: npm run sw

Usage

Development

npm run dev

Open http://localhost:1234 in your browser.

Testing Precaching

Run the following each time you have new files to test for precaching.

  1. Build: npm run dev
  2. After the files have been built, stop the server to run another command: Ctrl+C/command+C
  3. Update service worker: npm run sw
  4. Update build with updated service worker: npm run dev
  5. Open http://localhost:1234 in your browser.

Production

  1. Build: npm run build
  2. Update service worker: npm run sw
  3. Update build with updated service worker: npm run build

The dist/ directory will contain the built website.

Documentation

  1. npm run doc
  2. Open docs/index.html in your browser.

Testing

npm t

Documentation

Styling

The Material Design spec is not to be followed strictly, but as a guideline. Theming for things such as favicons are taken from Vaadin's Material Design specs.

The background color is #fff, and the theme color is #6200ee (both CSS colors).

TypeScript

Parcel leaks an implementation detail for certain uses of async/await (see this issue). As a workaround, the statement import 'regenerator-runtime/runtime'; is included in certain files.

All web components are imported in src/ts/web_components/components.ts.

When using TypeDoc to document web components, use the custom @attribute field to document the element's attributes.

Mandatory attribute documentation example:

@attribute `aria-label` (required) ARIA label (e.g., `Confirm deleting category Meditation`)

Optional attribute documentation example:

@attribute `aria-label` (optional, default: `Confirm`) ARIA label (e.g., `Confirm deleting category Meditation`)

TypeDoc does'nt allow you to use the event in places such as constructors. A workaround is to document Events by creating and documenting private methods which dispatch them.

Binaural Beats

The binaural beats used are from the v6.0.2 release of the Binaural Beats Dataset. The src directory from the dataset is saved as src/binaural_beats in this repo.

Continuous Deployment

Continuous delivery has been setup using Netlify to automatically update the production web app whenever there's a new commit to the master branch.

Favicon

favicon.io is used to generate the favicon. Generate it as shown below.

Favicon Setup

Storage

localForage is used to persist data.

categories

The abstraction layer for the categories item is src/ts/storage/categories.ts.

The categories item contains the user's binaural beats collection. Each key is the name of a category. Each value is an array of strings denoting the names of tracks. Track names correspond to tracks in the directory src/binaural_beats/tracks/. An example is shown below.

{
  "Meditation": [
    "Theta_6_Hz_Isochronic_Pulses.aac"
  ]
}

Binaural Beats

To access metadata on binaural beats (which are stored in src/binaural_beats/data.json), use the abstraction layer src/ts/storage/beats.ts.

Each track is downloaded a localForage item of the same name. For example, Alpha_8_Hz.mp3's Blob is saved to the Alpha_8_Hz.mp3 item.

Credits

License

This project is under the MIT License.

duo-ludio's People

Contributors

dependabot[bot] avatar imgbot[bot] avatar

Stargazers

 avatar

Watchers

 avatar  avatar

duo-ludio's Issues

Add CI

Have the CI perform something like tsc --no-emit to check for typing errors.

Style

  • Update to a dark theme.
  • Center the install button.
  • Replace Vaadin Components with MWC, thereby ridding the codebase of all // @ts-ignores. For this, you'll have to wait for the stable release of Material Components Web Components. After migrating the individual components, redesign parts of the app to utilize newly available components such as the FAB.

Refactor JS

Refactor into smaller classes/functions.
Instead of returning HTML in functions, return children which may be appended in the calling function using appendChild(). This way, you can bundle relevant event listeners within the function itself, and the reader of the code will require fewer jumps.

Organize the Web Components wiki page

  • Put the HTML and JavaScript in the same code block for easier copy-pasting, and fewer heading levels.
  • Take out web components into their own subpages.
  • Add the web component documentation template to CONTRIBUTING.md.
  • Add an image for each demo at the top of the page.

Use web components

  • Make all UI into components for better encapsulation, readability, usability, and re-usability.
  • Make the web components generic and try adding basic functionality, such as event listeners that perform a particular task, by default.
  • Try exposing shadow root functions as assignable member functions.
  • Move the HTML templates to their respective JavaScript files.
  • Make the web components API more idiomatic by using nested HTML instead of attributes for things like main text, and HTML content.

Enhance security

Enable automatic security fixes in the Security tab of GitHub's web UI for this project once the repo is public.

Implement Categories tab

Move categories from localStorage to IndexedDB so that it doesn't get cleared when people are deleting their history. The binaural beats are stored there too anyway.
See if you can generate some or all of the binaural beats to improve performance. This would also allow greater flexibility, such as allowing the user to mix in their own solfeggios, isochronics, etc.; and also for you to mix high quality frequencies unavailable online.

Add ability to add categories in Tracks tab

When the user is selecting categories to add/remove the selected track from in the Tracks tab, they dialog should also allow them to add the category required if it doesn't already exist.

Make it a PWA

Utilize the resources on MDN and Google's sites.

  • Fill out everything in manifest.webmanifest (MDN)
  • Cache everything using Workbox (star its repo it if helps)

If you are unsuccessful, you'll have to update the GitHub UI's description, and the README removing that stated feature.

Fix warnings

Chrome throws a bunch of violations at runtime; we don't want that.

Audio doesn't play properly

  • Safari doesn't play the audio. This might be because we aren't using the builtin HTMLAudioElement's controls.
  • Audios other than solfeggios currently loop with a tiny break between each iteration. This is unbearable to listen to. You'll have to use a format other than MP3 because MP3s cannot loop gaplessly. Try using howler.js like:
    const sound = new Howl({src: 'Alpha_8_Hz.m4a', sprite: {beat: [0, 1000, true]}});
    sound.play('beat');
  • Having to click the play button for a track (once to add it to the player, and then again to play it via the player) is lame. See if howler.js can fix that.

Modularize CSS

Instead of telling people to copy-paste-modify the .dialog-button CSS class in their custom web components, tell them to call a JavaScript function which inlines it in the web component's definition.

Add description

Add a description on what the app is, that it saves your data locally, what binaural beats are, and to use headphones. Link to the GitHub repo.

Deploy to stores

Publish this in the Google Play Store and link to the store listings in the README.

Move documentation to Wiki

In the README's description, link to the wiki, and document CD with Netlify. Also document the directory structure of src/js.

Fix security alert

Since we do not use the affected dependency directly, we could update all the dependencies we use, or search for which dependency requires the update

Validate

Prior to documenting which browsers were supported, we did not test on anything except Chrome and Safari. It is possible we use APIs which do not work in certain browsers; so thoroughly test the site (again) in the following browsers:

  • Chrome
  • Safari
  • Firefox
  • Edge

Make sure that the licensing for the binaural beats and libraries are good.

Add contributing templates

Add a GitHub issue and/or pull request template specifying that corresponding Wiki pages should be updated (e.g., updating the site to a dark theme requires that the Favicon wiki page's docs should update the background and text colors).

Migrate to TypeScript

  • Do the bare minimum to convert JS files to TS and make the project compile
  • Use basic TypeScript, such as using type annotations, declaring variables using const instead of let where possible, etc.
  • Document the codebase. Move web component documentation from the Wiki to TypeDoc.
  • Use idiomatic TypeScript by following conventions, using interface over any, specifying the type of HTMLElement as DismissDialog, etc.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.