#StateManagement

xoron :verified:xoron@infosec.exchange
2025-06-04

React-like functional webcomponents, but with vanilla HTML, JS and CSS

Introducing Dim – a new #Framework that brings #ReactJS-like functional #JSX-syntax with #VanillaJS. Check it out here:
πŸ”— Project: github.com/positive-intentions
πŸ”— Website: dim.positive-intentions.com

My journey with #WebComponents started with Lit, and while I appreciated its native browser support (less #Tooling!), coming from #ReactJS, the class components felt like a step backward. The #FunctionalProgramming approach in React significantly improved my #DeveloperExperience and debugging flow.

So, I set out to build a thin, functional wrapper around #Lit, and Dim is the result! It's a #ProofOfConcept right now, with "main" #Hooks similar to React, plus some custom ones like useStore for #EncryptionAtRest. (Note: #StateManagement for encryption-at-rest is still unstable and currently uses a hardcoded password while I explore #Passwordless options like #WebAuthn/#Passkeys).

You can dive deeper into the #Documentation and see how it works here:
πŸ“š Dim Docs: positive-intentions.com/docs/c

This #OpenSource project is still in its early stages and very #Unstable, so expect #BreakingChanges. I've already received valuable #Feedback on some functions regarding #Security, and I'm actively investigating those. I'm genuinely open to all feedback as I continue to develop it!

#FrontendDev #JSFramework #Innovation #Coding #Programmer #Tech

Frontend Dogmafrontenddogma@mas.to
2025-05-13
Frontend Dogmafrontenddogma@mas.to
2025-04-02
Frontend Dogmafrontenddogma@mas.to
2025-03-31

React Query API Design: Lessons Learned, by @tkdodo.eu (@bejs_@x.com):

youtube.com/watch?v=l3PxErcKeA

#videos #lessons #react #apis #statemanagement #datafetching

Maidasimaidasi
2025-03-21
Abdullah1xcoder
2025-02-20

πŸš€ Understanding React.js Architecture: A Deep Dive into State Management with Redux and Saga! 🎯

Abdullah1xcoder
2025-02-20

πŸš€ Zero to Hero in React & React Native – Your Ultimate Learning Roadmap! 🎯

Jan :rust: :ferris:janriemer@floss.social
2025-01-16

All these "state management" solutions of the "modern web" like #Redux, Zustand or whatever try to solve state management in UI apps by introducing unfathomable amount of complexity...

...when in reality all you need is #Bevy's #ECS. Β―\_(ツ)_/Β―

✨

#GUI #UI #StateManagement #DataOrientedDesign #DoD

Abdelfattah Ragababdelfattahragab
2025-01-16

NgRx SignalStore: An effortless solution for state management by Abdelfattah Ragab

This book is being published today and is not yet available anywhere online except on the author's website. It has been submitted to other book publishers, but it will be some time before you can buy it anywhere else.
The e-book is only available on the author's website books.abdelfattah-ragab.com with amazing discounts of up to 40%.

xoron :verified:xoron@infosec.exchange
2025-01-08

Async Bottom-Up Javascript State Management

positive-intentions.com/blog/a

This investigation comes from my work on a #P2P #ChatApp. I found it tricky in a #FunctionalProgramming approach to handle #Async #Messages from peers needing the latest #State values. The challenge? How #JavaScript scopes variables in #Callbacks.

I wanted to explore a solution out of curiosity to see if it could work. I'm not trying to push "yet another #StateManagement library." This is about my #LearningProcess for use in #PersonalProjects.

#Programming #WebDev #Code #SoftwareDevelopment #OpenSource #PeerToPeer

xoron :verified:xoron@infosec.exchange
2024-12-24

Creating a JavaScript UI framework for my own project! It's a learning journey and I'd like to to share my progress.

Id like to know what you think are the important details to include when creating a UI framework. As i work on this im only addressing the issues i face and i would like to know what other developers think are important to include in a UI framework.

I've written some blog posts about my progress so far:

1. Functional Web Components - positive-intentions.com/blog/d
2. Functional Todo App - positive-intentions.com/blog/d
3. Async State Management - positive-intentions.com/blog/a
4. Bottom-up Browser Storage - positive-intentions.com/blog/b

#JavaScript #UIFramework #WebDevelopment #LearningJourney #StateManagement #WebComponents #OpenSource #Coding #Programming #FrontendDevelopment #AsyncProgramming #FunctionalProgramming #Blogging #TechCommunity

xoron :verified:xoron@infosec.exchange
2024-12-02

Functional Web Components with LitElements.

For practice and learning i decided to create a #UIFramework to make LitElements more functional. i like the idea of webcomponents and #litElement, but i liked the #reactSyntax for what i see as "more readable" and "more maintainable" code. So i decided to create a simple todo app using a #functional approach with #LitElements.

Im investigating additional features and improvements so i dont reccommend anyone to adopt using this yet. The implementation is far from finished, but seems to be working enough to test.

Future improvements on this im looking into are:
- bottom up state management
- encrypted state persistence at rest

Blog: positive-intentions.com/blog/d

GitHub: github.com/positive-intentions

Demo: dim.positive-intentions.com/?p

#WebDevelopment #LitElements #JavaScript #FrontEnd #WebComponents #StateManagement #Encryption #Coding #OpenSource

xoron :verified:xoron@infosec.exchange
2024-11-11

"Encryption at Rest" for JavaScript Projects

Following a previous post (infosec.exchange/@xoron/113446), which can be summarized as: I'm tackling bottom-up state management with an extra twist: integrating encryption at rest!

I created some updates to the WIP pull-request. The behavior is as follows.

- The user is prompted for a password if one isn't provided programmatically.
- This will allow for developers to create a custom password prompts in their application. The default fallback is to use a JavaScript prompt().
- It also seems possible to enable something like "fingerprint/face encryption" for some devices using the webauthn api. (This works, but the functionality is a bit flaky and needs to be fixed before rolling out.)
- Using AES-GCM with 1000000 iterations of PBKDF2 to derive the key from the password.
- The iterations can be increased in exchange for slower performance. It isn't currently configurable, but it might be in the future.
- The salt and AAD need to be deterministic and so to simplify user input, the salt as AAD are derived as the sha256 hash of the password. (Is this a good idea?)

The latest version of the code can be seen in the PR: github.com/positive-intentions

I'm keen to get feedback on the approach and the implementation before i merge it into the main branch.

#JavaScript #Encryption #IndexedDB #WebDevelopment #CryptoAPI #FrontendDev #ReactHooks #StateManagement #WebSecurity #OpenSource #PersonalProjects

xoron :verified:xoron@infosec.exchange
2024-11-08

"Encryption at Rest" for JavaScript Projects

I'm developing a JavaScript UI framework for personal projects, and I'm tackling state management with an extra twist: integrating encryption at rest!

Inspired by this React Hook: Async State Management (positive-intentions.com/blog/a), I’m extending it to support encrypted persistent data. Here's how:

✨ The Approach:

Using IndexedDB for storage.

Data is encrypted before saving and decrypted when loading using the Browser Cryptography API.

Event listeners will also be encrypted/decrypted to avoid issues like browser extensions snooping on events.

The password (should never be stored) is entered by the user at runtime to decrypt the data. (Currently hardcoded for now!)

The salt will be stored unencrypted in IndexedDB to generate the key.

πŸ”— Proof of Concept:
You can try it out here: GitHub PR (github.com/positive-intentions). Clone or run it in Codespaces and let me know what you think!

❓ Looking for Feedback:
Have I missed anything? Are there better ways to make this storage secure?

Let's make secure web UIs a reality together! πŸ”’

#JavaScript #Encryption #IndexedDB #WebDevelopment #CryptoAPI #FrontendDev #ReactHooks #StateManagement #WebSecurity #OpenSource #PersonalProjects

xoron :verified:xoron@infosec.exchange
2024-10-24

πŸš€ Ever wanted to work on a UI and not worry about "wiring up" state management? This might be the solution for you.

Just published an experiment on a unique approach to bottom-up state management. Lets make components in charge of managing and declaring state.

Curious how it works? Learn more about our approach to state management here! πŸ‘‡

positive-intentions.com/blog/a

Boosts appriciated πŸ™

#WebDevelopment #JavaScript #React #StateManagement #WebComponents #Async #Coding #Programming #Tech #Frontend #WebDev #Developer #CodeNewbie #Innovation #TechBlog #OpenSource #Experiment #CuttingEdge #TechTrends

2024-08-23

Master the basics of Redux, a powerful state management tool for JavaScript applications. Simplify your code with centralized state management and predictable updates. Learn how to set up Redux and enhance your app's scalability and maintainability.

Read More: go-globe.com/what-is-redux-a-c

2024-08-03

After spending the past few months wrangling nested hooks and contexts, Preact's Signals library sounds beautiful

youtube.com/watch?v=SO8lBVWF2Y

preactjs.com/guide/v10/signals

#react #preact #webDev #stateManagement

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst