Weekly Web Design & Development News: Collective #612
Everything you need to know in development & design this week, rounded up for you (Week 28, 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:
- Craft stunning liquid glass and noise effects for your next project.
- Speed up your builds with a zero-config UI component library for TailwindCSS.
- Add a super-smart, adaptive modal and drawer to your shadcn/ui projects.
- Create beautiful isometric diagrams of your infrastructure with this handy tool.
- Get the scoop on the new HTML <permission> element currently in origin trial.
- Take a first look at the experimental CSS if() function landing in Chrome.
- See how the Cursor AI agent now plans out complex tasks with to-do lists.
- + 38 other great resources and tools
- + 2 awesome design freebies
Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.
JavaScript & CSS
next-starter - Create Advanced Liquid Glass & Noise Effects.
Prismium.js - Modern Accordion Library for Vue, React & Vanilla JS. (Live Demo)
ktui - Zero-Config UI Component Library for TailwindCSS. (Live Demo)
Berlix UI - Animated UI Components with Tailwind & Framer Motion. (Live Demo)
Credenza - Auto-Adaptive Modal Dialog and Drawer for shadcn/ui. (Live Demo)
ExtendUI - Build Better UIs with Extended shadcn/ui Components. (Live Demo)
VisionCharts - Financial Data Visualization Library for JavaScript. (Live Demo)
myChart - Modern Canvas JavaScript Charting Library. (Live Demo)
select-checklist-bootstrap - Ultra-light glassmorphism for the web (Liquid Glass). (Live Demo)
simple-tree - Pure CSS Collapsible Tree View. (Live Demo)
PageProtector: Block Dev Tools, Right-Click & Text Selection. (Live Demo)
create-tsrouter-app - Drop-in replacement for create-react-app that builds TanStack Router based SPA applications.
use-confirm-dialog - A simple, promise-based React confirmation dialog hook.
liquid-glass-rn-skia - An interactive, draggable liquid glass and magnifying lens effect built with React Native, Skia, Gesture Handler, and Reanimated.
fluid-calendar - Built for people who want full control over their scheduling workflow.
epdoptimize - Reduce image colors and dithering them to fit (color) eInk displays with optimal visual quality. (Live Demo)
jordium-gantt-vue3 - A modern, flexible, and feature-rich Gantt chart component library for Vue 3. (Live Demo)
berlix - Motion-first components for React, built with Tailwind CSS and Motion. (Live Demo)
FlakeUI - A fractal-structure inspired, parent-child orbiting, and zooming-elements based graph user interface. (Live Demo)
pixel-8 - Web based fantasy console and JavaScript librarys. (Live Demo)
Monorail - Turns any CSS keyframe animation into an interactive graph. (Live Demo)
Quanter - A Pure-JavaScript, CSS selector engine designed to be easily select DOM-Elements.
Discover more JavaScript & CSS Libraries →
Web Dev Tools & Resources
zshy - The no-bundler build tool for TypeScript libraries.
refakts - A TypeScript refactoring tool built by AI coding agents for AI coding agents.
FossFLOW - Make beautiful isometric infrastructure diagrams. (Live Demo)
webhook-listener - A powerful, real-time webhook debugging tool that allows developers to create HTTP endpoints for testing webhooks and API requests.
CCSeva - A beautiful macOS menu bar app for tracking your Claude Code usage in real-time.
cctrace - Export Claude Code chat sessions into markdown and XML.
Context Engineering Template - A comprehensive template for getting started with Context Engineering.
reviewit - A lightweight command-line tool that spins up a local web server to display Git commit diffs in a GitHub-like Files changed view.
Art-Gen - A powerful command-line tool for automatically generating TypeScript interface type definitions from JSON APIs.
vibetunnel - Turn any browser into your terminal & command your agents on the go.
Twenty - A modern, open-source CRM alternative to Salesforce.
Image Elf - Create dummy images with drag and drop.
Graphic Design Freebies
iOS 26 App Icons - A set of iOS 26 app icons for Figma that matches Apple’s latest design specifications.
Edgeflow Handwritten Font - A free handwritten font that gives your projects a raw, urban character.
Discover more Graphic Design Freebies →
Curated AI Tools for Developers and Designers
Cursor v1.2 - The AI agent now plans out tasks with clear to-do lists, making complex projects easier to manage.
Trae Agent - An LLM-based agent for general purpose software engineering tasks.
Node.js Debugger MCP - Private AI Assistant That Runs on Your Device
Icons8 MCP server - Get access to MCP server SVG and MCP server PNG icons in your vibe-coding projects.
Vitara - Your all-in-one AI-powered development platform that helps you design, build, and scale full-stack applications in record time.
Gemini CLI Action - Automate software development tasks within your GitHub repositories with Gemini CLI.
Ultracite - Fast, automated code formatting for JavaScript apps.
TokenDagger - A fast, drop-in implementation of OpenAI's TikToken, designed for large-scale text processing.
News & Articles
Using CSS Cascade Layers With Tailwind Utilities (Link)
CSS Intelligence: Speculating On The Future Of A Smarter Language (Link)
Lightly Poking at the CSS if() Function in Chrome 137 (Link)
HTML spec change: escaping < and > in attributes (Link)
An origin trial for a new HTML <permission> element (Link)
JavaScript & CSS Snippets
Gallery to Overlay Transition
See the Pen Gallery to Overlay Transition — Osmo by Osmo (@osmosupply) on CodePen.
border-radius and shape-outside
See the Pen border-radius and shape-outside by Shannon Moeller (@shannonmoeller) on CodePen.
Elegant Light Cards
See the Pen ELC by odibixie (@odibixie) on CodePen.
CSS Only Parallax Layers
See the Pen CSS Only Parallax Layers by Christian Alder (@HejChristian) on CodePen.
- Prev: Weekly Web Design & Development News: Collective #611
- Next: None
