My much anticipated feature: first prompt the user for a name of a chord, then
show the user that chord.
Cascading changes:
I changed the "Tap to practice" overlayButton's opacity from 30% to 100% because
pausing when showFlashCard is True causes the two piece
TIL:
You can batch Elm Subscriptions using the Sub.batch function.
What I haven't learned yet:
How to best handle rotating screens for mobile devices (i.e. portrait
vs. landscape modes). In time...
What's left?
- Support sound
- Support a fine-tune section of the preferences
- Support tablet and web browser variants
- Ask users for the "I chord" instead of asking "C major Root position"
- More styling (of course)
Moving the UI.tw function into Tailwind.use. Creating and consuming some
functions like Tailwind.if_ and Tailwind.when to make it easier to conditionally
style some of my components.
Now the "Tap to practice" button fully covers the screen.
- Dropped support for a Piano direction (for now)
- Using w-full and w-1/2 for piano key "length"
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.
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
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.
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.
After a few failed attempts at deploying my Elm application on NixOS, I'm trying
elm2nix, which some NixOS and Elm users created to attempt to solve some of the
issues that I ran into earlier today.
Elm tries to write to $HOME, which NixOS doesn't like. I typically prefer to
avoid things like cabal2nix, elm2nix, node2nix because I don't like the workflow
that they suggest, but I'm so eager to deploy this application, that I'm trying
it.
--
d857e6e1f9b09a3eb5abd890677a98b23346f07a by Abseil Team <absl-team@google.com>:
Simplify internal TryAcquireWithSpinning.
No point declaring the `result` variable: we can just return the results
directly.
PiperOrigin-RevId: 307045800
--
421952252bc23be51f47f7d23f3422bad1ed382c by Derek Mauro <dmauro@google.com>:
Add custom sink support for `absl::Format()` through an ADL extension mechanism.
Users can now define
`void AbslFormatFlush(MySink* dest, absl::string_view part)`
to allow `absl::Format()` to append to a custom sink.
PiperOrigin-RevId: 306929052
--
c73d5cdb62cd58ea421ed1aeeab78a0ffcfeeefb by Matt Calabrese <calabrese@google.com>:
Internal-only conformance-testing macro ABSL_INTERNAL_ASSERT_CONFORMANCE_OF for compile-time and runtime checks of a specified type, expected properties of that type, and a logically-ordered series of equivalence classes of that type.
PiperOrigin-RevId: 306885512
--
a8c2495a07f37d68907855e3f0535bd5c27a3b52 by Abseil Team <absl-team@google.com>:
Internal change
PiperOrigin-RevId: 306766753
GitOrigin-RevId: d857e6e1f9b09a3eb5abd890677a98b23346f07a
Change-Id: Ic23c92ac74f9ffcbb2471ff8c6691f4b7b20354b
Thankfully @tazjin builds Gemma (an Elm project) with Nix, so I could reference
Gemma's default.nix to help me with mine. Elm problematically attempts to
HTTP-fetch a list of packages to verify my project's dependencies. Because Nix
builds derivations in a sandbox without network access, I need to use some
escape hatches (i.e. NIX_REDIRECTS, LD_PRELOAD,
SYSTEM_CERTIFICATE_PATH). Welp... it's packaged now...
I'm also pointing learnpianochords.app to this project's index.html. It will be
live soon! :)
TODO(wpcarro): Rename "Chord Drill Sergeant" -> "Learn Piano Chords" (KISS)
I'd like to deploy an MVP version of this application today, so I'm dropping
support for a few features to focus my efforts. I may bring these features
back.
TL;DR:
- Temporarily drop support for "Fine Tune" tab of preferences
- Sort keys by the Circle of Fifths
For now since I'm the only customer and I'm primarily making this for myself,
I'm styling the app specifically for my Google Pixel 4. If I find this app
useful, I will consider supporting other devices.
I'm using the Icons that I bought when I purchased the "Refactoring UI" book.
Other news:
- I bought the domain learnpianochords.app!
What's left:
- Style the "fine tune" tab of the preferences view
- Better support non-mobile devices like the browser and tablet devices
- Deploy the application to learnpianochords.app
- Redesign the "key" tab of the preferences view to sort the keys according to
the circle of fifths
- Dogfood
- Simplify until I cannot simplify anymore
vauxhall (my laptop) now has an additional screen connected at home,
but sometimes I use that screen for my desktop computer (nugget).
This refactors the randr configuration for EXWM to support somewhat
more dynamic, multi-monitor layouts and adds key bindings to toggle
between some of the different configurations I want.
These patches enable hardware-accelerated video decoding, which is
useful for Stadia.
The main issue with this is that Hydra doesn't currently cache
Chromium with these patches, which means that it is built from scratch
which takes in the order of 5 hours on an otherwise unused nugget.
--
0e867881e4b9f388a13d6fa8ed715192460130ab by Abseil Team <absl-team@google.com>:
Minor wording change to header comment for Mutex::AwaitWithDeadline(). No functional changes.
PiperOrigin-RevId: 306729491
--
fc64361fb831003fa5e6fbb84a9a89338fd2838c by Derek Mauro <dmauro@google.com>:
Uses C++20 compatible allocator traits in Abseil types
This merges both instances of CountingAllocator in the Abseil codebase.
Makes the presubmits test C++20 mode.
Fixes#651
PiperOrigin-RevId: 306728102
--
d759e5681b9dd6b7339fc019ed58fb5fdececdc3 by Derek Mauro <dmauro@google.com>:
Makes btree's iterator comparisons C++20 compatible
See https://stackoverflow.com/questions/60386792/c20-comparison-warning-about-ambiguous-reversed-operator
PiperOrigin-RevId: 306702048
--
e9da5f409bc5ddb1bad308f9d8c41213c67a1d1e by Derek Mauro <dmauro@google.com>:
Switch a few uses of at() that should have been data() in the implementation of InlinedVector.
Use ABSL_HARDENING_ASSERT in resize().
PiperOrigin-RevId: 306670992
GitOrigin-RevId: 0e867881e4b9f388a13d6fa8ed715192460130ab
Change-Id: If431f3e5d77097e9901654773552dcc01dface87
--
2182f6d50e2bcb77858aaab6001ebffdc13bee89 by Derek Mauro <dmauro@google.com>:
Use base_internal::AtomicHook instead of std::atomic for
StatusPayloadPrinter
Imports #661
PiperOrigin-RevId: 306514102
--
6f8047057f4530c17c06ab1737a1937c86402807 by Mark Barolak <mbar@google.com>:
Fix ABSL_RANDOM_RANDEN_COPTS setting on FreeBSD
Import of https://github.com/abseil/abseil-cpp/pull/664
PiperOrigin-RevId: 306485774
--
cb3b73b9607d0009bbcfd7766f4f1fa4fde9c8b9 by Abseil Team <absl-team@google.com>:
Avoid a -Wimplicit-int-float-conversion warning.
Without this explicit cast, this code produces a warning of "implicit conversion from 'const int64_t' (aka 'const long') to 'double' may lose precision" when this warning is turned on.
PiperOrigin-RevId: 306358838
--
ef895ea6b28c96b64531c218705bac9c3fa169d5 by Greg Falcon <gfalcon@google.com>:
Internal change
PiperOrigin-RevId: 306040909
GitOrigin-RevId: 2182f6d50e2bcb77858aaab6001ebffdc13bee89
Change-Id: I69555c1722745a74c1603c62a621ca765d253fe5
* exwm-workspace.el (exwm-workspace-switch): Stop aborting
recursive edit upon switching workspaces. Users should handle it
just like in regular Emacs (possibly customizing
`enable-recursive-minibuffers').
* exwm-workspace.el (exwm-workspace-switch): Abort recursive edit
before switching to other workspace. This avoids the usual
`set-window-configuration' calls (e.g., by `eval-expression') to
switch *us back to the previous workspace.
* Use base_internal::AtomicHook instead of std::atomic
std::atomic has a broken implementation on the Windows platform and it
is not conform to the ABSL_CONST_INIT macro when clang-cl is used as a
compiler: the macro is expanded to the [[clang::require_constant_initialization]]
attribute and the attribute cannot be applied to the broken std::atomic.
Therefore, std::atomic has been replaced with absl::base_internal::AtomicHook
to fix the compilation error (thank Derek Mauro for the suggestion).
Issue: #659
Signed-off-by: Pavel Samolysov <samolisov@gmail.com>
* Update build files for pull request
Co-authored-by: Derek Mauro <dmauro@google.com>
Start styling the Chord Drill Sergeant for mobile devices because that is that
device on which I will primarily use CDS.
I'm also deleting the debugger related code. I would like to support a debugger,
but I'm not currently using this one, so I am going to remove it to keep things
slender.
- Introduce TailwindCSS, which also introduced elm-live, index.html, index.css
- Add mobile-first styling for the preferences modal
- Remove unused code
Generate chords for a given key.
I believe my Theory.allChords function is taking a long time to generate all of
the chord possibilities. I would like to profile this to verify this
assumption. I think I can create a "staging area" for changes and only
regenerate chords when "committing" the options from the "staging area". This
should stress the application less.
TODO: Profile application to find bottleneck.
For the past two to three days, I've been searching for the name for the concept
of "C" or "A". From what I read, notes are specific things like C0 or C4, but I
wanted the name of the concept of a C. Thankfully today I discovered that this
is called a pitch class.
Only show the chords that we can fit on the piano.
TODO: Debug occasional instance where we render chords that do not fit. I am
unsure how to reproduce these states at the moment.
While I did change a lot of functionality, I also ran `elm-format` across the
codebase, which makes these changes a bit noisy.
Here is the TL;DR:
- Properly support chord inversions
- Ensure that the piano styling changes dynamically when I change the variables
like `naturalWidth`
- Add start and end notes to define the size of the piano and which chords we
create
- Support elm-format and run it across entire project
- Debug Misc.comesBefore
- Introduce a ChordInspector and debugger
TODO: Ensure that we only generate chords where all of the notes can be rendered
on the displayed keys.
TODO: Add preferences panel, so that I can do things like "Practice blues chords
in C and E with chord substitutions."
Remodel application to support the scientific pitch notation for notes. Instead
of supporting simply "C", support "C4". This change created cascading
changes. After refactoring for around an hour, I restored the app to a working
state. The current state is not desirable, but it compiles. More changes on the
way.
