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.

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

Functional Web Components

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

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

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

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.

cross-posted from: https://programming.dev/post/12974961

I have a function as such:

export type SendMessageParams = {
  chatSession?: ChatSession,
  // ... other params ...
};

const sendMessage = async ({
  chatSession,
  // ... other params ...
}: SendMessageParams): Promise<void> => {
  // await chatSession?.sendMessage()
  // somewhere in implementation
};

export default sendMessage;

ChatSession is from @google/generative-ai.

I'd like to mock it in my test file as such:

let defaultParams: SendMessageParams;

beforeEach(() => {
  jest.mock('@google/generative-ai', () => ({
    ChatSession: {
      sendMessage: async (content: string) => content,
    },
  }));
  defaultParams = {
    chatSession: new ChatSession('', ''),
    // ... other params ...
  };
});

afterEach(() => {
  jest.clearAllMocks();
});

it('should send message', async () => {
  // await sendMessage();
});

When I run npm run test, I get the error saying:

 FAIL  tests/logic/actions/sendMessage.test.ts
  ● should send message

    ReferenceError: fetch is not defined

      43 |   const sendMessageInner = async (messages: Message[]) => {
      44 |     setMessageListState(messages);
    > 45 |     const result = await chatSession?.sendMessage(content);
         |                    ^
      46 |     const responseText = result?.response.text();
      47 |     if (responseText) {
      48 |       const responseMessage: Message = {

      at makeRequest (node_modules/@google/generative-ai/dist/index.js:246:9)
      at generateContent (node_modules/@google/generative-ai/dist/index.js:655:28)
      at node_modules/@google/generative-ai/dist/index.js:890:25
      at ChatSession.sendMessage (node_modules/@google/generative-ai/dist/index.js:909:9)
      at sendMessageInner (src/logic/actions/sendMessage.ts:45:20)
      at src/logic/actions/sendMessage.ts:72:7
      at sendMessage (src/logic/actions/sendMessage.ts:59:3)
      at Object.<anonymous> (tests/logic/actions/sendMessage.test.ts:44:3)

...which hints that chatSession.sendMessage method still uses the real implementation instead of mock.

I'd like to know why this happens and what the solution would be.

Thanks in advance.

---

Environment

• Node 20.11.0 (lts/iron)
• Jest 29.7.0
• @google/generative-ai 0.5.0 (if relevant)

Validation of javascript forms - name, password, password retype validation and Number Validation

It is critical to check the user-submitted form since it may include incor- rect information. As a result, validation is required to authenticate the user. Because JavaScript allows form validation on the client side, data processing is faster than server-side validation.15 JavaScript form validation is preferred by the majority of web developers. We can validate name, password, email, date, cell numbers, and other data using JavaScript. https://chat-to.dev/post?id=12 #javascript #web #programmer

ChatGPT used to have this, and there was a popular forum that had it (though I can't remember what it was/is), where, when you'd click a "delete" link, the confirmation was RIGHT THERE: "delete" faded out, "OK / Cancel" faded in. In the same space. It was really elegant and unobtrusive.

Does anyone know if there's a library out there for it? I searched over github and google, but didn't find anything, probably because I couldn't get the search terms specific enough.

Hoping to get the ball rolling on this sub more. There’s too much action in the JavaScript scene for this community to only get a few post a month.

I’ll start with a classic, What the Heck is the Event Loop Anyway?

Guys I need your help, where exactly the road map of Javascript Learning

@javascript

I'm writing some javascript (for the web) for the first time in a long time and I am realizing that I would be well served by using a bit of tooling like eslint and standardjs.

I am reluctantly willing to apt install nodejs but I am not willing to use npm because of my impression that it is a fractal of yolo curl | bash philosophy which will randomly install and automatically run malware or indistinguishable-from-malware garbage I don't want.

So, my question is: how can I install things like standardjs without using npm?

Please do not tell me that I should just use npm.