Weekly Web Design & Development News: Collective #572

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

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

JavaScript & CSS

Text Particles - Dynamic Text Animation with Interactive Particles. (Live Demo)

Watermark-lite - Easily Add Custom Text Watermarks to Web Pages. (Live Demo)

ScrollJs - Custom Scroll Animations and Lazy Loading. (Live Demo)

Slanted Grid Gallery - Create Responsive Slanted Grid Gallery With CSS Clip-path. (Live Demo)

Text Encryption - Secure Your Messages with AES. (Live Demo)

Cursor Magic - Create Smooth Custom Cursor Effect. (Live Demo)

yzhanReactResponsiveContent - A powerful and flexible React component for creating responsive content with automatic media query generation.

jwt - Parse and encode JSON web tokens. (Live Demo)

TextMateHighlighter - An isomorphic syntax highlighter using TextMate grammars and VSCode themes.

BeautifulUsernameGenerator - An elegant and lightweight Node.js library that generates random, visually pleasing usernames.

react-lazy - A library designed to make it easier to implement Lazy Loading in React applications.

On-Scroll Layout Formations - An explorations on assembling (grid) layouts on scroll. Live Demo

Modern SaaS Landing Page - A lightweight, and fully customizable canvas app. (Live Demo)

Discover more JavaScript & CSS Libraries →

---

Web Dev Tools & Resources

ai.robots.txt - A list of AI agents and robots to block.

mitata - Benchmark tooling that loves you.

kubewall - A single binary kubernetes dashboard to manage your multiple clusters.

HiveSpace - Write, Draw and Plan All at Once.

url2tailwind - URL to Tailwind HTML Converter.

difftext - A simple diff checker tool to quickly find the difference between two blocks of text.

---

Graphic Design Freebies

SaaS Landing Page Template - Sleek SaaS Landing Page Template To Boost Your Startup.

Minimalist Crypto Illustrations - Minimalist Crypto Illustrations: Enhance Your Fintech Designs.

50+ Brand Icons - This free icon pack includes over 50 brand icons available in both line and fill styles. You can easily switch between light and dark modes, and the icons are smooth, round, and fully resizable.

Discover more Graphic Design Freebies →

---

Curated Free AI Tools

LlamaCoder - Transform Ideas Into Functional Apps In Seconds.

Magika - Detect file content types with deep learning.

HumanifyJS - Deobfuscate Javascript code using LLMs ("AI").

AwesomeCursorRules - A curated list of awesome .cursorrules files for enhancing your Cursor AI experience.

Discover more Free AI Tools →

---

News & Articles

The Golden Ratio in CSS (Link)

A Complete Guide to Session Management in Next.js (Link)

A guide to destructuring in JavaScript (Link)

How to Make a Scroll to Select Form Control (Link)

---

JavaScript & CSS Snippets

CSS Balance Sliders v2

See the Pen CSS Balance Sliders v2 by Jhey (@jh3y) on CodePen.

---

Lightspeed

See the Pen Lightspeed by Matthias Hurrle (@atzedent) on CodePen.

---

Scroll-Driven Animations - CSS

See the Pen Scroll-Driven Animations - CSS by Josetxu (@josetxu) on CodePen.

---

Firefly Button

See the Pen Firefly Button by Shae Scotten (@ShaeSco) on CodePen.

---