Weekly Web Design & Development News: Collective #575
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 42, 2024).
Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.
JavaScript & CSS
Pag.js - An animated and filterable gallery with pagination, beautiful animations and customisable parameters. (Live Demo)
Magniview - Lightweight JavaScript Lightbox For Enhanced Image/Video Viewing. (Live Demo)
SnapDialog - A lightweight JavaScript library that allows you to create stylish, animated, customizable alert, confirm, and prompt dialog boxes. (Live Demo)
SWL.js - A lightweight JavaScript library that displays a customizable, fullscreen loading indicator while assets like images, scripts, and dynamic content are loading on your webpage. (Live Demo)
svg3dtagcloud - A JavaScript library for generating animated 3D tag clouds using SVG. (Live Demo)
originui - A growing collection of over 50 input components built with Next.js and TailwindCSS. (Live Demo)
assistant-ui - A set of React components for AI chat, with integrations Langchain, Vercel AI SDK, TailwindCSS, shadcn-ui, react-markdown, react-syntax-highlighter, React Hook Form and more. (Live Demo)
openai-realtime-api - TypeScript client for OpenAI's realtime voice API.
Swarm.js - A Node.js implementation of OpenAI’s experimental Swarm framework.
ui-builder - A React component that provides a no-code, visual way to create UIs, compatible with shadcn/ui and custom components. (Live Demo)
shadcn-tiptap - Small, fast .zip library using native CompressionStream, suits server and client. (Live Demo)
react-native-fast-confetti - The fastest confetti animation library in react native written using Skia Atlas API.
just-styled - A dead simple CSS-in-JS library for React 19 or higher.
solid-events - A set of primitives for declarative event composition and state derivation for solidjs.
raw-json - A JSON.rawJSON and JSON.isRawJSON ponyfill (meaning: no global patch applied).
grip - Simplified result/error handling for JavaScript.
Discover more JavaScript & CSS Libraries →
Web Dev Tools & Resources
Fake Log Generator - Generate Realistic Apache and Application Logs
ESBench - Modern JavaScript benchmarking tool.
Animata - Hand-crafted interaction animations and effects from around the internet to copy and paste into your project.
url2tailwind - URL to Tailwind HTML Converter.
Quicky CLI - A CLI tool that streamlines the deployment and management of self-hosted Next.js projects.
Nango - Free OAuth for 250+ APIs.
Graphic Design Freebies
Randization Display Font - A modern display font for your next design.
Black Friday Post Template - A social media post template that provides a ready-made solution for promoting Black Friday fashion deals.
Discover more Graphic Design Freebies →
Curated Free AI Tools
HeadshotMaster - 100% Free AI Professional Headshot Generator
Copy Repo - Copy Paste any Repo into LLMs with 1 Click.
manicode - Use natural language to edit your codebase and run commands from your terminal faster.
Gait - Code Faster with AI, Without All the Guesswork.
Prismy - GitHub-native, AI-powered Localization.
News & Articles
GSAP is Joining Webflow (Link)
Node v23.0.0 was released on Oct 16, 2024 (Link)
How To Measure UX & Design Impact, With Vitaly Friedman (Link)
A new major version of Svelte has been released! (Link)
JavaScript & CSS Snippets
Lightweight Water Distortion Effect
See the Pen Lightweight Water Distortion Effect by Ksenia Kondrashova (@ksenia-k) on CodePen.
Single Keyframe Tricks
See the Pen Single Keyframe Tricks by David East (@davideast) on CodePen.
Scroll-Driven Animations Scroll Detection: BADASS
See the Pen Scroll-Driven Animations Scroll Detection: BADASS by Bramus (@bramus) on CodePen.
- Prev: Weekly Web Design & Development News: Collective #574
- Next: None
