#статья дня

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

И вот, небезызвестный Ахмад Шадид с очередной реализацией, теперь на SVG: https://ishadeed.com/article/star-rating-svg/

Как всегда, читать стоит не ради самой реализации — может, вам звёздный рейтинг и не пригодится-то никогда — а ради объяснения нюансов работы с SVG.

#svg #css #star #rating #widget

#такое дня

Ничего необычного на иллюстрации не замечаете?

А здесь происходит ого-го какая драма!

Итак, я понятия не имею, зачем это всё делается, но всеми так любимый виджет выбора aka select до сих пор получает обновления!

У select только два плюса, которые могут заставить вас его выбрать: исключительное удобство на мобильных устройствах и возможность длинному списку вылезти за пределы не только видимой области браузера, но и окна вообще.

Впрочем, из-за этой особенности он не отображается в Zoom- и Meet- и прочих презентациях.

Ладно, к делу. Вы в курсе, что начиная с Chrome 119, Firefox 122 и Safari 17 вы можете использовать горизонтальный разделитель чтобы разбить список для выбора?

Да-да, больше никаких <option disabled>-----</option>! Просто ставите <hr> и всё.

Ну, типа... ну ок.

Все, конечно, ждём popover и selectlist. Эта игра в доделки раздражает.

#css #select #form #widget

#инструмент дня

Мой самый любимый виджет из всех — Modal Bottom Sheet. Это как в построении маршрута на Google Maps. Шторка, по-нашему. Дёргаешь её туда-сюда, забавно.

Так вот, в мобильных фреймворках вроде того же Flutter и SwiftUI шторка реализована из коробки, а для веба — приходится изгаляться.

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

Так вот, собственно, к чему это я: https://silkhq.co/

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

Множество примеров, нативные анимации, жесты. Одна проблема: платная для коммерческого использования. И не открытая.

Две, получается, проблемы :(

P. S. В комментариях пишут, что так-то три проблемы. Третья — React. Штош.

#react #sheet #widget