Weekly Web Design & Development News: Collective #581
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 48, 2024).
Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.
JavaScript & CSS
bluesky-comments-tag - Add Bluesky comments to your website with zero dependencies. (Live Demo)
sveltednd - Add Drag and Drop to Your Svelte App. (Live Demo)
Clipify - Advanced Clipboard Management in JavaScript. (Live Demo)
Number Flow - Responsive and Flexible Toast Alerts. (Live Demo)
iselect - Accessible and Modern Select Dropdowns. (Live Demo)
cursify - Add dynamic cursor animations to React & Next.js apps. (Live Demo)
snow-theme - Implement a falling snow effect on your website using Snow Theme. (Live Demo)
Quantum Particle Animation - An interactive quantum particle simulation that creates mesmerizing visual effects using HTML5 Canvas. (Live Demo)
masked-password - Securely mask sensitive inputs with the lightweight masked-password library. (Live Demo)
senangwebs-gallery - A Vanilla JavaScript library that creates a modern, responsive, mobile-friendly, high-performance gallery lightbox. (Live Demo)
css-zero - An opinionated CSS starter kit for your "nobuild" application. (Live Demo)
React Native Shiki Engine - Shiki syntax highlighting for React Native. Zero bridge overhead with native Oniguruma regex engine.
mielo.css - Modern UI framework for web, inspired desktop design. (Live Demo)
persist-form - Persist form values across page refreshes and client side routing with optional React components and hooks.
launch-ui - Landing page kit built with React, Shadcn/ui and Tailwind that you can copy/paste into your project. (Live Demo)
responsive-dropdown-profile-menu - Responsive Dropdown Profile Menu Using HTML CSS And JavaScript.
Discover more JavaScript & CSS Libraries →
Web Dev Tools & Resources
BeeSync - A privacy-focused, local-first, open-source, and ready-to-use alternative for Notion & Miro.
Flowtide - A beautiful, smart New Tab page for your browser.
Pureanim - Your SVG animation toolkit.
syntaxcv - The resume builder for developers.
Clipboard Canvas - A free clipboard manager that helps designers and developers organize and access their clipboard content efficiently. Features text snippets, code snippets, and clipboard history.
Graphic Design Freebies
Brand & Utility Icons - 30 Free Minimal Brand & Utility Icons For iOS.
Christmas Banners & Illustrations - 20+ Christmas Banners & Illustrations for Festive Designs.
Discover more Graphic Design Freebies →
Curated Free AI Tools
llms.txt - AI-Powered YouTube Search for Students and Educators.
Flashlearn - Free AI Transforms Udemy Courses into Interactive Study Materials.
Cali - Free AI Agent To Build React Native Apps 5X Faster.
Dewatermark AI - An open-source Node.js library that allows you to control your browser using natural language, inspired by Claude’s Computer Use.
News & Articles
Artificial Intelligence and the Future of Work (Link)
15 Must-Know Web APIs That Work Across Most Browsers (Link)
Exploring Typesafe design tokens in Tailwind 4 (Link)
The Ease of JSX with the power of SSR (Link)
JavaScript & CSS Snippets
The Rainbow is Watching
See the Pen The Rainbow is Watching by Nick Watton (@2Mogs) on CodePen.
Liquid Distortion Effect (WebGL)
See the Pen Liquid Distortion Effect (WebGL) by Ksenia Kondrashova (@ksenia-k) on CodePen.
Wavy Lines / Canvas 2D version
See the Pen Wavy Lines / Canvas 2D version by Antoine Wodniack (@wodniack) on CodePen.
simple `grid` with reveal + resize on `hover`
See the Pen simple `grid` with reveal + resize on `hover` by mandynicole (@mandynicole) on CodePen.
