Покритикуйте, пожалуйста, мою первую работу на JS

[Was-Ja]

Добрый день и с наступающими и наступившими Вас праздниками!

С помощью этого форума недавно начал писать на JS и хотел бы выставить на Вашу критику мою первую попытку сделать что-то полезное.

Пожалуйста, покритикуйте, мою базу поиска по всем на данный момент известным молекулам и их пространственному виду-конформациям

Спасибо!

[рони]

Was-Ja,
над дизайном поработайте ...

[Was-Ja]

Спасибо большое за ответ!

Скажите, пожалуйста, а в чем конкретно есть неудобство или неприятие дизайна? Я не прикалываюсь, но реально не понимаю, что не так, наверное потому-что всегда был бекендщиком.

Спасибо!

[voraa]

HTML это не просто некий набор элементов, с которыми можно вытворять всякие штуки. У них есть семантика.
Кнопка - что бы что то сделать.
Ссылка - чтобы куда то перейти.
Поле ввода (включая чек-бокс), что бы ввести и передать какую то информацию.
Но щелкать по чекбоксу, что бы вывести информацию.... Это что то совсем не то.
Я бы еще как то понял, что сначала нужно отметить чекбоксы, что бы потом выводить различную информацию, в зависимости от отмеченных.

Иногда конечно хочется изобрести что то свое.
Но не нужен велосипед с треугольными колесами педали которого надо крутить ушами.

Есть вполне стандартные интерфейсы, которые всем знакомы.
Например кнопка с надписью "Помощь". Все просто кнопка и 99% догадаются для чего она. И не надо будет дополнительно писать "Нажмите на этот чекбокс для ознакомления с правилами поиска".

Placeholder(ы). Я встречал мнение многих дизанейров, что это зло.
Один из аргументов такой: Я поставил курсор, начал писать - и он исчез. А я забыл (сразу не рассмотрел) что там. То ли <10000, то ли <100000. Что бы уточнить приходится стирать написанное. Лучше уж подсказка мелким шрифтом под строкой

Вот небольшой список материалов по дизайну. Читать можно и с гугл-переводчиком.
Там много ссылок на более подробные рассмотрения
https://ishadeed.com/article/clickable-area/
https://adamsilver.io/articles/form-...one-blog-post/
https://gerireid.com/forms.html

[NeoN]

как по мне, можно бы добавить отступов добавить. а результат выводить в табличной форме какой-нибудь. с границами между отдельными результатами

[Was-Ja]

Спасибо большое за классные советы!

voraa - спасибо за ссылки и классное и понятное объяснение! Ссылками уже зачитываюсь!

С Хелпом - да, я понял, что зверски накосячил, простите, пожалуйста, чекбокс на кнопку исправлю.

Посоветуйте, пожалуйста, а подсказки на каждой строке (которые я в .title картинки с вопросительным знаком засунул) как удобнее реализовать? Мне под каждую строку хочется написать довольно много текста и я вижу, что то, как я реализовал довольно не красиво, но не додумался как исправить.

Скажите, пожалуйста, а с поворотами и движением молекул - сильно все плохо? Это когда в поиске, например, C10N2O3H1-999 ввести и переключить кнопку в результатах 2Д на Conformer#1 и крутить саму молекулу мышкой. Наверное у меня все так было не понятно реализовано, что никто до этого даже не дошел...

Спасибо!

[voraa]

Ну у меня с пространственным воображением не очень. Поэтому не всегда понимаю, что куда должно крутиться.
Иногда цепляю за какой то атом, тяну его, а он почему то начинает двигаться в противоположном направлении.

Есть еще такой эффект. Начинаешь тянуть и наверно выходишь мышью за пределы зоны (которая, кстати, никак не обозначена). Потом возвращаешься, снова хватаешь за атом, а молекула делает какое то нервное движение и переходит в другое положение.

[Was-Ja]

Спасибо большое voraa!

Я видел какие-то непонятки, но не смог сам сформулировать.

Ну у меня с пространственным воображением не очень. Поэтому не всегда понимаю, что куда должно крутиться.
Иногда цепляю за какой то атом, тяну его, а он почему то начинает двигаться в противоположном направлении.

понимаю проблему, не понимаю как разумно решить. Кликая на канвас я формально кликаю не на атом, а на поверхность сферы с центром в центре молекулы и кручу за эту сферу. Наверное для наглядности мне надо нарисовать центр этой сферы и луч до мышки, тогда будет понятнее, постараюсь на днях исправиться.

Есть еще такой эффект. Начинаешь тянуть и наверно выходишь мышью за пределы зоны (которая, кстати, никак не обозначена). Потом возвращаешься, снова хватаешь за атом, а молекула делает какое то нервное движение и переходит в другое положение.

Это баг. Я его уже исправил. Я сбрасывал отрисовку, если выходил за зону канваса. Из-за этого молекула возвращалась на то положение, на котором она была при нажатии кнопки мыши.

По видимому я на столько нежно относился к своему софту, что не удосужился сам сделать такой эксперимент и не заметил сам, спасибо большое, что увидели!!!

[voraa]

Кликая на канвас я формально кликаю не на атом, а на поверхность сферы с центром в центре молекулы и кручу за эту сферу.

Вот этого я не сообразил.
Тогда ясно. Я тащу не атом, а кручу сферу. И атомы, которые находятся на дальней части сферы, будут двигаться в противоположном направлении.
Но этого никак не видно, где они - ближе ко мне или дальше (на дальней половине сферы). Может делать их разного размера? Те, что ближе - больше, чем дальше, тем меньше. Перспективу, так сказать, ввести.

[Was-Ja]

Вот этого я не сообразил.
Но этого никак не видно, где они - ближе ко мне или дальше (на дальней половине сферы). Может делать их разного размера? Те, что ближе - больше, чем дальше, тем меньше. Перспективу, так сказать, ввести.

Спасибо большое за советы!

С перспективой - можно и, наверное - самое простое, хотя тогда и шрифты, и расстояния между атомами тоже скалировать придется - ведь можно включать не только шарики, но и названия атомов и изотопов.

Да, провидимому без OpenGL не реально. На нем на PC у меня отрисовка гораздо реалистичнее получается, но когда я попробовал это на WebGL перенести, то у меня не все работает как я хочу.

Если с WebGL быстро проблему не решу, то прикручу перспективу.