Weekly Web Design & Development News: Collective #510

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 29, 2023).

Web Design & Development News: Collective #510

qrcode-opencv-wechat

QR Code scanner in JavaScript, based on a WebAssembly build of OpenCV with Open CV WeChat QR Code Scanner. Provides a much better detection rate and error tolerance.

qrcode-opencv-wechat

[Demo] [Download]


date-range-picker-for-shadcn

DateRangePicker is a reusable component built for Shadcn using beautifully designed components from Radix UI and Tailwind CSS. It provides a dropdown interface to allow users to select or enter a range of dates and includes additional options such as preset date ranges and an optional date comparison feature.

date-range-picker-for-shadcn

[Demo] [Download]


stats-gl

stats-gl is a comprehensive tool to monitor WebGL performance. The Stats class provides methods to create performance panels, log performance metrics, and manage the display and layout of these panels. The performance metrics logged include FPS, CPU, and GPU. The GPU logging is available only if the user's browser supports the WebGL 2.0 EXT_disjoint_timer_query_webgl2 extension.

stats-gl

[Demo] [Download]


GPT React Designer

With GPT React Designer you can easily get a quick preview of the React code generated by ChatGPT. Engineers can use it to draft up components and then copy it into their main code base. The code generated by GPT React Designer is styled with TailwindCSS or plain inline CSS.

GPT React Designer

[Demo] [Download]


cali-fm

One-click deploy your podcast website via RSS.

cali-fm

[Demo] [Download]


donut-js

Make your code look like a donut.

donut-js

[Download]


mock-html

mock-html is a web server powered by Django and htmx that provides mock HTML responses for experimenting with htmx or other hypermedia libraries. It allows you to simulate server responses and test client-side rendering without the need for a real backend.

mock-html

[Demo] [Download]


Muer

Muer is a modern, open-source music player for you and your friends.

Muer

[Demo] [Download]


Fabric Video Editor

Fabric Video Editor is a video editor that runs in the browser. It is built with fabric.js, Next.js (a React framework), Tailwindcss, Mobx, and typescript.

Fabric Video Editor

[Download]


appwrite-writer

Appwrite Writer is a Notion-style WYSIWYG editor with AI-powered autocompletions powered by Appwrite and Novel. It's goal is to give you an example of how powerful things you can build with Appwrite.

appwrite-writer

[Demo] [Download]


tailwindcss2css

Convert tailwindcss to css, convert tailwindcss to inline css, convert tailwindcss to native css, and enable one-click migration in Vue or React frameworks

tailwindcss2css

[Demo] [Download]


Responsive Camping Website

Responsive Camping Website Design Using HTML CSS & JavaScript.

Responsive Camping Website

[Download]


Inspiration for Text Block Transitions

Some inspiration for transitioning text blocks with word and letter animations.

Inspiration for Text Block Transitions

[Demo] [Download]


GSAP - Intro - Text animation / Cursor

See the Pen GSAP - Intro - Text animation / Cursor by Paul Roger (@Tiopayo) on CodePen.


Transitional Color Picker

See the Pen Transitional Color Picker by Taha Shashtari (@tahazsh) on CodePen.


Particle cursor effect - Starry Night

See the Pen Particle cursor effect - Starry Night by Dennys Dionigi (@DedaloD) on CodePen.


Fluid cursor webgl

See the Pen Fluid cursor webgl by Dennys Dionigi (@DedaloD) on CodePen.


CSS-only Slide-up Caption Hover Effect

See the Pen CSS-only Slide-up Caption Hover Effect by Mojtaba Seyedi (@seyedi) on CodePen.


AI Weekly Digest Issue #14

Get your AI update with AI Weekly Digest Issue #13 for Week 29 of 2023. A curated selection of the most impactful AI news and events worldwide.

AI Weekly Digest Issue 14

[Download]


Detect AI-Generated Content With TypeTruth Python Library

Use AI to classify text as human or AI-generated at the paragraph & sentence level.

Detect AI-Generated Content With TypeTruth Python Library

[View]


Fix Bugs Faster By Explaining Your Code Using AI – Whybug

Leverage AI to provide clear explanations of code errors and step-by-step recommendations to resolve bugs faster.

Fix Bugs Faster By Explaining Your Code Using AI – Whybug

[View]


6 UHD Grainy Gradient Background Images

A collection of 6 UHD (3840 x 2160) grainy gradient background images (wallpapers) for adding a touch of sophistication and depth to your projects.

6 UHD Grainy Gradient Background Images

[Download]


mishmashmoji

A color emoji font available as both OpenType-SVG and COLRv1.

mishmashmoji

[Download]