DEV Community: Ahmet İlhan

Function memoizer for every framework

Ahmet İlhan — Sun, 08 Sep 2024 09:27:35 +0000

memofy 🚀 - Lightweight Memoization for JavaScript Functions (1.3KB)

Cache mechanism(memoizer) for functions executed with the same parameters (Only 1.3 KB)

This project provides a memoize function for improving performance in JavaScript or TypeScript projects by caching the results of expensive function calls. By memoizing, repeated calls with the same arguments will return the cached result, speeding up execution.

This module works like react's useMemo hook but NOT required react. You can use any framework or pure javascript projects

Features

Function Memoization: Caches results of function calls with the same arguments.
Dependency Tracking: Updates the cache if dependencies change.
Flexibility: Usable in both JavaScript and TypeScript projects.
The best solution for CPU-intensive operations or complex calculations
The disconnected functions are deleted from memory. The caches belonging to this function are also deleted.
WeakMap based cache store
WeakMap Disconnects methods that cannot communicate with weak reference links and triggers the garbage collector to kick in

Why should we use memofy?

Using Memofy you can reduce the execution time of your functions by up to 1500 times. The following results were obtained by testing on a heavy function. 💪🏼

Test Case	Function Execute Time (ms)
With Memofy (CACHED)	0.083 ms
Without Memofy	57.571 ms

AND very easy

import memofy from "memofy";

const dep1 = /** Variable to track change */

const heavyMethod = memofy((arg1, arg2, ...args) => {
 // calculate something then return
}, [dep1, dep2, ...deps]);

// heavyMethod looks at the deps and arguments every time it is called.
// If there is no change, it brings it from the cache. If there is a change, it runs the function again

Installation

NPM

npm install memofy

YARN

yarn add memofy

Usage case

Without deps parameters

In the following process, when the concatPhoneNumber method is called again with the same parameters, the function is not executed again, it fetches the result from the cache.

import memofy from "memofy";

const concatPhoneNumber = (extension, number) => {
  // Heavy calculation
  // return result
};

const memoizedConcatPhoneNumber = memofy(concatPhoneNumber, []);

memoizedConcatPhoneNumber(90, 555); // Runs concatPhoneNumber once
memoizedConcatPhoneNumber(90, 555); // Don't run because fetched from cache (same parameter)
memoizedConcatPhoneNumber(90, 552); // Runs concatPhoneNumber because params is changed

With deps parameter

If you want the method to run again with the same parameter according to some dependencies, you can pass the deps parameter as follows.

import memofy from "memofy";

const product = { title: "Test product", price: 10 };

const calculateTax = (taxRatio) => {
  // Calculate tax by product price
  // Heavy calculation
  return taxRatio * product.price;
};

const memoizedCalculateTax = memofy(calculateTax, [product]);

calculateTax(2); // Runs calculateTax when first run -> 20
calculateTax(2); // // Don't run because fetched from cache (same parameter and same deps) -> 20

product.price = 40;
calculateTax(3); // Runs calculateTax because product dep changed -> 120

import memofy from "memofy";

const products = [
  /**Let's say there are more than 100 products */
];

// It is costly to cycle through 100 products each time. Just keep the result in the cache when it runs once.
const getTotalPrice = (fixPrice) => {
  return products.reduce((acc, curr) => acc + curr.price, 0);
};

const _getTotalPrice = memofy(getTotalPrice, [products]);
getTotalPrice(0); // Runs getTotalPrice once
getTotalPrice(0); // Don't run because fetched from cache
products.push({
  /** a few products */
});
getTotalPrice(2); // Runs again getTotalPrice because products and parameter changed

With context

If context(this, globalContex e.g) is used in the function you want to cache, you can pass the context parameter.

import memofy from "memofy";

this.user.name = "Jack"; // For example inject name to context

const getName = (suffix) => {
  return `${suffix} ${this.user.name}`;
};
const memoizedGetName = memofy(getName, [], this);
memoizedGetName("Mr"); // Result is Mr Jack

this.user.name = "John";
memoizedGetName("Mr"); // Result is Mr John because context data changed

Declaration for typescript

type Args = Array<any>;

type Deps = Readonly<Array<any>>;

type MemoizedFunction<A extends Args, ReturnType> = (...args: A) => ReturnType;

declare function memofy<A extends Args, ReturnType extends any>(
  _functionToMemoize: (...args: Array<unknown>) => ReturnType,
  _deps?: Deps,
  _context?: unknown
): MemoizedFunction<A, ReturnType>;

Performance result

Performance results on a complex function that distinguishes prime numbers. Performance Test

Case	ms
First execute time (no caching)	> 52.08 ms
Second execute time (caching)	< 0.03 ms
and subsequent execution (caching)	< 0.03 ms

Test coverage result

Tests were written for all cases and all parameter types. Tests

File	% Stmts	% Branch	% Funcs	% Lines
All files	90.69	86.95	100	94.59
lib	88.88	92.3	100	87.5
index.ts	88.88	92.3	100	87.5
lib/store	92	80	100	100
DependencyCacheStore.ts.ts	90	75	100	100
FunctionCacheStore.ts	93.33	83.33	100	100

Contributing

This is open source software. If you want, you can support it by becoming a contributor. Github Repository

Prevents re-execution of large javascript functions that have been processed once with the same parameter.

Ahmet İlhan — Tue, 27 Aug 2024 18:39:17 +0000

memofy

Cache mechanism(memoizer) for functions executed with the same parameters (Only 1.14 KB)

This module works like react's useMemo hook but NOT required react. You can use any framework or pure javascript projects

Npm Package
Github

Features

Function Memoization: Caches results of function calls with the same arguments.
Dependency Tracking: Updates the cache if dependencies change.
Flexibility: Usable in both JavaScript and TypeScript projects.
The best solution for CPU-intensive operations or complex calculations
The disconnected functions are deleted from memory. The caches belonging to this function are also deleted.
WeakMap based cache store
WeakMap Disconnects methods that cannot communicate with weak reference links and triggers the garbage collector to kick in

Usage case

Without deps parameters

In the following process, when the concatPhoneNumber method is called again with the same parameters, the function is not executed again, it fetches the result from the cache.

import memofy from "memofy";

const concatPhoneNumber = (extension, number) => {
  // Heavy calculation
  // return result
};

const memoizedConcatPhoneNumber = memofy(concatPhoneNumber, []);

memoizedConcatPhoneNumber(90, 555); // Runs concatPhoneNumber when first run
memoizedConcatPhoneNumber(90, 555); // get value from cache

memoizedConcatPhoneNumber(90, 552); // Runs concatPhoneNumber because params is change

With deps parameter

If you want the method to run again with the same parameter according to some dependencies, you can pass the deps parameter as follows.

import memofy from "memofy";

const taxRatio = 0.5;
const product = { title: "Test product", price: 10 };

const calculateTax = () => {
  // Calculate tax by product price
  // Heavy calculation
  return taxRatio * product.price;
};

const memoizedConcatPhoneNumber = memofy(calculateTax, [product, taxRatio]);

calculatedPrice = calculateTax(); // Runs concatPhoneNumber when first run

product.price = 40;
let calculatedPrice = calculateTax(); // Runs concatPhoneNumber because product dep changed

taxRatio = 0.8;
calculatedPrice = calculateTax(); // Runs concatPhoneNumber because taxRatio changed

Performance result

Performance results on a complex function that distinguishes prime numbers. Performance Test

Case	ms
First execute time (no caching)	> 52.08 ms
Second execute time (caching)	< 0.03 ms
and subsequent execution (caching)	< 0.03 ms

Test coverage result

Tests were written for all cases and all parameter types. Tests

File	% Stmts	% Branch	% Funcs	% Lines
All files	100	100	100	100
lib	100	100	100	100
index.ts	100	100	100	100
lib/store	100	100	100	100
CacheStore.ts	100	100	100	100
DepsStore.ts	100	100	100	100

I Published .SRT file parser package

Ahmet İlhan — Thu, 04 Jul 2024 06:05:31 +0000

srt-file-parser

File parser for .srt (subtitle) file. It allows you to export the content of your .srt file as a string or buffer and retrieve it as objects in the array.

Installation

npm

npm install srt-file-parser

yarn

yarn add srt-file-parser

Usage

import srtFileParser from "srt-file-parser";
/**
 * {srtContent} string is srt file content
 */
const result: Array<BlockType> = srtFileParser(srtContent);
result.forEach((item: BlockType) => {
  //
});

Types

type CaptionBlockType = {
  id: string;
  start: number; // type of ms
  end: number; // type of ms
  text: string;
};

I would like to get comments on Adaptive Playback Speed, which I developed to reduce video freezes.

Ahmet İlhan — Tue, 25 Jun 2024 15:32:06 +0000

Greetings everyone, I would like to get your comments about the video player that will work with the Adaptive Streaming and Adaptive Playback Speed approaches I am working on.

The video player I mentioned slows down the buffer flow in the video buffer zone when the internet speed is low and increases the time until new video frames arrive.

For example, let's say the length of the video a user is watching is 24 seconds. Since the user's internet speed is low, only 12 seconds of video data (buffer) in total can be downloaded in 24 seconds. We can reduce the freezing time of the video watched by this user as follows: The user started the video and reached the 8th second (it has not frozen yet). From this point on, if we reduce the speed of the video from 1x to 0.8x, it will freeze in the 13th second, although it should normally freeze in the 12th second. The 4 seconds between seconds 8 and 12 will be followed by 5 seconds. In this scenario, 1 second may seem like a small difference, but if we consider that a movie is 120 minutes on average, it makes 7200 seconds in total. This takes 10 minutes. In other words, the user will watch the movie with 10 minutes less freezing in total. Since the process of slowing down the segment flow I mentioned will only occur in the buffer area of the video, when the user notices the slowdown, the video will return to 1x speed.

Repo: https://github.com/ahmetilhn/savior-video-player

Development continues

High-speed, adaptive streaming video player for web

Ahmet İlhan — Sat, 22 Jun 2024 08:56:30 +0000

Hello guys, I'm working on a future-oriented video player. If anyone wants to give advice or support on this project, they can contact me.

Repository: https://github.com/ahmetilhn/savior-video-player
Mail: ahmetilhan.dev@gmail.com

Javascript Error Guardian

Ahmet İlhan — Sat, 27 Apr 2024 21:31:12 +0000

Hello,
I have coded a module that allows you to handle errors in your JavaScript projects in detail. With simple integration and detailed output, you can better examine errors in production and distribution environments or send them to any error server (sentry, graylog, etc.).

Npm:
Github:
It can be used in javascript technologies such as Vue, React, Next(Client), Nuxt(Client)

skillo.me - Trade Skills!

Ahmet İlhan — Sat, 13 Apr 2024 01:02:11 +0000

🌟 Hello dev.to World! 🌟
skillo.me

Skillo.me is the most exciting way to evaluate, trade and get discovered your skills! Now you'll not only get to show off your skills, but you'll also have the opportunity to learn and grow further by trading them with others'.

🚀 Skill Exchange: Skillo.me offers the opportunity to exchange your unique skills with other users and mutually learn. What can you offer? Is it a language, a coding skill, perhaps a creative art talent? Skillo.me brings all of these together and offers an incredible trading experience.

💼 Creating a Talent Profile: Your profile is like a work of art that defines you and highlights you. Skillo.me allows you to create an impressive profile that highlights your unique skills and experiences. Whether you're a software developer or a graphic designer, you can express yourself at your best on Skillo.me.

🔍 Discovered by Talent Scouts: Just show your skills and leave the rest to us! Skillo.me offers the most effective way to reach talent scouts who are looking for you and want to collaborate with you. Explore Skillo.me to expand your professional network and discover new opportunities.

Skillo.me is the most modern and effective way to showcase your skills and join a worldwide community. Join today and start sharing your talents with the world!

I'm Looking For Beta Users

Ahmet İlhan — Fri, 12 Apr 2024 15:09:02 +0000

Selamlar üzerinde çalıştığım bir projede sona gelmekteyim. Projedeki göremediğim hataları çözmek için beta kullanıcılarına ihtiyacım var.
Skillo

Proje: Kullanıcıların yeteneklerini sergileyip takas etmelerini sağlayan bir platformdur. Kapsamlı profiller oluşturarak becerilerini paylaşanlar, diğer kullanıcılarla etkileşime geçerek yeni yetenekler kazanabilirler. Skillo kullanıcıların Yetenek avcıları ve İşe alım uzmanları tarafından keşfedilmelerini sağlar.

Lütfen siteye girip kaydolun ve keşfetmeye başlayın:
Skillo - Create Skill Profile and Swap Your Skills

Mail: ahmetilhan.dev@gmail.com

Zelzele . io

Ahmet İlhan — Thu, 02 Mar 2023 11:05:33 +0000

Super Web App for Earthquakes in Turkey. It serves the purposes of analysis, examination and comparison of the earthquakes that occur continuously in Turkey.

https://www.producthunt.com/products/zelzele/reviews/new

Snow Fall Effect

Ahmet İlhan — Sun, 11 Dec 2022 11:06:51 +0000

https://www.npmjs.com/package/snow-fall-effect?activeTab=versions

Website Snowfall Effect

Ahmet İlhan — Sun, 20 Nov 2022 14:38:09 +0000

https://github.com/ahmetilhan24/snow-fall-effect

Snow Fall Effect

It provides a realistic snowfall effect to your site to make your websites look more aesthetic during the winter months.

Insatalation

HTML File

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--import inside head tag-->
    <script src="../dist/index.js" type="module"></script>
  </head>
  <body>
    <!--Call it snowfall here too.-->
    <script type="module" defer>
      import SnowFall from "../dist/index.js";
      new SnowFall();
    </script>
  </body>
</html>

Vue

import SnowFall from "snow-fall"
export default {
  data() {
    return {
      msg: 'foo'
    }
  }
  mounted() {
    new SnowFall();
  }
}

Configuration

Types

{
  sizeRange: [number, number],
  color: string,
  speed: number,
}

new SnowFall({
  sizeRange: [10, 20], // default (min 0)
  color: "#fff", // default
  speed: 10, // default (second)
});

Coded by ahmetilhan

Express IP Blocker

Ahmet İlhan — Tue, 15 Nov 2022 05:35:51 +0000

Express IP Blocker

https://www.npmjs.com/package/express-ip-blocker-current
https://github.com/ahmetilhan24/express-ip-blocker/blob/master/README.md

You can use this package to prevent continuous requests to APIs you write with Express.js within a certain period of time.

Instalation

package (yarn or npm)

    npm install express-ip-blocker

PeerDependencies
Optimum versions

    "cookie-parser": "^1.4.6",
    "express": "^4.18.2"

Usage

const express = require("express");
const app = express();
const cookieParser = require("cookie-parser");
const ExpressIPBlocker = require("express-ip-blocker-current");
const expressIPBlocker = new ExpressIPBlocker();
// You have to do this for the package to work
app.use(cookieParser());
// IP Middleware
app.use(expressIPBlocker.checkIP);

app.listen(//port, () => {
  //
});

See demo for example usage. ./demo/index.js

Config

You can apply a config to the package's run settings

{
  limit: number; // default = 10
  secretKey: string; // default = now Date()
  reqBlockMessage: string; // default = Too Many Requests
  expire: number; // default = 1000 * 10 -> 10 second
}

Coded by ahmetilhan