Forem: İnanç Akduvan

I created my own React state management library

İnanç Akduvan — Sun, 25 May 2025 11:13:23 +0000

I was tired of boilerplate and providers.

Like many React developers, I’ve gone through almost every popular global state library over the years…

And at some point I asked myself:

"What if I could just share state across components using a hook — no setup, no boilerplate, no ceremony?"

So I built Keact.

Keact is a key-based global state manager for React.

No Providers. No boilerplate. Just useKeact("something").

The core idea is simple:

// In any component

import { useKeact } from '@inancakduvan/keact';

// Initialize once
const [username, setUsername] = useKeact('username', {
  initialValue: 'John Doe'
});

// Read elsewhere globally by key
const [username] = useKeact('username');

// Also set elsewhere globally by key
const [username, setUsername] = useKeact('username');
setUsername('George Brown');
// End

No setup. No config. No mental gymnastics.

It works exactly like useState, but the value is globally shared by key.

Why not just use Zustand or Redux?

Good question.

They’re great tools, and I’ve used them both. But even Zustand — which is relatively minimal — still requires:

Defining a store
Creating functions for state updates
Importing the store everywhere

For tiny apps, MVPs, or side projects, I often just want something stupidly simple.

A shared value that updates everywhere
Without writing a store or a context or importing 3 files

TypeScript support?

// store.ts
import { typeSafeKeact } from "@inancakduvan/keact";

interface KeactStore {
  basket: {
    id: string;
    count: number;
  }
}

export const useKeact = typeSafeKeact<KeactStore>();

// your-component.ts
import { useKeact } from "@/store.ts";

const [basket, setBasket] = useKeact('basket');

setBasket({
  id: "12345",
  count: 3
});
// End

Bonus: selector-style reading

Sometimes you just want to read a nested value:

const [itemCount] = useKeact((state) => state.cart.items.length);

This works! It's read-only, and super convenient for derived values.

How does it work under the hood?

Keact keeps a simple global object (globalStore) in memory:

When you call:

const [value, setValue] = useKeact("key", { initialValue: 123 });

It:

Registers "key" in the store if it doesn't exist.
When you update a key, keact notifies listeners.
React’s useSyncExternalStore takes care of keeping your components fresh.

——-

Try it

GitHub: https://github.com/inancakduvan/keact
Docs & Demo: https://keact.vercel.app
NPM: npm i @inancakduvan/keact

What do you think?

I am not sure if that kind of library is necessary. I am not even sure about the approach. Also aware about potential structural issues in projects. But I just wanted to create a minimal version of a library in my mind. And let it go 🚌 now... I will just see what it is gonna happen. I will test it, iterate it, maybe keep it going maybe give it up. We will see...

I would love to discuss about it, please share your comments ❤️

Follow me on:

Github: https://github.com/inancakduvan/
X: https://x.com/InancAkduvan

Thank you for coming with me until end of the reading! 🙂

Observer - JavaScript Design Patterns

İnanç Akduvan — Thu, 26 Oct 2023 22:24:32 +0000

Hey hey my friends,
today, we will observe one of my favorite javascript patterns:

OBSERVER PATTERN

Sometimes, we need to have the same behaviour when different events occurred. If this is the case, Observer Pattern is a very useful guide for us.

Thanks to Observer Pattern, we can subscribe to objects, and observe changes in these objects.

Let's create a simple scenario and make some examples based on it.

Assume that:
Whenever a user log in or log out, we want to show an alert and also record this action into database. These two behaviours will be always the same for both log in and log out events.

1) We can achieve it by creating a class:
ObserveUserEvents class will have four parts:

observers: This is an array. It contains functions which will be triggered when a spesific event occured.
subscribe: This is a method to add functions which will be triggered into observers array.
unsubscribe: This is a method to remove functions from observers array. (just opposite of subscribe method.)
notify: This is a method to trigger all observers (functions added into observers array via subscribe method.)

class ObserveUserEvents {
    constructor() {
      this.observers = [];
    }

    subscribe(function) {
      this.observers.push(function);
    }

    unsubscribe(function) {
      this.observers = this.observers.filter((observer) => observer !== function);
    }

    notify(data) {
      this.observers.forEach((observer) => observer(data));
    }
}

OK, ready! Now we need two functions. One for showing alert. One for recording data into database.

Surely, I will not create real functions for these actions. We will create some placeholder functions just for now and assume that they are real 🤡

2) Time to create our functions:

function recordToDatabase(data) {
    console.log({
       recordTitle: data,
       recordDate: Date.now()
    });
}

function showAlert(data) {
    console.log("Alert message:", data);
}

Good, good, good. Now, We would like to trigger these two functions named recordToDatabase and showAlert whenever a user log in or log out. Then, the only thing we need to do here is to subscribe them.

3) Let's subscribe:

const observable = new ObserveUserEvents();

observable.subscribe(recordToDatabase);
observable.subscribe(showAlert);

Subscribed! 📪 From now on, whenever we notify observers, these functions will be triggered. Awesome!

It is better to continue with our scenario.
So assume that, we have two buttons. One for log in event, one for log out event. So let's assign click events to them and notify observers on their click.

4) Notify observers:

const loginButton = document.getElementById("loginButton");
const logoutButton = document.getElementById("logoutButton");

loginButton.addEventListener("click", () => {
  observable.notify("User logged in");

  // In background, it actually runs:
  // recordToDatabase("User logged in");
  // showAlert("User logged in");
  // So if you check console, you will see it prints:
  // {
  //   recordTitle: "User logged in",
  //   recordDate: Date.now()
  // }
  // and also it prints:
  // "Alert message: User logged in"
});

logoutButton.addEventListener("click", () => {
  observable.notify("User logged out");

  // In background, it actually runs:
  // recordToDatabase("User logged out");
  // showAlert("User logged out");
  // So if you check console, you will see it prints:
  // {
  //   recordTitle: "User logged out",
  //   recordDate: Date.now()
  // }
  // and also it prints:
  // "Alert message: User logged out"
});

ta-taam 👻 now, you can notify and trigger the same behaviour only with one line code and anywere you want.

This was a just small example, my friends, to explain the logic. We can take this pattern as a guide and customize it to our specific needs.

I am glad that you read it until here.
Please, don't hesitate to give feedback, contribute, contact and correct me. Also, please, comment, like and share 🥺

Follow me on:

Github: https://github.com/inancakduvan/
Twitter: https://twitter.com/InancAkduvan

Thank you for coming with me until end of the reading! 🙂

Singleton - JavaScript Design Patterns

İnanç Akduvan — Sat, 14 Oct 2023 09:08:56 +0000

Hey my friend,
it will be easy to follow, don't scare, stay with me. 👻

Let's start by summarizing what a Design Pattern is.

What is a Design Pattern?

Design patterns are solutions to solve our common and recurring problems.

We all develop and face problems everyday and many of them are generally similar to each other. These patterns are born to solve these common problems.

Surely, you can accept them as a guide and customize them to satisfy your needs specifically in your project.

In this article, we will talk about 'Singleton' which is only one of the design patterns.

Singleton

The only and most important sentence about this design pattern is that:

You can have only one instance of a class created as a Singleton.

If a class is singleton,
-- You can only have one instance of it,
-- You can share it everywhere in your project and reach your global and common values everywhere.

So, how is this useful?
Let's code an example together and see how we can use this pattern.

For example, we can create a very simple state management for our application with Singleton.

Let's do it and create a regular class named 'State':

class State {
    constructor(states) {
        this.states = states;
    }

    getState(stateName) {
        return this.states[stateName];
    }

    updateState(stateName, newValue) {
        this.states[stateName] = newValue;
    }
}

const appStates = new State({
    onlineUsersTotal: 1200,
    isUserLoggedIn: true
});

1) We created a class named 'State'.
2) Our class has an initial object named 'states'. This object includes initial values of our states.
3) Our class also has a method named 'getState' to get value of a targetted state.
4) It also has a method named 'updateState' to update value of a targetted state.
5) We created an instance of our class and assigned it to a variable named 'appStates'.

Well, it is okay. But this is not singleton yet, right?
We can simply create one more instance of this class, just like:

const appStates = new State({
    onlineUsersTotal: 1200,
    isUserLoggedIn: true
});

const appStates2 = new State({
    onlineUsersTotal: 1200,
    isUserLoggedIn: true
});

BUT NO, we don't want this! We need only one appState, so we can control it safely everywhere in the project. We want to prevent creating instances more than one. It is the one! ❤️

Let's add one more code line and it will allow to have only one instance:

let isAppStateInstanceCreated = false;

class State {
    constructor(states) {
        if (isAppStateInstanceCreated) {
            throw new Error("You are allowed to have only one appStates!");
        }

        isAppStateInstanceCreated = true;

        this.states = states;
    }

    getState(stateName) {
        return this.states[stateName];
    }

    updateState(stateName, newValue) {
        this.states[stateName] = newValue;
    }
}

const appStates = new State({
    onlineUsersTotal: 1200,
    isUserLoggedIn: true
});

const appStates2 = new State({
    onlineUsersTotal: 1200,
    isUserLoggedIn: true
});
// Error: You are allowed to have only one appStates!

We created a global variable named 'isAppStateInstanceCreated' which is false as default. In the constructor of our State class, we set it to true. If true, this means that we initialized this class before. So user will get an error in this case, like 'You are allowed to have only one appStates!'

Now, State class is a Singleton.

Example usage:

appStates.updateState("onlineUsersTotal", 1300);

const currentOnlineUsersTotal = appStates.getState("onlineUsersTotal");

console.log(currentOnlineUsersTotal);
// 1300

Extra

Stay with me one more second, it will be worth it!

We have pretty much a singleton class.
However, to be honest, we still are not safe enough.
Because, you know, we can manipulate our Class just like a regular object. Let me show you:

appStates.states = null;

I just easily set all states to null...
No man, we cannot allow this.
We will use Object.freeze method to protect our class from this kind of effects.

const appStates = Object.freeze(new State({
    onlineUsersTotal: 1200,
    isUserLoggedIn: true
}));

And now, nobody can manipulate our Class, my friend, NOBODY!
If you don't believe me, I dare you, try and see it 👊

Please don't hesitate to give feedback, correct me, contribute, comment and contact me 🤓

And if you find it useful, please,
like and share ❤️

Follow me on:

Github: https://github.com/inancakduvan/
Twitter: https://twitter.com/InancAkduvan

Thank you for coming with me until end of the reading! 🙂

Sliding Buttons JS

İnanç Akduvan — Mon, 14 Aug 2023 14:40:49 +0000

Sliding Buttons JS 🚀

Mobile application feeling on your web application 💥

I’ve created an open source JS library which you can create buttons that user can interact by sliding 🤓

DEMO and Documentation ⤵️
https://sliding-buttons.vercel.app

———-

Follow me on:

Github: https://github.com/inancakduvan/
Twitter: https://twitter.com/InancAkduvan

Drag and drop to upload a photo #JavaScript #CSS

İnanç Akduvan — Wed, 19 Jul 2023 09:40:12 +0000

We will create a very basic drag and drop application to upload a image.

1.a) Create an area to drop image

<div class="drop-container">
      <span>Drop image here to upload</span>
</div>

<div id="file_name">You haven't uploaded a photo yet.</div>

1.b) And add a little bit style

.drop-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 400px;
    width: 100%;
    max-width: 600px;
    font-size: 1.5rem;
    border: 2px dashed rgb(255, 203, 232);
    border-radius: 8px;
}

.drop-container.uploaded {
    border-color: #51cbb0;
    border-style: solid;
}

.drop-container img {
    max-width: 100%;
}

#file_name {
    margin-top: 32px;
}

It will look like:

2) Prevent default behaviour of 'dragover' event
Otherwise, image which is dropped will be opened in a blank tab.

const dropContainer = document.querySelector(".drop-container");

dropContainer.addEventListener("dragover", (event) => {
  event.preventDefault();
});

3) Get file on drop
We also need to prevent default behaviour here.

const dropContainer = document.querySelector(".drop-container");
const fileName = document.getElementById("file_name");

dropContainer.addEventListener("dragover", (event) => {
  event.preventDefault();
});

dropContainer.addEventListener("drop", (event) => {
  event.preventDefault();

  // Get file uploaded
  const file = event.dataTransfer.files[0];

  console.log(file)
});

4) Preview image which we uploaded
We will create a link for the file and preview it as a image.

const dropContainer = document.querySelector(".drop-container");
const fileName = document.getElementById("file_name");

dropContainer.addEventListener("dragover", (event) => {
  event.preventDefault();
});

dropContainer.addEventListener("drop", (event) => {
  event.preventDefault();

  // Get file
  const file = event.dataTransfer.files[0];

  // Create link
  const url = window.URL.createObjectURL(file);

  // Create image element
  const image = document.createElement("img");
  image.src = url;

  // Append image as a child to drop area
  dropContainer.innerHTML = "";
  dropContainer.appendChild(image);

  // Add class to drop container when image uploaded  
  // for updating styles
  dropContainer.classList.add("uploaded");

  // Preview file name and type
  fileName.innerHTML = `${file.name} [${file.type}]`;
});

Here it is. 🎉

5) EXTRA PART
Check if the file type is image or not

const dropContainer = document.querySelector(".drop-container");
const fileName = document.getElementById("file_name");

dropContainer.addEventListener("dragover", (event) => {
  event.preventDefault();
});

dropContainer.addEventListener("drop", (event) => {
  event.preventDefault();

  let file;

  if (event.dataTransfer.items) {
    const item = event.dataTransfer.items[0];

    const isFile = item.kind === "file";
    const isImage = item.type.split("/")[0] === "image";

    if (isFile && isImage) {
      file = item.getAsFile();
    } else {
      alert("This is not an image!");

      return;
    }
  } else {
    file = event.dataTransfer.files[0];
  }

  const url = window.URL.createObjectURL(file);

  const image = document.createElement("img");
  image.src = url;

  dropContainer.innerHTML = "";
  dropContainer.appendChild(image);

  dropContainer.classList.add("uploaded");

  fileName.innerHTML = `${file.name} [${file.type}]`;
});

That is it. Find source code on github:
https://github.com/inancakduvan/drag-and-drop-image

Follow me on:

Github: https://github.com/inancakduvan/
Twitter: https://twitter.com/InancAkduvan

Thank you for reading 🙂

Finger Swipe JS

İnanç Akduvan — Mon, 03 Oct 2022 21:18:32 +0000

Hi guys 🙋‍♂️

I've created a JavaScript library which you can trigger any function on swipe with your finger!

It is very easy to use. And open-source.

You can install it as an NPM package.

Try live demo:

https://finger-swipe-js.vercel.app/

Documentation and source code:

https://github.com/inancakduvan/finger-swipe-js

I WOULD BE GLAD IF YOU CONTRIBUTE IT 🎮

Still improving it, so it would be great if you:

Check repo out,
Contribute it,
Open issues and requests.

Follow me on:

Github: https://github.com/inancakduvan/
Twitter: https://twitter.com/InancAkduvan

Thank you everybody! 🙂

Let me understand how JavaScript works under the hood

İnanç Akduvan — Wed, 28 Sep 2022 12:38:46 +0000

Did you ever wonder what's going on behind the scenes when you run a very small piece of code in JavaScript? I actually didn't for a long time.

I wanna understand it with you right now. Let's try to discover together! Hop on the bus, starting! 🚎

I offer to write a very very small code block and try to understand its story:

const totalApples = 10;
const totalBananas = 5;

function getTotalFruits() {
   return totalApples + totalBananas;
}

const totalFruits = getTotalFruits();

Cool, we all know that result is 15 here. So easy. But what happened under the hood?

Before we start, keep in mind that JavaScript is single threaded and synchronous language:

It can only execute one thing at a time.
It executes them line by line from top to bottom.

FIRST OF ALL, Global Execution Context is created by JavaScript Engine.

JavaScript Engine

Javascript Engine is a program that executes the javascript code.

Execution Context

Imagine that: Execution context is a two-sided place where JS code is declared and executed. Imagine a board which has two sides.

On the right side (Memory), all variables and functions are declared.

On the left side (Thread of Execution), code is executed line by line.

There are 2 types of Execution Context:

Global Execution Context (GEC)

Whenever JS Engine executes a script, it creates a global execution context which all global code handled.

Function Execution Context (FEC)

Whenever a function is called, it creates a function execution context which has its own local memory and thread of execution.

LET'S TRY TO VISUALIZE:

Remember our code:

// Step 1
const totalApples = 10;
const totalBananas = 5;

// Step 2
function getTotalFruits() {
   return totalApples + totalBananas;
}

// Step 3
const totalFruits = getTotalFruits();

Script executed, and Global Execution Context created:

Step 1:

Declare totalApples and totalBananas variables in the memory.

Step 2:

Declare getTotalFruits function in the memory.

Did you realized you can also save a function in the memory? Let's go on.

Step 3 (Part 1):

Declare totalFruits variable in the memory. But do I know value of this variable? NO! We cannot save commands in the memory. So it will be saved as uninitialized at the moment. See it:

Step 3 (Part 2):

Time to execute our function on Thread of Execution. AND FOR THE FIRST TIME HERE, Function Execution Context comes into our live. Here it is:

Is that all? NO my friend! Something is missing here. A new term reveals in this step. Whenever you call a function, it pops in Call Stack.

Call stack

Call Stack is where the JavaScript Engine keeps track of where your code is in the execution.
You can basically see which functions is running right now in the Call Stack.

🎤 Imagine that you are a singer. Announcer is calling your name. You are coming and singing your song. When the song is over, you are getting off the stage. Stage is Call Stack here. 🎤

When a function is called, it pops in Call Stack. And it pops out when it has done its job.

Global Execution is running at the bottom as default in Call Stack.

Function called:

Function finished its job:

Note that: There is ONLY ONE Call Stack since JavaScript is a single threaded language.

HUH! I guess it is done, right? Please warn me, if I do anything wrong. Let's keep up the work.

It looks okay like this, but, what if we add some complexity to our function?

Let's not be afraid and do it!

It looks very clean when it goes synchronously. But what will happen when some functions are asynchronous?

We can basically do it with setTimeout:

const totalApples = 10;
const totalBananas = 5;

function getTotalFruits() {
   return totalApples + totalBananas;
}

function runTimer() {
   console.log('timeout run!')
}

const totalFruits = getTotalFruits();

setTimeout(runTimer, 0);

console.log(totalFruits);

So guys, here is interesting. New terms reveal here again.
Did you know that JavaScript doesn't have a timer? Also console?

Everybody sometimes needs a support, so does Javascript. WEB APIs help JavaScript here.

Web APIs

Web APIs are generally used with JavaScript and add some power to our functionality. Timer, Console, Network requests and many other things are Web APIs' skills, not Javascript.
JavaScript just communicates with browser via some labels like setTimeout.

Let's Visualize

Assume that, it is setTimeout's turn in the Thread of Execution and let's try to visualize this step:

hmm, weird things are happening. Let me try to summarize it.
Please some attention now:

Functions and variables saved in memory as usual. They are executed in the thread. And when it is setTimeout's turn, JavaScript didn't send setTimeout's callback (runTimer) into Call Stack. Instead, it communicated with Web Browser and sent a message like:

''Hey buddy 👋 Can you start a timer for me? And when timer is completed, here is your callback to run (runTimer).''

As you see, after 0ms, timer is completed, callback is ready to run BUT guys, Thread of Execution never stops, exactly like life.

In the time when Web Browser handles timer, functions kept executing in the thread and even if callback(runTimer) is ready to be executed, Call Stack is not empty anymore! And remember: There can be only one execution at a time. BUT I HAVE TWO FUNCTIONS TO RUN IN MY HANDS.

What is gonna happen? Is JavaScript broken?!?!!?
Please no, we need it.

Or will JavaScript run my functions in a random order?
That would be very unpredictable and disaster.

There should be a better solution.

🚨 NEW TERM ALERT 🚨

Our callback is waiting in Callback Queue.

Callback Queue

Callback Queue is kind of a waiting room for callbacks which are ready to be executed. Callback is waiting here for the Call Stack to empty. Whenever is Call Stack is empty, our callback pops in Call Stack and do its job.

Event Loop

Event Loops basically checks Call Stack continuously, and when Call Stack is empty, let there know about it. And first callback in the queue pops in Call Stack.

Let's add some visuals including Callback Queue and Event Loop

Oh guys, victory! 🏆

Just a little question; What if current execution continues for 1000 seconds or whatever while our callback is waiting in Callback Queue? Is it gonna wait forever?

Sounds unbelievable but yes! Whatever the cost, it is gonna wait until Call Stack is empty. No permission to run unless Call Stack is empty.

Okay! Adventure of this code block completed here, right? But I feel like we can add some more complexity here.

PLEASE DON'T LEAVE ME! I PROMISE THIS IS LAST SECTION. You will not regret, be patient!

What would happen if I need to fetch data from server?

Let's fetch some data:

const totalApples = 10;
const totalBananas = 5;

function getTotalFruits() {
   return totalApples + totalBananas;
}

function runTimer() {
   console.log('timeout run!')
}

function showData(data) {
   console.log(data)
}

const totalFruits = getTotalFruits();

setTimeout(runTimer, 0);

// Fetch some data
const fetchData = fetch('https://jsonplaceholder.typicode.com/todos/1');

fetchData.then(showData);

console.log(totalFruits);

Okay, when we fetch data, we will communicate with Web Browser again. Because we need its APIs here.

I will not mention about details of fetch API, just talk about what is going on in the Thread of Execution, Call Stack and Queue while fetching data.

Hmm, let's try to write down a timesheet about what happened here:

1) Functions and variables saved in the memory, executed in the thread blablabla...

2) setTimeout communicated with Web Browser's timer.

3) setTimeout's callback (runTimer) is ready and waiting in Callback Queue after 0ms. [0ms]

4) fetch is doing two jobs:
a) Communicated with Web Browser's network feature.
b) Created a special Promise Object in the memory via Javascript Engine.

5) fetch's callback (showData) is ready with data to run after 200ms BUT we don't know yet where it is waiting right now. We'll see. [200ms]

6) While all those are happening, console.log(15) popped in Call Stack. AND assume that: it has taken 250ms to console and after 250ms it will pop out from Call Stack. (I know it wouldn't take that time in real life but just an assumption to understand the story). [250ms]

So, console.log(15) is running in the Call Stack, runTimer is waiting in Callback Queue. Where is showData waiting?

Based on our current knowledge, showData should be waiting right behind runTimer in the Callback Queue, right?

No my friend, it is not.
For the last time,🚨New Term Alert🚨:

There is an another kind of queue here besides Callback Queue.

Microtask Queue

Whenever a callback is related to Promise Object in JavaScript Engine, it will be waiting in Microtask Queue such as callbacks of fetch functions.

Note that: Microtask Queue has a privilege over Callback Queue.

First, callbacks in Microtask Queue will pop in Call Stack. After they are done, callbacks in Callback Queue will start to pop in Call Stack.

In our scenario, firstly, showData will run because it is waiting in Microtask Queue. And then, runTimer which is waiting in Callback Queue will run.

Then, final result looks like:

What an adventure! 😓 just a fucking piece of code, crazy.
Our journey ends here, guys. 🚎 thank you for joining me!

Stay in touch with me for more adventures 👇

Follow me on:

Github: https://github.com/inancakduvan/
Twitter: https://twitter.com/InancAkduvan

Thank you for coming with me until end of the reading! 🙂

Connect MetaMask wallet #JavaScript

İnanç Akduvan — Sun, 24 Apr 2022 08:58:17 +0000

We will connect MetaMask wallet and get accounts with javascript basically.

Try demo here:
https://inancakduvan.github.io/connect-metamask-wallet/

Find source code on github:
https://github.com/inancakduvan/connect-metamask-wallet

1) Check if MetaMask plugin installed on browser
If not, redirect user to MetaMask download page.

const connectButton = document.getElementById("connectButton");

connectButton.addEventListener("click", () => {
   if (typeof window.ethereum !== "undefined") {
       console.log("MetaMask installed")
   } else {
       window.open("https://metamask.io/download/", "_blank");
   }
})

2) Get accounts if MetaMask installed
MetaMask plugin will automatically open when we send a request to get accounts.

const connectButton = document.getElementById("connectButton");
const walletID = document.getElementById("walletID");

if (typeof window.ethereum !== "undefined") {
    ethereum
      .request({ method: "eth_requestAccounts" })
      .then((accounts) => {
        const account = accounts[0]

        walletID.innerHTML = `Wallet connected: ${account}`;
      })
} else {
      window.open("https://metamask.io/download/", "_blank");
}

3) Handle errors
Handling errors is a good practise to guide the user correctly.
(For example: show a loader while user is connecting wallet and hide it if user cancel process)

const connectButton = document.getElementById("connectButton");
const walletID = document.getElementById("walletID");

connectButton.addEventListener("click", () => {
   if (typeof window.ethereum !== "undefined") {
        ethereum
         .request({ method: "eth_requestAccounts" })
         .then((accounts) => {
           const account = accounts[0]

           walletID.innerHTML = `Wallet connected: ${account}`;
        }).catch((error) => {
           // Handle error
           console.log(error, error.code);

           // 4001 - The request was rejected by the user
           // -32602 - The parameters were invalid
           // -32603- Internal error
       });
   } else {
       window.open("https://metamask.io/download/", "_blank");
   }
})

It is done here, we can say. But if you are interested in some extra suggestions, keep reading:

EXTRA SUGGESTIONS

4) Show a loader while user is connecting wallet via plugin

const connectButton = document.getElementById("connectButton");
const walletID = document.getElementById("walletID");

connectButton.addEventListener("click", () => {
   // Start loader while connecting
   connectButton.classList.add("loadingButton");

   if (typeof window.ethereum !== "undefined") {
      ethereum
        .request({ method: "eth_requestAccounts" })
        .then((accounts) => {
           const account = accounts[0]

           walletID.innerHTML = `Wallet connected: ${account}`;

           // Stop loader when connected
           connectButton.classList.remove("loadingButton");
      }).catch((error) => {
        // Handle error
        console.log(error, error.code);

        // Stop loader if error occured

        connectButton.classList.remove("loadingButton");

        // 4001 - The request was rejected by the user
        // -32602 - The parameters were invalid
        // -32603- Internal error
      });
   } else {
      window.open("https://metamask.io/download/", "_blank");
   }
})

5) Show a "Reload page" warning when user is redirected to download page
User needs to refresh page after plugin installed and so browser can re-fetch scripts. It would be a good practise to let user know about this.

const connectButton = document.getElementById("connectButton");
const walletID = document.getElementById("walletID");
const reloadButton = document.getElementById("reloadButton");
const installAlert = document.getElementById("installAlert");

connectButton.addEventListener("click", () => {
   // Start loader while connecting
   connectButton.classList.add("loadingButton");

   if (typeof window.ethereum !== "undefined") {
      ethereum
        .request({ method: "eth_requestAccounts" })
        .then((accounts) => {
           const account = accounts[0]

           walletID.innerHTML = `Wallet connected: ${account}`;

           // Stop loader when connected
           connectButton.classList.remove("loadingButton");
      }).catch((error) => {
        // Handle error
        console.log(error, error.code);

        // Stop loader if error occured
        // For example, when user cancelled request 
        // and closed plugin
        connectButton.classList.remove("loadingButton");

        // 4001 - The request was rejected by the user
        // -32602 - The parameters were invalid
        // -32603- Internal error
      });
   } else {
      window.open("https://metamask.io/download/", "_blank");

      // Show 'Reload page' warning to user
      installAlert.classList.add("show");
   }
})

// Reload the page on reload button click
reloadButton.addEventListener("click", () => {
  window.location.reload();
});

6) Check if user is on mobile device
If user is on mobile device, MetaMask application's browser should be used to be connected.

const connectButton = document.getElementById("connectButton");
const walletID = document.getElementById("walletID");
const reloadButton = document.getElementById("reloadButton");
const installAlert = document.getElementById("installAlert");
const mobileDeviceWarning = document.getElementById("mobileDeviceWarning");

connectButton.addEventListener("click", () => {
      // Start loader while connecting
      connectButton.classList.add("loadingButton");

      if (typeof window.ethereum !== "undefined") {
        ethereum
          .request({ method: "eth_requestAccounts" })
          .then((accounts) => {
             const account = accounts[0]

             walletID.innerHTML = `Wallet connected: ${account}`;

             // Stop loader when connected
             connectButton.classList.remove("loadingButton");
         }).catch((error) => {
           // Handle error
           console.log(error, error.code);

           // Stop loader if error occured
           // For example, when user cancelled request 
           // and closed plugin
           connectButton.classList.remove("loadingButton");

           // 4001 - The request was rejected by the user
           // -32602 - The parameters were invalid
           // -32603- Internal error
         });
      } else { 
          // Find the function which checks if device is mobile
          // at my github repo or anywhere
         if (isMobile()) {
           mobileDeviceWarning.classList.add("show");
         } else {
           window.open("https://metamask.io/download/", "_blank");

           // Show 'Reload page' warning to user
           installAlert.classList.add("show");
         }
      }
})

// Reload the page on reload button click
reloadButton.addEventListener("click", () => {
  window.location.reload();
});

Here is html and css:

 <div class="container">
      <button class="button" id="connectButton">
        Connect wallet

        <span id="loading">
         <span>&bull;</span><span>&bull;</span><span>&bull;</span> 
        </span>
      </button>

      <div id="walletID">Your wallet is not connected yet.</div>

     <div id="mobileDeviceWarning">
        If you are on a mobile phone, please use MetaMask 
        application's browser to connect.
     </div>
 </div>

<div class="alert" id="installAlert">
  Please refresh your browser after installing the Metamask plugin

  <button class="button" id="reloadButton">Reload page</button>
</div>

.container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
}

.button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    box-shadow: 0 1px 5px 0 #e6e9ef;
    background: #ffffff;
    color: #000;
    border-radius: 99px;
    padding: 16px 32px;
    font-family: 'Quicksand', sans-serif;
    font-size: 24px;
    font-weight: 500;
    cursor: pointer;
}

#connectButton {
    margin-bottom: 16px;
    color: #eb874b;
}

#walletID span{
    max-width: 90%;
    margin: 0 auto;
    font-size: 12px;
    font-weight: 600;
}

#mobileDeviceWarning {
    display: none;
    margin-top: 24px;
    color: rgb(247, 47, 47);
}

#mobileDeviceWarning.show {
    display: block;
}

.alert {
    z-index: 10;
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: #ffffff;
}

.alert.show {
    display: flex;
}

.alert .button {
    margin-top: 24px;
}

/* Loading dots styles */
@keyframes opacity {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.loadingButton {
    pointer-events: none;
}

.loadingButton #loading {
    display: flex;
}

#loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 99px;
}

#loading span:not(:last-child) {
    margin-right: 5px;
}

#loading span {
    animation-name: opacity;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

#loading span:nth-child(2) {
    animation-delay: 100ms;
    animation-delay: 100ms;
}

#loading span:nth-child(3) {
    animation-delay: 300ms;
    animation-delay: 300ms;
}

Find source code on github:
https://github.com/inancakduvan/connect-metamask-wallet

Follow me on:

Github: https://github.com/inancakduvan/
Twitter: https://twitter.com/InancAkduvan

Thank you for reading 🙂

Drag and drop to upload a photo #JavaScript

İnanç Akduvan — Fri, 22 Apr 2022 21:23:25 +0000

We will create a very basic drag and drop application to upload a image.

1.a) Create an area to drop image

<div class="drop-container">
      <span>Drop image here to upload</span>
</div>

<div id="file_name">You haven't uploaded a photo yet.</div>

1.b) And add a little bit style

.drop-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 400px;
    width: 100%;
    max-width: 600px;
    font-size: 1.5rem;
    border: 2px dashed rgb(255, 203, 232);
    border-radius: 8px;
}

.drop-container.uploaded {
    border-color: #51cbb0;
    border-style: solid;
}

.drop-container img {
    max-width: 100%;
}

#file_name {
    margin-top: 32px;
}

It will look like:

2) Prevent default behaviour of 'dragover' event
Otherwise, image which is dropped will be opened in a blank tab.

const dropContainer = document.querySelector(".drop-container");

dropContainer.addEventListener("dragover", (event) => {
  event.preventDefault();
});

3) Get file on drop
We also need to prevent default behaviour here.

const dropContainer = document.querySelector(".drop-container");
const fileName = document.getElementById("file_name");

dropContainer.addEventListener("dragover", (event) => {
  event.preventDefault();
});

dropContainer.addEventListener("drop", (event) => {
  event.preventDefault();

  // Get file uploaded
  const file = event.dataTransfer.files[0];

  console.log(file)
});

4) Preview image which we uploaded
We will create a link for the file and preview it as a image.

const dropContainer = document.querySelector(".drop-container");
const fileName = document.getElementById("file_name");

dropContainer.addEventListener("dragover", (event) => {
  event.preventDefault();
});

dropContainer.addEventListener("drop", (event) => {
  event.preventDefault();

  // Get file
  const file = event.dataTransfer.files[0];

  // Create link
  const url = window.URL.createObjectURL(file);

  // Create image element
  const image = document.createElement("img");
  image.src = url;

  // Append image as a child to drop area
  dropContainer.innerHTML = "";
  dropContainer.appendChild(image);

  // Add class to drop container when image uploaded  
  // for updating styles
  dropContainer.classList.add("uploaded");

  // Preview file name and type
  fileName.innerHTML = `${file.name} [${file.type}]`;
});

Here it is. 🎉

5) EXTRA PART
Check if the file type is image or not

const dropContainer = document.querySelector(".drop-container");
const fileName = document.getElementById("file_name");

dropContainer.addEventListener("dragover", (event) => {
  event.preventDefault();
});

dropContainer.addEventListener("drop", (event) => {
  event.preventDefault();

  let file;

  if (event.dataTransfer.items) {
    const item = event.dataTransfer.items[0];

    const isFile = item.kind === "file";
    const isImage = item.type.split("/")[0] === "image";

    if (isFile && isImage) {
      file = item.getAsFile();
    } else {
      alert("This is not an image!");

      return;
    }
  } else {
    file = event.dataTransfer.files[0];
  }

  const url = window.URL.createObjectURL(file);

  const image = document.createElement("img");
  image.src = url;

  dropContainer.innerHTML = "";
  dropContainer.appendChild(image);

  dropContainer.classList.add("uploaded");

  fileName.innerHTML = `${file.name} [${file.type}]`;
});

That is it. Find source code on github:
https://github.com/inancakduvan/drag-and-drop-image

Follow me on:

Github: https://github.com/inancakduvan/
Twitter: https://twitter.com/InancAkduvan

Thank you for reading 🙂

How I handle communication between React Native Webview and Web project

İnanç Akduvan — Fri, 11 Feb 2022 12:33:59 +0000

Hi! That is how I handle communication between React Native Webview and Web Project. I am open to suggestions for a better solution. ✌️

Note: Purpose is not to be a tutorial article. It is just to share the way I prefer, and get feedback for better opinions. Sorry for the mistakes.

Let's start by coding a React Component including a Webview.

1) Here is just a simple component which has Webview component and a back button

export default function App() {
  return (
    <div className="container">
      <div className="backButton">Back</div>

      <WebView 
        source={{ uri: 'https://your-web-project.com' }} 
      /> 
    </div>
  );
}

2) Now we will send a message to our Web Project from React Native Webview

Our case is that:
Send a message to Web Project when back button is clicked.

export default function App() {
  const [webviewRef, setWebviewRef] = useState(null);

  // on back button click, send message with postMessage
  const handleBackButton = () => {
    webviewRef.postMessage("goBack");
  }

  return (
    <div className="container">
      <div 
         className="backButton" 
         onClick={() => handleBackButton()}
      >Back</div>

      // We might also send a message when webview loaded.
      <WebView 
        ref={ref => setWebviewRef(ref)}
        source={{ uri: 'https://your-web-project.com' }} 
        onLoadEnd={() => webviewRef.postMessage("webviewLoaded")}
      /> 
    </div>
  );
}

3) It is time to handle message in Web Project

Now we leave the React Native project aside. And we write code in our Web Project

// Listen messages received
document.addEventListener("message", (event) => {
   const message = event.data;

   handleMessages(message);
})

// Handle messages
function handleMessages(message) {
   const messageCallbacks = {
      "goBack": handleGoBackMessage,
      "webviewLoaded": handleWebviewLoadedMessage
   }

   messageCallbacks[message]();
}

// Handle go back message
function handleGoBackMessage() {
   window.history.back();
}

// Handle webview loaded message
function handleWebviewLoadedMessage() {
   const body = document.querySelector("BODY");

   body.setAttribute("data-environment", "webview");
}

EXTRA PART

4) We can check the origin of the message.

It may be better to check the origin of the message while handling. If not, it may causes problems in some cases, for example, if a message is receiving from a third party library, messages will conflict.

// Listen messages received
document.addEventListener("message", (event) => {
   const origin = event.origin;
   const message = event.data;

   if(origin === "https://your-web-project.com") {
     handleMessages(message);
   }
})

// Handle messages
function handleMessages(message) {
   const messageCallbacks = {
      "goBack": handleGoBackMessage,
      "webviewLoaded": handleWebviewLoadedMessage
   }

   messageCallbacks[message]();
}

// Handle go back message
function handleGoBackMessage() {
   window.history.back();
}

// Handle webview loaded message
function handleWebviewLoadedMessage() {
   const body = document.querySelector("BODY");

   body.setAttribute("data-environment", "webview");
}

Thank you for reading :)

My github profile:
https://github.com/inancakduvan

My twitter account:
https://twitter.com/InancAkduvan

I coded a game with React - Next.js

İnanç Akduvan — Sun, 09 May 2021 09:36:56 +0000

Quoridor - A local multiplayer game

https://quoridor.vercel.app/

Instead of buying the board game, I coded it to play on browser. Sharing it with you if you wanna play with your friends.
(Online version and maybe a better desing very soon!)

My github profile:
https://github.com/inancakduvan

My twitter account:
https://twitter.com/InancAkduvan

Making a simple Chrome Extension with JavaScript

İnanç Akduvan — Fri, 13 Nov 2020 21:58:08 +0000

We will create a simple and fun chrome extension with javascript very very quickly.

Assume that we are eating our meal and reading an article (or tweets) from laptop but we cannot scroll down because our hands are not clean...
Let's create a chrome extension which is gonna scroll down automatically for us!

We will need three files: "manifest.json", "background.js", "foreground.js". Our files should looks like:

1) Upload our extension
After creating our files, we will upload our extension to chrome extensions. So we can see how it works.

a) Go to this url: chrome://extensions/
b) Click 'Load unpacked' button.
c) Choose your folder which includes your codes.

That is it. We are ready. (Don't forget to click 'update' button when you add new code lines.)

2) manifest.json
Every chrome extension needs a manifest.json. Chrome will handle our extension, thanks to this file.

{
    "name": "Infinite Scroll",
    "version": "1.0",
    "description": "Scroll without fingers.",
    "manifest_version": 2,
    "background": {
        "scripts": [
            "js/background.js"
        ],
        "persistent": true
    },
    "permissions": [
        "activeTab",
        "contextMenus"
    ]
}

Important points about manifest.json:

a) name, version, manifest_version fields are COMPULSORY.
b) manifest_version should be 2 to be working on modern chrome versions.
c) in 'permissions' field, We declare the chrome extension methods we will use.

3) background.js

This file will work in background and we will use chrome extension methods here. For our example, we will use:

a) activeTab which we will be using for accessing to active chrome tab.

b) contextMenus which will be using for creating a context menu.

var contextMenus = {};

// Here is how we create a context menu for our extension.
contextMenus.createInfiniteScroll =
    chrome.contextMenus.create(
        {
            "title": "Infinite Scroll"
        },
        function () {
            if (chrome.runtime.lastError) {
                console.error(chrome.runtime.lastError.message);
            }
        }
    );

// Here is gonna be triggered when we clicked on our item on the menu.
chrome.contextMenus.onClicked.addListener(contextMenuHandler);


function contextMenuHandler(info, tab) {
// Execute the file which will be working on foreground.
    chrome.tabs.executeScript({
        file: 'js/foreground.js'
    });
}

Now, when you make a right click on a page, you should see our extension on the context menu, like:

4) foreground.js
We will write our main codes here. When you run your extension, this file will be triggered.

let i = 0;

var count = window.prompt("Scrolling delay (seconds) ?", 2);

const start = setInterval(function () {
    i = i + 50;
    window.scrollBy({
        left: 0,
        top: i,
        behavior: "smooth"
    })
}, count * 1000)

Let's click our extension on the context menu AND SEE WHAT IS GONNA HAPPEN 🎉

For more detailed guide about chrome extensions:
https://developer.chrome.com/extensions

Thank you for reading! 🍕

Github repo of these codes:
https://github.com/inancakduvan/chrome-extension-infinite-scroll

My github profile:
https://github.com/inancakduvan

My twitter account:
https://twitter.com/InancAkduvan

Forem: İnanç Akduvan

I created my own React state management library

I was tired of boilerplate and providers.

So I built Keact.

Why not just use Zustand or Redux?

TypeScript support?

Bonus: selector-style reading

How does it work under the hood?

Try it

What do you think?

Follow me on:

Observer - JavaScript Design Patterns

OBSERVER PATTERN

Follow me on:

Singleton - JavaScript Design Patterns

What is a Design Pattern?

Singleton

Example usage:

Extra

Follow me on:

Sliding Buttons JS

Sliding Buttons JS 🚀

Follow me on:

Drag and drop to upload a photo #JavaScript #CSS

Here it is. 🎉

Follow me on:

Finger Swipe JS

Try live demo:

Documentation and source code:

I WOULD BE GLAD IF YOU CONTRIBUTE IT 🎮

Follow me on:

Let me understand how JavaScript works under the hood

JavaScript Engine

Execution Context

Global Execution Context (GEC)

Function Execution Context (FEC)

LET'S TRY TO VISUALIZE:

Step 1:

Step 2:

Step 3 (Part 1):

Step 3 (Part 2):

Call stack

Function called:

Function finished its job:

It looks okay like this, but, what if we add some complexity to our function?

Web APIs

Let's Visualize

🚨 NEW TERM ALERT 🚨

Callback Queue

Event Loop

Let's add some visuals including Callback Queue and Event Loop

Let's fetch some data:

Microtask Queue

Then, final result looks like:

Follow me on:

Connect MetaMask wallet #JavaScript

It is done here, we can say. But if you are interested in some extra suggestions, keep reading:

EXTRA SUGGESTIONS

Follow me on:

Drag and drop to upload a photo #JavaScript

Here it is. 🎉

Follow me on:

How I handle communication between React Native Webview and Web project

EXTRA PART

I coded a game with React - Next.js

Making a simple Chrome Extension with JavaScript