This is my first project created from scratch, designed to compare endorsements from two Seattle newspapers. Any feedback on the feel/appearance of the site or the state of the source code would be greatly appreciated .
Developed with HTML, SCSS, and JS. Built with Snowpack.
Live here: https://c29bbb1.netlify.app/
It looks pretty good.
In terms of the code, the only thing I can find that I don’t like is that the hover event on the rows on the left. To me that is weird UX. Why does the person’s title get highlighted? Why is the highlight the same as for the currently selected one? I would rather not have that, but have the pointer change to make it clear that something is selectable.
But still, it looks good.
I briefly scanned over the code and nothing popped out to me as problematic. The only thing is that you should look at breaking some of those files apart. I mean, 1500 lines is kind of long for a JS file. I start to panic whenever anything gets over 100 and 200 is way too long for my taste. I don’t know the library you’re using, but there should be a way to do it and doing so often improves your thinking about the code and makes it easier to work on.
But still, it looks very nice.
Thanks for the feedback.
I would rather not have that, but have the pointer change to make it clear that something is selectable.
So a hand pointer then? I originally considered that, but decided against it after looking into it.
On splitting the code: in order to avoid document.querySelector() being constantly called inside functions to fetch the same elements over and over, I used globals instead, which makes it difficult to sever functions from the file.
(Sidenote, create-react-app is 1151 lines long, is that still too much?)
Interesting article. The guy makes some good points. His main argument seems to be that non-link interactive elements (such as buttons) should not get the pointer cursor when hovered, only “links” should get the pointer cursor.
As applied to your project, remember that links can be both internal and external. Internal links would generally begin with the hash (<a href=#id>...</a>). I’d be tempted to argue that all of those boxes on the left side are really just internal links and thus the pointer cursor would apply here.
Speaking of internal links and those boxes, you didn’t actually use <a> for any of those and so I can’t get to them with the keyboard only. If you had used anchors (which I think you should) then they would all get the pointer cursor by default and we wouldn’t be having this discussion 
Yeah, I agree with bbs. As I (perhaps chauvinistically) interpret the article, buttons don’t need this because it is clear that they are buttons. It’s not clear to me that those in the left column are buttons. The catch phrase in UX is “don’t make me think” (also a great book). In order to figure out how to use that functionality, I needed to figure it out - it wasn’t clear to me.
Actually the entire row is selectable, not just the race, which means that bit of UX is even less intuitive than it’s being given credit for. What to do…
More generally, with a data set on one side and details on the other, that should imply some sort of selectability on the data set, right?
If you’re referring to keyboard navigation, that is available with the left/right arrow keys. I’m guessing that the popper with this information is too easily overlooked.
Alright, finally found some time to get back to this. I’ve changed the hover effect from highlighting the election cell to a gray border around the entire row. This I think effectively conveys that the entire row is selectable, but it also causes a shifting effect on the table that I can’t seem to get rid of. What do you think?