Weekly Web Design & Development News: Collective #620

by jQueryScript,

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

  • Get a free AI-powered pair programming assistant right inside VS Code.
  • Instantly add 60+ animated, customizable UI components to your Next.js projects.
  • Snag a massive Material 3 UI Kit for Figma with over 1000 components.
  • ️ Check out rspack, the blazing-fast web bundler built with Rust.
  • ️ Explore a modern file tree web component that supports async loading.
  • Find out why you might be loading fonts wrong and crippling your site's performance.
  • 36 other great resources and tools
  • 3 design freebies and snippets

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

 

JavaScript & CSS

overtype - WYSIWYG Markdown Editor for Mobile & Desktop Apps. (Live Demo)

veo-3-gemini-api-quickstart

nstr - Fix Floating-Point Precision in JavaScript.

Fix Floating-Point Precision in JavaScript

TypeFX.js - Advanced Typewriter Animation Library.

Advanced Typewriter Animation Library

file-tree - Modern File Tree Web Component with Async Loading.

Modern File Tree Web Component with Async Loading

AquaKit - AI SaaS Starter Kit with Next.js & Convex.

AI SaaS Starter Kit with Next.js & Convex

create-o3-app - Build Bleeding-Edge, Full-stack Next.js Apps.

Build Bleeding-Edge, Full-stack Next.js Apps

agentic-coding-starter-kit - Next.js Starter Kit for AI Apps & Agents.

Next.js Starter Kit for AI Apps & Agents

ScrollX-UI - 60+ Animated, Customizable UI Components for Next.js.

60+ Animated, Customizable UI Components for Next.js.

animateicons - 100+ Animated, Customizable SVG Icons for React & Next.js.

100+ Animated, Customizable SVG Icons for React & Next.js

react-native-dialog - React Native Dialog Component for Customizable Alerts.

React Native Dialog Component for Customizable Alerts

slider - React Native Material 3 Slider Component with Advanced Customization.

React Native Material 3 Slider Component with Advanced Customization

image-card-stack - 3D Draggable Image Card Stack Component with Frame Motion.

3D Draggable Image Card Stack Component with Frame Motion

react-native-emoji-picker - Lightweight React Native Emoji Picker.

Lightweight React Native Emoji Picker

react-native-keypad-component - React Native Keypad Component for Secure PIN Entry.

React Native Keypad Component for Secure PIN Entry

Open-Fiesta - Multi-Model AI Chat Playground Built with Next.js.

React Native Keypad Component for Secure PIN Entry

streamdown - A drop-in replacement for react-markdown, designed for AI-powered streaming.

expo-drawpad - A smooth, animated drawing pad component for React Native and Expo applications.

Youtu-agent - A simple yet powerful agent framework that delivers with open-source models.

templui - A lightweight, memory-efficient library for working with generator functions in TypeScript.

kelp - A UI library for people who love HTML, powered by modern CSS and Web Components.

ariful-personal-portfolio-html5-template - A creative modern minimal portfolio website html landing page template.

mobile-fluid-sim - A real-time fluid simulation that runs in your browser and reacts to mobile device sensors.

make-flag - A modern web application for generating CTF-style flags with leetspeak transformations.

Discover more JavaScript & CSS Libraries →


Web Dev Tools & Resources

HTML to Markdown Converter - Free, privacy-first HTML to Markdown converter with real-time preview and clean output.

growchief - The Ultimate all-in social media automation (outreach) tool.

24h to 12h Converter - Quickly and easily convert 24-hour time to the standard 12-hour AM/PM format.

rspack - The fast Rust-based web bundler with webpack-compatible API.

rendergit - Render any git repo into a single static HTML page for humans or LLMs.

chili3d - A web-based 3D CAD application for online model design and editing.

DiffMem - Git Based Memory Storage for Conversational AI Agent.

optique - Type-safe combinatorial CLI parser for TypeScript.

shiki-image - Convert code snippets into images. Powered by shiki and takumi.

ConfMap - Create MindMap from your Configuration Files.


Graphic Design Freebies

Maple Mono  - Maple Mono Monospace Font

24 Free Duotone Icons for AI Tools

Material 3 Expressive Design UI Kit - A Figma resource that offers over 1000 components from the Material Design 3 library.

A Figma resource that offers over 1000 components from the Material Design 3 library.

Boatica Bold Display Typeface - A bold display font features soft curves and rounded corners.

A bold display font features soft curves and rounded corners.

Discover more Graphic Design Freebies →


Curated AI Tools for Developers and Designers

Code Web Chat - Free AI-Powered Pair Programming Extension for VS Code.

Shadow - Free & Open-source Background Coding AI Agent.

Claudable - Free, Open-Source AI Web Builder powered by Claude Code.

Grok Code Fast 1 - A speedy and economical reasoning model that excels at agentic coding.

Gemini 2.5 Flash Image - Google's state-of-the-art image generation and editing model.

Devv AI - The first coding agent with native integrations—authentication, LLM, database, image generation and more. Built for indie builders and small teams.

VibeFlow - Turns prompts into a full-stack web app with n8n-style visual workflows for your backend, so you can see, edit, and scale your app logic as your ideas evolve.

Conductor - Run a bunch of Claude Codes in parallel.

Discover more Free AI Tools →


News & Articles

Rolling the Dice with CSS random() (Link)

You’re loading fonts wrong (and it’s crippling your performance) (Link)

CSS Elevator: A Pure CSS State Machine With Floor Navigation (Link)

Web Coding Book: Essential Coding Theory (Link)

Optimizing PWAs For Different Display Modes (Link)


JavaScript & CSS Snippets

Shuffling Effect in Pure CSS

See the Pen Shuffling Effect in Pure CSS (my take) by Chris Bolson (@cbolson) on CodePen.


Electric Border

See the Pen Electric Border by Bálint Ferenczy (@BalintFerenczy) on CodePen.


Neon Loaders

See the Pen Neon Loaders by Michelle L (@MichelleLien) on CodePen.


Neon Glass Context Menu

See the Pen Neon Glass Context Menu by Simon Goellner (@simeydotme) on CodePen.