Weekly Web Design & Development News: Collective #569
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 36, 2024).
Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.
JavaScript & CSS
heading-anchors - Add Accessible Shareable Anchor Links To Headings. (Live Demo)
ClipX.js - Advanced Clipboard (Copy/Paste/Cut) Management Library. (Live Demo)
NeatGradients.js - Create Fluid Gradient Animations With JavaScript. (Live Demo)
loadr - Fast, Smooth Image Loading For Better User Experience. (Live Demo)
Magnifier Lens Effect - Zoom in on Image Details with Magnifier Lens Effect in JavaScript. (Live Demo)
unplugin-unused - Check unused dependencies.
emoji-regex-xs - A regular expression to match all emoji-only symbols.
remix-og-image - TypeScript notebook for rapid prototyping.
Fuse - The fastest way to build and query great APIs with TypeScript. (Live Demo)
ascii-3d-renderer.js - 3D Renderer using ASCII.
blitz - MutationObserver for CSS. Get notified when the computed value of a CSS property changes.
bottom-navigation-bar - Bottom Navigation Bar With Expandable Menu Using HTML CSS And JavaScript. (Live Demo)
CSS Var Extract - Use CSS variables type-safely for CSS-in-JS.
Discover more JavaScript & CSS Libraries →
Tools & Resources
neobrutalism.css - NeoBrutalism library in CSS!
Kardinal - The lightest-weight way to spin up dev and test environments in Kubernetes.
Favicon Downloader - Your Ultimate Favicon Checking & Downloading Tool.
Image Ranker - Rank images using TrueSkill by comparing them against each other in the browser.
TweetTrace - A free and open-source Chrome extension that records tweets you visit.
HTML to React & Figma - Convert HTML from any page to React and/or Figma. Edit with AI.
Curated Free AI Tools
SeekAll - Free Browser Extension for AI & Multi-Platform Search.
AI Image Upscaling - Free AI Tool Scales Images 4x.
RizzText - Free AI Wingman for Better Texts.
News & Articles
What’s new in React 19 (Link)
An SSR Performance Showdown (Link)
CSS @property and the New Style (Link)
Regexes Got Good: The History And Future Of Regular Expressions In JavaScript (Link)
JavaScript & CSS Snippets
Shiny call-to-action button
See the Pen Shiny call-to-action button by Ryan Mulligan (@hexagoncircle) on CodePen.
PixiJS: Digital Noise
See the Pen PixiJS: Digital Noise (SODA) by Yusuke Nakaya (@YusukeNakaya) on CodePen.
Mesmerizing Loader Animation
See the Pen Mesmerizing Loader Animation by Jon Christensen (@JMChristensen) on CodePen.
Pure CSS text effect (no Firefox)
See the Pen Pure CSS text effect (no Firefox) by Ana Tudor (@thebabydino) on CodePen.
- Prev: Weekly Web Design & Development News: Collective #568
- Next: None
