| Age | Commit message (Collapse) | Author | Files | Lines |
|---|
|
TL;DR: scale down UI for non-mobile devices.
I pulled the screen resolution for my phone, the Google Pixel 4, off of the
internet. I created a device profile in Chrome to develop this application
specifically for my phone. To my surprise, when I opened the app on my phone,
many of elements that looked good in Google Chrome, looked askew on my phone. I
needed to troubleshoot.
Here's how I did that:
I used Tailwind to responsively color the bg for each breakpoint to see if my
device was sm, md, lg, xl (according to Tailwind's breakpoint
terminology). After reading Tailwind's documentation and comparing their
breakpoints with my Pixel 4's width (i.e. 1080px), I figured that my device
would be lg. It's not; it's md, which I confirmed by using ngrok to load
localhost:8000 on my phone and see that the background-color was
"md:bg-green-600".
I'm still unsure why my device is not lg, but knowing that my device was md
was enough to fix many of the styling issues. My current theory is that while
my screen's resolution is 1080 wide, the pixel density affects the media query
for the breakpoint.
|
|
This helps us avoid showing a chord from a key that the user did not whitelist.
|
|
Removing more unused code attempting to focus this app's scope.
|
|
Refactor the Piano component to highlight the root note of each chord. If this
makes things too easy, I can support this as a preference.
Also:
- Reduced the number of keys that the piano displays and increased the key
thickness to reclaim the space
- Preferred using Tailwind selectors instead of inline styling where applicable
- Call List.reverse on the keys to ensure that the top-most note is a lower note
than the bottom-most note
TODO:
- Support showing only the name of the chord and not just the notes that
comprise that chord
- Rewrite the function that generates the chords for a given range of notes
- Consider supporting a dark mode
|
|
Google Chrome's device preview doesn't resemble what I see when I use my phone
to visit this page.
|
|
Since I've published this, I should include an Overview page to orient potential
users. This Overview could be better -- as could many things with this app --
but it's a start, and I'm seeking small wins.
|
|
I mention setting tempo twice... whoops.
|
|
I'm preferring the verb "tap" to "press".
|
|
Observed problem: Tapping "C major, A minor" key, which LPC sets by default,
does not unset it.
Bug: handleClick passed the relativeMinor Key but the default value in
State.Model is the C Major key. We would toggled b/w [Cmajor] ->
[Cmajor,Aminor], and because toggled checked if either Cmajor or Aminor was
present, it was always true.
Solution: Check relativeMajor to set toggled.
|
|
Now that I have a deployed an MVP of my app, I am tidying things up to support
the next phase of development.
TL;DR:
- Moved application Model-related code into State module
- Moved each View into its own module
- Deleted unused ChordInspector component
- Deleted unused Msg's, {Increase,Decrease}Tempo
- Deleted misc unused code
|
|
The elm2nix expression builds my code as Main.min.js. As such, I changed my
index.html to require Main.min.js instead of elm.js. When I run elm-live now, I
make sure that I output Main.min.js as well. I need to gitignore this to exclude
it from my repository though.
|
|
Rotate the "Press to practice" copy to ensure that it is readable in landscape
mode.
|
|
In the spirit of "keep it simple, stupid", I am naming this application as
closely to the functionality as I can imagine.
|
