jQuery Script Blog

Weekly Web Design & Development News: Collective #491

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

Web Design & Development News: Collective #491

Customizable And Extensible Calendar Heatmap Library – cal-heatmap

A versatile javascript charting library that allows you to create customizable, extensible, and interactive time-series calendar heatmaps similar to Github’s contribution graph.

Customizable And Extensible Calendar Heatmap Library – cal-heatmap

[Demo] [Download]

sonner

An opinionated toast component for React. It's customizable, but styled by default. Comes with a swipe to dismiss animation.

sonner

[Demo] [Download]

banditypes

The mighty 400-byte schema validator for TS / JS.

banditypes

[Download]

MindsJS

A JS library (Typescript) that makes it easy to build your workflows and app backends with large language models (LLMs) like OpenAI, Cohere and AlephAlpha.

This library handles all the complex prompt engineering so you can focus on building amazing things like context power chat, question answering, natural language search in minutes. Define Javascript functions that AIs can use. For example the AI can lookup your database, call an API or search the web while answering a business question.

MindsJS

[Download]

Horizon UI TailwindCSS React

The trendiest & innovative Open Source Admin Dashboard Template for Tailwind CSS & React!

Horizon UI TailwindCSS React

[Demo] [Download]

unpic-placeholder

This is a library for generating low quality image placeholders (LQIP) by server-side rendering a BlurHash values. These are displayed while an image is loading, give better appearance and can help reduce the LCP time. It can render the Blurhash to either a set of CSS gradients, or a tiny BPM image data URI. These are usually around 150 bytes in size, and can be applied as a background image to the img element.

unpic-placeholder

[Demo] [Download]

unpic-img

A cross-framework component for responsive, high-performance images using image CDNs.

  • Just an <img> tag! No extra elements, no runtime JavaScript. Easy to style. No legacy hacks or workarounds.
  • Automatically generates correct srcset and sizes attributes for responsive images.
  • Handles responsive resizing of images, preserving aspect ratio and avoiding layout shift.
  • Uses native lazy loading and async decoding for offscreen images.
  • Handles different image layouts: fixed, constrained and full width.
  • Uses eager loading and high priority fetching for important images.
  • Delivers modern image formats, including WebP and AVIF if supported by the browser.
  • No build step or server-side rendering required for the images: uses your existing image CDN or CMS, with no additional configuration.
  • Uses unpic to support most image CDNs, including Cloudinary, Imgix, and Shopify.
  • Can generate a low-res background image for a blurred placeholder effect, or use with @unpic/placeholder for more options.

unpic-img

[Demo] [Download]

Text Highlighter

A responsive text highlighter plugin that makes it possible to highlight specific text within a textarea element.

Text Highlighter

[Demo] [Download]

Space.js

This library is part of two sibling libraries, Space.js for UI, Panel components, Tween, Web Audio, loaders, utilities, and Alien.js for 3D utilities, materials, shaders and physics.

Space.js

[Demo] [Download]

Glassmorphism Style Analog Clock

A stylish Glassmorphism (frosted glass) style analog clock built with JavaScript, HTML, and CSS/CSS.

Glassmorphism Style Analog Clock

[Demo] [Download]

Animated Gradient Button

Animated Gradient Button Using HTML & CSS

Animated Gradient Button

[Demo] [Download]

Virtual Joystick

A JavaScript library to create a touch-enabled joystick control that works seamlessly on mobile devices, allowing users to move objects, control characters, and interact with your application naturally and intuitively.

Virtual Joystick

[Demo] [Download]

theme-toggles

A set of 12 animated, customizable, accessible, SVG-based toggle controls written in HTML/CSS.

theme-toggles

[Demo] [Download]

beautyToast

A fast, customizable toast notification library that provides a simple way to notify users of important events or updates.

beautyToast

[Demo] [Download]

Pure CSS Marquee

A fast, customizable toast notification library that provides a simple way to notify users of important events or updates.

Pure CSS Marquee

[Demo] [Download]

Bicycle Preloader

See the Pen Bicycle Preloader by Jon Kantner (@jkantner) on CodePen.

Super Header Slider

See the Pen Super Header Slider by Hyperplexed (@Hyperplexed) on CodePen.

WebGL Voronoi Mouse Effect

See the Pen WebGL Voronoi Mouse Effect by Zach Saucier (@ZachSaucier) on CodePen.

Gravity Cursor with :has()

See the Pen Gravity Cursor with :has() by Jhey (@jh3y) on CodePen.

10 Best Free Sticker Mockups and Illustrations

10 Best Free Sticker Mockups and Illustrations to Elevate Your Designs

10 Best Free Sticker Mockups and Illustrations

[Download]

Grain Gradient Pack

You can use it for both personal and commercial projects without having to pay any fees or royalties.

Grain Gradient Pack

[Download]

Blackout UI Icons

A modern black-white style UI spot icons for your web and app projects. This pack includes core icons focused on finance, business, web, & marketing categories.

Wave Icons Essential icons

[Download]

Black And White Web & Mobile UI Kit

Black & White is a free to use Web and Mobile Development UI Kit. There are over 120 components available in this library ready to be used in your designs.

Black And White Web & Mobile UI Kit

[Download]