Weekly Web Design & Development News: Collective #559
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
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.
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 Popup - Responsive Product Card With Popup Using HTML CSS And JavaScript. Live Demo
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.
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.
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.
