Weekly Web Design & Development News: Collective #576
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 43, 2024).
Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.
JavaScript & CSS
Khoshnus - Craft Beautiful Handwritten SVG Text Animations. (Live Demo)
SVG Spinners - 100+ Open-source Animated SVG Loading Spinners. (Live Demo)
advanced-filter-system - Filter DOM elements by multiple criteria, search text, and maintain state in URLs.. (Live Demo)
unicode-number.js - A lightweight JavaScript library that converts Unicode number characters to their numeric values. (Live Demo)
draggable-sheet-modal - A simple, draggable, mobile-friendly bottom sheet modal inspired by iOS. (Live Demo)
GGraphs - A robust JavaScript library for generating responsive, dynamic, animated, interactive, SVG-based graphs and charts. (Live Demo)
fontpicker-v2 - A feature-rich, user-friendly font picker component built with Vanilla JavaScript and Bootstrap 5 framework. (Live Demo)
NextFaster - A highly performant e-commerce template using Next.js and AI generated content. (Live Demo)
KaibanJS - A JavaScript-native framework for building and managing multi-agent systems with a Kanban-inspired approach. (Live Demo)
next-ui-full-calendar - A customizable and flexible calendar component for React that allows you to manage and display events in day, week, or month views. (Live Demo)
Storage - A set of adapters for easy client-side key-value storage.
Beasties - A library to inline your app's critical CSS and lazy-load the rest.
Teclas - A zero-dependency lightweight typescript library where you can easily handle keyboard events.
code-input - Fully customisable, editable, syntax-highlighted textareas + plugins.
Responsive Halloween Website - Responsive Halloween Website Design Using HTML CSS And JavaScript.
Staggered3DGridAnimations - A playful concept where we use scroll-based animations to create 3D grid effects and other transitions. (Live Demo)
Discover more JavaScript & CSS Libraries →
Web Dev Tools & Resources
svelte-bundle - CLI tool to easily bundle a .svelte file into a single .html file.
indexer - Free open-source tool for rapidly indexing web URLs.
JSNinja - A powerful tool for extracting URLs and sensitive information from JavaScript files.
fumadocs - The beautiful docs framework for Next.js.
pneumaticworkflow - Free and source-available Apache 2.0 licensed lightweight workflow automation tool.
Graphic Design Freebies
Hikasami Sans - A sans-serif typeface with a focus on legibility and clean design.
iPhone16ProMockups - A set of three outdoor mockups for the iPhone 16 Pro in Desert Titanium. These mockups display your designs in realistic outdoor environments.
Polaris Illustrations - Polaris Illustrations For Shopify Design System.
Discover more Graphic Design Freebies →
Curated Free AI Tools
Whispo - Transform speech to text with Whispo, a free desktop app using OpenAI Whisper.
Mochi 1 - Transform text into professional videos.
Codeant - AI code reviewer that helps you find and fix critical code quality issues and security vulnerabilities in 30+ languages.
BugGPT - LLM powered vulnerable web page generator for testing and educational purposes.
learn-thing - Create mind maps to learn new things using AI.
News & Articles
Clarifying the Relationship Between Popovers and Dialogs (Link)
Show Baseline status on your blog posts and presentations (Link)
Next.js 15 is officially stable and ready for production (Link)
Shadcn/UI released a new UI Component: Sidebar (Link)
JavaScript & CSS Snippets
Single-digit inputs with one element
See the Pen Single-digit inputs with one element by Temani Afif (@t_afif) on CodePen.
Wooden Toggles
See the Pen Wooden Toggles by Nicolas Jesenberger (@nicolasjesenberger) on CodePen.
Checkout Radios
See the Pen Checkout Radios by Jon Kantner (@jkantner) on CodePen.