jQuery Script Blog

Weekly Web Design & Development News: Collective #656

by jQueryScript,

Everything you need to know in development & design this week, rounded up for you (Week 21, 2026).

You'll find the most essential things right now: JavaScript & CSS libraries, useful code snippets, crucial web dev news & resources, curated AI tools, free design assets, and plenty of other good stuff we found!

Highlights:

  • Turn plain text into inline charts instantly with a clever new OpenType font
  • Kickstart your next SaaS dashboard with 30+ gorgeous shadcn/ui design systems
  • Craft stunning scroll-driven storytelling sections using zero JavaScript
  • Build out layouts completely offline using a free, local AI HTML generator
  • Learn exactly how to optimize your client sites for Google's new generative AI search
  • + 26 other dev resources, AI tools, and industry news
  • +3 graphic design freebies and Figma UI kits

Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.

JavaScript & CSS

dither-avatar - Deterministic dithered SVG avatars from any seed string. Zero dependencies.

Deterministic dithered SVG avatars from any seed string. Zero dependencies.

show-when - An element that shows or hides based on provided conditions.

An element that shows or hides based on provided conditions

vanilla-scroll-sky - A lightweight, JavaScript-free CSS utility for modern scroll-driven storytelling sections.

A lightweight, JavaScript-free CSS utility for modern scroll-driven storytelling sections

neiki-cookie-banner - Lightweight, dependency-free cookie consent banner (GDPR/ePrivacy compliant) in vanilla JS. .

Lightweight, dependency-free cookie consent banner (GDPR/ePrivacy compliant) in vanilla JS.

bootstrap-ui-sounds - Add Web Audio Feedback to Bootstrap 5 Components.

Add Web Audio Feedback to Bootstrap 5 Components

readmore-lines - Line-Based Read More/Read Less in Vanilla JavaScript.

Line-Based Read More/Read Less in Vanilla JavaScript

azar-datepicker - Persian Jalali & Gregorian Date Picker in Vanilla JS.

Persian Jalali & Gregorian Date Picker in Vanilla JS

scroll-zoom-thing - a pure-CSS parallax.

starry-night - Syntax highlighting, like what GitHub uses to highlight code, but free and open source and JavaScript.

OpenGravity - A lightweight, vanilla JS, open source BYOK (Bring Your Own Key) clone of the Google Antigravity UI.

Discover more JavaScript & CSS Libraries →

NextGen JavaScript

Better Design - 30+ shadcn/ui Design Systems for SaaS Dashboards & Landing Pages.

30+ shadcn/ui Design Systems for SaaS Dashboards & Landing Pages

framecn - Copy-Paste Video Components with Editframe and Shadcn.

Copy-Paste Video Components with Editframe and Shadcn

astro-sonnet - A polished blog and portfolio starter built with Astro for content-driven sites.

react-mask-input - Lightweight React masked input with static & dynamic masks, caret management, and a headless useMaskInput hook.

react-animated-favicon - Zero-dependency React library for animated GIF favicons, entirely client-side.

an-icons - A modern, lightweight React icon library with beautiful SVG icons.

Discover more Next.js & shadcn/ui resources →

Web Dev Tools & Resources

datatype - A variable OpenType font that turns text into inline charts.

httpx2 - A next generation HTTP client for Python.

dither - Vector dither tool that converts images and gradients into scalable SVG patterns.

svglogo - Generate clean icon-based logos instantly in your browser.

email-signature-generator - Free, open-source email signature generator.

xlsx-kit - A JavaScript library for Excel (XLSX) files, inspired by openpyxl.

Genclipboard - A native, keyboard-first clipboard manager — with screenshots, screen recording, and instant translation built in.

Graphic Design Freebies

Mobile Button UI Kit - A free mobile button UI kit for Figma from the Appetite UI system..

Mobile Button UI Kit

Chat UI Kit (Figma) for AI Assistants - A free Figma UI kit for chat interfaces, AI assistants, and LLM-powered welcome screens.

Chat UI Kit (Figma) for AI Assistants

Free iOS Emoji SVG - 750+ Free iOS Emoji SVG Vector Pack (Figma).

750+ Free iOS Emoji SVG Vector Pack (Figma)

Discover more Graphic Design Freebies →

Curated AI Tools for Developers and Designers

HTML Anything - Free Local AI HTML Generator for Creators & Writers.

Pi Coding Agent - Extensible AI Terminal Agent for Developers.

Open Design - Free Open-Source Claude Design Alternative.

OpenAI CLI - Run OpenAI API Calls from Terminal.

Supertonic v3 - Free On-Device TTS With 31-Language Support.

Kuku - Free AI-powered Obsidian Alternative for macOS.

PraisonAI - Free Open-Source Multi-Agent (OpenClaw Alternative).

Discover more Free AI Tools →

News & Articles

7 Best Free AI Tools for CSV Data Analysis in 2026 (Link)

Optimizing your website for generative AI features on Google Search. (Link)

Latest NewsWhy Modern Content Platforms Are Moving to Astro, Next.js, and Headless CMS Architecture. (Link)

Critical Next.js Vulnerability Exposes Cloud Credentials, API keys, and Admin Panels. (Link)

EU browser choice rules send millions more users Firefox's way. (Link)

There are only four sensible ways to build a website. (Link)