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çer 
https://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 Rikkert 
https://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ürschner 
https://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 Australia 
https://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ßl 
https://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 Falasco 
https://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 Camdzic 
https://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 Kao 
https://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 Dubai 
https://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.