DEV Community: Mahmoud shahin

I Built a Tiny State Management Library in TypeScript atostate

Mahmoud shahin — Sun, 04 Jan 2026 02:07:57 +0000

State management is one of those topics every frontend developer eventually bumps into.

At first, everything is simple:

local state
props
maybe a few shared variables

Then the app grows…
and suddenly state is everywhere, duplicated, out of sync, and hard to reason about.

Big libraries solve this but often with boilerplate, mental overhead, or framework lock-in.

So I decided to build my own minimal solution.

Meet atostate 👋

What is atostate?

atostate is a tiny tool state management library for JavaScript and TypeScript.

Its goal is very simple:

Provide a predictable global store with subscriptions and strong typing without complexity.

No framework assumptions.
No magic.
Just state + rules.

Why I built it

I wanted a library that:

Is small and readable
Works in vanilla JS or TS
Doesn’t force Redux-style architecture
Is easy to debug and reason about

Creating a store

import { createStore } from 'atostate';

type State = {
  count: number;
};

const store = createStore<State>({
  count: 0,
});

That’s it.
You now have a global store.

Updating state

State updates are explicit and predictable:

store.setState({ count: 1 });

store.setState((prev) => ({
  ...prev,
  count: prev.count + 1,
}));

No direct mutation.
No hidden side effects.

Subscribing to changes

Subscribe to all state changes:

store.subscribe(() => {
  console.log('State changed:', store.getState());
});

Or subscribe to only what you care about:

store.subscribe(
  (state) => state.count,
  (count, prev) => {
    console.log('Count changed:', prev, '→', count);
  }
);

This makes updates efficient and intentional.

Selectors + equality checks

Subscriptions only re-run when their selected slice actually changes.

import { shallowEqual } from 'atostate';

store.subscribe(
  (state) => state.user,
  (user) => {
    console.log('User changed:', user);
  },
  shallowEqual
);

No unnecessary re-runs.
No wasted work.

Actions: organizing logic cleanly

To keep logic out of UI code, atostate provides a lightweight actions API.

const counter = store.actions(({ setState }) => ({
  increment() {
    setState((s) => ({ ...s, count: s.count + 1 }));
  },
  reset() {
    setState({ count: 0 });
  },
}));

counter.increment();
counter.reset();

Simple, explicit, and easy to test.

Optional Redux-style reducers

If you like reducers and dispatch, atostate supports that too optionally.

type Action =
  | { type: 'inc' }
  | { type: 'set'; value: number };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'inc':
      return { ...state, count: state.count + 1 };
    case 'set':
      return { ...state, count: action.value };
    default:
      return state;
  }
}

const store = createStore<State, Action>(
  { count: 0 },
  { reducer }
);

store.dispatch({ type: 'inc' });

Use it only if you want it.

Middleware support

Cross-cutting concerns are handled via middleware.

Logger

import { loggerMiddleware } from 'atostate';

createStore(
  { count: 0 },
  { middleware: [loggerMiddleware('app')] }
);

Persistence

import { persistMiddleware } from 'atostate';

createStore(
  { count: 0 },
  { middleware: [persistMiddleware('app-state')] }
);

TypeScript-first

atostate is written entirely in TypeScript:

Typed state
Typed actions
Typed selectors
Great autocomplete

No any. No guessing.

What atostate is not

atostate intentionally avoids:

Framework-specific APIs
Heavy abstractions
Hidden reactivity
Large surface area

It’s a core state engine, not a full framework.

When should you use it?

atostate is a good fit if you want:

A small global store
Shared state across components
Strong typing
Minimal learning curve
Full control over architecture

If you enjoy understanding how your tools work and don’t want unnecessary complexity you might enjoy using it.

Feedback, ideas, and PRs are very welcome 🙌

Tonada - A new UI library

Mahmoud shahin — Sun, 02 Oct 2022 19:15:31 +0000

All the new libraries focus on building a UI component for the most popular frameworks but what about the native javascript is it dead what if I am a developer who doesn't like to use react or angular or whatever of those amazing front-end frameworks? Then the best solution is to use something like jQuery or bootstrap or Tonada but why I need to use Tonada because it's a lightweight library that gives you a great performance and this will reflect on your website's visitors and SEO tools, and its easy to use as well.
Support us by sharing, and contributing.

Getting Started
We going to import the style files for the components we will use and let's assume we will use all the components and then import the index style file

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Import all the styles -->
    <link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/index.css" />
    <!-- Or what you going to use only and i will use input style -->
    <link rel="stylesheet" href="https://unpkg.com/tonada/dist/css/input.css" />
  </head>
  <body>
    <div id="element" class="floating-label">
      <input class="tonada-input" type="text" name="name" placeholder="Name" />
      <label for="">Name</label>
    </div>
    <!-- (Required) ⛔ -->
    <script src="https://unpkg.com/tonada/dist/js/runtime.js"></script>
    <script src="https://unpkg.com/tonada/dist/js/shared.js"></script>
    <script src="https://unpkg.com/tonada/dist/js/index.js"></script>
    <!-- I Going to import the Input only-->
    <script src="https://unpkg.com/tonada/dist/js/input.js"></script>
    <script>
      const input = Tonada.create("input", document.querySelector("#element"));
    </script>
  </body>
</html>

For more Documentation

What is the Disposable email ?

Mahmoud shahin — Sun, 17 Apr 2022 15:04:26 +0000

Are you tired from the spam and searching about an email to register to got an offer either then you need a Disposable Email Or in another name a temporary email and goodbye for the spam and email hacking

But wait,What Is Temporary Email and Why Would I Need It?

Disposable email is a service provided to a registered user for a given period of time, using a temporary address. It should be distinguished from a disposable email address, which simply forwards messages to a primary email account and is often called an alias.Disposable email is also known as temporary email and throw-away email.

This sounds awesome! So how does it work?
Temporary email addresses have the same flow that any normal email addresses would have, with a few key differences. To help understand these key differences, let's look at the basics of regular, and temporary email.

Standard, permanent email:

Find an email service such as gmail, outlook, yahoo, etc.
Register for an account by filling out all of your personal info
Find a username that hasn't been taken, something like test2111@gmail.com
Use this email address everywhere
Temporary email:

Find a service offering disposable email address (hint, you can use https://tempomail.top)
The service generates a (usually) random email address for you to use
Copy the address and use it wherever you'd normally use an email address
Go back to the service and wait for your incoming email the same way you'd normally check for an email
Do your business and walk away, never looking back
So, now we have a high level overview of the differences between temporary email and regular email

let ‘s know how we can use Tempo mail

1- open https://tempomail.top

2- you will got an free email you can use it immediately anywhere you want and any time

3- and when you get any messages you will find them here in this box .

4- open up the message so you can see what is it exactly by click on the button looks like the eye on the right side

5- you will find the message content here [1] and any attachments you will find them here [2] and to download it just click on the attachment button

Also you can delete the message when you want by click here [3]

6- and to got a new email you can click here [1] then click ok in the popup you will got and your email will be ready after 2 seconds

IBUSY

Mahmoud shahin — Fri, 07 Jan 2022 18:16:04 +0000

IBusy tool can help you to create and enhance your time management tools and make them better and easier to make them because IBusy has great features that can help you in that.

1 - By IBusy you can get the free period between multiple periods Ex.. likes if you have a person and he is working in specifics times also he has holidays and absences and times he isn't available into so you can get only the times he available into between these periods.

2 - By IBusy you can filter and sort the duplication between multiple periods Ex.. if you have many dates and periods into an array and you need to remove the duplications and nested array and get only the unique periods like that

Demo
Install

npm i ibusy

[
   { start: "2021-12-29T10:00:00.000Z", end: "2021-12-29T15:00:00.000Z" }
   { start: "2021-12-29T14:00:00.000Z", end: "2021-12-29T16:00:00.000Z" }
   { start: "2021-12-29T16:00:00.000Z", end: "2021-12-29T20:00:00.000Z" }
   { start: "2021-12-29T19:00:00.000Z", end: "2021-12-29T23:00:00.000Z" }
   { start: "2021-12-29T21:00:00.000Z", end: "2021-12-29T23:00:00.000Z" }
]

You will get the unique period only

[{ start: "2021-12-29T10:00:00.000Z", end: "2021-12-29T23:00:00.000Z" }];
Tecnology and Dependances:

let's know how we can do that

Just simple to get the free periods.

1 - enter the allowed periods. 2 - ender the disallowed periods. 3 - get the free or available periods by calling getAllowedPeriodsBetween function just simple 😉.

const ibusy = new IBusy();
const periods = ibusy.getAllowedPeriodsBetween(
  [{ start: "2021-12-29T05:00:00.000Z", end: "2021-12-29T22:00:00.000Z" }],
  [
    { start: "2021-12-29T06:00:00.000Z", end: "2021-12-29T12:00:00.000Z" },
    { start: "2021-12-29T13:00:00.000Z", end: "2021-12-29T21:00:00.000Z" }
  ]
);

Laravel Routes 🚀 - Visual Code Extension

Mahmoud shahin — Wed, 01 Dec 2021 21:10:53 +0000

laravel routes is amazing Visual Code Extension to help you write your routes without try to remember it's expressions.

Install Laravel Routes

Screenshot

How Works

Open the laravel project folder as a root folder otherwise you
will need to edit the User Setting
Press LEFT CTRL + SHIFT + P
Choose LaravelRoutes: Start
Press Enter.
Try to write any route path inside double quotes

/* Your route Here */

you will see a list of suggested routes with the same name.

User Settings

   "routes.RoutesFolderPath": "/routes",
   "routes.ProvidersFolderPath": "/app/Providers"

NGX-Nework Get Network Speed

Mahmoud shahin — Fri, 15 Oct 2021 19:23:13 +0000

How many times you want from client to upload or download something and you need to be sure his network is fast so with simplest package every and updated continuously with new features NgxNetwork you can do that. let's finish the work 👷‍♂️👷‍♀️

https://www.npmjs.com/package/ngx-network

give a user great experiance by add this tool to your angular project with simple steps and make the client see his current network speed

that can be awesome clients always likes more features.

please support me by comment about any suggestions or anything need to add to this amazing tool

Ngx Popover

Mahmoud shahin — Mon, 27 Sep 2021 09:26:45 +0000

I finished a new tool and i want your opionon about the tool and please support me by share with me any new ideas or features you want me add to the tool to be fit for your work more thanks.
let's start.

Installation
You can use either the npm command-line tool to install packages.

NPM
npm i ngx-cxl-popover

Usage ⁉
import NgxCxlPopoverModule module
@NgModule({
imports: [
/* .... /
NgxCxlPopoverModule
/ .... */
],
})

1- add directive ngxCxlPopover on the element.
2- write your awesome title popoverTitle.
3- write your awesome content popoverContent.

Hello

if you want use customized templates for the title and content then let's go to the next level 👍

Advanced
Custom Templates
<h1
ngxCxlPopover
popoverTitle="Hello"
popoverContent="👋"
[titleTemplate]="titleTemplate"
[contentTemplate]="contentTemplate"

Hello

Contribution
I welcome you to fork and add more features into it. If you have any bugs or feature request, please create an issue at github repository.

Laravel Lardebug New Debugger Tool For Laravel With NodeJs

Mahmoud shahin — Sat, 21 Aug 2021 18:59:13 +0000

this is the link for the tool
https://github.com/mahmoudshahin1111/lardebug

please support me with a report about any issues or any suggestions to improve the tool.🙏
you can report about issues or suggestions here https://github.com/mahmoudshahin1111/lardebug/issues or in comments i will be listen 👂

Object Orianted Javascript In Arabic

Mahmoud shahin — Thu, 05 Aug 2021 15:26:26 +0000

Convert numbers to arabic words in javascript

Mahmoud shahin — Sun, 11 Jul 2021 11:40:47 +0000

Npm tool will be useful when you need to use Arabic words in your website with only one function and please let me know about new features that can help you in your work or any bugs to fix immediately
The Tool 🔥⚒ : https://www.npmjs.com/package/number-to-arabic-words

report about any issue : https://github.com/mahmoudshahin1111/numbers-to-arabic-words/issues

Thanks 🙏

Pricing Component IN CSS & JS & HTML

Mahmoud shahin — Fri, 14 May 2021 09:04:33 +0000

3D Cards

Mahmoud shahin — Fri, 23 Apr 2021 12:32:43 +0000

I interesting to make complex 🤓 things with javascript, CSS, and HTML so I make a search on complex things in javascript and CSS and I choose 3d cards so I made it and would like to share that work 💖😍

[Arabic Voice] How I Did That?