Weekly Web Design & Development News: Collective #543

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

Web Design & Development News: Collective #543

Puter

Puter is an advanced open-source desktop environment in the browser, designed to be feature-rich, exceptionally fast, and highly extensible. It can be used to build remote desktop environments or serve as an interface for cloud storage services, remote servers, web hosting platforms, and more.

[Demo] [Download]

---

css-selector-tool

An low-code application for testing and experimenting with css selectors. A basic developer console with a built-in HTML parser and proxy.

[Demo] [Download]

---

Human Replay

An open-source, JavaScript-powered web app that allows you to record and playback text input on a webpage.

[Demo] [Download]

---

Tailframes React Components

Open-source React components styled with Tailwind CSS for streamlined and responsive web development.

[Demo] [Download]

---

ts-match

A pattern matching library for JavaScript/TypeScript.

[Download]

---

HoverEffects

Collection of mouse hover effects for buttons.

[Download]

---

Theme-Toggle

Theme-Toggle is a web component that allows you to switch between dark modes and light modes using CSS invert and hue-rotate filters.

It provides an easy way to implement Dark Mode on your website or web app without writing any CSS rules.

[Demo] [Download]

---

JHson.js

A lightweight and fast JavaScript library for converting between HTML and JSON.

The library converts HTML structures into JSON format so developers can easily store, manipulate, and transfer webpage layouts and data between the server and client sides. On the contrary, it also allows you to write JSON directly to the DOM for rendering.

[Demo] [Download]

---

JsonTree.js

A tiny JavaScript JSON tree library that allows developers to visualize complex JSON data through a customizable, interactive tree view.

It requires no dependencies, is fully customizable via API, uses CSS/SASS for styling, and supports features like clickable values, expand/collapse all, and configurable property sorting.

[Demo] [Download]

---

cmdk

Fast, composable, unstyled command menu for Angular.

[Demo] [Download]

---

Share URL

A tiny JavaScript library (web component) that allows visitors to share your content on social media or copy URLs to the clipboard.

[Demo] [Download]

---

AvalynxAlert

A lightweight JavaScript notification library that provides customizable, positioned alerts to enhance user feedback in your applications.

[Demo] [Download]

---

Universal VIN Decoder

Universal VIN Decoder is a lightweight TypeScript library that provides an easy way to validate, parse, and decode vehicle identification numbers (VINs) in your web applications.

It supports over 1,500 manufacturers and has the ability to extract the region, country, model year, and manufacturer from a VIN with just a few lines of code.  Can be useful for automotive websites, inventory management systems, and customer service portals where accurate vehicle information is crucial.

[Demo] [Download]

---

Shiny Card Tilting towards Cursor

See the Pen Shiny Card Tilting towards Cursor by Max (@MyXoToD) on CodePen.

---

Bokeh Background

See the Pen Bokeh Background by Kevin Levron (@soju22) on CodePen.

---

Circular Carousel MotionPath - Draggable & Inertia

See the Pen Circular Carousel MotionPath - Draggable & Inertia by GSAP (@GreenSock) on CodePen.

---

Hi-Tech Notification Button

See the Pen Hi-Tech Notification Button by MOZZARELLA (@TheMOZZARELLA) on CodePen.

---

Progress Indicator

See the Pen Progress Indicator by Amit Sheen (@amit_sheen) on CodePen.

---

Professional Logo & Brand Identity Generator – Sologo AI

Need a logo but lack design skills? Sologo's AI-powered tool generates unique logos free for commercial use. 

[Try It Out]

---

Next-gen Video Generation AI Model – Haiper

A new AI video generation model that lets you create videos from text, animate images, and even repaint existing videos.

[Try It Out]

---

Correct Typos While Typing – AI Typing Assistant

Say goodbye to tedious editing with the AI Typing Assistant. This Python script corrects your text as you type, saving you time and effort. 

[Try It Out]

---

Generate Cute Handwritten Wish Cards With Wishgram AI

Surprise your loved ones with unique, AI-powered handwritten wish cards from Wishgram. Free and easy to use!

[Try It Out]

---

iOS Midnight Icons

Export these icons to customize your iPhone via Shortcuts.

[Download]

---

Free 18+ Illustration Landing Page Template

Ultimate Sora resources: videos, prompts, news, articles, papers, and more.

[Download]

---

Plain Sight

A browser extension that allows you to use steganography based password images to log into accounts.

[Download]

---