Hacker News Reader

Comment by dglass | Hacker News Reader

The date picker is pretty impressive. Well done.

https://jetbrains.github.io/ring-ui/master/index.html?path=/...

Except that the top bar covers about the top 2/3 of it on mobile safari. This glitch renders essentially the entire site useless.

(What’s up with floating top bars? Either just make them be a real part of the page, or move them to the bottom, or, if absolutely necessary, keep them floating and test the heck out of them. Because that floating element that can’t be dismissed will result in a near 100% reduction in your conversion rate all by itself.)

This is true in Firefox and Chrome on Android as well.

I guess this is more desktop-centric than most other browser-based UIs - I mean, JetBrains is mostly developer tools, and most people don't use their phone for programming...

You hope...

What's broken is the Storybook UI which is only used to demo the components. The components themselves should work fine on any modern browser.

People use everything for programming. Android has the AWD ide which is not bad overall for development

Storybook is not supposed to be used on mobile, it's a desktop optimized UI.

Ok but the reason it is broken really has nothing to do with mobile vs desktop.

It sure seems like the only issues are those on mobile

It's a bug that manifests itself on mobile, but it probably does the same thing on desktop too if you shrink the window really small, and even if it doesn't, it's just a CSS big that is triggered by mobile browsers. There's nothing big that is preventing it from working fine on mobile. Most of the pages do work fine.

But then, how do you test components on mobile? Or are we not supposed to ask that?

Why would you test components that can only be reached on desktop on mobile? These are components to be used inside JetBrains IDE.

It sure seems like people are reaching this on mobile

JetBrains IDEs are not on mobile though. It doesn't matter if they're incidentally accessed on mobile if they're not actually designed to be used on mobile.

These components are not used inside any Jetbrains IDEs. Those IDEs are, of course, written in Java and cannot use a browser-based UI framework. This is for "our web-based products like YouTrack, Hub, TeamCity, and Upsource" (per the original release blog post for Ring UI). Those products support mobile.

They are using Chromium Embedded Framework inside JetBrains IDEs.

use this link for detached view: https://jetbrains.github.io/ring-ui/master/iframe.html?id=co...

Interestingly enough, it doesn't work on mobile because you can't scroll the vertical sections properly.

On the toolbar their is a button to change the viewport size to 3 options small mobile, large mobile or tablet

Do you use JetBrains software on mobile? This is for building stuff inside JetBrains.

I don't but I do use, and am interested in, their software. So it's a bit disappointing to see a link to their site while using hn on mobile, only to get to a page that doesn't display anything useful.

But the components are not supposed to work on mobile so what is there to see?

You seem to assume that everybody on this website knows what Ring UI is. But I didn't know and judging from quite a few other comments here, I wasn't the only one. All we had to go by was the title "JetBrains Ring UI" and a comment stating that a date picker looks nice. Without any kind of description it's not that weird to assume a website with a datepicker works decently on mobile.

I wouldn't be investing effort improving the mobile browser behavior of desktop oriented controls for the benefit of making it a better HN submission.

I think you've missed the point of the previous comment.

So, these are components for building their IDEs? They can't be used for anything else?

JetBrains has web applications which is where these are used - YouTrack, Space, TeamCity.

I'd totally use them on my mobile devices if versions for them existed. They're just too convenient even though they lack a keyboard. Wish I could use them to write software.

Yep. Scrolled into the 2100s and back into the 1800s in a few seconds, then decided to figure out which day of the week I was born, which took about three seconds. In most date pickers this would've taken O(year difference * month difference + day of month), here it took something like O(year difference + month difference + day of month).

This is the first time I see big O notation applied to user experience and it’s genius, I’ll use it in my work from now on

It doesn’t scroll on mobile safari.

It scrolls on desktop Safari, but it's super "jumpy" as you scroll. Looks like it's jumping back and forth between an old and new positions.

Otherwise, the design is really nice. Date pickers are generally pretty "meh".

Wow, that's gotta be the nicest looking and most functional date picker I've ever seen. Date pickers are normally so hit or miss imo but this one is a hit out of the park.

Looks great in theory, but does not work on Android Firefox unfortunately.

If you want mobile-enabled components like this Ionic has many. Here’s the datetime: https://ionicframework.com/docs/api/datetime

Ionic's is probably one of the best date+time combo (other examples are always strong in one and terrible in the other, time being the thing that often gets short shrift)

I also quite like Quasar's date picker https://quasar.dev/vue-components/date

Though do not even look at their time picker... It's a mess, I roll a custom component for time when I need it.

Ah, these are all quite nice! So much better than the original iOS one that requires tediously scrolling for ages to input anything interesting.

It's good to finally see some innovation in the datepicker space.

Damn that is good. Even with the swipe gesture on mobile. I think we are webscale now

Interestingly it lets see both the iOS and Material Design versions of the component.

iOS has a strange combination of arrows to handle the month: right to expand the months dialog, down to close it. It took me a while to understand that the down arrow would bring me back to the calendar. Why not right and left? Maybe it is how it works on a Mac too.

MD and anything else I remember has a down arrow to expand and an up arrow to close.

just a bit unfortunate that the material design one still has the iOS "wheel" for picking year and month

Not supposed to be used on mobile. These are components to be used for building stuff inside JetBrains.

Almost no contrast on the year. Clicking the year doesn't change the year in (either) textbox but scrolls a different section. Month 'highlighting' overlaps with adjacent months including picking January which highlights both January and December. If you type a text date (which is in a different edit box for some reason) and then click outside the box it won't 'save' the changes because you have to hit enter. If you open up the picker again it will at least remember what you typed before which is now different from the text date above itself. Mousewheel scrolling individual items like months doesn't actually go to the next month it just scrolls the calendar a bit, but sometimes skips around: while scrolling down it went from 11 Aug 2000, 2 Jan 2002, 22 Sep 2000 (I think because in some states my cursor was over an item). What did you like about it?

It's not bad, but I have grown really fond of Grafana's date/time picker and can whip up a clone of that using React-Bootstrap and React Datepicker (https://reactdatepicker.com) in about ten minutes :)

Not being able to go back months or years without pressing the back button 3000 times is the worst possible design for a date picker.

I am assuming that you're judging the behavior by the minimal example in the top 1% of the site. If you scroll further, you will notice how extensible it is to support not only month and date navigation but many other customizations.

Exactly. There are tons of different ways to solve that problem in react-date picker, this being one of them: https://reactdatepicker.com/#example-year-dropdown

I also assumed it was limited in such ways. Mostly because it is extraordinarily rare that anyone bothers to enable those. I'd much, much, much rather have a singular, consistent full UX available to me instead of defaulting to some "simple elegant" artificially stunted version.

A hundred more clicks than JetBrains' one, though.

For what it's worth, the Grafana date picker[0] is "just" react-calendar[1]. The time range picker you see on a dashboard uses that and a bunch of other (custom) stuff.

(I work on grafana frontend)

[0]: https://github.com/grafana/grafana/blob/4b2a9406596ba63a6945...

[1]: https://www.npmjs.com/package/react-calendar

We just deployed Grafana across our company and are very impressed with it. All this functionality for $8/user/mo is amazing.

Funnily enough I have a pet peeve with Grafana's picker (which is overall quite nice) - I can't copy and paste the whole date range from one window to another in one go. I'm often punching in varies specific datetime ranges across multiple dashboards so this comes up all the time every day. Sure I've added data links for the cases that I use most frequently but I can't do that for everything. The "recently used ranges" (which is a neat feature) doesn't seem to work across dashboards and seems to require a page reload which baffles me a bit.

Please, just let me type dates.

this. please.

You can, just try clicking on it and typing: "feb 22 1985"

We tend to go dogmatic on date pickers. Gotta use them everywhere someone asks for a date. That's the problem right there.

It's like the classic "text field versus dropdown for state abbreviation." There are a lot of dates people prompt for that the user KNOWS and can type faster than they select. The obvious one being "enter birthdate" as part of account creation processes.

The "comprehensive" date pickers with mini calendars and things are more usable, IMO, when you're interested in a relative date. What you really want is "next Tuesday" and you need the mini-calendar to convert that to "2022-10-11". Maybe they can be bypassed by figuring out purpose-built specific solutions to the prompt. Appointment scheduling, for example, might be better suited by showing a list of available slots rather than prompting for an arbitrary date.

I wasn't expecting much, but I got a whole lot. Probably the best date picker I've ever seen

Except they forgot to think about mobile usability. On Android it just doesn't work like it should.

> pretty impressive

???

https://files.catbox.moe/4yykhw.webp

My grandmother can program better than that.

It's incredible they basically built it with a completely different design in mind. Making use of scrolls/swipes for months and years on the same screen.

Impressive.

It looks nice, but that's it. Usability is pretty bad. e.g. keyboard use completely breaks it on Firefox (didn't test other browsers).

Funny enough, it doesn't work is Desktop Safari.

Does not work on android chromium either

It looks good though took me longer to pick my birth date. I don't care how many days a month in certain year has, or day number is at which day of week. I guess it comes down to each own preference. One thing at a time is more focus.

I tried selecting a particular date. I couldn't. The selection (and the resulting date value in the text column) remained in the previous year.

I refreshed the browser and came back, now I can select the date.

Very stylish, but also randomly resets to 2018 when I mousewheel scroll, which is kind of unfortunate. The fundamental UI design for it is great.

Reply on news.ycombinator.com