im working on a javascript UI framework for personal projects and im trying to create something like a React-hook that handles "encrypted at rest".

the react-hook is described in more detail here. id like to extend its functionality to have encrypted persistant data. my approach is the following and it would be great if you could follow along and let me know if im doing something wrong. all advice is apprciated.

im using indexedDB to store the data. i created some basic functionality to automatically persist and rehydrate data. im now investigating password-encrypting the data with javascript using the browser cryptography api.

i have a PR here you can test out on codespaces or clone, but tldr: i encrypt before saving and decrypt when loading. this seems to be working as expected. i will also encrypt/decrypt the event listeners im using and this should keep it safe from anything like browser extensions from listening to events.

the password is something the user will have to put in themselves at part of some init() process. i havent created an input for this yet, so its hardcoded. this is then used to encrypt/decrypt the data.

i would persist the unencrypted salt to indexedDB because this is then used to generate the key.

i think i am almost done with this functionality, but id like advice on anything ive overlooked or things too keep-in-mind. id like to make the storage as secure as possible.

Generally, it is inadvisable to directly expect in if-clauses. Here are some tips to avoid these situations.

https://positive-intentions.com/blog/qr-codes-as-a%20data-channel

QR Codes as a Data Channel

the demo in the blog article is a bit cluncky. here is a better link for it: https://chat.positive-intentions.com/#/qr

TL;DR:

• Many websites are (unintentionally) shipping ES6+ code in production. This indicates that transpiling to ES5 is outdated practice.
• We need a better baseline for transpilation, which should be a moving target.
• We should transpile code in node_modules, at least for production.

Should I create functions/methods for packages/libraries that allow optional parameters to accept null?

In this example below, I set the 3rd and 4th parameter as null which will act as the default value.

myLibrary.myFunction(1, 7, null, null, true);

Or is this not a good way to go about creating functions for a package and therefore should not accept null as a parameter value.

myLibrary.myFunction(1, 7, false, 4, true);

In PHP ecosystem there is a tool called Rector. It helps a lot in automated refactoring. It helps a lot in updating from a bad design pattern to another, update code to match a given framework updates, etc.

Maybe we could create a similar tool for client side Javascript to migrate away from jQuery to vanilla Javascript. Websites youmightnotneedjquery.com have a good collections of vanilla JS alternatives to jQuery.

While one could do it manually, on larger code bases, it is extremely tedious.

Maybe such tool exists and I am unaware of it?

At first, I thought about having such transformation as an optimization step in the bundler, but this is unnecessarily redundant and might cause a lot of troubles.

Functional Web Components

https://positive-intentions.com/blog/dim-todo-list

Github: https://github.com/positive-intentions/dim

Demo: https://dim.positive-intentions.com

@javascript @programming@beehaw.org @programming@programming.dev

Functional Web Components

https://positive-intentions.com/blog/dim-todo-list

https://positive-intentions.com/blog/dim-functional-webcomponents/

im investigating an idea i have about functional 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 like working with the syntax that React used and i wondered if with webcomponents i could create a functional UI framework that didnt need to be transpiled.

i think the article is already quite long, so i think i will create a separate one as a tutorial for it.

note: im not trying to push "yet another ui framework", this is an investigation to see what is possible. this article is intended as educational.

Biome v1.9 is out!

Today we celebrate both the first anniversary of Biome 🎊 and the release of Biome v1.9! Read our blog post for a look back at the first year and the new features of Biome v1.9.

In a nutshell:

• Stable CSS formatting and linting. Enabled by default!
• Stable GraphQL formatting and linting. Enabled by default!
• .editorconfig support. Opt-in
• biome search command to search for patterns in your source code.
• New lint rules for JavaScript and its dialects.

Hey guys, I am working on an existing nightwatch repo and I have to add new test cases for new components in the website. The thing is that it must run on all the other white labeled websites also, so the previous team who worked on it wrote everything by putting them on one testcase and ran a for loop so it can also check for other websites in one go.

This approach does not feel right. Is there any better way for doing it.

By the way, I have to use nightwatch itself.

https://github.com/positive-intentions/chat

the code related to the video is a faily basic implementation using BabylonJS. it can be found here.

id like to see if i can get handpose-estimation to work well enough to be able to add to the BabylonJS render engine.

im working on something i hope will work like the 8thwall demo here. i couldnt find an open-source alternative to this so i thought id have a crack at it myself. my progress so far is as described here. i dont have much experience in creating games or graphics, so any guidance/help/advice is appriciated.

FAQ:

• why should i use it? - its a proof-of-concept app. for testing and demo purposes only.
• why create it? - it is a hobby project and i can be creative with the approach. its fun to work on.
• what is it? - maybe this article helps.

I've heard many of them. For example: rolldown, rspack, swc, oxc, esbuild, parcel, vite etc.

I can currently use JS projects without these tools. What extra do they add? Why should I use them instead of simply using tsc?

Though I must admit I like vite simplicity in front-end.

i want to understand more about WebRTC security when using vpn. id like to know if it is more secure with VPN than without... or even if its recommended to use WebRTC with VPN.

i created a webrtc demo: https://chat.positive-intentions.com/#/webrtc (the corresponding code its created with: https://github.com/positive-intentions/chat/blob/staging/src/components/pages/webrtc/WebRTC.jsx)

if i generate a "WebRTC offer" then i see a bunch of information including my IP address.

if i do the same with VPN, i see that my ip address isnt in that payload.

following the information here: https://thehackernews.com/2015/02/webrtc-leaks-vpn-ip-address.html?m=1

and using the demo here: https://ipleak.net/

it seems even with vpn, the local ISP ip seems detected.

a recurring concern ive had on reddit about the security of my app is that webrtc exposes ip addresses. im investigating using the app with vpn. it seems to work like normal.

in the example details given above, i see while the local ISP IP is exposed, the personal ip address is still hidden. im sure what is exposed there is not worthless, but it could help users with privacy and security.

on the back of this investigation id like to see if i can add something like a toggle in my app called "enforce VPN" which will first check to see if you are on a vpn, and if you are, open the rest of the app.

my app is using peerjs-server as the connection broker. this is a third party i have no contractual agreement to provide me with a service. it could help to hide your IP from this service.

I was watching a youtube video explaining HTMX targets and using it to pull HTML from a URL and push the HTML into a div element.

https://htmx.org/docs/#targets

This immediately reminded me of JQuery's .load() which can pull a URL and up the HTML in an element.

$( "#result" ).load( "ajax/test.html" ); https://api.jquery.com/load/

What caught me off guard is how the speaker talked about this being an entirely new technique, pulling HTML instead of JSON from an API.

It made me realize that new developers who started after the creation of ReactJS, SPA/PWA have no concept of AJAX and the interesting ways developers used to merge the client and server.

I have no interest in going back to a JQuery dominated world... or the chaos of JS development before JQuery, but it's interesting to see that what is old is new again.