Weekly Web Design & Development News: Collective #577
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 44, 2024).
Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.
JavaScript & CSS
bluesky-post - Display Bluesky Posts with Metadata. (Live Demo)
AgnosticStyles - Safe DOM Style Manipulation In JavaScript. (Live Demo)
Stylish - A clean, simple, customizable, theme aware, appearance only stylesheet. (Live Demo)
HuntAndHotkey - Auto-add Keyboard Shortcuts To Link. (Live Demo)
SiteGuard - Prevent Content Theft on Your Website. (Live Demo)
SWM - Create Custom Modals with HTML Attributes or JavaScript. (Live Demo)
SWB - Simple JavaScript Shopping Cart Integration. (Live Demo)
json-qs - A query string encoder and decoder with full JSON compatibility.
gradient-string - Beautiful color gradients in terminal output.
uix.css - CSS-in-CLJS library.
Rattail - A utilities library for front-end developers, lightweight and ts-friendly. (Live Demo)
pretty-markup - Write HTML Like Poetry.
FEAScript - An open-source JavaScript library for solving differential equations using the finite element method.
nextjs-15-starter-core - A starter template is built with Next.js 15, React 19, TypeScript 5 and comes packed with several powerful tools and configurations to accelerate your project setup and streamline development workflows using VS Code.
Rwf - A comprehensive framework for building web applications in Rust.
Aimgen.ai - An open-source template for AI Image Generator Website.
Visual Tagger - A JavaScript tool that visually highlights HTML elements for AIs, aiding in identifying interactive components on web pages.
Discover more JavaScript & CSS Libraries →
Web Dev Tools & Resources
Chromakopia - Craft Your Own Tyler-Inspired Typography.
art-avatar - An avatar generator that can create line-drawing animations showing the drawing process.
SampleFaces - Quick and easy AI-generated profile picture placeholders for developers, with all images randomly created by artificial intelligence!
Tailwind Gradient Generator - Create stunning visuals effortlessly.
faviconvideo - Create distinctive, animated favicons from GIFs.
Graphic Design Freebies
SVG Patterns - 200 Geomethic Polygon SVG Patterns in Figma
Retro Gaming Console Icons Pack - Includes icons for a wide range of retro gaming consoles, from the Atari 2600 to the Sega Dreamcast and even more recent handhelds like the Miyoo Mini.
Discover more Graphic Design Freebies →
Curated Free AI Tools
Cerebellum - Open-source AI Browser Automation System.
Browser AI Kit - Free & Private AI Tools That Run in Your Browser.
Colorfolio - Generate Color Palettes From A Single Word Using AI.
ui-screenshot-to-prompt - Generate AI Prompts From UI Screenshots.
ReadMe-Generator - A CLI tool that automatically generates a comprehensive README file for your project.
News & Articles
AI leads Python to top language as the number of global developers surges (Link)
Boost your browsing with Chrome's new performance controls (Link)
Designing For Gen Z: Expectations And UX Guidelines (Link)
Learn how to write AI prompts in 5 easy steps (Link)
JavaScript & CSS Snippets
Segmented Progress Bar With Tip
See the Pen Segmented Progress Bar With Tip by Jon Kantner (@jkantner) on CodePen.
Slider with Scroll Snap Events
See the Pen Slider with Scroll Snap Events by Arby (@mobalti) on CodePen.
Wheel Gallery (CSS only)
See the Pen Wheel Gallery (CSS only) by Chris Bolson (@cbolson) on CodePen.
