TLDR; The title of this post.

Feel free to reach out for clarity instead of reading the code/docs.

I was working on a “react-like syntax for webcomponents”, I wanted to create something robust and flexible for secure data storage and management.

I started off with an approach for asynchronous state management so that components outside the shadow-root could receive updates. (The events are also encrypted to secure against things like browser extensions.)

https://positive-intentions.com/docs/projects/dim/async-state-management

It then made sense to be able to persist that data so it can work between page releoads.

https://positive-intentions.com/docs/projects/dim/bottom-up-storage

The result looks and works like the following when used in a project.

https://positive-intentions.com/docs/projects/dim/encrypted-store

The Dim framework seems like a dead-end. I wanted to try it out on my existing React projects. So I created the equivalent React hooks.

https://positive-intentions.com/docs/projects/dim/use-dim-store-react

I find it to be performant and I want to push the scale of the approach, so I am in the process of testing it out on my projects. A notable use-case there is storing encrypted files at rest.

IMPORTANT: Im not trying to promote “yet another ui framework”, this is an investigation to see what is possible. You should not use this in your own code. It is not reviewed, audited or production-ready. It is not on npm. Shared for testing, feedback and demo purposes only.

• Modern AsyncIterator API
• Integrates with Standard Schema
• Allows you to navigate to any parts of JSON, without considering order of appearance in a stream
• Structural (e.g. {}[]) position bitmap construction, caching and navigation, written in Rust

Benchmarks are in the README.md.

Hey folks. wrote this library to satisfy an itch for me: To make an ergonomic streaming JSON library whilst still being incredibly fast.

I took lessons from simdjson and JSONSki and applied it to a low-memory environment niche. Inspired from a situation at work where we didn't have control over the data and we're parsing a 10MB JSON in order to aggregate some data to the frontend (ugh). Existing streaming JSON libraries in node were too slow, outdated or you weren't able to control how much memory you want to balance.

Disclaimer: I had AI help but not vibe coded. I wrote the JS part but since I was new to Rust, I needed some hand-holding. Was a labour of love for 6 months, was always on the wheel, made a lot of effort to verify the quality of the Rust code and dogfooded it but I wanted to be transparent regardless.

If this is useful to anyone or if there's anything wrong to my claim, let me know and I'm happy to chat!

By leveraging WebCrypto API and FileSystem API for browser-based encryption, we can create a fairly unique approach for encrypting and storing files directly on your device from your browser.

*** The project is experimental and far from finished. It's presented for testing, feedback and demo purposes only (USE RESPONSIBLY!). ***

This project isnt finished enough to compare to veracrypt. This is intended to demonstrate client-side managed secure cryptography. Allowing users to get started without setup.

i have a demo version for testing. it isnt ready to replace any existing app or service, but its a work-in-progress and it would be great to get your feedback on it.

the implementation is based on the functionality described in a previous post.

Im investigating an idea i had about JSX for webcomponents after some experience with Lit.

Lit is a nice lightweight UI framework, but i didnt like that it was using class-based components.

Vue has a nice approach but i prefer working with the syntax that React uses. I find it more intuitive for debugging and deterministic rendering. I wondered if with webcomponents, i could create a UI framework that didnt need to be transpiled.

• Read the docs
• Checkout the code
• Storybook demo

(My intentions with this framework is to get to a reasonable level of stability, to then replace React on some of my existing projects.)

IMPORTANT: Im not trying to push "yet another ui framework", this is an investigation to see what is possible. You should not use this framework in your own code. It is not production-ready. It is intended for myself on my own projects. This project is far from finished. I am sharing because it might be interesting for someone. Feel free to reach out for clarity if you have any questions.

a crossword where the clue = eval(answer)

So cursed some of the fuckery needed to answer these

Solved So turns out I need to store the original response and return clones. I've updated the code below to reflect that change. But feel free to use the below to deduplicate requests.

Hello,

I'm working on a small class to deduplicate API request calls. The basic function being a map of request path -> request promise. The issue I am running into is that on sequential calls I get a "response body has already been consumed" error.

From what I've read, I need to use response: (await res).clone() in the call to this.queryMap.set, however when I do that the map doesn't get updated in time to cache the calls (I think) and all 10 queries get sent to the API endpoint without being cached.

Any ideas on what I need to do?

class Deduplicator {
    queryMap = null;

    constructor() {
        this.queryMap = new Map();
    }

    async get(query, ttl = 10) {
        let now = Temporal.Now.instant();
        let cacheCheck = this.queryMap.get(query);
        if (cacheCheck == undefined || now.since(Temporal.Instant.from(cacheCheck.at)).seconds > ttl) {
            console.log("Cache miss on ", query)
            const res = fetch(query, {
                method: "GET",
            });
            this.queryMap.set(query, {
                at: now,
                response: res,
            })
            return (await res).clone(); //Previously just returned res
        } else {
            console.log("Cached response of ", query);
            return (await cacheCheck.response).clone(); //Previously just returned cacheCheck.response
        }
    }
}

Example:

let deduplicator = new Deduplicator();
for( let i = 0; i < 10; i++){
   let a = (await deduplicator.get("https://jsonplaceholder.typicode.com/todos/3", 10)).json();
   console.log('res: ', a);
}