DEV Community

JSTools Weekly
JSTools Weekly

Posted on • Originally published at jstools.substack.com

JSTools Weekly —🔥2023#9: Docus: Write beautiful docs with Nuxt & Markdown

Hi JS developers👋
JSTools Weekly newsletter, issue 2023#9 (hot JS Tools) just released.

hot JS tools, issue 2023#9

docusWrite beautiful documentations with Nuxt and Markdown.

Docus

schemaModeling the schema of data structures as first-class values

Effect-TS/schema

next-fetchIntuitive data fetching for Next.js

  • 💃 Import your API endpoints instead of making a stringified dance

  • 🔒 Infer the types end-to-end for your data based on its implementation

  • ⚛ Think in React, instead of routing: you only export a React hook!

  • 🕵 Embrace best-practices: input validation, error handling, etc.

  • 🌐 Use Request and Response classes as building blocks, no matter what runtime you're running on (Node.js or Edge)

  • 📝 Use <Form /> component for making progressive enhanced experiences

  • 🤯 Supports SWR and React Query out of the box!

arktypeThe first isomorphic type system for TS/JS

ddb-table🔒 Strongly typed library for querying and modeling DynamoDB documents in TypeScript.

  • Strongly Typed - End-to-end TypeScript validation for your data.

  • Easy Query Expressions - Automatically escape name attributes and values.

  • Smart Projections - Make sure you only access the fields you project.

  • Query & Scan Indexes - Complete support for global or local indexes.

  • Pure JavaScript - Also works without TypeScript.

database-jsA Fetch API-compatible PlanetScale database driver

nextjs-openaiHooks and components for working with OpenAI streams.

GPT-3-EncoderJavascript BPE Encoder Decoder for GPT-2 / GPT-3

openai-nodeNode.js library for the OpenAI API

const { Configuration, OpenAIApi } = require("openai");

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

const completion = await openai.createCompletion({
  model: "text-davinci-003",
  prompt: "Hello world",
});
console.log(completion.data.choices[0].text);
Enter fullscreen mode Exit fullscreen mode

signiaReactive signals that scale, by tldraw.

senimanSeniman.JS is a Node.JS framework for server-driven JSX user interfaces

import { useState } from "seniman";

function Counter(props) {
  let [getCount, setCount] = useState(0);
  let onClick = () => setCount(count => count + 1);

  return <div class="counter">
    My counter: {getCount()}
    <button onClick={onClick}>Add +</button>
  </div>;
}
Enter fullscreen mode Exit fullscreen mode

react-qrcode-logoReact + Typescript component to generate a QR Code with custom colors and logo

react-qrcode-logo

vaviteDevelop server-side applications with Vite

dukpySimple JavaScript interpreter for Python

ChromogenUI-driven Jest test-generation package for Recoil selectors and Zustand store hooks

zod-validation-errorWrap zod validation errors in user-friendly readable messages

  • User-friendly readable messages, configurable via options;

  • Maintain original errors under error.details;

  • Extensive tests.

NotionAIUnofficial NotionAI API

monokle🧐 Monokle streamlines the process of creating, analyzing, and deploying Kubernetes configurations

  • 👩‍💻 Single IDE for your configuration files, manifests, resources and cluster management

  • 🌤️ Connect to your clusters and see real time state and resources

  • ⚡ Quickly get a high-level view of your manifests, their contained resources and relationships

  • 📇 Leverage Git to manage the lifecycle of your configuration

  • 👌 Validate your manifests in real time against YAML formatting, K8s schemas including CRD installed, and easily follow links

  • ✅ Validate resources using OPA policy rules or define your own

  • and many more

qwik-uiQwik UI Components

nextjs-componentsA collection of React components, transcribed from https://vercel.com/design.

nextjs-components

react-plockThe 1kB Masonry Grid for React.

  • Masonry Layout: Create beautiful masonry layouts with ease.

  • Responsive: Automatically adapts to different screen sizes and devices.

  • Customizable: Customize the layout to match your needs.

  • TypeScript Ready: Get the strength of type-safe languages.

  • Amazing DX: Easy to use and well-documented.

See full list of hot javascript tools

Top comments (0)