Weekly Web Design & Development News: Collective #621

by jQueryScript,

Everything you need to know in development & design this week, rounded up for you (Week 37, 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!

Highlights:

  • ️ Make your web app smarter with Obs.js, a library that adapts to the user's device, network, and battery status.
  • Get the beauty and simplicity of shadcn/ui components right inside your Django projects.
  • Discover exe, a fascinating tool that packs your entire web app into a single executable binary.
  • Instantly generate royalty-free sound effects for your projects using AI from ElevenLabs.
  • Meet Kimi-K2, a new AI coding model built for speed with a massive 256k context window.
  • Grab the official Nuxt.js UI Design Kit for Figma, packed with over 100 components and templates.
  • Animate your buttons with a slick RGB glow effect using only CSSno JavaScript required.
  • 35 other great resources, libraries, and tools
  • 15 design freebies, AI helpers, and must-read articles

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

 

JavaScript & CSS

Obs.js - Optimize Web Apps Based on Users’ Device, Network, and Battery Status.

Optimize Web Apps Based on Users’ Device, Network, and Battery Status

usal - Tiny Framework-Agnostic Scroll Animation Library.

Tiny Framework-Agnostic Scroll Animation Library

defaults.css - Modern CSS Reset Under 1KB for Clean Code.

Modern CSS Reset Under 1KB for Clean Code

VikCraft-Gantt-Chart - Interactive Gantt Charts in Vanilla JavaScript.

VikCraft-Gantt-Chart

FuseNotify - Customizable Toast Notifications with Burning Fuse Countdown Animations.

Customizable Toast Notifications with Burning Fuse Countdown Animations

DoubleRange - Accessible Dual-Thumb Range Slider for Web & Mobile.

Accessible Dual-Thumb Range Slider for Web & Mobile

gridslider - Responsive, Mobile-friendly Carousel Slider with CSS Grid.

Responsive, Mobile-friendly Carousel Slider with CSS Grid

czSignature.js - Mobile-friendly & Pressure-Sensitive JavaScript Signature library.

Mobile-friendly & Pressure-Sensitive JavaScript Signature library

RGB-Button - A reusable, framework-agnostic CSS button with an animated RGB glow border, no JavaScript.

A reusable, framework-agnostic CSS button with an animated RGB glow border, no JavaScript.

ssgoi - Add App-Like Page Transitions to Web Apps.

Add App-Like Page Transitions to Web Apps

shadcn-ui-animated-tabs - Animated shadcn/ui Tabs for Next.js Apps.

shadcn-ui-animated-tabs

shadcn-django - Beautiful UI Components for Django Applications.

Beautiful UI Components for Django Applications

shadcn-dialog - Create Nested & Drag-to-dismiss Modals.

Create Nested & Drag-to-dismiss Modals

mermaid - Svelte Mermaid Component with SSR and Theming.

Svelte Mermaid Component with SSR and Theming

create-next-quick - Quickly Start Next.js Apps.

Quickly Start Next.js Apps

NativeUI - 35+ Copy-Paste UI Components for React Native.

35+ Copy-Paste UI Components for React Native

soldevkit - Solana dApp UI Components with Tailwind CSS.

Solana dApp UI Components with Tailwind CSS

react-native-remark - A simple yet powerful agent framework that delivers with open-source models.

react-native-remark

react-web-camera - React Web Camera Component for Multi-Image Capture.

react-web-camera

liquid-glass-rn-skia - Apple Liquid Glass Effect with React Native Skia.

liquid-glass-rn-skia

react-native-onboarding-flow - Custom Onboarding with Video & Paywalls in React Native.

Custom Onboarding with Video & Paywalls in React Native

liquid-glass-vue - Apple Liquid Glass Effect Component for Vue 3 Apps.

Apple Liquid Glass Effect Component for Vue 3 Apps.

use-mcp - Connect React Apps to MCP Servers with use-mcp Hook.

Connect React Apps to MCP Servers with use-mcp Hook

mediabunny - Pure TypeScript media toolkit for reading, writing, and converting video and audio files, directly in the browser.

ripple - The elegant TypeScript UI framework

agents-starter - A starter kit for building ai agents on Cloudflare.

untitledui-js - Browse 1100+ Untitled UI–style icons — framework-agnostic, fully customizable, free, open-source, with optional Motion animations.

Discover more JavaScript & CSS Libraries →


Web Dev Tools & Resources

Free Markdown to HTML Converter - Free, privacy-first, AI content friendly Markdown to HTML converter.

Termix - A web-based server management platform with SSH terminal, tunneling, and file editing capabilities.

Military Time Converter - Convert between 24-hour military time and standard 12-hour format instantly.

Cronicle - A simple, distributed task scheduler and runner with a web based UI.

gonzo - The Go based TUI log analysis tool.

Browserable - Open source and self-hostable browser automation library for AI agents.

exe - Pack your web app as a single executable binary with zero runtime dependencies.

texture-ripper - Extract and flatten textures from perspective images.

feedsmith - Fast, all-in-one parser and generator for RSS, Atom, RDF, and JSON Feed, with support for Podcast, iTunes, Dublin Core, and OPML files.

zanshin - A novel media player that allows you to navigate by speaker.

zanshin - A novel media player that allows you to navigate by speaker.


Graphic Design Freebies

Nuxt.js Official UI Design Kit  - The Nuxt UI Design Kit includes over 100 customizable components, premium templates, and full design token implementation using Figma variables.

The Nuxt UI Design Kit includes over 100 customizable components, premium templates, and full design token implementation using Figma variables.

Carnoll Handwritten Font - A handwritten font that combines casual style with polished execution.

A handwritten font that combines casual style with polished execution.

Free Pastel Frosted Glass Icons - 60+ Free Pastel Frosted Glass Icons in Figma.

60+ Free Pastel Frosted Glass Icons in Figma

Discover more Graphic Design Freebies →


Curated AI Tools for Developers and Designers

Shotgun CLI - Generate Codebase-Aware AI Specs for Claude Code & Cursor.

IC-Custom - Free AI-powered Position-Aware Image Customization Tool.

ElevenLabs SFX - Create Royalty-Free Sound Effects.

Telex - Build Custom WordPress Gutenberg Blocks with AI.

Meetingnotes - Free Open-Source AI Notetaker for Mac Users.

Query GPT - Free AI Transforms Questions into Perfect SQL Queries.

A01 - Free AI News Agent That Tracks Any Topic You Care About.

Agent-C - Tiny Open-source AI Agent for Shell Commands.

EmbeddingGemma - Tiny Open-source AI Agent for Shell Commands.

Kimi-K2-Instruct-0905 - 200+ T/s, $1.50/M tokens, 256k context window, built for coding.

Discover more Free AI Tools →


News & Articles

What You Need to Know About CSS Color Interpolation (Link)

The Fundamentals of CSS Alignment (Link)

Google Chrome at 17 - A history of Chrome browser (Link)

Why do browsers throttle JavaScript timers? (Link)

5 tips for writing better custom instructions for Copilot (Link)

Should you preload fonts for performance? (Link)


JavaScript & CSS Snippets

Staggered physics grid on click

See the Pen Staggered physics grid on click by Zach Saucier (@ZachSaucier) on CodePen.


Magic Card

See the Pen Magic Card by WebVision (@dspstudio) on CodePen.


Day & Night Sky Gradients

See the Pen Day & Night Sky Gradients by Rem (@remino) on CodePen.


World Clock Slider

See the Pen World Clock Slider by Jon Kantner (@jkantner) on CodePen.