dtinth / webmidicon Goto Github PK
View Code? Open in Web Editor NEWπΉπ₯ My MIDI instruments!
Home Page: https://webmidicon.web.app
License: MIT License
πΉπ₯ My MIDI instruments!
Home Page: https://webmidicon.web.app
License: MIT License
The WebMIDICon project is using Twind to style the app. It is very similar to Tailwind CSS but is a JS-based solution.
However, Twind has no updates and 1.0 is not yet released for a long time.
So I want to migrate the app to use Tailwind CSS, because Tailwind CSS v3 is released with JIT mode and has great integration with Vite and is more popular, meaning that it would be easier for people to contribute to the project.
twind
to tailwindcss
index.tsx
into tailwind.config.cjs
.twind
from dependency and migrate the twind syntax to Tailwind CSS.If you would like to work on this task, please write a comment stating your intent. We will then assign the issue to you. To ensure continuity, the issue will be unassigned after 3 days of inactivity β so please keep us updated.
Getting assigned to an issue is NOT a reservation. It is simply to let others know that someone is already working on it to avoid duplicated efforts. The first person who submits a valid Pull Request (PR) that resolves the issue will have their PR merged, regardless of who was assigned to the issue. However, if you are assigned to an issue and start working on it, but someone else submits a valid PR before you, you can still submit a valid PR even if it has conflicts. The PR will be given the "hacktoberfest-accepted" label and the issue will be closed.
If you encounter any problem, please include relevant logs and screenshot so itβs easy to troubleshoot.
See:
This issue has been automatically created by todo-actions based on a TODO comment found in src/index.tsx:7. It will automatically be closed when the TODO comment is removed from the default branch (master).
By putting CSS in JS, this will help achieve more cohesion in the code. I decided to use react-emotion
because it is more lightweight.
Right now, BeginnerChordMachine
is already implemented with react-emotion
.
If I have multiple MIDI outputs, when I start WebMIDICon, it always select the first available output.
In this example screenshot I have two MIDI outputs:
Network Network Jam is selected by default because it is the first available one.
When I select IAC Driver Bus 1 and hit βRefreshβ the selection reverts to Network Network Jam.
When I select a MIDI output device, and hit βRefreshβ, WebMIDICon should remember the selection. Use localStorage
to remember the selection.
Please test your PR, include a screenshot a video to confirm that it is working.
If you need virtual MIDI devices, you can use these:
Right now, the user interface is touch based. Most controls use touchstart
touchmove
touchend
to respond to events, and so does not work when using mouse.
Following components are not useable with a mouse:
KeyboardToolbar
(transpose and octave controls β theses buttons needs to respond when touch start)PianoKeyboard
IsomorphicKeyboard
DrumPad
Pedal
BeginnerChordMachine
This project is pretty old, may be a good idea to update Babel, webpack, loaders, β¦
how to use path-to-regexp in this template
when i use path-to-regexp in this template
here wii be a error
node_modules/react-router/esm/react-router.js:9:7: error: No matching export in "node_modules/path-to-regexp/dist.es2015/index.js" for import "default"
9 β import pathToRegexp from 'path-to-regexp';
β΅ ~~~~~~~~~~~~
error when starting dev server:
Error: Build failed with 1 error:
node_modules/react-router/esm/react-router.js:9:7: error: No matching export in "node_modules/path-to-regexp/dist.es2015/index.js" for import "default"
The criteria for Add to Home Screen feature is listed here:
https://developers.google.com/web/fundamentals/app-install-banners/
This issue has been automatically created by todo-actions based on a TODO comment found in public/index.html:11. It will automatically be closed when the TODO comment is removed from the default branch (master).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.