jQuery Script Blog

Weekly Web Design & Development News: Collective #537

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

Web Design & Development News: Collective #537

Placemark

An open-source web application that lets you import, create, export, visualize, and publish geospatial data. It supports many geospatial data formats, and many editing operations, both algorithmic, like buffering, and drawing-based.

Placemark

[Demo] [Download]

NLUX

NLUX (for Natural Language User Experience) is an open-source Javascript library that makes it simple to integrate powerful large language models (LLMs) like ChatGPT into your web app or website. With just a few lines of code, you can add conversational AI capabilities and interact with your favourite LLM.

  • Build AI Chat Interfaces In Minutes - High quality conversational AI interfaces with just a few lines of code.
  • React Components & Hooks - <AiChat /> for UI and useAdapter hook for easy integration.
  • Flexible LLM Adapters - ChatGPT and HuggingFace, and an API to Create Your Own Adapter for any LLM.
  • Bot and User Personas - Customize the bot and user personas with names, images, and descriptions.
  • Streaming LLM Output - Streamed the chat response to the UI as it's being generated.
  • Syntax Highlighting - Color code snippets in the response. Copy And Paste code into your editor.
  • Personalized Conversation - Provide context using system messages, and instruct LLM how to behave.
  • Customizable Theme - Easily customize the look and feel of the chat interface using CSS variables.
  • Event Listeners - Listen to messages, errors, and other events to customize the UI and behaviour.
  • Zero Dependencies - Lightweight codebase, with zero-dependencies except for LLM front-end libraries.

NLUX

[Demo] [Download]

Harmony

A new kind of Color Picker, which computes harmonic colors along with the primary one. It supports Analogous, Triad, Tetradic, Complementary & Square harmonies.

Harmony

[Demo] [Download]

Dream CSS-in-JS Tool

Styled-components, but without a client runtime. Built for Next.js. The goal is to build something that is fully compatible with React Server Components.

Dream CSS-in-JS Tool

[Demo] [Download]

Until Connected

Wait for a connection at the given target without making any requests.

Most packages that concerns themselves with awaiting a particular connection do so by making a HEAD/GET request to the address. This means that if you are awaiting an application that has some lgic in its root (/) route, such an await mechanism will trigger that logic.

Dream CSS-in-JS Tool

[Download]

shadcn-chat

Customizable and re-usable chat component for you to use in your projects. Built on top of shadcn.

shadcn-chat

[Demo] [Download]

react-image-particles

A React component that converts any image into interactive particles.

react-image-particles

[Download]

HoldCircleJS

A tiny yet highly customizable progress bar JavaScript library that provides visual feedback for click-and-hold actions like buttons and other page elements.

HoldCircleJS

[Demo] [Download]

lmaolang

LmaoLang is a unique programming language that uses emojis to represent HTML elements. It's designed for those who love to mix creativity and coding.

lmaolang

[Download]

JavaScript Console

A lightweight JavaScript code execution and debug environment similar to JSFiddle or Stackblitz. Key features include code completion, logging capabilities, and local storage support.

JavaScript Console

[Demo] [Download]

Open Source Laptop Sticker Maker

A Memoji-Laptop-Sticker maker for creating custom profile images.

Open Source Laptop Sticker Maker

[Demo] [Download]

CSS Boombox buttons

See the Pen CSS Boombox buttons by Alvaro Montoro (@alvaromontoro) on CodePen.

CSS-only wavy borders

See the Pen CSS-only wavy borders by Temani Afif (@t_afif) on CodePen.

Toggle Switch: Rebound

See the Pen Toggle Switch: Rebound by Alvaro Montoro (@alvaromontoro) on CodePen.

CSS scroll-driven scroll-snapping animations

See the Pen CSS scroll-driven scroll-snapping animations by Giana (@giana) on CodePen.

Skill-bar

See the Pen Skill-bar by Metty (@Metty) on CodePen.

Transform Your Ideas into Websites with Makedraft AI

Generate web pages with Makedraft's AI assistant. Get code styled with Tailwind CSS to copy into your projects and skip tedious coding.

Transform Your Ideas into Websites with Makedraft AI

[Try It Out]

Free AI Text-to-Speech Engine – Text Reader

Transform written content into captivating audio experiences with high-fidelity AI voices. Podcasts, audiobooks, videos – the possibilities are endless.

Free AI Text-to-Speech Engine – Text Reader

[Try It Out]

An Open-Source AI Chatbot to Explore GitHub Projects – Waterloti

Explore open source projects on GitHub with Waterloti, the personalized AI chatbot. Get tailored recommendations and easily search GitHub.

An Open-Source AI Chatbot to Explore GitHub Projects – Waterloti

[Try It Out]

Pixel Icon Library

An open-source collection of 1440+ Pixelated Icons. Meticulously designed on a 24px grid, ensuring perfect alignment and consistency to enrich your web/app/product/page/life experience.

Pixel Icon Library

[Download]

Cybrogpunk Brush FONT

A loud and proud all-caps font was hand-drawn, maintaining the authentic high definition brush detail in each stroke. It's an exhilarating font choice perfect for header text, poster designs, album covers, product designs, merchandise, logos & more.

Cybrogpunk Brush FONT

[Download]

Free Beautiful Gradient

20 Grainy Monotone Gradient Textures. Great for phone backgrounds, Mockups and for texture overlays on your designs.

Free Beautiful Gradient

[Download]