Weekly Web Design & Development News: Collective #559

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 26, 2024).

Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.

JavaScript & CSS

Theme toggle effect - Add smooth theme toggle effects with JavaScript and CSS. Perfect for dark/light mode switches. Live Demo

Theme toggle effect

MentionerJS - Mention @users, create #hashtags and remove http(s)/www from URLs easily - Vanilla JavaScript. Live Demo

use-bootstrap-dialog - A JavaScript library for generating dialogs using Bootstrap modals. Live Demo

Auth0 UI Components - A set of reusable React components that can accelerate app building with Auth0.

Auth0 UI Components

Portfolio - Minimalist developer portfolio using Next.js 14, React, TailwindCSS, Shadcn UI and Magic UI. Live Demo

shadcn-minimal-tiptap - A Minimal Tiptap Editor component built for Shadcn. It provides a simple and clean editor for users to write and format text. Live Demo

Nuxt Workers - SSR-safe, zero-config Web Workers integration for Nuxt.

Minimal Next Starter - An opinionated, super minimal Next.js starter template, alternative to create-next-app's template.

Promises - A toolkit with useful promise utilities that utilize the power of TypeScript.

Notion Next.js Mini Kit - a mini kit for integrating Notion API with Next.js. This kit provides a simple and efficient way to connect your Next.js applications with Notion to access and display data.

Commands - A new primitive for writing React components that invoke asynchronous methods easily.

Next.js Starter Template - This template helps you get started with your Next.js project quickly.

Realistic Earth - Simulate various natural phenomena to achieve a lifelike representation of the Earth. Live Demo

Exome - State manager for deeply nested states.

LineTextHoverAnimations - Some hover animations for a terminal-like look. Live Demo

Form API - Easily add forms to your site and receive emails for new submission.

Responsive Product Card With PopupResponsive Product Card With Popup Using HTML CSS And JavaScript. Live Demo

Responsive Product Card With Popup

Discover more JavaScript & CSS Libraries →

Developer Tools & Resources

SQLite Viewer - View and query SQLite databases directly in your browser.

Local Storage Inspector - A browser extension that allows you to inspect and manage localStorage.

Freestyle - The TypeScript native cloud.

Graphic Design Freebies

llama.ttf - A font containing a large language model and inference engine.

Charmed Icons - Charming icon theme for Roblox projects on MacOS.

Charmed Icons

Discover more Graphic Design Freebies →

Curated AI Tools

chatgpt-artificats - Bring Claude's Artifacts feature to ChatGPT.

Prompt Engineering Tool - a web-based application designed to help users experiment with and optimize prompts for various large language models (LLMs).

Free AI Gradient Generator - Create beautiful CSS gradients with AI.

MagicRegexGenerator - Generate & Test Regex For Free With AI.

Soundeff - Generate unique, uncensored, professional-grade sound effects for free with Soundeff AI. 

Discover more Free AI Tools →

News & Articles

Why Google Sheets ported its calculation worker from JavaScript to WasmGC. Link

HSL: An Intuitive Way to Represent Color in CSS. Link

Uniting Web And Native Apps With 4 Unknown JavaScript APIs. Link

JavaScript & CSS Snippets

CSS Only 3D Image Carousel

See the Pen CSS Only 3D Image Carousel by Niklas Knaack (@NiklasKnaack) on CodePen.

Dropdown menu. Pure CSS, smooth height animation

See the Pen Dropdown menu. Pure CSS, smooth height animation by Alena (@solarrust) on CodePen.

Scifi Scroll UI

See the Pen Scifi Scroll UI by  Juxtopposed (@Juxtopposed) on CodePen.

CSS-only Custom range slider

See the Pen CSS-only Custom range slider by Temani Afif (@t_afif) on CodePen.