✌️ با پراپرتی 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