😎دیتابیس لوکال در مرورگر، با indexed DB !

در این پست به بررسی API IndexedDB و کاربرد اون خواهیم پرداخت. اما آیا تا حالا اسم دیتابیس NoSQL به گوشتون خورده؟ 🧐

در واقع IndexedDB یک سیستم ذخیره‌سازی و بازیابی NoSQL در مقیاس بزرگه. همچنین به شما این امکان رو میده که تقریبا هر چیزی که نیاز باشه رو در مرورگر کاربر ذخیره کنید. علاوه بر جستجوی معمول، دریافت و قرار دادن اکشن‌ها، IndexedDB از تراکنش‌ها هم پشتیبانی میکنه.

⚠️تنها عیبی که که این سیستم داره، یادگیری پیچیده تر و سخت تر نسبت به باقی سیستم های ذخیره سازیه.

🔵 ویژگی های indexedDB

⚡️قدرتمند

⚡️ذخیره حجم بیشتری از داده، به نسبت سایر سیستم های ذخیره سازی

⚡️انعطاف ذخیره برای انواع داده ها

⚡️قابلیت استفاده به صورت آنلاین و آفلاین


✅سیستم ذخیره سازی indexedDB چه قابلیت هایی داره ؟

عملیات بسیاری وجود داره که میتونه در IndexedDB انجام بشه. برخی از عملیات ها عبارتند از :

🟢خوندن / سرچ داده‌های موجود در object store بر اساس key

🟢خوندن / سرچ داده‌های موجود در object store بر اساس index

🟢به روزرسانی داده‌های یک رکورد

🟢حذف یک رکورد

🟢اضافه کردن یک رکورد


❌محدودیت های indexedDB چیه ؟

🔴برخی مرورگرها مثل IE پشتیبانی کاملی ازش ندارن.

🔴مرورگر Firefox در حالت Private Browsing، به طور کامل IndexedDB رو غیر فعال می‌کنه.


در نهایت اگه پروژتون نیاز به ذخیره سازی داده‌های پیچیده و ساختاری داره، و همچنین نیاز به حجم بیشتری برای ذخیره سازی داده دارید، indexed DB گزینه مناسبی هست 🏖️


#js #indexeddb #nosql
@CodeModule

📊 با کتابخانه D3.js بیشتر آشنا بشید

در واقع D3.js که مخفف شده (Data-Driven Documents) هست، یک کتابخانه جاوااسکریپتی برای ایجاد data visualization های تعاملی بر اساس داده ها هست. این کتابخانه به عنوان یک ابزار قدرتمند برای ایجاد نمودارها، نقشه‌ها، چارت‌ها و دیگر data visualization ها با استفاده از HTML، SVG و CSS شناخته میشه.

✅مزایای استفاده از D3.js چیه ?

🟢قابلیت کاستومایز سازی

🟢امکان تعامل با کاربر

🟢امکان ادغام با داده‌های مختلف

🟢پشتیبانی از مجموعه وسیعی از نوع‌های visualization و امکانات بسیار قدرتمند، برای کنترل دقیق و نمایش داده‌ها.

❌معایب کتابخانه D3.js چیه ?

🔴یادگیری زمان بر

🔴نیازمند دانش قوی جاوااسکریپتی

🔴پیچیدگی بیش از حد برای پروژه های کوچیک


به طور کلی، D3.js یک ابزار قدرتمند برای ایجاد visualization های تعاملی بر اساس داده هست که با دانش مناسب میتونه به خوبی در پروژه‌های حرفه ای مورد استفاده قرار بگیره🔥

برای یادگیری این کتابخانه خفن و کاربردی میتونید به داکیومنتش مراجعه کنید.

Document 🌕

#d3js #library #js
@CodeModule

با تکنیکی به نام Memoization آشنا بشید ✌️

در برنامه نویسی، Memoization یک تکنیک بهینه سازیه که برنامه ها رو کارآمدتر و در نتیجه سریعتر می کنه. در اصل این کار رو با ذخیره نتایج محاسباتی در حافظه پنهان انجام میده و در درخواست های بعد به جای محاسبه مجدد، همون اطلاعات رو از حافظه نهان بازیابی می‌کنه.

به عبارت ساده‌ تر، شامل ذخیره کردن خروجی یک تابع در حافظه نهان و بررسی اینکه، آیا در هر اجرا محاسبات مورد نیاز از قبل در حافظه پنهان(کش) موجوده یا نه. کش صرفاً یک ذخیره‌سازی موقت داده هست که داده‌ها رو برای درخواست‌های آینده، نگه می‌داره تا عملکرد پروژه سریع تر باشه.

ممورازیشن در جاوا اسکریپت بر دو مفهوم متکی هست:

🔵Closures
🔵Higher Order Functions

برای روشن تر شدن موضوع، مثال کلاسیک دنباله فیبوناچی رو با ممورازیشن پیاده سازی میکنیم⬇️

const fib = (n, memo) => { 
    memo = memo || {} 
  
    if (memo[n]) {
        return memo[n];
    }
  
    if (n <= 1) {
        return n;
    }
  
    memo[n] = fib(n - 1, memo) + fib(n - 2, memo);
    return memo[n];
}
      

کاری که ابتدا انجام بدیم اینه که بررسی کنیم، آیا شی memo رو به عنوان پارامتر دریافت کردیم یا نه. اگر این کار رو نکردیم، اون رو به عنوان یک شی خالی تنظیم می کنیم:

memo = memo || {} 
  

سپس بررسی می کنیم که آیا memo حاوی مقداریه که به عنوان پارامتر در کلیدهای خود دریافت کردیم؟ اگر این چنین باشه، مقدار اون رو برمی گردونیم و اینجا جاییه که جادو اتفاق میوفته. وقتی که مقدار مد نظر رو در memo ذخیره کردیم، دیگه نیازی به بازگشت بیشتر نیست.

if (memo[n]) {
return memo[n] 
}

اما اگه مقدار رو در memo نداشته باشیم، دوباره fib رو فراخوانی میکنیم، اما ایندفعه memo رو به‌عنوان پارامتر ارسال می‌کنیم، بنابراین توابعی که ما فراخوانی میکنیم همون مقادیر حافظه‌گذاری‌شده‌ای رو که در تابع “اصلی” داریم به اشتراک خواهند گذاشت. دقت کنید که نتیجه نهایی رو قبل از برگرداندن کش به حافظه پنهان اضافه می کنیم.

memo[n] = fib(n - 1, memo) + fib(n - 2, memo);  
return memo[n];
 

و تمام، با دو خط کد memoization رو پیاده سازی کرده ایم و عملکرد پروژه رو به طور قابل توجهی بهبود بخشیدیم.

🔵تکنیک Memoization تنها در مورد تابع‌های محض(pure functions) قابل اجرا هست.

درکل Memoization یک ترفند ساده اما قدرتمنده که میتونه به سرعت بخشیدن به کد ما کمک زیادی کنه، مخصوصاً وقتی با عملکردهای محاسباتی تکراری و سنگین سروکار داریم.

#memoization #js
@CodeModule

✌️ با پراپرتی Once در جاوا اسکریپت آشنا بشید!

🟡پراپرتی once در جاوا اسکریپت یک ویژگیه که در تنظیمات (options) های مربوط به متد addEventListener، استفاده میشه. این پراپرتی تعیین می‌کنه که یک event listener، فقط یک بار اجرا بشه و پس از اجرای اولیه به صورت خودکار حذف بشه. این ویژگی بهتون کمک می‌کنه تا از اجرای چندباره‌ی توابع مرتبط با رویدادها جلوگیری کنید.

سینتکس دستور Once در Event listener ها به صورت یک پارامتر درون یک آبجکت پاس داده میشه و مقدار true رو به خودش میگیره :

document.body.addEventListener('click', () => {
    console.log('CodeModule run only once :)) ');
  }, { once: true });

🟡در کد بالا زمانی که ما روی body کلیک میکنیم، فقط و فقط بار اول CodeModule run only once :)) رو لاگ میگیره و بعد از اون، هرچقدر که کلیک کنیم لاگی گرفته نمیشه. برای مثال از این پراپرتی میتونیم برای مدیریت فرم ها، کلیک روی یک دکمه برای نمایش پیام خاص، یا اجرای یک انیمیشن استفاده کنیم.

به طور کلی پراپرتی once یکی از قابلیت‌های مفید و کارآمد در مدیریت رویدادها در جاوا اسکریپته، که کدنویسی رو ساده‌تر و موثرتر می‌کنه 🔒

#js #trick
@CodeModule

✌️ با مفهموم ASI در جاوااسکریپت آشنا بشید!

‼️در زبان برنامه نویسی جاوااسکریپت، گذاشتن semicolon (;) در پایان دستورات و یا کد هامون اختیاریه، اما این اختیاری بودنش چه دلیلی داره؟

🟡درواقع ویژگی ASI یا Automatic Semicolon Insertion، یک ویژگی داخل زبان جاوااسکریپت هست که گذاشتن semicolon رو در پایان دستورات و یا کد های جاوااسکریپتی اختیاری می‌کنه، به طوری که parser جاوااسکریپت میاد موقع خوندن کد ها،خودش اتوماتیک semicolon رو در پایان کد ها و جاهایی که نیازه میزاره، تا دیگه مشکلی نباشه و کد به درستی خونده بشه.

🤨برای همین شما دیگه نیازی به گذاشتن semicolon در خط به خط کد ندارید.

🟡ولی این هم چند مزایا داره و هم چند معایب، مزایاش اینه که سرعت کد نویسی بالاتر میره و حتی از یکسری باگ هایی که بر اثر فراموشی گذاشتن semicolon بوجود میاد جلوگیری می‌کنه.

❌اما معایبش چیه؟ همونطوری که می‌تونه از به وجود اومدن باگ های ریز جلوگیری کنه، ممکنه خودش هم عامل به وجود اومدن باگ بشه، به طوری که با گذاشتن فضای خالی (Enter) بین کد ها میاد اخرشون semicolon میزاره که موجب بوجود اومدن SyntaxError یا مشکلاتی از این قبیل میشه.

🧐بهتره خودمون Semicolon بزاریم، یا به ASI بسپریم؟

راه حل عاقلانه اینه که تا جایی که میتونید به گذاشتن semicolon در پایان کد هاتون عادت کنید، تا وقتی که با یک زبان دیگه کد میزنید، دستتون عادت کرده باشه و هم از به وجود اومدن ارور های عجیب در کدهاتون، جلوگیری کنید 😉


#js #asi
@CodeModule

تفاوت immutable | mutable در ✌️

در ابتدا برای اینکه تفاوت mutable و immutable رو درک کنیم، نیازه که یک دانش کلی از primitive type ها و reference type ها داشته باشیم. پس بریم که اول یک یادآوری راجب این دو تا داشته باشیم 😉

🟡‏Primitive type ها چی هستن؟

در جاوا اسکریپت، primitive types شامل string ، Boolean و number و undefined میشه. این نوع دیتا ها در حافظه به صورت مستقل از هم ذخیره میشن و تغییرات بر روی یکی از این داده‌ها، تاثیری بر روی داده‌های دیگه نمیذاره که جلوتر با مثال بهتر درکشون میکنید.

🟡‏Refrence type ها چی هستن؟

در واقع reference types شامل array ،object و function میشه. در این حالت، داده‌ها به صورت cursor در حافظه ذخیره میشن و تغییرات بر روی یک متغیر، میتونه تاثیر گذار بر داده‌های دیگه باشه.

⚡️اما تفاوت mutable و immutable

در جاوا اسکریپت، immutable ها primitive types هستن، یعنی یکبار ایجاد میشن و قابل تغییر نیستن، به عنوان مثال:

let name = 'john';
let name2 = name;

console.log(name); //john
console.log(name2); //john

let name2 = 'doe';

console.log(name); //john
console.log(name2); //doe

در مثال بالا مشاهده کردیم، که در صورت اختصاص دادن مقدار name به متغیر name2، و تغییر دادن مقدار متغیر name2، هیچ تغییری در متغیر name ایجاد نمیشه و همون مقدار اولیه log گرفته میشه.


‼️اما mutable ها reference types هستن، یعنی مقدار اونا قابل تغییره، به عنوان مثال:

let person = {
    name: 'john',
    age: 22,
};

let person2 = person; 

console.log(person); //{name:'john' , age:22}

console.log(person2); //{name:'john' , age:22}

let person2.name = 'doe';

console.log(person); // { name: 'doe', age: 22 }

onsole.log(person2); // { name: 'doe', age: 22 }

در مثال بالا با اختصاص دادن مقدار آبجکت person به متغیر person2، و تغییر دادن پراپرتی ها و مقادیر person2، آبجکت prerson هم تغییر میکنه و یک مقدار مساوی log گرفته میشه.

✅بنابراین تفاوت اصلی بین mutable و immutable در قابلیت تغییر مقادیر هست. این تفاوت میتونه در مدیریت داده‌ها و پیاده سازی الگوریتم‌های مختلف تاثیرگذار باشه.

به طور کلی، استفاده از immutable types برای پایداری و پیچیدگی کمتر در پروژه مناسبه، در حالی که mutable types برای عملکردهای پویا و تغییرپذیر مناسبه که نسبت به نیازتون، میتونید ازشون استفاده کنید 🏖️

#js #refrence #primitive
@CodeModule

✌️ معرفی 6 کتاب برای یادگیری عمیق‌تر جاوا اسکریپت

اگه جاوا اسکریپت دولوپر هستید، مطمئنا دوست دارید که به صورت عمیق‌تری با این زبان برنامه نویسی آشنا بشید. در این پست ما 6 کتاب بهتون معرفی میکنیم که بهتون کمک می‌کنه، به سطح خوبی از دانش در این زبان برسید⬇️

⚡️️You Don't Know JS (6 part)

⚡️JavaScript: The Definitive Guide

⚡️Learning JavaScript Design Patterns

⚡️High-Performance JavaScript

⚡️JavaScript: The Missing Manual

⚡️How JavaScript Works


#js #book
@CodeModule

5 کتابخانه کاربردی CSS-in-JS 🚀

کتابخانه‌های موسوم به CSS-in-Javascript، اخیرا به شدت روند رو به رشدی داشتن و در حال محبوب شدن هستن. در این پست ۵ کتابخانه مطرح و مرتبط با این موضوع رو براتون جمع آوری کردم⬇️

1️⃣STYLED COMPONENTS

2️⃣JSS

3️⃣EMOTION

4️⃣RADIUM

5️⃣STYLETRON

در صورت استفاده از این کتابخانه‌ها، شما نیازی به استفاده از چندین فایل CSS رو ندارید، استایل‌هایی که در پروژه شما استفاده میشن همراه با کامپوننت مرتبطه کپسوله‌سازی شده و در یک جا قرار می‌گیرن.

#css #js
@CodeModule

✌️ با کتابخانه Email.js آشنا بشید

در اصل EmailJS یک کتابخانه جاوا اسکریپتیه که به شما اجازه میده تنها با استفاده از تکنولوژی‌های Client-Side، ایمیل ارسال کنید. باحال‌ترین ویژگی EmailJS در اینه که شما به هیچ سرور ایمیلی نیاز ندارید.

👌تنها کاری که باید بکنید اینه که اپلیکیشنتون رو به یک سرویس‌دهنده ایمیل متصل کرده، قالب‌های ایمیلی خودتونو طراحی کنید و در نهایت با استفاده از EmailJS ایمیل‌هاتون رو ارسال کنید.

✅ویژگی‌ های کتابخانه Email.js :

1️⃣پلن های رایگان: لازم نیست نگران هزینه‌های سرویس ها باشید، EmailJS یک پلن رایگان داره که به کاربرا اجازه میده در ماه 200 ایمیل به صورت رایگان ارسال کنن.

2️⃣اتصال به سرویس‌های ایمیل: EmailJS به صورت مستقیم و مستقل ایمیل‌ها رو ارسال نمیکنه. EmailJS به یک سرویس‌دهنده ایمیل وصل میشه و از طریق اون ایمیل‌های شما رو ارسال می‌کنه.

3️⃣پاسخ خودکار: EmailJS به شما اجازه میده تا برای ایمیل‌هاتون پاسخ‌های خودکاری رو ایجاد کنید. در صورتی که یک ایمیل برای شما ارسال بشه EmailJS میتونه به صورت سریع، یک پاسخ خودکار رو برای کاربر ارسال کنه.

4️⃣افزودن کپچا: برای اعتبارسنجی فرم‌های ارسال ایمیل همواره به کپچا نیاز خواهید داشت. به همین دلیل EmailJS با استفاده از متدهای مختلف از جمله Google reCaptch، به شما این توانایی رو میده تا فرایند اعتبارسنجی و ربات نبودن کاربر رو انجام بدید.

5️⃣ایجاد قالب: یکی از ویژگی‌های منحصر به فرد EmailJS دادن توانایی ایجاد قالب‌های مختلف ایمیلی به توسعه دهندگان هست. بنابراین شما میتونید برای ایمیل‌هاتون از قالب‌های ایمیلی مختلفی استفاده کنید.

6️⃣افزودن تصاویر: بعضی وقتا نوشتن یک متن ساده در ایمیل کفایت نمیکنه، اگر می‌خواید ایمیل‌های جذابی داشته باشید باید از تصاویر و المان‌های گرافیکی در اون استفاده کنید. EmailJS به شما اجازه اضافه کردن تصاویر رو به ایمیل‌هاتون میده.


با استفاده از این کتابخانه، به راحتی میتونید به کاربران وب سایتتون Email ارسال کنید و دیگه دردسر های زیاد رو به جون نخرید. برای یادگیری و استفاده از این کتابخانه میتونید به داکیومنتش مراجعه کنید 🏖️

Document 🌐

#library #js #emailjs
@CodeModule

با face-api.js بیشتر آشنا بشید ✌️

‏Face-api.js یک کتابخانه جاوااسکریپت مبتنی بر وبه که برای تشخیص چهره افراد، با استفاده از api مورد استفاده قرار میگیره. این کتابخانه از مدل‌های دیپ لرنینگ TensorFlow.js برای تشخیص چهره، تشخیص افراد، تشخیص ابرو، تشخیص لبخند، تشخیص سن و جنسیت و باقی ویژگی‌های چهره استفاده میکنه. ‏

‏Face-api.js امکانات بسیار قدرتمندی رو فراهم می‌کنه و به راحتی میتونه به عنوان یک ابزار تشخیص چهره در وبسایت‌ها و برنامه‌های وب، مورد استفاده قرار بگیره.

از جمله قابلیت‌های این کتابخانه میشه به تشخیص چهره به صورت realtime، تشخیص افراد با نام‌های خاص، تشخیص افراد با عینک، تشخیص افراد با حالت چهره، تشخیص ابرو و مو، تشخیص لبخند، تشخیص سن و جنسیت و ... اشاره کرد.

با استفاده از Face-api.js، دولوپرا میتونن به راحتی و با سرعت بالا قابلیت‌های تشخیص چهره رو به برنامه‌های خود اضافه کنن. این کتابخانه قابل استفاده در پروژه‌های مختلف مثل پروژه‌های تحقیقاتی، پروژه‌های هوش مصنوعی، پروژه‌های امنیتی و ... هست.

برای کسب اطلاعات بیشتر در مورد این کتابخانه، میتونید به داکیومنتش مراجعه کنید 🏖️

Document 🌕

#library #faceapi #js
@CodeModule

با کتابخانه Ammo.js آشنا بشید 😎

‏Ammo.js یک کتابخانه فیزیک سه‌بعدیه که به زبان جاوااسکریپت نوشته شده و بر اساس Bullet Physics Engine، که یک موتور فیزیک مشهور و قدرتمنده، توسعه داده شده.

این کتابخانه به دولوپرا این امکان رو میده که فیزیک واقع‌گرایانه رو به بازی‌ها و برنامه‌های سه‌بعدی شون اضافه کنن. Ammo.js به ویژه برای پروژه‌های وب و بازی‌های تحت وب طراحی شده و به راحتی می‌تونه با کتابخانه‌هایی مثل Three.js و Babylon.js ترکیب بشه.

ویژگی‌های خاص کتابخانه Ammo.js ⬇️

◀️فیزیک واقع‌گرایانه: Ammo.js از الگوریتم‌های پیشرفته‌ای برای شبیه‌سازی فیزیک استفاده می‌کنه که شامل برخوردها، گرانش، و داینامیک اجسامه.

◀️پشتیبانی از اشکال مختلف: این کتابخانه می‌تونه با اشکال هندسی مختلف (مثل مکعب، کره، و ...) کار کنه و همچنین از اشکال پیچیده‌تر هم پشتیبانی می‌کنه.

◀️سیستم برخورد: Ammo.js دارای یک سیستم برخورد قویه که می‌تونه چندین جسم رو به طور همزمان مدیریت کنه و برخوردهارو به دقت شبیه‌سازی کنه.

◀️داینامیک اجسام: این کتابخانه امکان شبیه‌سازی داینامیک اجسام سخت و نرم رو فراهم می‌کنه، به طوری که میشه رفتارهای مختلفی رو برای اجسام مختلف تعریف کرد.

◀️سازگاری با وب: Ammo.js به راحتی با مرورگرها کار می‌کنه و می‌تونه در پروژه‌های تحت وب بدون نیاز به نصب نرم‌افزار اضافی استفاده شه.

◀️توسعه‌ی بازی‌های سه‌بعدی: در کنار کتابخانه‌هایی مثل Three.js می‌تونه برای ایجاد بازی‌های سه‌بعدی با فیزیک واقع‌گرایانه مورد استفاده قرار بگیره.

کتابخانه Ammo.js با ویژگی‌هایی مثل شبیه‌سازی دقیق برخوردها، پشتیبانی از انواع اشکال، و قابلیت ادغام آسون با باقی کتابخانه‌ها، گزینه‌ای عالی برای ایجاد بازی‌ها و برنامه‌های تعاملیه. با توجه به مزایای متعددش، از جمله عملکرد بالا و پشتیبانی از جامعه، Ammo.js می‌تونه به عنوان یک انتخاب مناسب برای هر توسعه‌دهنده‌ای که به دنبال افزودن فیزیک به پروژه‌های خود هست، در نظر گرفته بشه.

برای یادگیری این کتابخانه میتونید به داکیومنتش مراجعه کنید.

Document 🌕

#js #library
@CodeModule

فریم ورک Million.js چیه و چه کاربردی داره؟🧐

🔵فریم ورک Million یک DOM مجازی بسیار سریع و سبکه (<4 کیلوبایت) که اجزای React رو تا 70٪ سریعتر می کنه. که این خیلی عالیه :))


‏Million، ایجاد برنامه های وب رو به سادگی فراهم کرده و سرعت رندرشون و بارگذاریشون رو سریع تر می کنه و با استفاده از یک DOM مجازی بهینه و تنظیم‌شده، هزینه‌های سربار برنامه رو کاهش میده.

ویژگی های اساسی این فریم ورک⬇️

ویژگی اول بارگذاری اولیه سریع صفحات و تعاملات نرم‌تر، به خصوص در برنامه‌های پیچیده هست که این فریم ورک و واقعا جذاب می‌کنه.

ویژگی دوم پایداریه که امری حیاتی حساب میشه.
به همین دلیل کاملاً کامپایلر در Million 3 بازنویسی شده. این بازسازی بر این تمرکز داره که تجربه شما رو پایدارتر و قابل اعتمادتر کنه اما چطور ؟
با پوشش دادن یک طیف گسترده‌تر از سناریوها.


اطلاعات بیشتر راجب این فریم ورک و میتونید تو داکیومنتش مطالعه کنید.

Document 🌐

#dom #performance #js
@CodeModule