Weekly Web Design & Development News: Collective #560

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

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

JavaScript & CSS

Splidebox -  A lightweight JavaScript library that uses Splide.js and TailwindCSS to create responsive, user-friendly gallery lightboxes in your web projects. Live Demo


Clickdown - A lightweight TypeScript library that delivers instant click feedback for a smoother user experience. Enhance your website’s responsiveness now. Live Demo

fast-npm-meta - A lightweight API server to get npm package metadata, resolve the latest versions on server, and batch multiple package resolutions in one request.

tc-passing - A command that uses TypeScript to only type check previously passing files.

TrexUI - Build website in minutes using TailwindCSS UI components, sections and pages with easy to use customization options. Live Demo

ai-utils - Developer toolkit that makes it simple to build with the Workers AI platform.

CopyFromURL - A user-friendly web tool that allows you to easily extract and copy text content from any webpage. Live Demo

Colors - An open-source color generator. Live Demo

inWind - A Landing Page template developed for global SaaS projects based on Next.js. Live Demo


Astro Mintlify - An open-source documentation template built with Astro, Tailwind, and RadixUI inspired by Mintlify.

WaitlistTemplate - A waitlist template built with JavaScript/HTML/CSS. Live Demo


Discover more JavaScript & CSS Libraries →

Developer Tools & Resources

SnippetEase - A free tool that allows bloggers and developers togenerate beautifully formatted code snippets for their websites and articles.

DesignFoundations - Get the colors, icons, and fonts from any website in seconds. Great for sparking new design ideas.

CSSGradientGenerator - Generate beautiful Gradient Color easily.

WaveGenerator - CSS clip path for containers.

GraphRAG - New tool for complex data discovery now on GitHub.

esm-vscode - A VS Code extension automatically loads types(.d.ts) from esm.sh CDN for JavaScript and TypeScript.

Graphic Design Freebies

iOS 18 App Icon Template - Official resources for creating app icons for iOS and iPadOS, iMessage app icons, and images for promoting in-app purchases.


iOS 18 UI Kit - Official iOS 18 & iPadOS 18 UI Kit for Figma app.


Atmaja Free Display Font - A unique display serif font that seamlessly blends the classic elegance of Garalde fonts.

Atmaja Free Display Font

Discover more Graphic Design Freebies →

Curated AI Tools

AI FAQ Generator - Generate free AI-powered FAQs for any website in seconds.

AI Quiz Generator - AN AI tool that automatically generates a quick, ten-question quiz based on the content of any webpage you provide. 

Discover more Free AI Tools →

News & Articles

How To Improve Your Microcopy: UX Writing Tips For Non-UX Writers. Link

Ecma International approves ECMAScript 2024: What's new?. Link

New JavaScript Set methods. Link

JavaScript & CSS Snippets

SVG Filter Text Marquees

See the Pen SVG Filter Text Marquees by Matthew Morete (@matthewmorete) on CodePen.

Silky smooth SVG link effects with GSAP

See the Pen Silky smooth SVG link effects with GSAP by Josh Dillon (@jdillon) on CodePen.

Gooey SVG Filter Button

See the Pen Gooey SVG Filter Button by Simon Goellner (@simeydotme) on CodePen.

Hand Drawn Buttons

See the Pen Hand Drawn Buttons by Amit (@ghaste) on CodePen.