Weekly Web Design & Development News: Collective #624
Everything you need to know in development & design this week, rounded up for you (Week 40, 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 huge head start on your next project with a full-stack web app boilerplate, complete with auth and payments.
- ️ Supercharge your projects with a massive pack of 14+ advanced, copy-paste components for shadcn/ui.
- Build your very own AI coding agent using a new template for Vercel and Next.js.
- Create an awesome 3D interactive photo gallery sphere with a cool JavaScript and CSS snippet.
- Automate your Git commit messages and save time with the free
lazycommitAI tool. - Designing for the future? Grab a fresh set of the best free iPhone 17 mockups.
- 36 other great resources, libraries, and AI tools
- 6 design freebies and code snippets
Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.
JavaScript & CSS
catalyst - Full-Stack Web App Boilerplate with Auth & Payments.
shadcn-ui-expansions - 14+ Advanced Copy-Paste UI Components for shadcn/ui.
enhanced-button - Expand shadcn-ui Button Component with 9+ Effects & Styles.
date-range-picker-for-shadcn - Presets, Comparison & Mobile Support.
shadcn-phone-input - Add Phone Input with Country Validation to Shadcn/ui.
shadcn-linear-combobox - Linear.app-Style Priority Combobox Component for shadcn/ui.
page-ui - Modern Landing Page Components & Templates for Next.js.
coding-agent-template - Build Your Own AI Coding Agent with Vercel’s Next.js Template.
nimara-ecommerce - Modern Headless Next.js E-commerce Storefront.
colorswitchcn - Easy shadcn/ui Theme Switcher Component.
3D Gallery - 3D Interactive Sphere Photo Gallery with JavaScript and CSS.
Image Slider - Modern Image Carousel with Thumbnail Transitions.
Segmented Control - Animated Segmented Control with Radio Buttons and CSS3.
flipbook-js - Create Smooth, Realistic Page Flip Animations.
nanoLoader - 12+ Lightweight CSS Loading Animations.
UnitFormat.js - Format Numbers with Metric Prefixes in JavaScript.
react-native-phone-entry - International Phone Input Component with Auto-Formatting.
Shimmer Text - Customizable Shimmer Text Animations for React Native.
bluesky-likes - Flexible components for displaying Bluesky likes.
sync-skeleton - Synchronized Skeleton Loaders for your favorite framework.
uuidv47 - Reversible UUID v4/v7 transformation using SipHash-2-4 cryptography.
stack - Zero-dependency, type-safe Stack component for streamlining flexbox usage in React & React Native.
zeno - A lightweight, plugin-first Markdown blog framework built with JavaScript.
Discover more JavaScript & CSS Libraries →
Web Dev Tools & Resources
Free Markdown to Word Converter - Paste your Markdown, and get a downloadable Word (.docx) file in seconds.
sj.h - A tiny little JSON parsing library written in C.
Offwork Countdown - See how much time is left until you’re off work, the weekend starts, or the next holiday.
better-curl-saul - An open-source CLI 'http client' to make api reusability simple.
modern-tar - Zero dependency streaming tar parser and writer for every JavaScript runtime.
snapBubble_extension - A browser extension that performs OCR (Optical Character Recognition) on text within images and overlays translations directly on web pages.
hinoto - A web framework written in Gleam, designed for multiple JavaScript runtimes!
geobots.xyz - Open source Mapbox data visualization tool.
png2webp_folders - Convert entire PNG/JPG folders to WebP in your browser.
opendataloader-pdf - Safe, Open, High-Performance — PDF for AI.
Graphic Design Freebies
Best Free iPhone 17 Mockups - Best Free iPhone 17/17 Pro/17 Air Mockups for Designers.
Vector Gradients for Modern UI - A free collection of vector gradients with both warm and cool tones.
3D Brand Logos - A free set of 3D icons that provides recognizable brand logos for your design projects.
Glassmorphism Social Icons - A set of 16 vector-based social media icons with a frosted glass (glassmorphism) effect.
Discover more Graphic Design Freebies →
Curated AI Tools for Developers and Designers
Mixboard - Free AI Moodboard Tool from Google Labs.
lazycommit - Automate Git Commit Messages with Free AI.
ChatGPT Pulse - A new experience where ChatGPT proactively does research to deliver personalized updates based on your chats, feedback, and connected apps like your calendar.
GitHub Copilot CLI - Work locally and synchronously with an AI agent that understands your code and GitHub context.
Windows-MCP - Understand the context of what you’re doing across multiple tabs, answer questions and integrate with other popular Google services, like Google Docs and Calendar.
Qwen3-Max - Qwen’s largest and most capable model to date.
Chrome DevTools MCP: - Lets your coding agent (such as Gemini, Claude, Cursor or Copilot) control and inspect a live Chrome browser.
DeepSeek-V3.1-Terminus - Fixed language consistency issues and boosted Agent capabilities.
Grok 4 Fast - xAI’s latest advancement in cost-efficient reasoning models.
News & Articles
TanStack Start v1 Release Candidate (Link)
Cap'n Web: a new RPC system for browsers and web servers (Link)
Getting Creative With Images in Long-Form Content (Link)
NPM Security Best Practices (Link)
Beyond The Hype: What AI Can Really Do For Product Design (Link)
How OpenAI Uses Codex (Link)
JavaScript & CSS Snippets
GSAP Observer - infinite vertical scroll
See the Pen GSAP Observer - infinite vertical scroll by Ryan Mulligan (@hexagoncircle) on CodePen.
CSS Inverted Reveal Scroller
See the Pen CSS Inverted Reveal Scroller by Jhey (@jh3y) on CodePen.
Loading Progress
See the Pen Loading Progress by Jon Kantner (@jkantner) on CodePen.
QLOCKTWO - time in words - multi-language
See the Pen QLOCKTWO - time in words - multi-language by Niklas Knaack (@NiklasKnaack) on CodePen.
- Prev: Weekly Web Design & Development News: Collective #623
- Next: None
