On the old website I had a new single post for things I discovered and looked at! Crazy…
I will update this post with things I find, enjoy and you might like these too over the coming months.
Far more organised on my own page now!
Awesome curated JS libraries & resources
Dynamic Web Applications
HTMX
htmx is a lightweight JavaScript library that enables modern, dynamic web applications using simple HTML attributes. It allows you to make AJAX requests, update the DOM, and create interactive pages without writing JavaScript.
htmx works by adding attributes to HTML elements, defining how they interact with the server.
Part of my toolbox for years and a perfect fit when building sites with WordPress.
Example 1: Load Content via AJAX
|
1 2 3 4 |
<button hx-get="/load-content" hx-target="#result">Load Data</button> <div id="result"></div> |
Clicking the button sends a GET request to /load-content and inserts the response into #result.
Example 2: Submit a Form Without JavaScript
|
1 2 3 4 5 6 7 |
<form hx-post="/submit-form" hx-target="#message"> <input type="text" name="username" required> <button type="submit">Submit</button> </form> <div id="message"></div> |
Submits the form without reloading and displays the response inside #message.
Example 3: Infinite Scrolling
|
1 2 3 |
<div hx-get="/next-page" hx-trigger="revealed" hx-swap="afterend"></div> |
Automatically loads more content when the user scrolls down and reveals the element.
Hyperscript
HyperScript is a declarative scripting language designed to enhance interactivity in web applications without writing complex JavaScript. It works as a lightweight alternative to JavaScript for handling events, animations, and UI interactions directly within HTML.
It is often used alongside htmx to simplify frontend development by keeping logic inside HTML attributes instead of writing separate JavaScript files.
Instead of writing JavaScript like this:
|
1 2 3 4 5 |
document.querySelector("#btn").addEventListener("click", function() { document.querySelector("#box").classList.toggle("active"); }); |
You can replace it with a simple HyperScript attribute:
|
1 2 3 4 |
<button _="on click toggle .active on #box">Click Me</button> <div id="box" class="box"></div> |
When clicked, the button toggles the .active class on #box.
3D Viewer
Babylon.js Viewer
Babylon.js Viewer is a ready-to-use web-based viewer for rendering 3D models using the Babylon.js engine. It simplifies the process of embedding and displaying 3D content in a web page without requiring deep knowledge of the Babylon.js framework.
Key Features of Babylon.js Viewer:
• Easy Embedding: Allows you to display 3D models in an HTML page with minimal setup.
• Supports Multiple File Formats: Compatible with glTF, .obj, .stl, .babylon, and more.
• Customizable UI: Offers built-in UI controls like zoom, rotation, and environment lighting.
• Configurable via HTML & JavaScript: Can be used directly with HTML tags or JavaScript for advanced customization.
• WebGL & WebGPU Support: Uses Babylon.js’s rendering capabilities for high-performance 3D rendering.
• Works in All Modern Browsers: No additional plugins required—just a browser with WebGL support.
How to Use Babylon.js Viewer
You can quickly integrate it into your webpage by adding the following script:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <script src="https://preview.babylonjs.com/viewer/babylon.viewer.js"></script> </head> <body> <babylon model="https://models.babylonjs.com/DamagedHelmet/glTF/DamagedHelmet.gltf"></babylon> </body> </html> |
This simple code will load and display a 3D glTF model inside a <babylon> HTML tag.
Advanced Usage with JavaScript
If you need more control over the viewer, you can initialize it via JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="viewer-container"></div> <script> BabylonViewer.viewerManager.createViewer(document.getElementById("viewer-container"), { model: { url: "https://models.babylonjs.com/DamagedHelmet/glTF/DamagedHelmet.gltf" }, engine: { antialiasing: true } }); </script> |
When to Use Babylon.js Viewer?
• When you need a quick way to embed 3D models in a webpage.
• If you want a lightweight viewer without setting up a full Babylon.js scene manually.
• For non-developers who want to display 3D models without deep coding knowledge.
• In e-commerce, gaming, and architectural visualization projects.
Gallery
lightGallery
lightGallery is a powerful, flexible, and feature-rich JavaScript library for creating responsive, touch-friendly, and highly customizable image and video galleries. It is often used for websites requiring an elegant and interactive lightbox experience.
Key Features
- Responsive Design – Ensures your gallery looks great on all devices.
- Touch & Gesture Support – Smooth mobile experience with swipe gestures.
- Supports Videos – Embed YouTube, Vimeo, Wistia, and self-hosted videos.
- Lightweight & Fast – Optimized for performance with minimal dependencies.
- Highly Customizable – Modify themes, animations, and layout styles.
- SEO & Accessibility Friendly – Supports captions, alt texts, and deep linking.
- Plugin Extensibility – Enhance functionality with zoom, thumbnails, autoplay, and more.
- Framework Compatibility – Works well with React, Vue, Angular, and jQuery.
Installation
There are multiple ways to install and use LightGallery.js. The most common methods are via npm or CDN.
Using npm (Recommended for Developers)
npm install lightgalleryUsing a CDN (Quick Setup)
Add the following links to your HTML file:
|
1 2 3 4 |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery/css/lightgallery.css"> <script src="https://cdn.jsdelivr.net/npm/lightgallery/lightgallery.umd.js"></script> |
Basic Implementation
Setting up a gallery with LightGallery.js is quick and easy. Follow these steps:
1. Create an Image Gallery
|
1 2 3 4 5 6 7 8 9 10 |
<div id="gallery"> <a href="image1.jpg"> <img src="thumb1.jpg" alt="Thumbnail 1" /> </a> <a href="image2.jpg"> <img src="thumb2.jpg" alt="Thumbnail 2" /> </a> </div> |
2. Initialize LightGallery
|
1 2 3 4 5 6 7 8 |
<script> lightGallery(document.getElementById('gallery'), { plugins: [lgZoom, lgThumbnail], speed: 500, }); </script> |
This script will activate the gallery with zoom and thumbnail plugins enabled.
