✨2023#45: draw-a-ui: Draw a mockup and generate html

📅 November 5-11, 2023

draw-a-ui: Draw a mockup and generate html for it

An app that uses tldraw and the gpt-4-vision api to generate html based on a wireframe you draw.

You can join the waitlist at draw-a-ui.com

nextjs-postgres-email-client: An email client built with the Next.js App Router and Postgres

source

react_request: A Tiny Custom React hooks for making request.

import useRequest from '@blacktea/react-request'
import getFooApi from '@/utils/axios'

function App () {
  const [{ loading, error, data }, fetch] = useRequest(getFooApi)

  useEffect(() => { fetch() }, [fetch])

  if (loading) return 'loading'
  if (error) return 'error'

  return data && <div>{data}</div>
}

nuxt-edgedb: Nuxt 3 integration for EdgeDB

integrating Nuxt 3 with EdgeDB. EdgeDB is a database that can be added to a Nuxt 3 app with minimal configuration. The integration is effortless and seamless, and it includes features such as live schema updates, typed query generation, and integrated database management. It also supports flexible authentication with Email or OAuth.

github-lite: WIP GitHub client built with React Aria Components + Tailwind CSS

source

highmate: An isomoprhic syntax highlighter using TextMate grammars and VSCode themes

This is a syntax highlighter that is similar to Shiki. It works in both browsers and in server-side environments. It is unopinionated about how Oniguruma, grammars and themes are loaded or from where. It supports various built-in rendering targets: HTML, DOM and CSS Custom Highlights. It supports a low-level tokenization mode, for custom render targets.

fiume: zero-dependency, lightweight finite state machine in Typescript

Fiume is a lightweight and intuitive state machine library written in Typescript and compatible with all JS runtimes. It allows you to define states, transitions, and hooks for state entry, exit, and transition events. Unlike other libraries, Fiume does not require you to hardcode state transitions. Instead, you can write the transition logic inside the transitionTo function. You can also access directly the reference of your machine and manipulate its public properties.

motion: 🔥 Svelte animation library

Motion is a simple Svelte animation library. Instead of being limited to animating CSS properties using a JavaScript animation library, or the Web Animations API, it uses values that change over time, to animate any property.

More tools to explore:

• image-dimensions: Get the dimensions of an image

• GPTHub: 🔍 Discover the Best in Custom GPT at OpenAI's GPT Store

• HackerGPT: An AI-powered assistant designed to aid ethical hackers in their endeavors

• WebcamGPT-Vision: Lightweight GPT-4 Vision processing over the Webcam

• rdt-li: A self hostable, feature rich, minimalistic URL shortener

• htmlbook2pdf: GitBook to PDF

• bussin: An esolang in TypeScript, for heaven's sake.

• auto-playwright: Automating Playwright steps using ChatGPT.

• Hyphen: An elegant custom element base class

• vscode-shadcn-vue: Shadcn Vue VSCode extension

• edge-vscode: Official extension for VSCode

• gudam: A tiny store management library for react.