Nice job. To add to the test db, works on Firefox 60.0.2 (64bit) on Ubuntu 18.04 too.
Show HN: Mimicking the Bloomberg menu widget without JavaScript
131–140 of 144 posts
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#132Yours is actually much smoother for me, but that might be due to some intended animation delays or something.
There's actually a very good reason to implement a delay in switching submenus. Recent versions of Apple's human interface guidelines don't make any mention of it, because those decisions are baked into the toolkit and not under control of application designers, but the earlier editions of Apple's guidelines went into some detail about why and how pop-up submenus were delayed. 1995 edition of Macintosh Human Interfac…
It should be extremely subtle that users can skim through the categories also. I think they call this debouncing in the JavaScript world.
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#133Earlier quoted context omitted.
You're right -- in fact it was at least 31 years ago! I just posted a comment about this with a link to the 1987 Apple Human Interface Guidelines and page snapshots explaining the design. https://news.ycombinator.com/item?id=17404345 pp. 87: Hierarchical Menus: https://i.imgur.com/RrEDo3m.png pp. 88: Figure 3-42: Dragging diagonally to a submenu item: https://i.imgur.com/a0gNWHh.png I also linked to an article showin…
I just added triangular hover regions based on the comments. Debug outlines showing the open paths to the submenus: https://vgy.me/nBfeiA.gif
Nicely done!
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#134Earlier quoted context omitted.
I was coding UI stuff for desktops in the 90's, and I'd take browser programming in 2018 any day.
At first the products were buggy, but got better with each release. Even now our Oracle Forms programmers get stuff done about 7x faster than the Dot-Netters, and with about 1/7 the code. It's embarrassing: RSI* City. The OF apps are ugly, but they "gitter done". (Oracle bleeped up the Oracle Forms installation process, but that's another story.) * Sometimes called "carpal tunnel syndrome"
So you save money on a programmer only to lose it on the people using it because of the UX.
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#135I don't mean to be overcritical of someone learning to code—this is much more a criticism of people upvoting links without clicking them—why is this on the HN frontpage? It doesn't work. At all. Try clicking on the "Markets > Read: Economics" link.
Works for me. https://vgy.me/DOVAXW.gif
Yeah, there's been a lot of new commits since I commented.
Looks like one of the commenters here—franciscop—fixed that particular issue just after my comment.
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#136Earlier quoted context omitted.
You could just create an invisible :hover::before on the tag that renders an invisible triangle that overlaps the neighbors. Since it's still part of the tag, as long as you're hovering over it, you won't activate other menu entries. You could even animate the triangle's size (or existence), shrinking it over time to mimic Amazon or Mac OS behavior. Set z-indices correctly so the right-hand panel is on top, and you'r…
You'd want to use clip-path which isn't supported that well yet, but it does let you define non-rectangular hover regions. But there is still a problems with this approach. It's subtle, but if you look at the Bloomberg implementation, if you move the pointer to the left at any point, it abandons the behaviour and highlights the menu item below the pointer -- even if the pointer is still inside the conceptual triangle…
[deleted]
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#137Earlier quoted context omitted.
At first the products were buggy, but got better with each release. Even now our Oracle Forms programmers get stuff done about 7x faster than the Dot-Netters, and with about 1/7 the code. It's embarrassing: RSI* City. The OF apps are ugly, but they "gitter done". (Oracle bleeped up the Oracle Forms installation process, but that's another story.) * Sometimes called "carpal tunnel syndrome"
So you save money on a programmer only to lose it on the people using it because of the UX.
I don't follow. To clarify, by "ugly" I meant aesthetically ugly, not usability problems. (Or at least "not fashionable".)
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#138Earlier quoted context omitted.
You can also use a very acute 3D perspective transform to create almost any quadrilateral shape, so the support can be a bunch better.
What the parent is describing isn't a shape at all, though. The behaviour is different depending on the direction the cursor is moving.
Built a quick demo that shows that (a) you can mostly do it with HTML/CSS and (b) the experience isn't great:
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#139I really, really do not get this obsession with Javascriptless interactivity. I mean, seriously. Its 2018. JS engines are REALLY fast. And by the way, lets not be deluded into thinking that the Chrome is a lightweight nothing without JS execution. There are already GPU-aided reflow/repaint operations, your whole UI context lives on a different thread, tons of services are pulled back for audio/video capabilities, not…
Just because a JS engine is really fast doesn't mean you should do everything in JS, esp if CSS is the right tool for the job (not to say that this particular demo is a good example of using the right tool for the job).
Sure, right tool for the right job, etc.
Animations are almost always better when they can be hinted to the GPU (will-change), can be transitioned with translate2d changes, and do not cause reflow by being used on absolute/fixed positioned elements. For example.
My point is that not using JS will not make browsing experience into something "pure". It will remain an incredibly compplex stuff in itself, which JS is only a part of. And when it comes to firing off XHR's, setting some data or providing interactivity (with real states, etc), then JS is a good tool for the job.
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#140Earlier quoted context omitted.
I completely disagree with this sentiment. Everything in a UI that you can do with a mouse should be tolerant of disabilities that people who use a mouse might be going throug (tremors etc). A user shouldn't have to try to do something and become frustrated in order to discover that it is "not for people with poor motor skills". We should do better. What you describe as "well worthwhile" still strikes me as woefully…
> Everything in a UI that you can do with a mouse should be tolerant of disabilities that people who use a mouse might be going throug (tremors etc). Why? Should we give up on first person shooter games? Set minimum mouse target sizes for RTS games? The point of the department menu is to convert dexterity into information rapidly. If you lack dexterity, that's no strike on your character, but it somewhat defeats the…
We're talking about websites. You're talking about games.