Weekly Web Design & Development News: Collective #607

by jQueryScript,

Everything you need to know in development & design this week, rounded up for you (Week 23, 2025).

You'll find the most essential things right now: Javascript & CSS libraries, useful code snippets, crucial web dev news & resources, curated AI tools, free design assets, and plenty of other good stuff we found!

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

 

 

JavaScript & CSS

animate-ui - Motion-Powered Animated Components for Modern UIs. (Live Demo)

animate-ui

shadcn-prose - Pre-Styled Typography for shadcn/ui Projects. (Live Demo)

shadcn-prose

smooothy - Tiny real smooth fast cool all events and evenn more responsive bring your own tooling slider. (Live Demo)

smooothy

Reactwind - Open-Source Tailwind CSS Dashboard Template. (Live Demo)

Changealert

Orbit Menu - Interactive Radial Menus in JavaScript. (Live Demo)

Orbit Menu

cue.js - Build Interactive Product tours & User Onboarding. (Live Demo)

cue.js

UniversalShare - Social Share Buttons Plugin with Custom Popup Support. (Live Demo)

UniversalShare

shadcn-ui-blocks - Ready-Made shadcn/ui Blocks & Components for Modern Web Dev. (Live Demo)

shadcn-ui-blocks

Indie UI - 20+ Animated UI Components with shadcn/ui & Framer Motion. (Live Demo)

Indie UI

CSS Minecraft: A Minecraft clone made with pure HTML & CSS – no JavaScript.

Defuddle - Extract the main content from web pages. (Live Demo)

react-wheel-picker - Smooth iOS-Style Selection for Web Apps. (Live Demo)

react-wheel-picker

Tesseral - Open source auth infrastructure for B2B SaaS. (Live Demo)

errsole.js - Collect, Store, and Visualize Logs with a Single Module.

LogLayer - A modern logging library for Javascript / Typescript that routes logs to various logging libraries, cloud providers, files, and OpenTelemetry while providing a fluent API for specifying log messages, metadata and errors. (Live Demo)

super-utils-plus - A superior alternative to Lodash with improved performance, TypeScript support, and developer experience.

code_timeline_preview - Transforming Code into Engaging Visual Timelines. (Live Demo)

protectjs - Implement robust data security without sacrificing performance or usability.

Enwrap - A tiny (423 bytes gzipped) and dependency-free library that allows you to wrap functions and return typed errors.

Iron Interface - An interactive 3D particle visualization controlled through hand gestures and voice. (Live Demo)

pdftoimg-js - A javascript library that help to convert pdf to img in both platform nodejs and frontend library/framework like React, Nextjs and more.

tsc.run - A minimal framework for building serverless applications in TypeScript.

html2react - A powerful utility that transforms HTML files into fully functional React components with proper JSX syntax.

Discover more JavaScript & CSS Libraries →


Web Dev Tools & Resources

PasteMax - A modern file viewer application for developers to easily navigate, search, and copy code from repositories.

Task Magic - A complete task management system using Cursor/Windsurf rules.

markdown-ninja - A powerful extension that brings JavaScript capabilities to SQLite.

NxLite - Lightning-fast HTTP server built in C.

Params Editor - The smartest way to edit URL parameters in Chrome.

Superglue - One SDK to manage all your data pipelines.


Graphic Design Freebies

Kelmscott Mono Font  - An open-source blackletter for the text & code editors.

Kelmscott Mono Font 

IBM Carbon Icons Pack Figma - A complete SVG icon library with over 2,000 professionally designed icons for web and app projects.

IBM Carbon Icons Pack Figma

AI Product Logos in Figma - High-quality brand icons for modern projects.

AI Product Logos in Figma

Playful Doodle Shapes Figma -  A collection of free, playful doodle shapes including rainbows, flowers, stars, suns, hearts, and more.

Playful Doodle Shapes Figma

Discover more Graphic Design Freebies →


Curated AI Tools for Developers and Designers

Kamili - Enhance your website with friendly, AI-powered guidance

Wireframer - AI builds the layout. You bring the rest.

FLUX.1 Kontext - A suite of generative flow matching models that allows you to generate and edit images.

Kling AI 2.1 - The KLING 2.1 lineup has arrived! KLING 2.1 now offers 720p & 1080p, and the KLING 2.1 Master is fully 1080p for superb performance.

DeepSeek R1 0528 - The latest and most powerful version of DeepSeek R1 reasoning AI model. Now available in its official chat UI and API.

Discover more Free AI Tools →


News & Articles

GitHub for Beginners: Building a React App with GitHub Copilot (Link)

Path to a free self-taught education in Computer Science (Link)

Angular v20 Released (Link)

Why are 2025/05/28 and 2025-05-28 different days in JavaScript? (Link)

Web Sustainability Guidelines (WSG) (Link)

Particle Life simulation in browser using WebGPU (Link)


JavaScript & CSS Snippets

Button Hover Effect: Cursor-Based Glow Pulse

See the Pen Button Hover Effect: Cursor-Based Glow Pulse by Franco Beltramella (@Franbeltramella) on CodePen.


box / box-shadow + vertical transition elongating the shadow

See the Pen box / box-shadow + vertical transition elongating the shadow. by Tom Hermans (@tomhermans) on CodePen.


Wheel Timeline - pure CSS

See the Pen Wheel Timeline - pure CSS by Chris Bolson (@cbolson) on CodePen.


Aura Button Effects

See the Pen Aura Button Effects by Nodws (@nodws) on CodePen.


Basic Neo Brutalist Component Library

See the Pen Basic Neo Brutalist Component Library by Rustcode (@rustcode) on CodePen.