Weekly Web Design & Development News: Collective #576

by jQueryScript,

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)

Khoshnus

SVG Spinners - 100+ Open-source Animated SVG Loading Spinners. (Live Demo)

SVG Spinners

advanced-filter-system - Filter DOM elements by multiple criteria, search text, and maintain state in URLs.. (Live Demo)

advanced-filter-system

unicode-number.js - A lightweight JavaScript library that converts Unicode number characters to their numeric values. (Live Demo)

unicode-number.js

draggable-sheet-modal - A simple, draggable, mobile-friendly bottom sheet modal inspired by iOS. (Live Demo)

draggable-sheet-modal

GGraphs - A robust JavaScript library for generating responsive, dynamic, animated, interactive, SVG-based graphs and charts. (Live Demo)

GGraphs

fontpicker-v2 - A feature-rich, user-friendly font picker component built with Vanilla JavaScript and Bootstrap 5 framework. (Live Demo)

fontpicker-v2

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.

Hikasami Sans

iPhone16ProMockups - A set of three outdoor mockups for the  iPhone 16 Pro in Desert Titanium. These mockups display your designs in realistic outdoor environments.

iPhone16ProMockups

Polaris Illustrations - Polaris Illustrations For Shopify Design System.

Polaris Illustrations

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.

Discover more Free AI Tools →


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.