Weekly Web Design & Development News: Collective #576

Heng Zong
4 min readOct 28, 2024

--

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 WebsiteResponsive 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.

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)

Originally published at https://www.jqueryscript.net on October 28, 2024.

--

--

Heng Zong
Heng Zong

Written by Heng Zong

0 Followers

Web developer, blogger, AI enthusiast, father of 2 girls.

No responses yet