Discoveries #24 - JavaScript & UI
I’m such a UI person. It’s a blast for me to discover and try out new interface components on the web and for the web. Simplicity and a tidy text desert is not my thing. Here are a few JavaScript UI gems I found the other day for you…
- Frontle - BottomSheet
- downupPopup.js
- Pikaday
- Add to Calendar Button
- Tippy.js
- Responsive Full Page Scroll
- lucafalasco/scroll-snap
- Bgzy.js
- ScrollyVideo.js
- Cal-Heatmap
Frontle - BottomSheet
by Frontl (HyeongJun Yun)https://github.com/Frontle-Foundation/BottomSheet
BottomSheet is part of the Frontl multi-platform SPA framework from South Korea and is a vanilla JavaScript implementation of the Android Bottom Sheet to show options or settings. Very neat and useful for Web Apps.

downupPopup.js
by Ali Dinçerhttps://github.com/ali-dincer/downupPopup.js
Ali’s downupPopup is a wonderful UI element for replacing boring dialogs or showing additional information in a sliding panel, similar to the the previous BottomSheet. It masters HTML, forms and can be shown with a duration and full screen.

Pikaday
by David Bushell and Ramiro Rikkerthttps://github.com/Pikaday/Pikaday
This date picker is not the fanciest one, but it is very lightweight, has no dependencies and is written in plain JavaScript. The ease of use and the ability to style it however you want, makes it a great little thing.

Add to Calendar Button
by Jens Kürschnerhttps://add-to-calendar-button.com/
Letting the user select a date is just the first part of a process when it comes to making appointments. In the second part, the appointment must be added to the user's own calendar. This button makes it very easy in terms of Outlook, Google Calendar, Yahoo or as an ICS file.

Tippy.js
by James, somewhere from Australiahttps://atomiks.github.io/tippyjs/
Tooltip libraries really exist a lot. But Tiffy, a side project of Floating UI (now Popper), offers so many possibilities that I replace existing ones with it. Animations, Themes, Add-Ons, Plugins, and much more. Even SVG's are supported. Awesome!

Responsive Full Page Scroll
by Fabian Graßlhttps://github.com/fabeat/responsive-fullpage-scroll
If you throw this library on a bit of HTML you get a wonderful a full screen scrolling page that can be activated and deactivated using a media query. Perfect for marketing pages or photo slideshows.

lucafalasco/scroll-snap
by Luca Falascohttps://github.com/lucafalasco/scroll-snap
This library helps to snap a page when user stops scrolling. It is build on top of the CSS feature scroll-snap
, but offers a customizable configuration and a consistent cross browser behaviour.

Bgzy.js
by Nino Camdzichttps://ninocamdzic.github.io/bgzy/#
Visually appealing backgrounds are sometimes the salt in the soup. Of course, it depends on the photo and so that it does not look boring in the long run, Nico thought, then I'll change them in adjustable time periods with JavaScript. Great idea and nice implementation.

ScrollyVideo.js
by Daniel Kaohttps://scrollyvideo.js.org/
Parallax effects when scrolling through a website are well known by now. But the fact that you can use a video for this was new to me. What an idea! And how cool it looks in the end…

Cal-Heatmap
by Wan from Dubaihttps://cal-heatmap.com/
Anyone who has ever been on GitHub knows the heatmaps that show when and how often commits have taken place. But this kind of chart can be used for other things, Wan probably thought and made a library out of it.

You can interact with this article (applause, criticism, whatever) by mention it in one of your posts or by replying to its syndication on Mastodon, which will also be shown here as a Webmention ... or you leave a good old comment with your GitHub account.
Webmentions
No Webmentions yet...
In case your blog software can't send Webmentions, you can use this form to submit me a mention of this article...
Comments