Weekly Web Design & Development News: Collective #620
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)
nstr - Fix Floating-Point Precision in JavaScript.
TypeFX.js - Advanced Typewriter Animation Library.
file-tree - Modern File Tree Web Component with Async Loading.
AquaKit - AI SaaS Starter Kit with Next.js & Convex.
create-o3-app - Build Bleeding-Edge, Full-stack Next.js Apps.
agentic-coding-starter-kit - Next.js Starter Kit for AI Apps & Agents.
ScrollX-UI - 60+ Animated, Customizable UI Components for Next.js.
animateicons - 100+ Animated, Customizable SVG Icons for React & Next.js.
react-native-dialog - React Native Dialog Component for Customizable Alerts.
slider - React Native Material 3 Slider Component with Advanced Customization.
image-card-stack - 3D Draggable Image Card Stack Component with Frame Motion.
react-native-emoji-picker - Lightweight React Native Emoji Picker.
react-native-keypad-component - React Native Keypad Component for Secure PIN Entry.
Open-Fiesta - Multi-Model AI Chat Playground Built with Next.js.
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
Material 3 Expressive Design UI Kit - 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.
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.
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.
- Prev: Weekly Web Design & Development News: Collective #619
- Next: None