Discoveries #13

This month, Discoveries is all about JavaScript-driven “components” that you can quickly and easily add to your own website to enhance it. Be it with a simple code viewer or an ingenious print function or simply to display or filter photos. Go on a journey of discovery…

• indiepen
• Panzoom
• guggenheim.js
• Lazy Loading Mosaic Tiling Plugin
• ScrollTrigger
• WinBox.js
• Print.js
• Simple Text Annotations
• Clicky Menus!
• Responsive Dropdown Menu (Vanilla Navbar Menu)
• Smooth-side-bar
• Podtablejs

---

indiepen

by Hendrik and André from yetanother.blog 
https://indiepen.tech/

indiepen is a solution for showing code samples without the need of a code sharing platform, like codepen. Just reference a index.html, main.js and styles.css from wherever you want and indiepen is wrapping it with a neat viewer inside an IFrame.

---

Panzoom

by Cesar Morillas 
https://github.com/cmorillas/panzoom

Implementing panning and zooming with JavaScript is not the easiest thing. Cesar has done all he work by creating this tiny ES6 module. It works both on a smartphone and in a desktop browser via mouse wheel. It is nearly perfect to zoom into an image to show its details.

---

Lazy Loading Mosaic Tiling Plugin

by Christopher Peloso 
https://github.com/cspeloso/Lazy-Loading-Mosaic-Tiling-Plugin

Do you have a bunch of images you want to show in a masonry layout on your website? Whith Chris’ JS library it’s just a one-liner. It supports responsiveness and lazy-loading in tiny 132 lines of JS code and 4 CSS classes. Amazing!

---

guggenheim.js

by Will McKenzie 
http://oinutter.co.uk/guggenheim.js/

Another approach on showing images in a gallery is Guggenheim.js. It’s not responsive, but has sophisticated filtering options. Perfect for quickly finding a keyworded photo.

---

ScrollTrigger

by Greensock Inc. 
https://greensock.com/scrolltrigger/

Greensocks ScrollTrigger is unparalleled among scroll animation libraries. Based on its own GSAP library, ScrollTrigger can animate almost everthing, when the user is scolling through a website. Want to see it in action? Visit their demo page with dozens of examples…

---

WinBox.js

by Nextapps GmbH 
https://nextapps-de.github.io/winbox/

The guys from Nextapps have created a JavaScript library to show windows on a website. It’s window manager has features like minimize, maximize, move, resize, fullscreen and much more. Always wanted to recreate Windows 3.11? Let’s go …

---

Print.js

by Rodrigo Vieira 
https://printjs.crabbly.com/

Print.js is a library, that helps you printing anything, which can be shown in a browser. Primarily written to print PDF, it supports now also HTML (including forms), JSON and all sorts of images, even multiple. It formats the wanted content if needed and shows up the browsers print dialog. Pretty neat.

---

Simple Text Annotations

by Jacek Jarczok 
https://github.com/k-son/simple-text-annotations

Some texts on websites require commenting. Jacek has developed a simple and elegant solution for such annotations, that works on any device without any dependencies.

---

Clicky Menus!

by Mark Root-Wiley 
https://github.com/mrwweb/clicky-menus

Mark has created a one-level dropdown navigation menu, which is fully accessible, either by mouse click, touch or keyboard. It supports all Modern Browsers such as Firefox, Chrome, Edge, and even the “new IE” Safari.

---

Responsive Dropdown Menu (Vanilla Navbar Menu)

by Rizal 
https://github.com/therizaldev/vanilla-navbar-menu

This classic responsive sidebar from Rival is beautifully solved with CSS and just a little JavaScript. See the demo …

---

Smooth-side-bar

by Pham Quang Huy 
https://github.com/dunbom6612/smooth-side-bar

This sidebar solution from Pham Quang Huy recalls the sidebars Microsoft, Atlassian and others are using in their dashboards. You can fold/unfold them in order to show menu details or the icons only. See the demo …

---

Podtablejs

by Afuwape Sunday 
https://github.com/inlogicstudio/podtable

Podtable is a library to make tables responsive to fit smaller devices. It shows as many columns as possible and hides all others behind a detail button to show them in a separate row if needed. It has no dependencies and varius options to customize the behaviour. See the demo …