DEV Community

JSTools Weekly
JSTools Weekly

Posted on • Originally published at jstools.substack.com

✨2023#49: TSDiagram: Create diagrams with TypeScript.

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


TSDiagram Screenshot

source

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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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.

Unwrapped ,Spotify Wrapped for developers.

source

astro-dashboard: An Astro dashboard

An open source dashboard project using Astro with API endpoints, Tailwind, and Supabase.

astro-dashboard

source

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)
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

The string $>id.#directoryId generates the equivalent function of:

function transform (input) {
  return input.map((t) => {
    return {
      id: t.directoryId
    }
  })
}
Enter fullscreen mode Exit fullscreen mode

ChunkViz: Visualize Different Text Splitting Methods

This is a tool to visualize how different text splitters chunk up text

ChunkViz Preview

source

More tools to explore:

If you like this issue, please consider subscribing to JSTools Weekly Newsletter.

Thank you

Top comments (0)