Read:
https://medium.com/gitconnected/deno-2-could-finally-replace-node-js-90fb7335d749

@javascript @nodejs @webdev_discussions
#nodejs #webdev #programminghelp #Programming

i wanted to see if we can create asynchronous bottom-up state management, we have the basics to put together a state management system. State management solutions in apps typically have ways to persist data.

I wanted to explore if there are any benefits to define and manage state in webcomponents with a bottom-up approach. I wanted to see if it could give a greater flexibility in developing a UI and not having to worry about persisted storage management.

https://positive-intentions.com/blog/bottom-up-storage

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)

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