✌️ یک کتاب جامع و خوب برای توسعه دهنده های JavaScript

📖کتاب Eloquent JavaScript یک کتاب خوب برای یادگیری مباحث پایه ای و کاربردی جاوااسکریپته که برای افرادی که میخوان دانش جاوااسکریپتیشونو تقویت کنن مناسبه.

#book #js
@CodeModule

🫒 با کتابخانه Rx.js بیشتر آشنا بشید

در اصل RxJS یک کتابخانه برای ترکیب برنامه‌های ناهمگام و مبتنی بر رویداد (events) با استفاده از دنباله‌های Observable هست. این کتابخانه یک نوع اصلی به نام Observable، core type  (Observer، Schedulers، Subjects) و اپراتورهای الهام گرفته از متدهای Array (map، filter، reduce، every و ...) رو فراهم میکنه تا بتونن تسک های asynchronous رو هندل کنن.


✅ویژگی‌های اصلی RxJS عبارتند از:

🟣ایجاد Observable ها برای داده‌ها

🟣انتقال، تبدیل و ترکیب داده‌ها با استفاده از عملیات‌های متداول مانند map، filter، reduce و ...

🟣مدیریت خطاها و مدیریت وقفه‌ها (error handling and retrying)

🟣پشتیبانی از ایجاد ایونت‌ها (events)

🟣دارای اپراتورهای مختلف جهت کنترل جریان داده‌ها

🟣امکان کنترل زمان اجرای عملیات‌ها با استفاده از تایم‌اوت

🟣پیاده‌سازی مفهوم Backpressure برای مدیریت فشار دریافت داده

‼️اگر پروژه هاتون پر از تسک های async هست استفاده از Rx.js گزینه خوبی می‌تونه باشه.


🏤 همچنین Rx.js به طور پیش‌فرض یا دیفالت با پروژه های انگولاری لود میشه.

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


Document 🌕

#rxjs #library #js
@CodeModule

شکل های گرافیکی 3D با Three js 😍

در واقع Three.js یک کتابخانه بین مرورگر جاوا اسکریپت و رابط برنامه نویسی برنامه (API) هست که، برای ایجاد و نمایش گرافیک‌‌‌های کامپیوتری متحرک سه بعدی در یک مرورگر وب با استفاده از WebGL استفاده‌‌ میشه.
 
❓کتابخانه three js چجوری کار می‌کنه ؟

کتابخانه Three.js امکان ایجاد انیمیشن‌‌‌های سه بعدی با شتاب واحد پردازش گرافیکی (GPU) رو با استفاده از زبان جاوا اسکریپت به عنوان بخشی از یک وب سایت بدون تکیه بر افزونه‌‌‌های اختصاصی مرورگر فراهم‌‌ میکنه. این به دلیل ظهور WebGL امکان پذیره و یک API گرافیکی سطح پایین که به طور خاص برای وب ایجاد شده. کتابخانه‌های سطح بالا مثل Three.js یا GLGE ، Scene.js ، PhiloGL ، (که در آینده براشون پست خواهیم داشت) و ...

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

🧰 امکانات جذاب این کتابخانه:

◀️افکت‌ها

◀️پرسپکتیو و آتوگرف

◀️انیمیشن

◀️نورپردازی حرفه ای

◀️ اشیاء و آبجکت‌ها

با استفاده از این کتابخانه جذاب و حرفه ای میتونید داخل سایت هاتون از شکل های گرافیکی حرفه ای استفاده کنید که افراد زیادی رو محو خودش می‌کنه و سایت شمارو زیبا و خاص نشون میده 🚀

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

Document 🌕

#js #library #threejs #3d
@CodeModule

💻 ران تایم Deno js چیه؟ آیا جایگزین nodeJs محسوب میشه؟

در واقع Deno.js یه محیط Runtime برای اجرای کدهای جاوااسکریپت و تایپ اسکریپت روی موتور V8 گوگل (همون موتوری که nodejs رو اجرا میکنه) هست. Denojs بهشت برنامه نویسای تایپ اسکریپته چرا که اتوماتیک کدهای Typescript رو به Javascript تبدیل میکنه و بعد اجراش میکنه

🔵ران تایم Deno js با زبان برنامه نویسی Rust نوشته شده و با هدف رفع مشکلات Nodejs ساخته شده.


🤟 این ران تایم چه مشکلاتی از Node.js رو رفت کرد ؟

باید بگیم که مشکلاتی مثل Dependecy ها، کتابخانه ها، ماژول ها، ابزار tooling و امنیت رو رفع کرد و یه جورایی رقبایی که بخاطر این مشکلات برای جاوااسکریپت شاخ شدن رو یه بار دیگه از میدون خارج کرد.


✅مزایای Deno js نسبت به Node js چیه؟

1⃣ امنیت بیشتر Deno js نسبت به nodejs

🔢 کتابخانه استاندارد کامل تر Deno به نسبت کتابخانه پیش فرض Node

🔢 در Deno js هیچ اجباری در استفاده از NPM ندارید

🔢 در deno js نیازی به Package.json نیست تا Dependencyها رو کنترل کنید

🔢 در Deno js نیازی به Node_modules نیست

🔢 استفاده از تایپ اسکریپت به صورت مستقیم.


🧐آیا Denojs جایگزین Nodejs میشه؟

چون Deno js نسبتا تازه معرفی شده و نسخه رسمیش ۴ ساله که اومده برای اثبات خودش نیاز به گذر زمان بیشتری داره تا بیشتر جواب پس بده و این مواردی که گفته شد بر اساس مستندات و گفته های توسعه دهنده هاشه.

⚠️نکته بعدی اینه که میلیون ها پکیج و کتابخانه برای Nodejs وجود داره اما هیچ کدوم برای استفاده از دینو استاندارد نشدن و شاید بیشتر زمان نیاز داره تا این اتفاق بیوفته. پس اینکه بگیم Deno.js جایگزین Node میشه شاید بیشتر زمان ببره تا همه انتظارات node در deno براورده بشه.


#denojs #runtime #js
@CodeModule

✌️ کامپایل و بهینه سازی کد های جاوااسکریپتی با JIT

در حوزه انجین های جاوا اسکریپت، شیوه کامپایل Just-In-Time (JIT)، اجرای کد رو متحول کرده و عملکردی رو افزایش میده که زبان های برنامه نویسی dynamic scripting رو به سرعت زبان های کامپایل شده نزدیک میکنه.

کامپایل سازی Just-In-Time تکنیکیه که به موجب اون کد جاوا اسکریپت در runtime به جای (AOT) به کد نیتیو ماشین کامپایل میشه. این رویکرد مزایای تفسیر (flexibility و portability) و کامپایل رو برای بهینه سازی سرعت اجرای کد ترکیب میکنه.

‼️چجوری JIT تو جاوا اسکریپت کار میکنه؟

در حالی که مفسرهای سنتی کد منبع رو مستقیماً (و نسبتاً آهسته) میخونن و اجرا می کنن، موتورهای دارای JIT یک لایه اضافی ایجاد می کنن. موتورهای جاوا اسکریپت مثل V8 (Chrome)، SpiderMonkey (Firefox) و JavaScriptCore (Safari) کد بایت تفسیر شده رو دریافت میکنن و اون رو به سرعت در یک کد ماشینی سریع‌تر و بهینه‌سازی کامپایل می‌کنن که پردازنده می‌تونه کارآمدتر اجرا کنه.

✅مزایای کامپایل به شیوه JIT چیه ؟

🟡Performance Improvements

🟡Platform Independence

🟡On-the-Fly Optimization


کامپایل Just-In-Time یک تغییر بزرگ برای جاوا اسکریپت بوده و به دولوپرا این امکانو میده تا برنامه های کاربردی با کارایی بالا رو بدون از دست دادن راحتی و انعطاف زبان بنویسن. با کامپایل کردن کد در زمان اجرا، کامپایلرهای JIT مانند V8 و SpiderMonkey اطمینان حاصل می کنن که جاوا اسکریپت در دنیای پر سرعت توسعه وب رقابتی باقی میمونه، بدون اینکه دسترسی و تطبیق پذیری اون به خطر بیوفته. با پیشرفت‌های مداوم در فناوری JIT، میشه انتظار داشت که موتورهای جاوا اسکریپت زمان‌های اجرای سریع‌تریو ارائه بدن و همگام با منظره وب در حال تحول باشن.


#js #engine #jit
@CodeModule

✌️ 100 سوال مصاحبه ای جاوا اسکریپت

ریپازیتوری های زیر، هر کدوم 100 سوال متداول جاوا اسکریپتی، همراه با پاسخ دارن که بهتون پیشنهاد میکنم حتما یه سر بزنید

🐱 https://github.com/sudheerj

🐱 https://github.com/ganqqwerty

🐱 https://github.com/lydiahallie


#js #interview
@CodeModule

✌️ در جاوا اسکریپت بدون استفاده از کتابخانه، متن رو به گفتار تبدیل کن !

✅با پراپرتی speechSynthesis این کار به راحتی امکان پذیره!

وظیفه speechSynthesis، ایجاد و کنترل صدای گفتاری (تبدیل متن به گفتار) هست.
برای استفاده از speechSynthesis، میتونید از متدهای مختلفی استفاده کنید تا متن مورد نظر و به گفتار تبدیل، و کنترل کنید (جلوتر ازشون نام میبریم).

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

let to_speak = new SpeechSynthesisUtterance('this is a test'); 
 
speechSynthesis.speak(to_speak); 

🔵در خط اول کد بالا، یک شئ از جنس SpeechSynthesisUtterance ساختیم و نیازه که یک پارامتر بهش پاس بدیم که اون پارامتر، باید یک string باشه که بتونه اون string رو تلفظ کنه.

🔵در مرحله بعد ما برای اینکه بتونیم متن رو تلفظ کنیم، باید speechSynthesis رو صدا کنیم که خودش شامل چندین متد از جمله speak ، pause ، resume و ... میشه که جهت کنترل صدا هست. اینجا برای تبدیل متن به گفتار نیازه که از متد speak استفاده کنیم.

👨‍💻متد speak جهت تلفظ متن استفاده میشه، بنابراین این متد رو به speechSynthesis اضافه میکنیم و آبجکتی که اول ساختیم و به عنوان پارامتر بهش پاس میدیم و کار تمام.

⚠️این پراپرتی در تمام بروزر ها ساپورت میشه و با مشکل مواجه نخواهید شد.


#js #web
@CodeModule

🤯متد های کاربردی Console که نمیدونستی!

کنسول مرورگر، یکی از کاربردی ترین ابزار ها برای دولوپرا هست که برای تست خروجی کد و دیباگ کردن، کاربرد داره. تو این پست قراره با سایر متد های این ابزار، آشنا بشیم و صرفا کنسول رو فقط به log گرفتن، محدود نکنیم.


⚡️انواع متد ها و کاربردهاشون:

1️⃣متد log: برای چاپ کردن اطلاعات دلخواه اعم از متن ، عدد ، آبجکت ، آرایه ، ‌و ... در کنسول مرورگر

console.log("CodeModule")

2️⃣متد info: برای خروجی اطلاعات آموزنده روی کنسول‌ (درباره موضوعی میخواید اطلاعات کمک کننده بدید)

console.info("CodeModule is the best")

3️⃣متد error: برای خروجی خطا روی کنسول که متن دلخواه شما رو به شکل ارور در کنسول چاپ میکنه

console.error("this is a error")

4️⃣متد warn: برای خروجی اخطار روی کنسول که متن دلخواه شما رو به صورت هشدار (با رنگ زرد) در کنسول چاپ میکنه

console.warn("this is a warn")

5️⃣متد clear: برای پاک کردن کنسول از همه لاگ ها و ارور ها و ...

console.clear()

6️⃣متد time و timeEnd : برای نشان دادن طول مدت اجرای یک تکه کد استفاده میشه

   console.time("myTimer is start");
   // some code here
   console.timeEnd("myTimer is end");
  

7️⃣متد table: برای نمایش داده‌ها به‌صورت جدول روی کنسول، که خیلی کاربردیه!

   const names = ["mahan", "shahin", "ghasem"];
   console.table(names); 

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


#console #js
@CodeModule

😎دیتابیس لوکال در مرورگر، با 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