Weekly Web Design & Development News: Collective #606

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

MurphyJS - Smooth Reveal Animations with Modern Web API. (Live Demo)

ButterPop.js - Beautiful Toast Notifications with 40+ Themes. (Live Demo)

colortag.js - macOS Finder-like Tagging System in JavaScript.. (Live Demo)

Changealert - Customizable JS Toast Notification System with Themes. (Live Demo)

nextjs-starter-kit - Build Production-Ready Apps Fast. (Live Demo)

RetroUI - Neobrutalist-style UI Component Library for Next.js. (Live Demo)

Titan - Next.js 15 Fullstack Template with Auth & Database Setup. (Live Demo)

shadboard - Next.js & shadcn/ui Dashboard Template. (Live Demo)

mvpblocks - An open-source UI component library built with Next.js, TailwindCSS, shadcn/ui, and Framer Motion. (Live Demo)

Waitly - Quickly launch a waitlist page with Waitly, a Next.js template using Notion as a CMS, Upstash Redis for rate limiting, and Resend for emails.. (Live Demo)

shadcn-form-builder - Shadcn Form Builder with Zod & React Hook Form. (Live Demo)

shadcn-theme-editor - Lightweight WYSIWYG Editor for Modern Web Apps. (Live Demo)

NFUID - Generate Unique, URL-Safe IDs with Timestamp Tracking. (Live Demo)

maskfy - Cross-Framework Input Masking Library. (Live Demo)

NLWeb - Microsoft's Natural Language Web for building conversational interfaces.

Analog - The open source calendar that changes everything. (Live Demo)

mcp-ui - SDK for UI over MCP. Bring rich UI experiences to the agents.

saas-app - LMS with Next.js, Supabase & Payments.

Rumblesheet.js - Open-source JavaScript library for embedding interactive spreadsheets. (Live Demo)

svgl-vue - An optimized package with SVG logos to be used as Vue components.

lovit - Next generation error handling library.

TabStateSync - A lightweight TypeScript library for synchronizing state across multiple browser tabs.

sveltekit-password-protect - Simple utility to add a layer of protection to your websites, very useful for agencies and freelancers.

crosspost - A JavaScript utility for posting across multiple social networks at once.

gauge - A simple and customizable circular gauge component for Vue 3. (Live Demo)

input-ai - Simple, framework-agnostic, HTML first JavaScript library for adding AI-powered text generation to input fields.

xlsx-parse-table - A library to parse tables from Excel worksheets.

Discover more JavaScript & CSS Libraries →

---

Web Dev Tools & Resources

Quarkdown - Markdown with superpowers — from ideas to presentations, articles and books.

Microsoft Edit - A simple editor for simple needs.

SQLite-JS Extension - A powerful extension that brings JavaScript capabilities to SQLite.

json-tapose - A modern, high-performance JSON comparison tool.

octopus - Lightning fast visual sitemap builder.

AI-ML-Cheatsheets - A curated collection of quick-reference standford guides covering core topics in Artificial Intelligence, Machine Learning and Deep Learning.

---

Graphic Design Freebies

monotional-font  - A humanist, monospace font based on DejaVu Sans Mono and inspired by André Berg's Meslo.

Abstract Liquid - 10 Free Abstract Liquid Backgrounds in Figma.

Doodle Icon Pack - 300+ Unique Hand-Drawn Icons.

Artify AI Image Editing App UI Kit - Start your AI photo editing app project with Artify, a free mobile app UI kit for Figma.

Kid’s Learning Mobile App UI Figma - A cheerful and stimulating design for children’s applications.

Discover more Graphic Design Freebies →

---

Curated AI Tools for Developers and Designers

Claude 4 - Anthropic launched Claude Opus 4 and Claude Sonnet 4, setting new standards for coding, advanced reasoning, and AI agents.

Google Jules - Your Al-powered code agent that works in the background so you can focus on critical tasks.

Google Stitch - Transform ideas into UI designs for mobile and web applications.

Gemini Code Assist - Uncap your potential and get all of your development done using Gemini Code Assist for individuals at no cost.

v0 - Generate UI with simple text prompts, powered by the latest v0-1.5-md and v0-1.5-lg models.

Emergent - A vibe coding tool to help transform your ideas into fully functional, production-ready apps, no developers required.

TalkToGitHub - Chat with Any GitHub Repository Using AI.

StreamingKokoroJS - Privacy-First TTS That Runs 100% in Your Browser.

BnbIcons - Free AI Airbnb-Style Icon Maker.

BrowserBee - Automate Your Browser with AI (Free & Private)

Discover more Free AI Tools →

---

News & Articles

Microsfot announced a new IDE for PostgreSQL in VS Code from Microsoft (Link)

Use CSS reading-flow for logical sequential focus navigation (Link)

A Brief History of JavaScript (Link)

10 updates from Google I/O 2025: CSS carousels, AI-powered DevTools, Prompt API with multimodal capabilities, and more (Link)

Best Practices for Creating a Modern npm Package with Security in Mind (Link)

---

JavaScript & CSS Snippets

Modern Gradient Wave Background

See the Pen Modern Gradient Wave Background by Bogdan Sandu (@bogdansandu) on CodePen.

---

Card Carousel (Movies)

See the Pen Card Carousel (Movies) by wpmad (@wpmad) on CodePen.

---

Collection grid

See the Pen collection grid by Danny Moerkerke (@dannymoerkerke) on CodePen.

---

Pure CSS simple parallax on scroll (responsive, accessible)

See the Pen Pure CSS simple parallax on scroll (responsive, accessible) by Ana Tudor (@thebabydino) on CodePen.