✨2024#2: Harmony: A New Color Picker For React

📅 January 7-13, 2024

harmony: A new kind of color picker for React

Harmony is a new type of color picker that computes harmonic colors along with the primary one. It supports five different harmonies: analogous, triad, tetradic, complementary and square.

import {ColorWheel} from '@newfrgmnt/harmony';

export const MyColorPicker = () => {
    return (
        <ColorWheel harmony="analogous" radius={200} />
    );
}

GitChat: Chat with your git repo

GitChat is a chatbot that can answer questions about GitHub repositories. It's useful for new users to get familiar with a repository or for organizations to provide their engineers with a helpful tool for navigating private repositories. The chatbot is built on Vercel's Next.js AI Chatbot Template and includes features like Google authentication, user session management, chat history, chat sharing, and dark/light mode.

twoslash: Markup for generating rich type information in your documentations ahead of time

Twoslash is a markup format for TypeScript code that lets the TypeScript compiler do the heavy lifting for code samples. It's like a pre-processor for your code examples, ensuring accurate error messages and rich highlighting. Twoslash is used in the TypeScript website and bug tracker to create consistent and reliable code samples.

npm-download-stat: Get npm download stats by versions

source

htmx-offline-mode: Adding offline mode capabilities to HTMX

HTMX does not support offline mode, which means it needs an internet connection to work. So the htmx-offline-mode plugin was created, which will capture htmx requests, store them locally, and then send them to the server when the internet is reconnected.

typed-route-handler: Type-safe API Route Handlers for Next.js

Typed-route-handler is a cool new library that makes your Next.js route handlers more type-safe. It's got features like type-safe route handler responses and parameters, extended Next.js error handling, full zod compatibility, route handler timing, request logging, and it's production ready. 🚀

type ResponseData = {
  result: string
  over: number
}

export const GET = handler<ResponseData>(async (req) => {
  return NextResponse.json({
    result: "this response is type-checked",
    over: 9000
  })
})

og-img: Generate dynamic Open Graph images for your website

og-img is a handy tool for creating dynamic Open Graph images for your SvelteKit, Astro, SolidStart, or Qwik website. It's framework agnostic, meaning you can use it with any of these frameworks without any hassle. It utilizes WebAssembly to convert SVG to PNG images efficiently, making it a lightweight and performant solution. Plus, it offers a framework agnostic approach for defining the image content using satori-html.

Heat.js: generates customizable heat maps

Heat.js is a super lightweight and easy-to-use JavaScript library that lets you create awesome heatmaps to visualize date-based activity and trends. It's fully customizable, supports multiple CSS themes, and even lets you export data to CSV. Plus, it's got 12 language translations available!

source

kittylog: Pretty logs in JavaScript

KittyLog is a JavaScript library that makes your logs visually appealing and easy to understand. It helps organize information clearly and adds colors and styles to make messages stand out.

source

More tools to explore:

• autoflow: Add AI intelligence to your tests with AutoFlow

• next-ai-news: A full-stack replica of HN using Next.js and AI generated content

• aiwallpaper: AI Wallpaper Generator

• mdx: Markdown parser from Mintlify that provides a better developer experience for Next.js users by supporting syntax highlighting

• nextjs-app-router-training: Introducing various basic patterns of app router with simplified code

• opencap.co: The Open Source alternative to Carta and Pulley

• TextClipScroll: Experimental on-scroll typography effects using SVG clip-paths.

• chisel: A command line GPT-4 chat loop that can directly read and write code on your local filesystem

• buildanything: Generate any HTML page/app and see it stream in real-time

• NinjaPen: An CodePen clone built with React and TypeScript

• show-when: An element that shows or hides based on provided conditions

• rate-limiter: built and implemented 4 different Rate Limiting strategies with tests

• context: Create and share context across Astro components.

• WardGraph: Open-source graph tool for exploring blockchain transactions with a focus on compliance and risk analysis

• botops: A command line tool that makes chatbot deployment easy, supporting Feishu, DingTalk, Discord, Github and Slack

• rsc-better-cache: a more flexible React Server Components cache, to avoid prop drilling