Allen Zong
banner
allenzong.bsky.social
Allen Zong
@allenzong.bsky.social
JavaScript developer, AI enthusiast, and Father of two daughters.
BTextrix: A clean, Medium-style rich text editor built on ProseMirror. Lets you write, edit & publish static HTML directly. True WYSIWYG output.

🚀 Fast
🎨 Customizable (Plugins)
📝 Media/Markdown/Collab
📦 Tree-shakeable

🔗 www.cssscript.com/medium-edito...

#webdev #javascript #richtexteditor
April 29, 2025 at 8:35 AM
Build modern, animated tab interfaces in Next.js with this component.

* Smooth Framer Motion animations
* Responsive design
* Easy integration via Shadcn/UI
* Modern tech stack

🔗 next.jqueryscript.net/shadcn-ui/an...

#NextJS #TailwindCSS #WebDev #UIComponents #FramerMotion
April 29, 2025 at 3:42 AM
Vanilla Confetti - zero-dependency confetti animations with natural falling physics.

Config controls for colors, shapes, speed and infinite loops. Implementation takes <5 mins with just canvas + JS import.

👉 www.cssscript.com/canvas-confe...

#WebDev #JavaScript #UIEffects
April 28, 2025 at 6:38 AM
shadcn/studio: extends shadcn/ui with more copy-paste component/block variants & a live theme editor. Great for faster UI dev & easier customization. Open source!

👉 next.jqueryscript.net/shadcn-ui/ui...

#shadcnui #reactjs #tailwindcss #frontend
April 28, 2025 at 2:26 AM
LocalNotification: a lightweight alert notification library:

✅ Position control
✅ Auto-close timer + progress bar
✅ Pause on hover/focus loss
✅ Custom styles/icons

👉 www.cssscript.com/growl-toast-...

#javascript #webdev #frontend #ui
April 25, 2025 at 6:57 AM
DOM Flowt: Lightweight JS lib for triggering CSS animations on scroll.

Uses simple `dom-flowt-*` attributes. Easy setup, CSS-extendable, avoids bloat. Good for basic viewport reveals.

🔗 www.cssscript.com/animation-sc...

#javascript #css #webdev #frontend
April 25, 2025 at 6:11 AM
Scroll-Grid: A JS/CSS approach for 2D scrollable layouts (H/V). Uses CSS Scroll Snap + JS for a synced floating nav map & keyboard controls. Lightweight option for grid-based SPAs or portfolios. Relies on modern CSS.

👉 www.cssscript.com/one-page-scr...

#CSS #JavaScript #WebDev
April 24, 2025 at 8:36 AM
💡 Found a lightweight JS library for interactive guided tours: target-highlight.js

✅ Spotlight DOM elements
✅ Customizable overlays & tooltips
✅ Step navigation built-in

👉 www.cssscript.com/guided-tour-...

Perfect for onboarding flows & feature highlights.

#JavaScript #webdev
April 23, 2025 at 5:54 AM
Found a useful shadcn/ui multi-select component for Next.js!

Features filtering, tag-style selections, icons, and easy integration.

Perfect for forms needing multiple choices.

👉 next.jqueryscript.net/shadcn-ui/ta...

#Nextjs #React #shadcnui #UI #WebDevelopment
April 23, 2025 at 2:23 AM
Found a free AI Chrome extension that lets you summarize webpages instantly using Gemini, Claude, or OpenAI models – you pick. Key things:

* Custom summary length 📏
* Saves summary history (CSV export too) 💾
* Needs an API key

👉 www.scriptbyai.com/web-summariz...

#ai #aisummarizer #freeai
April 22, 2025 at 1:47 PM
Simple Gallery JS: Minimalist, zero-dependency image slider & lightbox. Uses CSS classes for setup.

Handles solo images/galleries, touch/keyboard nav, FLIP animations. Great for lightweight needs.

👉 www.cssscript.com/gallery-slid...

#slider #lightbox #gallery #javascript #webdev
April 22, 2025 at 5:51 AM
Vanilla JS Carousel slider - no frameworks needed! Uses CSS :nth-child & DOM manipulation for a cool preview stack effect.

Features auto-slide, nav, content animations, and more.

👉 www.cssscript.com/carousel-sli...

#javascript #css #webdev #carousel #slider
April 21, 2025 at 11:09 AM
shadcn-calendar-component: a shadcn/ui date picker component for Next.js apps.

* Single date & range selection
* Predefined ranges (Last Week, This Year, etc.)
* Uses react-day-picker & date-fns

👉 next.jqueryscript.net/shadcn-ui/ca...

#Nextjs #Reactjs #WebDev #DatePicker #shadcnui
April 18, 2025 at 3:03 AM
Shadcn Cookie Consent: A React component for GDPR compliance with two design variants, callback support, and TailwindCSS customization. Works with Next.js.

👉 next.jqueryscript.net/shadcn-ui/gd...

#webdev #reactjs #gdpr #shadcn
April 18, 2025 at 2:32 AM
Kloner.js: a tiny (< 7KB) library that makes repeatable DOM elements painless.

Auto-indexes form fields, manages add/remove events, and works without dependencies.

Perfect for dynamic forms and content blocks.

Code examples: www.cssscript.com/element-clon...

#JavaScript #WebDev
April 17, 2025 at 7:00 AM
sidebar-components: 6 pre-built, responsive sidebar themes for Tailwind CSS. Saves time on admin/dashboard UI.

Includes dark/light modes & vanilla JS toggle. Copy-paste implementation.

Check it out: www.cssscript.com/sidebar-comp...

#tailwindcss #webdev #frontend #javascript
April 17, 2025 at 6:20 AM
Robroy Lightbox: A solid vanilla JS photo gallery.

Lightweight, accessible (keyboard nav, ARIA), responsive, no dependencies.

Handles captions, prev/next, loading states.

Good replacement for older jQuery lightboxes.

👉 www.cssscript.com/gallery-ligh...

#javascript #webdev #lightbox
April 16, 2025 at 6:37 AM
GlitchEffect: Simple, zero-dependency JS lib for image glitch effects (RGB shift, noise). No canvas/WebGL needed. Auto-injects namespaced CSS.

Check it out: www.cssscript.com/digital-glit...

#javascript #webdev #css #glitcheffect
April 16, 2025 at 5:52 AM
launch.css: A classless CSS framework for rapid HTML builds. Styles semantic elements directly, no classes needed for basics.

Super lightweight. Great for prototypes & MVPs.

👉 www.cssscript.com/classless-la...

#css #webdevelopment #frontend #classlesscss #prototyping
April 15, 2025 at 6:09 AM
This Simple Zoomable Shadcn Chart component allows you to explore data through intuitive zoom controls - click and drag, scroll wheel, and even touch gestures for mobile.

Check it out if you're building dashboards!

👉 next.jqueryscript.net/shadcn-ui/zo...

#WebDev #shadcnUI #React
April 15, 2025 at 4:47 AM