Weekly Web Design & Development News: Collective #585
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 52, 2024).
Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.
JavaScript & CSS
Pure CSS Tree View - a pure CSS tree view with unlimited nesting. (Live Demo)
Unitflip - A tiny JavaScript library for converting CSS units. (Live Demo)
ParticleBackground.js - Add a smooth canvas particle animation to your website. (Live Demo)
Cryptia - Implement basic text encryption in JavaScript projects. (Live Demo)
SnapAlert - A lightweight Javascript plugin that creates stylish and customizable alert notifications. (Live Demo)
rainSPOTjs - A Javascript library for generating meteoblue "rainSPOT" visualizations with SVG or Canvas. (Live Demo)
base85 - A tiny JavaScript utility library that provides a fast way to encode Uint8Array data into a base85 (Ascii85) string and decode base85 strings back into Uint8Array. (Live Demo)
asyncr - Async Select component built with React & ShadCN UI. (Live Demo)
openauth - A standards-based auth provider for web apps, mobile apps, single pages apps, APIs, or 3rd party clients. (Live Demo)
css-api-fetch - Make remote API Requests in CSS (Cascading Style Sheets) and store the response data in --vars on :root without JavaScript. (Live Demo)
JS-Hooker - Just load this .js module and it will start tracking all external calls by a JS-application. (Live Demo)
Anime Scene Gallery - Interactive anime scene gallery with hover animations and dynamic transitions. (Live Demo)
emitter - A modern, powerful, and lightweight EventEmitter designed for seamless integration with TypeScript projects.
rest-mongoose-easy - A lightweight and easy-to-use library for creating RESTful APIs with MongoDB and Mongoose.
dropflow - A CSS layout engine. (Live Demo)
Discover more JavaScript & CSS Libraries →
Web Dev Tools & Resources
imgsrc-app - Generate beautiful Open Graph images.
tailwind-gradient-generator - A modern, intuitive web application for generating beautiful gradients and getting their corresponding Tailwind CSS classes.
Badge My App - Create your Product Hunt badge, whatever your rank is!
UnderlayX - Add shapes and text behind elements in an image.
Fluidmotion - A curated collection of beautiful customizable video backgrounds for you to edit and use in your own projects.
Graphic Design Freebies
Neomorphism UI Kit - Minimal Clean Neomorphism UI Kit in Figma.
IT Website Template - A Modern IT Website Figma Template.
AI Logos - 12 Free Pixel-perfect AI Logos (ChatGPT, Midjourney, and More)
Dashboard Icons - 20 Free Thinline UI Icons for Your Dashboard Design.
Discover more Graphic Design Freebies →
Curated Free AI Tools
ReactAI - Build React Components using AI in seconds.
AIGenEmoji - Turn text and images into custom emojis.
Open Deep Research - Use AI for in-depth web research with Open Deep Research.
ChatGPT Saved Chats - Save important ChatGPT conversations with one click.
ClickX3 - An open-source framework for autonomous Android & PC control.
StudyMate - A modern, feature-rich study management application built with React and TypeScript.
News & Articles
JavaScript Benchmarking Is a Mess (Link)
A CSS Wishlist for 2025 (Link)
The Hype Around Signals (Link)
JavaScript & CSS Snippets
Card background blurs, no overlap
See the Pen Card background blurs, no overlap by Simon Goellner (@simeydotme) on CodePen.
Animated CSS Gradient Text
See the Pen Animated CSS Gradient Text by Adam Argyle (@argyleink) on CodePen.
Idea Form
See the Pen Idea Form by Jon Kantner (@jkantner) on CodePen.
Snowfall On The Street
See the Pen Snowfall On The Street by Ljupcho Atanasov (@Ljupce-Atanasov) on CodePen.
