Drum Machine in Vue, Game Boy edition

Drum Machine in Vue, Game Boy edition
0

Here’s my take on the drum machine project. It does pass fcc’s automated tests though I did have to use some vanilla javascript to do so. The game boy is all css and the background is only visible on computer screens and tablets. This makes your phone into a game boy, kinda. Oh - this is the first project I’ve built using the Vue CLI. It took me a week to find my way around, but I really like building in this environment so much better than linking in scripts via cdn’s.

https://bradleyhop.github.io/drumMachine/

I like this one a lot. Very creative. I know you are trying to emulate the look of a Game Boy, but since this is a web based application I have to evaluate it as such. A few issues:

  • The black letters on dark purple do not have enough color contrast and are thus not accessible.
  • If I shorten the browser window so that the Game Boy is taller than the window I do not get a vertical scroll bar.
  • Because these are buttons, they should technically have an outline on them when focused (or at least when focused using the keyboard).
  • Increasing the text size causes the following styling issues:
    • The bottom row of buttons break out of the Game Boy.
    • The letters are not centered on the buttons any more.
    • The Game Boy travels up the page until the top of it becomes cut off
    • The text in the green screen breaks out of the screen .

Overall this is very nicely done. Most of the issues above are cosmetic and don’t break the functionality. But if you like a good challenge of trying to make this responsive at any text size and any width/height then hopefully I’ve given you a few things to think about.

1 Like

Thank you so very much, @bbsmooth ! I tried addressing your list of issues in order below and have some questions, too:

  • I changed the color of the letters to improve contrast.
  • Resizing the browser window will show the scroll bar now.
  • If they’re not buttons anymore, the don’t need to have the outline on them anymore, right? :wink: I changed them to generic div’s to keep the look sleek. However, I feel like this is cheating (the user’s ability to use the site). But not really, since keypresses activate the action. Thoughts?
  • How can the user increase only the text size? Zooming the site makes everything zoom together. If I go into the console and change the root font-size, ya things break. What am I missing? Any advice of having everything scale? Like I used rem units for some divs, but px for others. Should I use rem or % for my app divs so they contain the larger text (that I can’t figure out how the user can change)?

Thank you again for taking the time and offering your detailed and informative feedback.

Concerning the buttons, you don’t want to change them to divs, you had them correct as buttons the first time. Change them back. The button element gives you all the accessible keyboard functionality you need. Divs do not. I understand your concern about looks, but you should not sacrifice accessibility for it. When the keyboard focus is on a button there should be an indicator on that button. It doesn’t have to be an outline, you could use a border, or go with a different background. You would do this using the :focus pseudo class for the buttons. If you really wanted to, you could limit the focus indicator to just keyboard input. There is a way to determine if the user clicked the button with the mouse or keyboard (I will leave that up to you to figure out). Bottom line, when using a keyboard I should be able to see where the current keyboard focus is on your page.

As far as increasing text size only, using FF, go to the View - > Zoom menu and activate ‘Zoom Text Only’. While holding down the Ctrl key, scroll your middle mouse button to increase the text size. The letters on your buttons are behaving better now (they are only offset a little) but the Game Boy itself is still moving up the page (though not as much as last time I checked). The biggest issue remaining is that the sounds with longer names are still breaking out of the green screen.

There are also browser extensions that will allow the user to increase the text size. I just find the method above easiest to use when evaluating web pages. I highly recommend you always do this with whatever projects you are working on. And give it a try on any web sites you visit. You’ll be surprised how many of them start to fall apart after increasing the text size even a little.