Hi developers 👋
JSTools Weekly newsletter, issue 2023#49 (New JS Tools) just released.
tsdiagram: Create diagrams and plan your code with TypeScript.
TSDiagram is an innovative online tool that utilizes TypeScript for rapid diagram creation. It empowers users to define data models using type aliases, interfaces, and classes, and it automatically arranges nodes efficiently. Additionally, TSDiagram automatically rearranges nodes except the one moved manually. It also preserves document status in URL and localStorage and enables SVG export for diagrams.
ai-group-tabs: Organize and group your Chrome tabs with AI
This extension helps you organize and group your Chrome tabs by default categories. It uses OpenAI API key in popup and save in Chrome storage. It also allows you to customize categories in popup. It groups new tabs automatically and published on Chrome store.
nanotar: Tiny and fast Tar utils for any JavaScript runtime!
Nanotar is a tiny and fast tar utility for any JavaScript runtime. It is written in modern TypeScript and ESM format and works in any JavaScript runtime, including Node.js (18+), Bun, Deno, Browsers and Edge Workers. It provides built-in compression and decompression support and is Web Standard Compatible.
import { createTar } from "nanotar";
const data = createTar(
[
{ name: "README.md", data: "# Hello World!" },
{ name: "test", attrs: { mode: "777", mtime: 0 } },
{ name: "src/index.js", data: "console.log('wow!')" },
],
{ attrs: { user: "js", group: "js" } },
);
// Data is a Uint8Array view you can send or write to a file
pagination: Simple Pagination Library
const peoples = [
{ name: 'Asep', age: 21, address: 'Bandung' },
{ name: 'Komar', age: 23, address: 'Jakarta' },
];
const options = {
search: 'a',
limit: 1,
currentPage: 1,
fieldName: 'peoples',
sort: [
['age', 'desc'],
],
};
paginate(peoples, options);
action-table: Native HTML web component for adding sorting and filtering functionality to tables
A lightweight and customizable web component that enhances static HTML tables with sorting and filtering capabilities. Unlike conventional Shadow DOM implementation, it utilizes a custom CSS stylesheet for styling, allowing users to tailor the component's appearance to their preferences.
unwrapped: Spotify Wrapped for developers.
Unwrapped provides developers with a comprehensive summary of their coding activities throughout the year, including code contributions, productivity insights, repo highlights, coding habits, contribution styles, and detecting fires early.
astro-dashboard: An Astro dashboard
An open source dashboard project using Astro with API endpoints, Tailwind, and Supabase.
rich-editor-to-markdown-parser: microCMS Rich Editor response convert to markdown
import parse from 'rich-editor-to-markdown-parser';
const html = '<h1>Hello World!</h1><p>This <strong>html</strong> string is <s>convert</s>into <a href="https://exampe.com">markdown.</a></p>'
parse(html); // # Hello World!\n\nThis **html** string is ~~convert ~~into [markdown.](https://exampe.com)
metaline: A tiny language to write mapping functions as strings
The string where.id.in.$>#id;limit:99
generates the equivalent function of:
function transform (input) {
return {
where: {
id: {
in: input.map((i) => i.id)
}
},
limit: 99
}
}
The string $>id.#directoryId
generates the equivalent function of:
function transform (input) {
return input.map((t) => {
return {
id: t.directoryId
}
})
}
ChunkViz: Visualize Different Text Splitting Methods
This is a tool to visualize how different text splitters chunk up text
More tools to explore:
ai-group-tabs: Organize and group your Chrome tabs with AI
fast-ignore: A fast parser and processor for .gitignore files.
eslint-ts-patch: Support loading eslint.config.mjs and eslint.config.ts as flat config files for ESLint.
eslint-plugin-format: Format various languages with formatters in ESLint
eslint-plugin-unimport: Insert imports automatically from Unimport in ESLint
eslint-processor-vue-blocks: Create virtual files in ESLint for each Vue SFC block to lint them individually.
eslint-merge-processors: Merge multiple ESLint processors to behave like one
vite-plugin-stylex: Vite Plugin for StyleX
vite-plugin-clean-css: Optimize CSS for production using clean-css
chrome-extension-starter: Chrome extension starter template with React, TypeScript, Vite and Tailwind
remix-vite-template: Remix template with Vite, Tailwind CSS, and Fly.io support
YouTubeAIExtension: Chat with ANY of your favorite YouTube Videos!
http-server: An experimental HTTP framework
ts-check-perf: Measuring and comparing type-checking speed of TS samples
client-js: JS Client library for Mistral AI platform
disposable-email-api: This API allows you to check if an email address is from a disposable email service.
commit-translator: vscode extension for translating commit message
Js-form-data-assigner: This is a recursive function which generates a formData object from nested values
pragmaticversioning: Pragmatic versioning optimizes for communicating changes to a package to package consumers, while retaining simple semantics for package maintainers.
snapp: Yet Another Url Shortner. A simple excercise to learn Svelte, Svelte5 Runes, and Tabler.
generic-streaming: Streaming server actions without the AI
If you like this issue, please consider subscribing to JSTools Weekly Newsletter.
Thank you
Top comments (0)