Weekly Web Design & Development News: Collective #552
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)
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)
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)
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)
model-icons: Collection of popular LLM icons for building AI apps.
Animstats: Get x10 more engagement, grab attention with Animated GIFs/Videos.
