DEV Community: jQueryScript

EPDOptimize: Dither Images for E-Paper Displays in JavaScript

jQueryScript — Fri, 22 May 2026 04:47:04 +0000

EPDOptimize: a JavaScript library that reduces, tone-maps, and dithers images for color e-paper displays.

Key features:

Calibrated palette support for Spectra 6, AcEP, and custom displays
Nine error diffusion kernels plus ordered and random dithering modes
Tone mapping with S-curve, exposure, and saturation controls
LAB dynamic range compression for e-paper's limited lightness range
Automatic image classification and processing suggestions
Browser (Canvas API) and Node.js support

Useful for eInk picture frame projects, hardware image converters, and any tool that needs to render photos on e-paper hardware.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Planet Avatar: Generate Deterministic 3D SVG Avatars from Any Seed String

jQueryScript — Thu, 21 May 2026 08:50:50 +0000

Planet Avatar: a JavaScript library that generates deterministic planet-style SVG avatars from any string or number seed.

Key features:

Stable avatar output from user IDs, emails, or names
Self-contained SVG strings
Vanilla JavaScript core API
React and Vue adapters
Custom variants, palettes, rings, and titles

Useful for profile UIs, dashboards, team lists, comment feeds, and placeholder avatars.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

phantom-ui: DOM-Measured Skeleton Loaders for Any Framework

jQueryScript — Thu, 21 May 2026 05:43:12 +0000

phantom-ui is a Web Component skeleton loader that generates shimmer placeholders from your real DOM. Wrap any UI in <phantom-ui loading> and it measures the position and size of every leaf element, then overlays animated shimmer blocks at the exact coordinates. No separate skeleton layout to write or maintain.

Works in React, Vue, Svelte, Angular, Solid, Qwik, and plain HTML. About 8kb gzipped via CDN. Supports shimmer, pulse, and breathe animations. Available on npm or as a script tag.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Astro-native masonry layout component

jQueryScript — Wed, 20 May 2026 04:14:23 +0000

Astro Masonry: an Astro-native component for building responsive masonry layouts with balanced columns, auto-sizing, breakpoints, and keyboard navigation.

Useful for:

Photo galleries
Portfolio grids
Blog card layouts
Resource directories
Pinterest-style content feeds

It supports fixed columns, responsive column caps, shortest-column balancing, sequential ordering, and accessible labels.

👉 Blog Post

👉 GitHub Repo

quick-avatar: Deterministic PNG avatars for your projects.

jQueryScript — Tue, 19 May 2026 08:13:45 +0000

quick-avatar: a JavaScript library that generates deterministic PNG avatars from any seed string. User IDs, emails, usernames, anything. Same seed, same avatar, every time.

Key features:

5 built-in illustration sets (solid white, transparent, B&W)
Browser, React, Node.js, and SSR support
CDN mode for zero-bundle image delivery
TypeScript-first with full type exports
Self-hostable with a custom CDN base URL

Great for filling in placeholder avatars in apps where users haven't uploaded profile photos yet.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

glur: Fast Gaussian blur in pure JavaScript via IIR Filter

jQueryScript — Tue, 19 May 2026 07:22:44 +0000

glur: a pure JavaScript library that applies fast Gaussian blur to RGBA Canvas image data and 16-bit grayscale buffers.

Useful for:

Canvas image editors
Blur preview sliders
Worker based image processing
Grayscale masks and brightness channels
npm or browser module usage

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

dither-avatar: Deterministic SVG Avatars from Any Seed String

jQueryScript — Mon, 18 May 2026 10:49:34 +0000

dither-avatar: a JavaScript library that generates deterministic dithered SVG avatars from any seed string. Zero dependencies, works in any JS runtime.

Key highlights:

Unique avatar per seed (username, ID, email)
Returns raw SVG or data URI
React components included (DitherAvatar and DitherAvatarSVG)
Bayer 4×4 ordered dithering for the pixel grid pattern
Full TypeScript support

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Show-When Web Component: Conditional Visibility with URL, Media & Support

jQueryScript — Fri, 15 May 2026 03:58:06 +0000

show-when: a Web Component that conditionally shows or hides HTML content based on browser environment state.

Key features:

URL query parameter matching (key or key=value)
Hash-based visibility with live hashchange reaction
CSS feature detection via CSS.supports()
Media query matching with live updates
Network status detection (online/offline)
A companion hide-when element for inverted logic

Great for progressive enhancement, debug panels, offline notices, browser compatibility messages, and locale-based content blocks. No framework required.

Full setup guide, examples, and attribute reference: [https://www.cssscript.com/conditional-content-visibility-show-when/]

GDPR Cookie Consent Banner With JS Examples & API

jQueryScript — Thu, 14 May 2026 05:38:22 +0000

Neiki's Cookie Banner: a vanilla JavaScript library that adds a GDPR-compliant cookie consent banner to any site with a single script tag.

Key features:

Bar, box, and modal layouts with light/dark/auto themes
Granular per-category consent with toggle controls
Google Consent Mode v2 integration built in
Script blocking via data attributes for third-party scripts
Versioned consent records for re-prompt on policy changes
Zero dependencies, MIT licensed

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Better Design: 30+ Themed shadcn/ui Design Systems

jQueryScript — Thu, 14 May 2026 01:21:45 +0000

Better Design: an open source shadcn/ui registry with 31 themed design systems for React and Tailwind projects.

Key points:

Install components through the shadcn CLI.
Pick themes such as Linear, Stripe, Vercel, Notion, Supabase, Apple, and Figma.
Use themed components for dashboards, admin panels, SaaS apps, and product UIs.
Browse readable TSX source files before adding components to your app.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Azar Datepicker: Jalali & Gregorian Date Picker in Vanilla JS

jQueryScript — Wed, 13 May 2026 06:09:41 +0000

Azar Datepicker: a dependency-free JavaScript library for Persian (Jalali) and Gregorian date and time picking.

Key features:

Jalali and Gregorian calendars with runtime switching
Date, time, and datetime modes
Auto dark mode from OS preference or Bootstrap's data-bs-theme
Mobile modal and desktop dropdown layouts auto-detected
Min/max date boundary enforcement
HTML data attribute initialization, no JS required
One JS file, one CSS file. Zero dependencies.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

readmore-lines: Read More/Less by Line Count (JS Library)

jQueryScript — Wed, 13 May 2026 05:41:43 +0000

ReadMore Lines: a lightweight vanilla JavaScript library for line-based text truncation with a read more / read less toggle.

Key features:

Truncates by rendered line count using CSS -webkit-line-clamp
Accessible toggle button with ARIA attributes and keyboard support
WeakMap instance tracking for safe cleanup and re-initialization
CSS custom properties for full button theming
~2.5KB minified, no dependencies

Great for blog cards, product pages, and comment threads where text length varies.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo