Code Module | کد ماژول

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

⚡️پرفورمنس سایتت رو بسنج ! توی این پست یک سایت بهتون معرفی میکنم که با استفاده از اون، میتونید سایت مد نظرتون رو از بابت Performance ،Structure ،LCP و LBT بسنجید و انالیزشون کنید🏋️‍♀️ ⚠️ جهت استفاده از این سایت، باید Vpn روشن کنید 🔵Website #web #performance #tools @CodeModule

سرچ الگوريتم و کاربردش در وب 🔥 سرچ الگوريتم، روشی برای یافتن کارآمد اطلاعات یک مجموعه داده هست. با استفاده از این الگوریتم، داده های ذخیره شده در ساختار های خاص رو میتونیم بازیابی کنیم، یا در یک فضای جستجو تعریف شده محاسبه کنیم. چند نوع الگوریتم جستجو داریم؟ 🤨 1. جستجوی خطی (linear search) : هر رکورد رو یک به یک بررسی میکنه تا زمانی که هدف پیدا شه. 2. جستجوی دودویی (binary search) : ساختار داده رو به دو قسمت تقسیم میکنه و همین کار باعث میشه، از جستجوی خطی سریع تر بشه. توجه : این یک طبقه بندی سطح بالا هست. سرچ الگوریتم چه کابردی داره؟ الگوریتم های جستجو کاربرد های زیادی مثل NLP، ماشین لرنینگ و ... دارن. اما آیا در وب هم کاربرد دارن؟ صد در صد بله و چند موردشو با هم مثال میزنیم ⬇️ 1. مدیریت محتوا (CMS) : میتونیم با استفاده از سرچ الگوریتم برای جستجو مطالب، صفحات و فایل های موجود در سیستم استفاده کنیم. 2. پشتیبانی : میتونه برای جستجو تیکت ها، سوالات متداول و اطلاعات مرتبط استفاده بشه. 3. جستجو پیشرفته : احتملا دیدید که برخی از وبسایت ها، امکانات پیشرفته‌ای برای جستجو رو برای کاربران فراهم میکنن. این کار با استفاده از الگوریتم جستجو انجام میشه. به صورت کلی سرچ الگوريتم کابرد های زیادی داره، که یکی از بزرگترین مثال هاش گوگل مپ هست. برای پیاده سازی جستجو دودویی یا خطی با زبان های مختلف مثل (js، ts، golang) میتونید به این ریپازیتوری مراجعه کنید. همچنین برای درک بهتر و نحوه کار کردن الگوریتم های جستجو، مقالات زیر رو پیشنهاد میکنم : - Article - Article - Article #algorithm #search_algorithm @CodeModule

یک رزومه کارفرما پسند چه ویژگی هایی داره؟ 1⃣به جزئیات اهمیت بده یک رزومه حرفه ای به هیچ وجه نباید غلط املایی و گرامری داشته باشه، پس به جزئیات نوشتاری توجه کن! 2⃣لینک خراب یعنی رد شدن رزومه اگه لینکی از پلتفرم های اجتماعی یا پروژه هاتون به رزومه اضافه کردید، حتما لینکش رو چک کنید اشتباهی نشده باشه. 3⃣مقاله ننویس کارفرماها معمولا برای بررسی هر رزومه نهایتا ۶۰ ثانیه وقت می‌ذارن، پس از پاراگرف های کوتاه و جامع برای معرفی خودت استفاده کن. 4⃣صادقانه و دور از مبالغه زیاد هیچ کارفرمایی تمایل به استخدام فردی که صادق نباشه نداره. در رزومه از خودتون تعریف و تمجید کنید و سعی کنید به هر توانایی خود، رتبه و سطحی قائل شوید و کارهایی که عملاً انجام داده‌اید، و تکنولوژی هایی که کار کردید رو کاملاً صادقانه بیان کنید، وگرنه تو مرحله مصاحبه ممکنه براتون دردسر بشه. 5⃣نسخه فارسی و انگلیسی رزومت آماده باشه خیلی از دولوپرا با فرستادن رزومه انگلیسی به شرکت‌های ایرانی، عملا خودشون رو ریجکت میکنن. اکثر کارفرماهای ایرانی زمانی که میخوان رزومه رو چک کنن، اگه انگلیسی باشه ردش میکنن(متقاضی زیاده و به خودشون زحمت نمیدن یا انگلیسی بلد نیستن). واسه یه شرکت معمولی که متن آگهی دعوت به کارشو فارسی نوشته، رزومه انگلیسی نفرستید و همین روند بالعکس. دقت کنید که شرکت های بزرگ و معروف از این قاعده مستثنی هستن. #resume @CodeModule

🖼️ حافظه Swap در لینوکس در حقیقت Swap یک حافظه مجازیه و زمانی که سیستم عامل رم کافی نداره، میتونید از اون استفاده کنید. یک فایل swap به لینوکس اجازه میده تا فضای دیسک رو به عنوان RAM شبیه سازی کنه، و همونطور که بالاتر هم اشاره کردم، وقتی که سیستم شما شروع به اتمام رم میکنه، از فضای swap استفاده میکنه و مقداری از محتوای RAM رو روی فضای دیسک جابجا میکنه. 👌این کار RAM رو آزاد میکنه تا process های مهم تریو ارائه بده. وقتی که RAM دوباره آزاد شد، داده هارو از دیسک تعویض میکنه. ✅ سایز swap رو موقع ساخت به اندازه ram و یا ترجیحا، 2 برابر مقدار ram در نظر بگیرید. 🔵حافظه swap چه چالشی رو حل کرد ؟ وقتی که شما یک برنامه رو در سیستم عامل اجرا می‌کنید، نیازه که این برنامه به داخل حافظه اصلی یا RAM انتقال داده بشه. سیستم عامل های جدیدتر و به روز تر، تعداد برنامه های بیشتری رو اجرا می کنن و سرویس های زیادی هم در بک گراند در حال اجرا هستن. اما از طرف دیگر RAM محدوده و زمانی که تعداد زیادی از برنامه ها به صورت همزمان اجرا میشن، در این شرایط میزان رم که برای اجرا کردن این برنامه ها نیازه، از میزان حافظه اصلی بیشتر میشه و مشاهده خواهید کرد که سیستم شما با کمبود حافظه اصلی مواجه میشه و درنهایت crash می‌کنه. ‼️برای رفع این مشکل دو راه حل وجود داره : 🔵راه حل اول اینه که بیایم و حافظه اصلی سیستم رو افزایش بدیم که هزینه‌بر هست. 🔵راه حل دوم اینه که قسمتی از فضای هارد دیسک رو به صورت مجازی برای استفاده به عنوان حافظه اصلی معرفی کنیم. در دنیای لینوکس و یونیکس به این فضا swap گفته میشه که می تونید اون رو، هم به صورت پارتیشن و فایل تعریف کنید‌. ⚠️چیزی که در لینوکس ما به عنوان SWAP Partition میشناسیم، در ویندوز به عنوان Page File یا Virtual Memory معروفه. اما در واقع این ویندوزه که از لینوکس، ساختار SWAP رو الگو برداری کرده و تو سیستم عامل خودش به اسم Virtual Memory معرفی میکنه! #swap #linux @CodeModule

مقیاس پذیری در Node.js 🤟 قبل از اینکه بخوایم درمورد مقیاس پذیری در Node.js صحبت کنیم، باید اول معنی و مفهوم مقایس پذیری رو بدونیم! مقیاس پذیری یکی از ویژگی های سیستمه که نشون میده، سیستم تا چه حد میتونه در مقیاس های بزرگتر به شکل مشابه، پایدار به فعالیتش ادامه بده. اما مقیاس پذیری در Node.js به چه صورته؟ 🧐 به صورت کلی مقیاس پذیری در یک برنامه Node.js، یعنی اطمينان از اینکه این برنامه در صورت ترافیک و تعاملات بالای کاربران، برنامه رو بدون به خطر انداختن عملکرد مدیریت کنه. این فرایند برای کسب و کار هایی که رشد رو پیش‌بینی میکنن و هدفشون ارائه یک تجربه یکپارچه هست، بسیار مهمه. در هنگام مقیاس پذیری برنامه های Node.js باید چند استراتژی رو در نظر بگیریم ⬇️ 1. مقیاس افقی : شامل افزایش تعداد نمونه‌های برنامه شما بر روی چند سرور مجزا هست. با افزایش تعداد سرورها، برنامه شما می‌تونه بار زیادی از ترافیک رو مدیریت کنه. 2. معماری میکروسرویس: برنامه شما به چندین سرویس کوچکتر تقسیم میشه که هر کدوم، مستقل از یکدیگر عمل می‌کنن. این امر امکان افزایش انعطاف‌پذیری و مقیاس پذیری برنامه رو فراهم می‌کنه. 3. استفاده از سیستم‌های کشینگ: با استفاده از این سیستم‌ها میتونید به بهبود عملکرد و مقیاس پذیری برنامه کمک کنید. این سیستم‌ها با ذخیره‌سازی داده‌های پراستفاده در حافظه، زمان پاسخ به درخواست‌ها رو کاهش میدن. برای پیاده سازی یک برنامه مقیاس پذیر و آشنا شدن با نکات بیشتر و حرفه‌ای‌تر، میتونید 3 تا مقاله زیر رو بخونید 💀 - Article - Article - Article به صورت کلی برای داشتن یک برنامه Node.js مقیاس پذیر، باید به این نکات توجه کنید و استراتژی‌های مناسب رو برای مقیاس پذیری برنامه اعمال کنید. این کار به شما کمک می‌کنه تا برنامه‌ پایداری رو، در مقیاس‌های بزرگتر حفظ کنه. #nodejs #scalability @CodeModule

شماهم از سرویسای رایگان استفاده میکنید ؟😂🗿 #fun @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

📊 با کتابخانه 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

مفهوم Stream در Node.js 🤟 استریم به صورت خلاصه، راهی برای انتقال داده ها از یک منبع به مقصد به صورت بیت به بیته، و برای جلوگیری از هرگونه خطای خارج از حافظه هست. احتملا در فضای اینترنت فایل هایی ویدئویی دانلود کردید، و حتما پیش اومده روی یک فایل چند بار کلیک کنین که باعثه ارسال چندین درخواست برای دانلود بشه. 🧐اما این درخواست ها چجوری هندل میشن؟ دوتا سناریو مختلف! 1️⃣ سروری که استریم رو پیاده سازی نمیکنه: به فرض مثال ما یک api برای دریافت فیلم داریم. اگه ما 5 بار درخواست به api ارسال کنیم، سرور فایل رو 5 بار میخونه و مصرف حافظه 5 برابر میشه، و هرچقدر فایل بیشتر باشه مصرف حافظه بیشتر میشه. 2️⃣سروری که استریم رو پیاده سازی میکنه: اگه همون api ویدئو رو داشته باشیم و هرچقدر به سمت سرور درخواست ارسال کنیم، درخواست ما فقط یک بار در سرور خونده میشه و هنگام برقرار شدن تماس با api، محتوا به صورت بیت به بیت ارسال میشه. اینجوری حافظه نسبت به سناریو اول کمتر مصرف میشه. ✅انواع مختلفی استریم در Node.js وجود داره: 🔵استریم خواندنی (Readable streams): ساخت استریم برای خوندن، مثلا یک فایل mp4 رو میتونیم به صورت بخش به بخش بخونیم. 🔵استریم نوشتنی (Writable streams): برای ساخت یک استریم استفاده میشه، مثلا برای ساخت یک فایل با داده های زیاد. 🔵استریم داپلکس(Duplex streams): ساخت یک استریم که هم میشه خوند و نوشت. 🔵استریم تبدیلی (Transform streams): مثل استریم داپلکس، یک استریم که هم خواندنی هم نوشتنی هست میسازه، اما داده ها بعد از نوشته شدن در فایل قابل ادیت هستن. به صورت کلی استریم ها در nodejs میتونن خیلی مفید باشن، چون به صورت non-blocking یا غیر مسدود کننده هستن و ما میتونیم مجموعه داده های بزرگ رو مدیریت و پردازش کنیم 🏖️ #stream @CodeModule

هر ایرانی یک همستر 😂😂 #fun @CodeModule

کدهای CSS اضافه رو پاک کن! 🔵 در واقع Purgecss ابزاریه که کدهای CSS بلااستفاده رو حذف می‌کنه، و شما می‌تونید از این ابزار به عنوان قسمتی از چرخهٔ توسعهٔ پروژتون استفاده کنید. شما ممکنه به عنوان یک طراح وب‌سایت از فریمورک‌هایی نظیر Bootstrap ،Foundation و ... استفاده کنید، اما در نهایت شما قسمت اندکی از این فریمورک‌ها رو استفاده می‌کنید و قسمت اعظم استایل‌های CSS موجود در این فریمورک‌ها، بلااستفاده میمونن که باعث میشه حجم فایل هاتون زیاد بشه. اینجا PurgeCSS به شما کمک می‌کنه که کدهای CSS اضافی و غیرضروری، که در فایل‌های CSS شما وجود دارن رو حذف کنید و به این‌ ترتیب، حجم فایل‌های CSS کمتر میشه. در نهایت استفاده از PurgeCSS می‌تونه به بهینه‌سازی و بهبود عملکرد پروژتون کمک زیادی کنه. برای اطلاعات بیشتر و نحوه استفاده از این ابزار، میتونید داکیومتش رو مطالعه کنید. Document 🌕 #purgecss #css @CodeModule

سند SRS چیه و چه کاربردی داره؟🧐 سند SRS یا به عبارت دیگه Software Requirements Specification، یک سند جامع هست که هدف، عملکرد، محیط عملیاتی، اهداف پروژه، سرعت، امنیت و انتظارات عملکردی یک برنامه نرم‌افزاری رو تعریف میکنه و میتونه به سوالاتی مثل اینکه، چجوری کار میکنه، نحوه تعاملش با کاربران و نحوه تعامل با سخت/نرم افزار های دیگه جواب بده. اما این سند قبل از انتشار باید تایید بشه و برای تایید، نیازمند اعتبار سنجی SRS هست. اعتبار سنجی SRS چیه؟ اعتبار سنجی یک مرحله حیاطی در چرخه توسعه نرم‌افزاره که به درستی نیاز های پروژه رو بررسی و تایید میکنه، و برنامه باید بتونه به تمام سوالات یا بیشترشون جواب بده. اعتبار سنجی یک سند SRS، به صورت کلی به شکل زیر انجام میشه: 1️⃣ آیا سند SRS تمام عملکرد های لازمه تعاملات کاربر و الزامات عملکردی رو در‌ بر می‌گیره؟ یا باگی در سیستم وجوده داره که در آینده منجر به خطا بشه؟ 2️⃣تناقض یا ناسازگاری در خود SRS وجود داره؟ 3️⃣آیا الزامات ذکر شده در SRS واقع بینانه و در چهارچوب محدودیت پروژه (بودجه، زمان، فناوری) قابل دستیابی هست؟ 4️⃣آیا SRS به صورت واضح و مختصر نوشته شده؟ یا اصطلاحات مبهمی داره که توسط توسعه دهنده ها به اشتباه تفسیر یا برداشت میشه؟ 5️⃣میشه الزامات موجود در سند رو به صورت عینی آزمایش و اندازه گیری کرد؟ ‼️ من به صورت بسیار خلاصه مراحل رو گفتم و قطعا مراحل بیشتری وجود داره، که در مثال های آخر پست قابل مشاهده هست. برای نوشتن یک سند SRS، ابزار های زیادی وجود داره که من به چند تاشون اشاره می‌کنم. 1) Microsoft work 2) Google Docs 3) JIRA برای درک بهتر از یک سند SRS و نحوه نوشتنش، میتونید به دو مثال زیر رو یک نگاهی‌ بندازید. 🔵دانلود 🔵دانلود همچنین برای درک کامل و نحوه پیاده سازی یک سند SRS، میتونید از منابع زیر استفاده کنید. - Article - Article - Article به صورت کلی، این سند اهمیت بالایی‌ داره و برای پروژه های مهم از اون برای تعامل، وضوح و ابهام زدایی و... استفاده میکنن! پیشنهاد میکنم به مثال ها و مقاله هایی که بالا معرفی شد، حتما یک سر بزنید🔥 #srs #programing @CodeModule

🐱 برای گیتهابت پروفایل زیبا و حرفه ای بساز در این پست با یک سایت به اسم GPRM آشنا میشیم که بهتون اجازه میده، با ظاهر ساده پروفایل گیتهابتون خداحافظی کنید. این ابزار به شما این امکان رو میده که یک Readme با آمار کامیت ها، استار ها و همچنین skill هاتون با ظاهر آیکون بسازید، و به عنوان پروفایل گیتهابتون نمایشش بدید ✈️ 🔵 Website #tools #github @CodeModule

داستان های من و npm 😂😂 #fun @CodeModule

اگه برای تمرین و کدنویسی دنبال ui خاصی میگردید، این طرح فیگما رو به هیچ وجه از دست ندید 💀 (طرح رسپانسیوش هم موجوده) 🔵 Link #figma @CodeModule