Weekly Web Design & Development News: Collective #553

by jQueryScript,

A collection of the latest and hottest design and development resources (Javascript libraries, CSS snippets, Free Graphic Design Resources, etc.) on the web from the last week (Week 20, 2024).

JavaScript & CSS

Crawl4AI: A powerful, free web crawling service designed to extract useful information from web pages and make it accessible for large language models (LLMs) and AI applications.'

Gauge: An aesthetic and customizable circular visual component for React. Live Demo

Fancy-ANSI: A small JavaScript library for converting ANSI to beautiful, browser-safe HTML. Live Demo

Tiny invert: A tiny yet powerful tool for dependency inversion.

EventEmitter: Typed event and lightweight event emitter with a class based API.

POINTS: A library that uses WebGPU and allows you to create shaders without worrying too much about the setup. Playground

chatbot-widget-ui: A library for creating React.js chatbot widget UI, built using TypeScript. It provides comprehensive customization features that leverage OpenAI API completions.

is-identifier: Check if a string is a valid JavaScript identifier. Live Demo

react-chatbotify: An intuitive and versatile chatbot library tailored to streamline your development process while providing the flexibility to implement advanced features. It is crafted to meet a wide range of requirements, whether you're building a straightforward FAQ chatbot, an intricate conversational interface or even an integration with Large Language Models (LLMs).

moon-toast: A SolidJS toast library. Live Demo

Fallout.css: A tiny CSS library that enables developers to create retro-futuristic style webpages reminiscent of the terminal user interface from the “Fallout” video game series. Live Demo

Fallout.css


coolshapes-vue: 100+ abstract shapes with gradient for design & dev project for Vue. Live Demo

Truecropper: A vanilla JavaScript image cropper that's lightweight, awesome, and has absolutely zero dependencies. Live Demo

Truecropper


Web Dev Tools & Resources

Refine: Build React-based internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.

Cap: Effortless, instant screen sharing. Open source and cross-platform.

Cap


Protecting your email address via SVG instead of JS: The article describes using SVG to protect email addresses from spambots, avoiding JavaScript dependencies. This SVG method keeps email addresses accessible even with JavaScript turned off, allows for standard mailto: links within the SVG, and makes emails copyable like text while concealing them from basic spambots

Featured AI Tools

Taylor Swift: Picture Taylor Swift in any scenario! This free AI tool lets you generate unique images based on your descriptions.

CodeGPT


Refact AI: An open-source AI coding assistant with blazing-fast code completion, powerful code improvement tools, and chat.

JIT.codes: Write code faster in various languages & frameworks. JIT.codes - Your AI-powered code generation companion. 100% free!

CodeGPT


SuperMemory: The free AI chatbot that organizes your bookmarks, notes, and more into a personal knowledge base. Build your second brain now.

SuperMemory


Code Snippets

CSS-only shimmering neon text

See the Pen CSS-only shimmering neon text by Giana (@giana) on CodePen.


No text duplication blended layers

See the Pen No text duplication blended layers by Ana Tudor (@thebabydino) on CodePen.


Interactive Gradient & Glassmorphism with noise

See the Pen Interactive Gradient & Glassmorphism with noise by TOMAZKI (@Podgro) on CodePen.


CSS Filters + mix-blend-mode extreme contrast

See the Pen CSS Filters + mix-blend-mode extreme contrast by Str3lla (@Str3lla) on CodePen.


Anchor Positioning :hover Cards

See the Pen Anchor Positioning :hover Cards by Jhey (@jh3y) on CodePen.


Free Design Resources

Brutalist-style Display Font: A Brutalist-style display font design composed of basic Latin characters, including uppercases, lowercases, numbers, and selected punctuations.

Brutalist-style Display Font


Sleek 3D Duotone Icons In Figma: A collection of over 40 sleek 3D duotone icons designed for Figma users.

Brutalist-style Display Font