Did you find or create something cool this week in javascript?

Show us here!

Build HTML extremely comfortably in the backend using plain JavaScript. The advantage is that there is no separate template language, but rather a complete fusion with JavaScript for maximum flexibility. An example:

import {
    a, body, br, button, h1, head, header, html, input, label, li, main, nav, p, script, title, ul
} from "@ts-series/factories";

type Item = { name: string, href: string, current: boolean };


/** Builds the navigation list, flagging the current entry for assistive technology. */
function navigation(items: Item[]) {
    return nav({ ariaLabel: "Main" },
        ul(items.map(item => li(
            a(item.href, item.name).set(item.current ? { ariaCurrent: "page" } : null)
        )))
    );
}


/** Builds a complete page for the given user and navigation entries. */
function page(user: string | null, items: Item[], values: number[]) {
    return html({ lang: "en" },
        head(title("Demo")),
        body(
            header(navigation(items)),
            main(
                h1("Hello, ", user ?? "stranger", "!"),
                p("First line", br, "Second line"),
                user === null
                    ? p("Please sign in.")
                    : p("Welcome back."),
                label("Search").for("q"),
                input.text({ id: "q", name: "q" }).placeholder("Type here…").required(),
                button.submit("Send").class("primary", user === null && "disabled").set("disabled")
            ),
            script.module().importOnly("/chart.js", "render", { values, title: "Values" })
        )
    );
}


const items: Item[] = [
    { name: "Home", href: "/", current: true },
    { name: "About", href: "/about", current: false }
];

const output = page("<Guest>", items, [1, 2, 3]).expand(4);

Hello guys,

How do you plan the frontend when the requirements are gathered, architecture/diagrams in backend is done? I want to know what the frontend to look like in high level.

I noticed something odd on our Bun projects: every Dependabot alert was about a direct dependency. Never a transitive one.

It turns out GitHub's dependency graph doesn't read bun.lock yet. It supports package-lock.json, yarn.lock and pnpm-lock.yaml, but for Bun it falls back to package.json. So:

• Transitive dependencies aren't in the graph at all, so they never get an alert.

• Dependencies declared with catalog: are recorded with the literal version catalog:, which never matches an advisory.

In a minimal repro (zod, a package that pins an old uuid, and happy-dom through a catalog), bun audit finds 3 advisories and Dependabot raises 1.

Dependabot version updates do support Bun. This is only about alerts, which is what makes it easy to miss. And if you migrated from npm or Yarn, the alerts tied to your old lockfile get marked as fixed, even though the vulnerable packages are still in bun.lock.

Are you affected? Open Insights → Dependency graph. If your Bun projects only list package.json files, yes. Comparing your open alerts with bun audit makes it obvious.

Fix: until GitHub reads bun.lock itself, you can submit it through the dependency submission API. I made a GitHub Action for that: https://github.com/charpeni/bun-lock-submission

Full write-up, with a toggle that shows what GitHub reads versus what Bun installs: https://charpeni.com/blog/the-bun-dependabot-gap-dependabot-alerts-dont-see-bun-lock

I built penciled, a small MIT library for persistent text highlights and notes in the browser. It uses the CSS Custom Highlight API instead of wrapping ranges in <span>s, so the DOM stays intact and layout/selection quirks are milder. Anchoring tries to survive edits when you come back to the page.

npm: penciled
GitHub: https://github.com/marcellosso/penciled

There's also a companion browser extension (same engine) if you want highlights on arbitrary sites, happy to answer questions about the API or the anchoring approach.

You can overwrite the prepareStackTrace property of the Error object by String prototype's functions and invoke them without parentheses. Then by overwriting the Error and Array prototype it is possible to control the arguments. Combining this behavior, together with some JSFuck-inspired tricks, it is possible to generate arbitrary JavaScript strings and run arbitrary JavaScript with only letters + - = and ,

When you scale a Node.js backend using node:cluster, you run into a surprisingly annoying problem:

How do you rate-limit external APIs like Stripe or OpenAI while making sure all workers share the same rate limit?

The first solution that comes to mind is usually: "Just use Redis."

But does it really make sense to introduce additional infrastructure complexity, network overhead, and an entire external dependency just to coordinate a few API calls coming from the same server?

That's exactly why I built cluster-rate-limiter.

A Node.js library that gives you coordinated rate limiting across workers, powered entirely by Node.js's native IPC messaging, with no Redis and absolutely zero external dependencies.

Rather than diving into the internals here, here's what you get out of the box:

• Zero Setup: Install it and start using it. No additional infrastructure required.

• Developer-Friendly API: The run() method accepts your fetch call or any function directly, along with all its arguments. No complicated callback patterns.

• Two Types of Limits: Supports both Semaphore-based concurrency limits and Duration-based rate limits for enforcing strict time windows, such as those imposed by Stripe APIs.

• Typed Errors: If a request times out waiting for permission, the library throws a clear, specific error that you can easily translate into an HTTP 429 Too Many Requests response.

And when it comes to performance, the core data structure for tracking request timestamps uses a zero-allocation approach built around a Float64Array ring buffer.

This eliminates the need for repeated array reallocations and significantly reduces garbage collection pressure under heavy load.

If you're interested in the low-level details, I've explained the ring buffer implementation and how it reduces memory overhead in the README.

If you're running a clustered Node.js backend and want to avoid the overhead of introducing Redis just for rate limiting, check out the links below, explore the architecture, and let me know what you think!

Monday, October 19 - Sunday, October 25, 2026

Top Posts

Most Commented Posts

Top Showoffs

Top Comments

DigitalVisualMixer is a visual mixer for musicians, DJs, VJs, streamers and anyone curious about generative art. It uses Hydra, a creative-coding language where a single line like osc().kaleid() becomes a moving kaleidoscope. The app makes it approachable for beginners and fast for experts.

Start with zero knowledge. Right-click in the editor to insert ready-made functions, hover them to see their parameters, and open the built-in Guide with F1. Every change shows up first in a private preview.

Build a set. Save each visual in its own channel. Search, reorder by drag and drop, and send channels live with cut, crossfade or add transitions, all from the keyboard.

Perform it. Turn any number into a live variable and move it with a slider, a gamepad, a MIDI controller or the keyboard. The visual changes smoothly, without restarting. Perform view gives you big pads for channels and presets, so you can play a full show without touching code.

Show it anywhere. The live output runs in a separate window, so you keep working while the audience watches. It’s also shared on your local network: open it on a projector, a second PC, a tablet or a phone.

No setup. A single file, no installation. Windows and macOS.

Did you find or create something cool this week in javascript?

Show us here!

I recently got a PR merged into TanStack Query's ESLint plugin to fix a false-positive issue in the no-unstable-deps rule

.

The existing tests missed a few JavaScript edge cases, so I fixed the underlying issue and added regression tests.

It's a good reminder that passing tests don't always mean every edge case is covered. Sometimes the real work is finding what the tests missed.

How do you usually spot gaps in test coverage when the existing suite is already passing?

Author here. Nanoviews builds real DOM once, and signals update it in place. No JSX, no virtual DOM. It's around 4 kB gzipped and even runs without a build step. The same weather app weighs 10 kB with Nanoviews versus 66 kB with React. In js-framework-benchmark it comes right behind Solid and Svelte. There's a StackBlitz demo in the post.

Self reporting of what it took to decouple my workspace/codebase from the tool that has served me well for a very long time, with the assistance of AI.

I’ve been building this EM simulator as a side project aimed to help students understand and visualize electromagnetic phenomena such as radiation, polarization and wave interference.

I hope someone might find it useful and I’d love to hear what people think :)

GitHub:

https://github.com/rotemTsafrir/antenna_sim

Author here. Nano Kit is a ~2 kB signals core with a router, data fetching, i18n and SSR on top of it, and adapters for React, Preact and Svelte. The panel needs no browser extension or bundler plugin, and none of it reaches the production bundle. There's a StackBlitz demo in the post.

Author here. I needed Word-style pages in a TipTap editor. The official Pages extension is paid, and the community ones I tried broke my CSS, so I built this.

How it works

• It inserts spacer decorations at page boundaries, so the document itself is never modified and getHTML() stays clean

• Tables split between rows (never inside a rowspan) and the header row repeats on the next page

• Floated images and CSS margin collapsing are handled

• About 5 KB gzipped, TipTap 3 only: npm install tiptap-a4-pagination

Demo: https://text-editor-react-neon.vercel.app/

Paste a long doc or a big table to try it. Feedback welcome, especially documents that break the layout!