Weekly Web Design & Development News: Collective #579
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 46, 2024).
Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.
JavaScript & CSS
Chronos - A lightweight, timezone-aware date and time manipulation library for JavaScript. (Live Demo)
SenangWebs Notices - Custom Alert/Confirm/Prompt Dialogs to Replace Native Popups. (Live Demo)
Particlex - A lightweight particle system written in JavaScript that adds smooth particle animations to your webpages using HTML5 Canvas. (Live Demo)
ThemeToggle - A JavaScript library that offers automatic and manual dark/light mode switching for your website. (Live Demo)
bsky-widget - Unofficial Bluesky widget to render cute profile cards in your websites. (Live Demo)
3D Text Spinner - This CSS-based 3D text spinner allows you to create an interactive rotating text display with mouse-tracking capabilities. (Live Demo)
Accessible Modal - WCAG-Compliant Accessible Modal System in JavaScript. (Live Demo)
React Scan - React Scan detects performance issues in your React app.
logo.css - An official logo for CSS.
empathic - A set of small and fast Node.js utilities to understand your pathing needs.
chokidar - Minimal and efficient cross-platform file watching library.
tschema - A tiny (500b) utility to build JSON schema types.
Test Server - Utility for creating HTTP and WebSocket servers for testing.
TempEmailValidator - An open-source Node.js package that helps to validate temporary and disposable emails, preventing fake registrations, frauds, and spam.
xlsx-parse-table - A library to parse tables from Excel worksheets. (Live Demo)
wavtools - Record and stream WAV audio data in the browser across all platforms.
Discover more JavaScript & CSS Libraries →
Web Dev Tools & Resources
c-web-modules - Modular and efficient approach to web development in C.
CodeTree - A lightweight Virtual Machine Manager (VMM) designed to be embedded within applications.
vue-mess-detector - A static code analysis tool for detecting code smells and best practice violations in Vue.js and Nuxt.js projects.
atomic-css-devtools - A devtool panel for debugging Atomic CSS rules as if they were not atomic.
Varse - A fast application config manager.
dokploy - Open Source Alternative to Vercel, Netlify and Heroku.
bun-plugin-csv - A Bun plugin which converts .csv and .tsv files into JavaScript modules.
readme.so - The easiest way to create a README.
Graphic Design Freebies
REPLICANT Display Font - A free display font available for personal and commercial projects.
12 High-res Grain Gradient Textures - 12 grain gradient textures in high resolution (6400x4400px at 300DPI).
Discover more Graphic Design Freebies →
Curated Free AI Tools
Thinking Claude - Advanced Claude instructions that guide Claude's reasoning for more comprehensive and deeper answers.
Fast Flux - Free Flux Image Generator: No Sign-Up Required.
PDF2Audio - Transform PDFs into Audio Content.
Intelli-Browser - An open-source Node.js library that allows you to control your browser using natural language, inspired by Claude’s Computer Use.
Accio - Free AI Product Sourcing Engine with Real-Time Data.
GPT Wrapper Generator - Transform your ideas into reality with the AI App Generator.
News & Articles
CSS in 2025: 10 New CSS Features You Should Know (Link)
International Code of Signals Flags in the Browser (Link)
Will we care about frameworks in the future? (Link)
Should web designers learn JavaScript or CSS? (Link)
JavaScript & CSS Snippets
Improved pure CSS blur effect for "glass" header
See the Pen Improved pure CSS blur effect for "glass" header by Jason Lengstorf (@jlengstorf) on CodePen.
ThreeJS 'Portal Planes' with Matcaps
See the Pen ThreeJS 'Portal Planes' with Matcaps by S McNally (@smcnally000) on CodePen.
Interactive Hover Spotlight with Smooth Follow Effect
See the Pen Interactive Hover Spotlight with Smooth Follow Effect by Sam García (@samvgm) on CodePen.
React Glow Cards – Minimal
See the Pen React Glow Cards – Minimal by Jhey (@jh3y) on CodePen.
