Weekly Web Design & Development News: Collective #552

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

Code & Tools

Page UI:A collection of templates, components and examples to create beautiful, high-converting landing pages with React and Next.js. Open source & themeable with Tailwind CSS, similar to Shadcn UI. (Documentation)

Page UI

llama3.js: A JavaScript implementation of Llama 3 using node-mlx.

base62: A JavaScript library that converts strings, bytes, and integers into shorter Base62 representations for space-saving solutions. (Live Demo)

to-valid-identifier: Convert strings to valid JavaScript identifiers with the to-valid-identifier library. Improve your code quality and reduce errors. (Live Demo)

Easyfrontend: 700+ Free UI Components With Code Editor.

CodeGPT: Boost your coding productivity with CodeGPT, the open-source AI coding copilot that generates code snippets from natural language. (Article)


shadcn/ui sidebar: A stunning and functional retractable sidebar for Next.js built on top of shadcn/ui complete with desktop and mobile responsiveness. (Live Demo)

  • Retractable mini and wide sidebar
  • Scrollable sidebar menu
  • Sheet menu for mobile
  • Grouped menu with labels
  • Collapsible submenu
  • Extracted menu items list

tuple-it: A handy utility designed to simplify error handling with async/await operations in JavaScript. It wraps the await statement in a [error, data] tuple, allowing you to easily discern whether a promise was rejected or resolved without resorting to nested try/catch blocks.

flowbite-react: An open source collection of UI components, built in React, with utility classes from Tailwind CSS that you can use as a starting point for user interfaces and websites. (Documentation)


Twinny: A definitive, no-nonsense AI code completion plugin for Visual Studio Code and compatible editors like VSCodium. It's designed to integrate seamlessly with various tools and frameworks:

  • Ollama
  • llama.cpp
  • oobabooga/text-generation-webui
  • LM Studio
  • LiteLLM
  • Open WebUI

Fullwindcss: A free tool to extend your tailwind colors.


Headless UI v2.0 for React: Tailwindcss just released Headless UI v2.0 for React, A set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. (Documentation)

jQuery to javascript converter: Convert your jQuery scripts to efficient JavaScript directly in your browser. Receive reliable, chainable, modern JavaScript code instantly that can be used as a minimal utility library, while keeping your existing code untouched. (See Also: jQuery to JavaScript Converter For ChatGPT)

jslog: Simple JavaScript & TypeScript playground.

Code Snippets

Lume Image Carousel

See the Pen Lume Image Carousel by Joe Pea (@trusktr) on CodePen.

loading animation

See the Pen loading animation by Scott R McGann (@cantelope) on CodePen.

Parametric Surface

See the Pen Parametric Surface by Wakana Y.K. (@wakana-k) on CodePen.

Toggle hoverboard

See the Pen Toggle hoverboard by Alvaro Montoro (@alvaromontoro) on CodePen.

Button hover effects

See the Pen Button hover effects by Francois Coron (@francoiscoron) on CodePen.

Free AI Tools

Secret Llama: Fully private LLM chatbot that runs entirely with a browser with no server needed. Supports Mistral and LLama 3. (Article)

Tiempo AI: Boost your productivity with Tiempo. This AI-driven Chrome extension helps you stay on track by redirecting your attention when you stray from your goals. (Article)

Get Instant, Accurate Answers With iAsk.Ai – The Free AI Search Engine

NightBloom: A user-friendly AI image aggregator platform that allows you to easily navigate through a vast collection of artworks across various styles, from anime to oil paintings. (Article)

Get Instant, Accurate Answers With iAsk.Ai – The Free AI Search Engine

Quickvid: A free, open-source AI-powered web app that summarizes YouTube videos.. (Article)

Free Design Resources:

Developer Portfolio: Software Developer Portfolio Website built with next.js and tailwind CSS that helps you showcase your work and skills as a software developer. (Live Demo)

Developer Portfolio

model-icons: Collection of popular LLM icons for building AI apps.


Animstats: Get x10 more engagement, grab attention with Animated GIFs/Videos.