Weekly Web Design & Development News: Collective #608

by jQueryScript,

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

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!

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

 

 

JavaScript & CSS

svg-toolbelt - Add Interactive Zoom and Pan to Any SVG. (Live Demo)

svg-toolbelt

Sprout - Zero-Dependency Reactive DOM from JSON Data. (Live Demo)

Sprout

Chonkify - Lightweight Data Chunking for JavaScript. (Live Demo)

Chonkify

simple-display-alert - Lightweight JavaScript Notification System. (Live Demo)

simple-display-alert

counterAnimeVanillaJS - Vanilla JS Library for Smooth Number Transitions. (Live Demo)

counterAnimeVanillaJS

Bits UI - Build Accessible Svelte UIs with Bits UI Headless Components. (Live Demo)

Bits UI

Spectrum UI - Copy-paste UI Components with Smooth Motion Effects. (Live Demo)

Spectrum UI

shadcn-landing-page - Date & Time Ranger Picker Components for shadcn/ui. (Live Demo)

shadcn-landing-page

Date-Time-Range-Picker - Date & Time Ranger Picker Components for shadcn/ui. (Live Demo)

shadcn-ui-blocks

next-portfolio-template - Customizable & SEO-friendly Portfolio Template for Next.js. (Live Demo)

next-portfolio-template

next-forge: Production-Ready, Monorepo-first Next.js Boilerplate.

next-forge

workers-oauth-provider - OAuth provider library for Cloudflare Workers.

ragbits - Building blocks for rapid development of GenAI applications. (Live Demo)

openai-agents-js - A lightweight, powerful framework for multi-agent workflows and voice agents. (Live Demo)

odyc.js - A tiny JavaScript library designed to create narrative games by combining pixels, sounds, text, and a bit of logic. (Live Demo)

object-equals - A fast, flexible and robust utility for deep equality comparison with type-specific logic and engine-aware design.

wisk - A plugin-based document editor built with vanilla JavaScript and Web Components. (Live Demo)

search - A powerful TypeScript fuzzy search library with intelligent scoring, exact match prioritization, and automatic field detection for any object structure.

graceful-json - A robust TypeScript/JavaScript library for parsing JSON from potentially malformed text.

Tokenami - CSS-in-JS reinvented for scalable, typesafe design systems. (Live Demo)

Discover more JavaScript & CSS Libraries →


Web Dev Tools & Resources

rolldown-vite - Vite with Rolldown as bundler.

lexe - Package your Node.js application into a single executable file, but only 10MB.

LLMFeeder - Brower extension to convert web pages to clean Markdown and copy to clipboard.

es-git - A modern Git library built for Node.js with blazing-fast installation and rock-solid stability, powered by N-API.

ccusage - A CLI tool for analyzing Claude Code usage from local JSONL files.

ephe - An Ephemeral Markdown Paper for today. Less but handy features for plain Markdown lovers.

Keyframe Animation Tool - A web-based tool for creating and editing skeletal keyframe animations for 3D models in FBX format.

markdown-cv-builder - A modern, customizable CV/Resume builder that converts Markdown to a beautiful web page and PDF.

be-a11y - A Node.js-based CLI tool designed to scan and report common accessibility issues in HTML.

Web Inspector - A powerful Chrome extension that lets you inspect elements, debug CSS, extract color palettes, and download all images from any website


Graphic Design Freebies

Email & Envelope Icons Pack  - 65 Free Email & Envelope Icons (3 Styles)

Email & Envelope Icons Pack

Real Estate UI Kit - A Free Real Estate Figma Template designed for Web & Mobile Apps.

Real Estate UI Kit

Airbnb-style 3D Icons - A free collection of Airbnb-style 3D icons for both web and mobile design.

Airbnb-style 3D Icons

Avatar Illustrations -  54 Free Flat Avatar Illustrations in Figma.

Avatar Illustrations

Discover more Graphic Design Freebies →


Curated AI Tools for Developers and Designers

Cursor v1.0 - Cursor (The #1 AI Code Editor) v1.0 dropped. It can now review your code, remember its mistakes, and work on dozens of tasks in the background.

gemini-2.5-pro-preview-06-05 - Google's most intelligent model is getting an update. It’s even better at coding, reasoning, and creative writing.

Google Portraits - A new experiment from Google Labs, lets you interact conversationally with AI representations of trusted experts built in partnership with the experts themselves.

Eleven v3 - Elevenlabs' most expressive model with emotional depth and rich delivery.

Mistral Code - Intelligent code completion, generation, and autonomous task execution right where you work.

Bing Video Creator - Transform your ideas into stunning videos in seconds using OpenAI's Sora model.

Google AI Edge Gallery - An open-source app that lets you run powerful AI models directly on your mobile phone.

Perplexity Labs - A productivity tool that allows you to craft everything from reports and spreadsheets to dashboards.

ColorCrawler - Free AI Generates Color Schemes with HEX/RGB/CSS Codes.

Speech2Speech - Private AI Voice Assistant in Your Browser.

claude-composer - A tool that adds small enhancements to Claude Code.

Discover more Free AI Tools →


News & Articles

A JavaScript Developer's Guide to Go (Link)

WebStatus.dev: Now with more data, deeper insights, and a clearer path to Baseline (Link)

Getting Creative With HTML Dialog (Link)

Exploring the OKLCH ecosystem and its tools (Link)

No Server, No Database: Smarter Related Posts in Astro with `transformers.js` (Link)


JavaScript & CSS Snippets

Squircle Neon Watch

See the Pen Squircle Neon Watch by Megafry (@Megafry) on CodePen.


Dynamic Carousel

See the Pen Dynamic Carousel by wahidullah Karimi (@wahidullah_karimi) on CodePen.


Animated underlines with SVG

See the Pen animated underlines with SVG, random. inspired idea and removed dependencies. WIP. by Tom Hermans (@tomhermans) on CodePen.


Grid Lines Hover Effect (H/T Webflow)

See the Pen Grid Lines Hover Effect (H/T Webflow) by Chris Heuberger (@ChrisBup) on CodePen.