Weekly Web Design & Development News: Collective #587
A roundup of the latest and most popular development & design resources (Javascript & CSS libraries, Code snippets, Web Dev News & Resources, Curated AI Tools, Graphic Design Freebies, etc.) from the past week (Week 2, 2025).
Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.
JavaScript & CSS
ToastfierJS - Accessible Toast Notifications Library with Full Customization. (Live Demo)
3D Parallax Effect - Interactive 3D Parallax Effect on Hover with Pure CSS/CSS3. (Live Demo)
Cally - A set of responsive, customizable, accessible, feature-rich calendar web components for web applications. (Live Demo)
fullpage-scroller - A JavaScript library that enables smooth transitions between fullscreen sections through mousewheel or touch gestures. (Live Demo)
Cursix - Create Custom Interactive Mouse Cursors with Cursix and GSAP. (Live Demo)
Ochiba - Animate Elements using CSS3 Keyframe. (Live Demo)
shadcn-tour - A component to make product tours with motion and shadcn/ui. (Live Demo)
Shadcn Number Scrubber Component - A draggable numeric input component for React, built with shadcn/ui. (Live Demo)
Mesa - A build-time HTML component engine that allows you to write reusable, declarative HTML components with scoped CSS and dynamic attributes.
VanillaHTML - ACSS file that redesigns default HTML elements. (Live Demo)
safe - Handle your await/async promises safely without try/catch blocks.
Kinesis.js - A library that offers a suite of components to create engaging animations and transformations based on user interactions like mouse movements, scroll events, and even audio input. (Live Demo)
email-templates - Free email templates for MJML and HTML.
Discover more JavaScript & CSS Libraries →
Web Dev Tools & Resources
pxl-srt - A web app that sorts pixels by color in any image.
css-flexbox-playground - Experiment with different flex properties to understand how they affect layout. Adjust the controls below to see changes in real-time and copy the generated CSS code.
sitefetch - Fetch an entire site and save it as a text file (to be used with AI models).
pdf-tab-renamer - A chrome extension for renaming tabs showing paper-pdfs from common providers
websiteGPT - A Python tool that converts your website content into GPT-friendly text files by scraping your sitemap.
How's It Lookin' - Quickly see how your website's link appears on social media, texts, and other sharing platforms.
Gitignore - Find the perfect .gitignore template.
Pre-AI Search - Filter Google searches to pre-AI content.
Graphic Design Freebies
Web Button Kits - 450+ button variants for Figma through a complete component system.
Fintech Website Template - A responsive fintech landing page template built for financial service businesses.
Modern Mesh Gradients - A set of 16 free mesh gradients for your UI/UX projects in Figma.
Discover more Graphic Design Freebies →
Curated Free AI Tools
RateMySite - Free AI Website Analysis: Enhance UX & Design.
WikiTimeline - Convert Wikipedia Articles into Interactive Timelines with AI.
iPalettes - Free AI Color Palette Generator for Designers & Creators.
web-ui - Run AI Agent in your browser.
Pre-AI Search - Filter Google searches to pre-AI content.
AI SQL - AI Tool Use Utility for letting your AI query SQL.
News & Articles
New Front-End Features For Designers In 2025 (Link)
A New Chapter for Express.js (Link)
ECMAScript feature: import attributes (Link)
Tight Mode: Why Browsers Produce Different Performance Results (Link)
The future of htmx (Link)
JavaScript & CSS Snippets
Minimalist Toggle - CSS
See the Pen Minimalist Toggle - CSS by Josetxu (@josetxu) on CodePen.
CSS image stack cycle
See the Pen CSS image stack cycle by Ana Tudor (@thebabydino) on CodePen.
Horizontal scroller with scroll-driven animation + scroll snap
See the Pen Horizontal scroller with scroll-driven animation + scroll snap by Ryan Mulligan (@hexagoncircle) on CodePen.
Configurable Canvas Pointer Lines
See the Pen Configurable Canvas Pointer Lines by Jhey (@jh3y) on CodePen.
