کدهای CSS اضافه رو پاک کن! 🔵

در واقع Purgecss ابزاریه که کدهای CSS بلااستفاده رو حذف می‌کنه، و شما می‌تونید از این ابزار به عنوان قسمتی از چرخهٔ توسعهٔ پروژتون استفاده کنید.

شما ممکنه به عنوان یک طراح وب‌سایت از فریمورک‌هایی نظیر Bootstrap ،Foundation و ... استفاده کنید، اما در نهایت شما قسمت اندکی از این فریمورک‌ها رو استفاده می‌کنید و قسمت اعظم استایل‌های CSS موجود در این فریمورک‌ها، بلااستفاده میمونن که باعث میشه حجم فایل هاتون زیاد بشه.

اینجا PurgeCSS به شما کمک می‌کنه که کدهای CSS اضافی و غیرضروری، که در فایل‌های CSS شما وجود دارن رو حذف کنید و به این‌ ترتیب، حجم فایل‌های CSS کمتر میشه.

در نهایت استفاده از PurgeCSS می‌تونه به بهینه‌سازی و بهبود عملکرد پروژتون کمک زیادی کنه. برای اطلاعات بیشتر و نحوه استفاده از این ابزار، میتونید داکیومتش رو مطالعه کنید.

Document 🌕

#purgecss #css
@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

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

شماهم از سرویسای رایگان استفاده میکنید ؟😂🗿


#fun
@CodeModule

مقیاس پذیری در Node.js 🤟

قبل از اینکه بخوایم درمورد مقیاس پذیری در Node.js صحبت کنیم، باید اول معنی و مفهوم مقایس پذیری رو بدونیم!

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

اما مقیاس پذیری در Node.js به چه صورته؟ 🧐

به صورت کلی مقیاس پذیری در یک برنامه Node.js، یعنی اطمينان از اینکه این برنامه در صورت ترافیک و تعاملات بالای کاربران، برنامه رو بدون به خطر انداختن عملکرد مدیریت کنه. این فرایند برای کسب و کار هایی که رشد رو پیش‌بینی میکنن و هدفشون ارائه یک تجربه یکپارچه هست، بسیار مهمه.

در هنگام مقیاس پذیری برنامه های Node.js باید چند استراتژی رو در نظر بگیریم ⬇️


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

2. معماری میکروسرویس: برنامه شما به چندین سرویس کوچکتر تقسیم میشه که هر کدوم، مستقل از یکدیگر عمل می‌کنن. این امر امکان افزایش انعطاف‌پذیری و مقیاس پذیری برنامه رو فراهم می‌کنه.

3. استفاده از سیستم‌های کشینگ: با استفاده از این سیستم‌ها میتونید به بهبود عملکرد و مقیاس پذیری برنامه کمک کنید. این سیستم‌ها با ذخیره‌سازی داده‌های پراستفاده در حافظه، زمان پاسخ به درخواست‌ها رو کاهش میدن.

برای پیاده سازی یک برنامه مقیاس پذیر و آشنا شدن با نکات بیشتر و حرفه‌ای‌تر، میتونید 3 تا مقاله زیر رو بخونید 💀

- Article
- Article
- Article

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

#nodejs #scalability
@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

یک رزومه کارفرما پسند چه ویژگی هایی داره؟

1⃣به جزئیات اهمیت بده

یک رزومه حرفه ای به هیچ وجه نباید غلط املایی و گرامری داشته باشه، پس به جزئیات نوشتاری توجه کن!

2⃣لینک خراب یعنی رد شدن رزومه

اگه لینکی از پلتفرم های اجتماعی یا پروژه هاتون به رزومه اضافه کردید، حتما لینکش رو چک کنید اشتباهی نشده باشه.

3⃣مقاله ننویس

کارفرماها معمولا برای بررسی هر رزومه نهایتا ۶۰ ثانیه وقت می‌ذارن، پس از پاراگرف های کوتاه و جامع برای معرفی خودت استفاده کن.

4⃣صادقانه و دور از مبالغه زیاد

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

5⃣نسخه فارسی و انگلیسی رزومت آماده باشه

خیلی از دولوپرا با فرستادن رزومه انگلیسی به شرکت‌های ایرانی، عملا خودشون رو ریجکت میکنن. اکثر کارفرماهای ایرانی زمانی که میخوان رزومه رو چک کنن، اگه انگلیسی باشه ردش میکنن(متقاضی زیاده و به خودشون زحمت نمیدن یا انگلیسی بلد نیستن). واسه یه شرکت معمولی که متن آگهی دعوت به کارشو فارسی نوشته، رزومه انگلیسی نفرستید و همین روند بالعکس. دقت کنید که شرکت های بزرگ و معروف از این قاعده مستثنی هستن.

#resume
@CodeModule

سرچ الگوريتم و کاربردش در وب 🔥

سرچ الگوريتم، روشی برای یافتن کارآمد اطلاعات یک مجموعه داده هست. با استفاده از این الگوریتم، داده های ذخیره شده در ساختار های خاص رو میتونیم بازیابی کنیم، یا در یک فضای جستجو تعریف شده محاسبه کنیم.

چند نوع الگوریتم جستجو داریم؟ 🤨

1. جستجوی خطی (linear search) : هر رکورد رو یک به یک بررسی میکنه تا زمانی که هدف پیدا شه.

2. جستجوی دودویی (binary search) : ساختار داده رو به دو قسمت تقسیم میکنه و همین کار باعث میشه، از جستجوی خطی سریع تر بشه.

توجه : این یک طبقه بندی سطح بالا هست.

سرچ الگوریتم چه کابردی داره؟

الگوریتم های جستجو کاربرد های زیادی مثل NLP، ماشین لرنینگ و ... دارن. اما آیا در وب هم کاربرد دارن؟ صد در صد بله و چند موردشو با هم مثال میزنیم ⬇️

1. مدیریت محتوا (CMS) : میتونیم با استفاده از سرچ الگوریتم برای جستجو مطالب، صفحات و فایل های موجود در سیستم استفاده کنیم.

2. پشتیبانی : میتونه برای جستجو تیکت ها، سوالات متداول و اطلاعات مرتبط استفاده بشه.

3. جستجو پیشرفته : احتملا دیدید که برخی از وبسایت ها، امکانات پیشرفته‌ای برای جستجو رو برای کاربران فراهم میکنن. این کار با استفاده از الگوریتم جستجو انجام میشه.

به صورت کلی سرچ الگوريتم کابرد های زیادی داره، که یکی از بزرگترین مثال هاش گوگل مپ هست.

برای پیاده سازی جستجو دودویی یا خطی با زبان های مختلف مثل (js، ts، golang) میتونید به این ریپازیتوری مراجعه کنید.

همچنین برای درک بهتر و نحوه کار کردن الگوریتم های جستجو، مقالات زیر رو پیشنهاد میکنم :

- Article
- Article
- Article

#algorithm #search_algorithm
@CodeModule

⚡️پرفورمنس سایتت رو بسنج !

توی این پست یک سایت بهتون معرفی میکنم که با استفاده از اون، میتونید سایت مد نظرتون رو از بابت Performance ،Structure ،LCP و LBT بسنجید و انالیزشون کنید🏋️‍♀️

⚠️ جهت استفاده از این سایت، باید Vpn روشن کنید

🔵Website

#web #performance #tools
@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

ادغام و تحویل مداوم (CD/CI) چیه ؟ 🧐

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

ادغام مداوم یا continues Integration (CI) چیه؟

به صورت کلی CI شبیه بررسی نرم افزاره، یعنی پس از هر تغییر، توسعه دهندگان کد رو ادغام میکنن و یک سیستم خودکار (مثل github action) فورا اونو تستش میکنه.

این باعث میشه اشکالات شناسایی‌ بشن و کد رو ثابت و با کیفیت نگه داره. هدف نهایی یکپارچه سازی پیوسته (CI) ساخت یک محیط توسعه هست که در اون، خطاها در سریع ترین زمان ممکن شناسایی و رسیدگی بشن.

و اما تحویل مدام یا (CD)continuous delivery چیه ؟

یک روش توسعه نرم‌افزاره که انتشار مکرر و قابل اعتماد رو تقویت میکنه، و بر اساس یکپارچگی پیوسته (CI) با خودکارسازی کل فرآیند انتشار نرم‌ افزار، از ساخت و آزمایش تا استقرار، بنا شده.

رابطه CD و CI چجوریه و چه فایده ای داره؟

با خودکارسازی CD کل انتشار نرم افزار بر اساس CI ساخته میشه. این رویکرد ساده مداخله دستی رو به حداقل میرسونه و خطاها رو کاهش میده. همچنین امکان استقرار مکرر و قابل اعتماد رو فراهم می کنه. CD با ترویج بازخورد سریع و تمرکز بر قابلیت استقرار، به تیم ها اجازه میده تا با سرعتی سریع نوآوری کنن.

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

#ci #cd
@CodeModule

منطقی ترین کلیپ امروز 🤔

#ai
@CodeModule

👩‍💻 با کتابخانه Next Ui بیشتر آشنا بشید

در واقع Next UI یک کتابخانه UI (رابط کاربری) برای React هست که توسط تیم Next.js توسعه داده شده. این کتابخانه ابزارها و کامپوننت‌هایی رو فراهم میکنه که برای ساخت رابط کاربری‌های وب استفاده میشه.

✅مزایای استفاده از Next UI چیه؟

🟢طراحی زیبا و حرفه‌ای کامپوننت ها

🟢پشتیبانی از Responsive Design

🟢سرعت بالا و بهینه‌سازی برای SEO

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


❌معایب استفاده از Next UI چیه؟

🔴مستندات ناقص

🔴کمبود برخی از قابلیت‌ها نسبت به رقبا


🧐 کتابخانه Next Ui چه مزایایی نسبت به سایر رقبا داره؟

این کتابخانه نسبت به رقبای خودش، از سرعت و بهینه‌سازی SEO بهتری برخورداره، اما در عین حال مستندات و پشتیبانی کمتری نسبت به برخی از کتابخانه‌های دیگه داره.

استفاده از Next UI بستگی به نیازها و موارد استفاده خاص شما داره. در صورتی که به سرعت و بهینه‌سازی برای SEO نیاز دارید، Next UI گزینه خوبیه، اما در صورت نیاز به پشتیبانی و مستندات جامع‌تر، ممکنه گزینه‌های دیگه مناسب‌تر باشن👍

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

Document 🌕

#ui #library #nextui
@CodeModule

اگه برای تمرین و کدنویسی دنبال ui خاصی میگردید، این طرح فیگما رو به هیچ وجه از دست ندید 💀

🔵 Link

#figma
@CodeModule

ارگونومی چیه دیگه🗿😂

#fun
@CodeModule