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.

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.

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.

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.

Id like to share my implementation of the signal protocol that i use in my messaging app. The implementation is in rust and compiles to WASM for browser-based usage.

• Github: https://github.com/positive-intentions/signal-protocol
• Demo: https://signal.positive-intentions.com/ Its far from finished and im not sure when its a good time to share it, but i think its reasonable now.

The aim is for it to align with the official implementation (https://github.com/signalapp/libsignal). That version was not used because my use case required client side browser-based functionality and i struggled to achieve that in the official one where javascript is used but is targeting nodejs.

There are other nuances to my approach like using module federation, which led to me moving away from the official version.

IMPORTANT: While this is aiming to provide a secure implementation, it isnt audited or reviewed. Shared for testing, feedback and demo purposes only. Please use responsibly.

Its worth mentioning that its far from finished and i hope with feedback i can make it better. I have put efforts towards directing it towards unit-tests, an audit and formal-proofs. None of that is good-enough, but i hope it can act as a starting point for verifying the implementation is correct.

Im sure people have better things to do with their time than review unstable and unfinished code. The transparency is intended for professionals that may be curious… Feel free to reach out for clarity instead of reading the code/docs.

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.

TLDR; If you’re looking for great engineering and best-practices… you should move away now. I’m creating a solution to a problem that nobody (including myself) has. I’m working with module federation between multiple cloud-providers to create an app that can use interoperable modules from multiple sources.

I have a webapp that I deploy with aws-cdk. It’s a static webapp that I have on on S3.

AWS-cdk works as expected, but now id would like to investigate a multicloud deployment. Using something like pulumi or terraform (but not limited to those)

Most vendors have something like S3 and so I would like to have something that can deploy to multiple cloud vendors simultaneously.

In that approach, I would like an exhaustive number of vendor providers. I don’t just want the top vendors like aws, gcloud, azure… But I’m looking for something that can also handle providers over seas like Alibaba cloud, Kamatera and I’m sure many I haven’t heard of.

My project only needs something like S3 (static server) so I don’t expect that being exhaustive in providers would be too expensive.

Im looking for something like terraform or pulumi, but I haven’t user either enough to settle on one. When deploying to the S3 equivilent, i dont want it to deploy to either GCloud or Azure… i want it to be able to deploy to both.

(aws-cdk is handling things like the TLD so i think i’ll have to stick with that setup.)

To provide more context about what I’m trying to do, I created a webapp that uses webpack module federation. (see my profile for more details)

The aim is for a resilient infrastructure. S3 is not expected to fail, but in a multicloud approach, if any cloud provider has issues, i want there to already be multiple redundancies in place.

I deploy the same app on gh-pages and aws-s3. Its set it up in a way that it can interoperate with statics from aws-s3 or gh-pages. It works as expected.

https://positive-intentions.com/blog/statics-as-a-chat-app-infrastructure#module-federation-in-action

I’d like to scale that up further, so the next level after that is to have something that can deploy to multiple cloud providers.

(Unrelated but worth mentioning: i will also be adding SRI on those imported static files to make sure they have a content-hash that matches expectations. I wont have to “trust” that the providers are serving the correct statics.)