neelkamath / duo-ludio Goto Github PK

• 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.

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.

For example, a function to add a category would be available from a file you could import.

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

• 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.

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

Replace HTMLElement with LitElement, thereby ridding the codebase of all setAttribute()s and getAttribute()s.

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.

Credit Binaural Beats Dataset.

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.

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 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.

• 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.

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).

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

https://developers.google.com/web/fundamentals/web-components/best-practices

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

The current favicon is a Google image.

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

• 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.

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.

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.

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.

Special characters such as commas and double quotes don't play well with category names.

Link to the deployment in the GitHub UI and README.

This will require an update to the item-editor web component.

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