با کتابخانه Underscore.js بیشتر آشنا بشید!

‏Underscore.js یه کتابخانه جاوااسکریپتی اوپن سورس و قدرتمنده، که پر از ابزارهای کاربردی برای کار با هر تایپ دیتایی هست. با Underscore میتونید کارهایی مثل مرتب‌سازی، دسته‌بندی، جستجو، فیلتر کردن و خیلی چیزای دیگه رو به سادگی انجام بدید.

این کتابخانه چه کارهایی میتونه انجام بده؟

🔵کار با آرایه ها: مرتب‌سازی، دسته‌بندی،
جستجو، فیلتر کردن، اضافه کردن، حذف کردن و...

🔵کار با آبجکت ها: ادغام، بررسی وجود کلید، یافتن مقادیر، و...

🔵کار با اعداد: محاسبات ریاضی، تبدیل
واحد، و...

🔵کار با استرینگ ها: فرمت‌بندی، دسته‌بندی، جستجو، و...
و خیلی چیزهای دیگه!

‏Underscore مثل یک دوست صمیمی برای توسعه دهنده های جاوااسکریپته!

فرض کنید یک آرایه از اسامی دانش‌آموزان دارید، و نیازه اسم اولین دانش‌آموزی که با حرف "A" شروع میشه رو پیدا کنید. اینجاست که Underscore.js خودش رو نشون میده! ‍♂️

با این کتابخانه این کار رو با یه خط کد می‌تونید انجام بدید:

const firstAStudent = _.find(students, student => student.name.startsWith('A'));

به طور کلی، این کتابخانه بهتون کمک می‌کنه کدهاتون رو سریعتر ، ساده تر و کارآمدتر بنویسید. برای کسب اطلاعات بیشتر درمورد این کتابخانه، میتونید به داکیومنتش مراجعه کنید.

Document 🌐

#vesal
🕊 PgTwEet | توییت برنامه‌ نویسی

خیلی حس خوبیه 🦦

#shahin
🤘 PgTwEeT | توییت برنامه نویسی

آشنایی با ‏Shadow DOM و ویژگی‌هاش🔥

‏Shadow DOM یکی از ویژگی‌های مهم Web Components هست که به توسعه‌دهندگان این امکان رو میده، بخش‌هایی از DOM رو به صورت local و مجزا از بقیه صفحه مدیریت کنن. این ویژگی باعث میشه تا کدهای CSS و JavaScript شما، روی بخش‌های دیگه از صفحه تأثیر نذارن و برعکس.

چرا Shadow DOM تو فرانت‌اند مهمه ؟

🔵 کپسوله‌سازی (Encapsulation): Shadow DOM به شما این امکان رو میده تا کدهای HTML، CSS و JavaScript مربوط به یک کامپوننت رو به صورت محلی(local) مدیریت کنید، بدون اینکه رو سایر بخش‌های صفحه تأثیر بذارن.

🔵 پیشگیری از تداخل استایل ها (Style Collision): با استفاده از Shadow DOM، استایل های تعریف شده در یک کامپوننت، روی عناصر دیگه از صفحه تأثیری نمیذارن و این مسئله به ویژه تو پروژه‌های بزرگ خیلی مهمه .

🔵 بهبود امنیت و پایداری: کپسوله‌سازی(Encapsulation) کدها باعث میشه که دسترسی و تغییرات غیرمجاز در کدها سخت‌تر بشه، که این کار امنیت و پایداری برنامه رو افزایش میده.

اجزای Shadow DOM شامل چه چیزایی میشه؟

‏🔵 Shadow Root: ریشه Shadow DOM هست که به یک عنصر میزبان (Host Element) متصل میشه و شامل تمامی نودهای محلی(local nodes) هست.

‏🔵 Shadow Tree: درختی از نودها که درون Shadow Root قرار دارن و به صورت محلی مدیریت میشن.

‏🔵 Shadow Boundary: مرزی که Shadow DOM رو از بقیه DOM جدا می‌کنه و مانع از نفوذ و تداخل کدهای خارجی میشه.

‏🔵 Slot: یک نقطه ورودی (Insertion Point) در Shadow DOM هست که به شما این امکان رو میده، محتوا رو از DOM اصلی به Shadow DOM منتقل کنید.

چالش‌های استفاده از Shadow‌‏ DOM؛

🔴 سازگاری مرورگرها: درسته که Shadow DOM توسط خیلی از مرورگرهای مدرن پشتیبانی میشه، اما هنوز ممکنه برخی مشکلات سازگاری با مرورگرهای قدیمی وجود داشته باشه.

🔴 دیباگینگ (Debugging): دیباگینگ در Shadow DOM ممکنه کمی پیچیده‌تر از DOM معمولی باشه، چون که نودهای Shadow Tree به صورت جداگانه مدیریت میشن.

🔴 یادگیری و پیاده‌سازی: یادگیری و پیاده‌سازی Shadow DOM ممکنه نیاز به زمان و تمرین داشته باشه، به ویژه برای توسعه‌دهندگانی که با این مفهوم آشنا نیستن.

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

#vesal
🤘 PgTwEet | توییت برنامه‌ نویسی

با Obsidian تفکرت رو تیز تر کن🧑‍💻

ابسیدین (Obsidian) یک نرم افزار آفلاین شخصی و منعطف یادداشت برداری هست، که با طریقه فکر کردن شما سازگار می شود. ابسیدین برای سیستم عامل های مختلف مثل ویندوز و اندروید و مک و ios عرضه شده و برای استفاده شخصی رایگان هست.

ویژگی های منحصر به فرد ابسیدین ⬇️

🔵افکارتون مال خودتون هست.

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

🔵ذهن شما منحصر به فرد هست.

با بیش از صدها افزونه و تم، می تونید ابسیدین رو طبق روشی که فکر میکنید سازگار کنید.

🔵دانشتون باید موندگار باشه.

ابسیدین از فایل‌های باز و غیر اختصاصی استفاده میکنه، بنابراین شما هرگز به استفاده از این نرم افزار محدود نمیشید و می‌تونید داده‌های خودتون رو برای مدت زمان طولانی حفظ کنید.

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

🔢 لینک ها

شما میتونید بین یادداشت هاتون اتصالاتی ایجاد کنید. هرچیز و همه چیز رو به هم متصل کنید؛ ایده ها، مردم، مکان ها، کتاب ها و بی نهایت. ویکیپدیای شخصی خودتون رو بسازید.

🔢 گراف

رابطه بین یادداشت های خودتون رو تجسم کنید. الگوهای مخفی تفکرتان رو به وسیله یک گراف جذاب و تعاملی پیدا کنید.

🔢 کانواس

یک فضای بی نهایت برای تحقیق، طوفان ذهنی، رسم نمودار و چیدن ایده هاتون. کانواس یک محل بازی بی نهایت برای ذهن شماست.

🔢 افزونه ها

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

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

#shahin
🤘 PgTwEeT | توییت برنامه نویسی

چالش داریم چه چالشی ⚡️

فرض کنید یه فانکشن به اسم fixBug داریم که یه
کلمه به اسم Word رو به عنوان ورودی دریافت می‌کنه.
هدف اینه که یه کد داخل این فانکشن بنویسیم که هر پیشامدی از "bug" رو توی Word به "flower" تبدیل کنه!

function fixBug (Word){

//You're Code 

}

مثال :

fixBug("XbugXYbugY") ‌
//output: "XflowerXYflowerY"

fixBug("XXYbug")‌   
//output: "XXYflower"

fixBug("YYbugXY")‌ ‌ 
//output: "YYflowerXY"

fixBug("XYXY") 
//output: "XYXY"

😀 راه حل خودتون رو کامنت کنید.

#vesal
🤘PgTwEeT | توییت برنامه نویسی

5 ابزار قدرتمند برای آنالیز سایت 👨‍🚀

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

در این پست ۵ سایت قدرتمند در این زمینه رو براتون جمع آوری کردم، که با استفاده از اون‌ها میتونید از نقاط ضعف سایتتون مطلع بشید.


1⃣Woorank

2⃣Google Search Console

3⃣SEMrush

4⃣Ahrefs

5⃣Moz Pro


#shahin
🤘PgTwEeT | توییت برنامه نویسی

آخه چی هستش این هوش مصنوعی :))


#aradin00
🤘PgTwEeT | توییت برنامه نویسی

🔵 متد کاربردی ()groupBy در جاوا اسکریپت

متد ()groupBy در جاوا اسکریپت، یکی از متدهای کاربردی برای گروه‌بندی عناصر در یک آرایه بر اساس معیار مشخص هست. این متد در ES2022 معرفی شده و برای سازماندهی و مدیریت دیتا ها بسیار مفیده.

در این پست، چند نمونه از استفاده‌های خفن و پرکاربرد متد ()groupBy رو بررسی می‌کنیم.

1⃣ گروه‌بندی عناصر آرایه بر اساس طول استرینگ:

با استفاده از متد ()groupBy می‌تونید عناصر یک آرایه از استرینگ ها رو بر اساس طولشون گروه‌بندی کنید.

const words = ["apple", "banana", "pear", "peach"];
const groupedByLength = Object.groupBy(words, word => word.length);
console.log(groupedByLength);
// Output:
// { '4': [ 'pear' ], '5': [ 'apple', 'peach' ], '6': [ 'banana' ] }

2⃣ گروه‌بندی آبجکت ها بر اساس مقدار یک ویژگی:

آبجکت های درون یک آرایه رو میتونید بر اساس مقدار یک ویژگی خاص، گروه‌بندی کنید. مثلاً بر اساس سن افراد.

const people = [
  { name: "Alice", age: 21 },
  { name: "Bob", age: 25 },
  { name: "Charlie", age: 21 }
];
const groupedByAge = Object.groupBy(people, person => person.age);
console.log(groupedByAge);
// Output:
// { '21': [ { name: 'Alice', age: 21 }, { name: 'Charlie', age: 21 } ],
//   '25': [ { name: 'Bob', age: 25 } ] }

3⃣ گروه‌بندی اعداد بر اساس زوج و فرد بودن:

اعداد درون یک آرایه رو بر اساس زوج یا فرد بودن، میتونید گروه‌بندی کنید.

const numbers = [1, 2, 3, 4, 5, 6];
const groupedByEvenOdd = Object.groupBy(numbers, num => (num % 2 === 0 ? "even" : "odd"));
console.log(groupedByEvenOdd);
// Output:
// { 'odd': [ 1, 3, 5 ], 'even': [ 2, 4, 6 ] }

4⃣ گروه‌بندی آرایه بر اساس حرف اول:

با استفاده از متد ()groupBy می‌تونید آرایه‌ای از کلمات رو بر اساس حرف اولشون گروه‌بندی کنید.

const animals = ["dog", "cat", "elephant", "camel"];
const groupedByFirstLetter = Object.groupBy(animals, animal => animal[0]);
console.log(groupedByFirstLetter);
// Output:
// { 'd': [ 'dog' ], 'c': [ 'cat', 'camel' ], 'e': [ 'elephant' ] }

متد ()groupBy به شما این امکان رو میده که به راحتی داده‌های خودتون رو دسته‌بندی و مدیریت کنید. امیدوارم از این پست لذت برده باشید 🦦

#vesal
‌‌🤘 PgTwEeT | توییت برنامه نویسی

ارورا هم سوسول شدن😂😂

#s‌‌hahin
🤘 PgTwEeT | توییت برنامه نویسی

۵ نکنه جهت بهبود عملکرد و سرعت وبسایت

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


1⃣ بهینه‌سازی تصاویر

تصاویر حجم زیادی از داده‌ها رو به خود اختصاص میدن. با فشرده‌سازی تصاویر و استفاده از فرمت‌های مدرن مثل WebP، می‌تونید حجم صفحات خودتون رو کاهش بدید. همچنین می‌تونید از تگ <picture> برای پشتیبانی بهتر مرورگرها استفاده کنید:

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="PgTwEeT">
</picture>

‌2⃣استفاده از Lazy Click Me Load More

بارگذاری تنبل (Lazy Click Me Load More) به شما این امکان رو میده که تصاویر و ویدئوها تنها زمانی بارگذاری بشن، که کاربر به اون‌ها اسکرول کنه و این باعث کاهش زمان بارگذاری اولیه میشه. این ویژگی در HTML5 پشتیبانی میشه و نیازی به پلاگین‌های اضافی نیست:

<img src="image.jpg" loading="lazy" alt="PgTwEeT">

‌
3⃣کاهش درخواست‌های HTTP

با ترکیب فایل‌های CSS و JavaScript و استفاده از ابزارهایی مثل Webpack، می‌تونید تعداد درخواست‌های HTTP رو کاهش بدید. همچنین می‌تونید از فشرده‌سازی فایل‌ها با gzip یا Brotli استفاده کنید تا حجم فایل‌ها کاهش پیدا کنه.

‌
4⃣استفاده از Content Delivery Network (CDN)

‏CDN به شما کمک می‌کنه تا محتوا رو از نزدیک‌ترین سرور به کاربر ارائه بدید، که باعث کاهش زمان بارگذاری و افزایش مقیاس‌پذیری وبسایت میشه:


5⃣بهینه‌سازی فایل‌های CSS و JavaScript

با استفاده از ابزارهایی مثل UglifyJS و CSSNano، می‌تونید کدهای خودتون رو بهینه و حجم فایل‌ها رو کاهش بدید. همچنین می‌تونید از ابزارهای مدرنی مثل Terser برای جاوااسکریپت و PostCSS برای CSS استفاده کنید:

// Example using UglifyJS
const UglifyJS = require("uglify-js");
const result = UglifyJS.minify("function add(a, b) { return a + b; }");
console.log(result.code);

بهینه‌سازی عملکرد، یکی از مهم‌ترین جنبه‌های توسعه وبسایت‌های حرفه‌ای و مدرن هست. امیدوارم از این پست لذت برده باشید 😀

#vesal
‌🤘 PgTwEeT | توییت برنامه نویسی

توسعه مبتنی بر تست (Test-Driven Development (TDD)) در فرانت‌اند ⚡️

توسعه مبتنی بر تست (Test-Driven Development یا TDD) یه روش باحال برای توسعه نرم‌افزاره که توش تست‌ها رو قبل از نوشتن کد اصلی می‌نویسیم. این روش باعث میشه کیفیت کد بره بالا، باگ‌ها کم بشه و نگهداری کد راحت‌تر بشه.

توی این پست، چند تا از مزیت‌های TDD و مراحلش رو توی فرانت‌اند بررسی می‌کنیم.

1⃣نوشتن تست‌های اولیه:

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

// Example using Jest
test('should add two numbers correctly', () => {
  const result = add(2, 3);
  expect(result).toBe(5);
});

2⃣نوشتن کد اصلی برای پاس کردن تست‌ها:

حالا که تست‌ها رو نوشتیم، میریم سراغ نوشتن کد اصلی تا تست‌ها پاس بشن. این کد باید دقیقا نیازهای مشخص شده در تست‌ها رو برآورده کنه.

function add(a, b) {
  return a + b;
}

3⃣اجرای تست‌ها و بررسی نتایج:

با اجرای تست‌ها، مطمئن میشیم که کد نوشته شده تست‌ها رو پاس می‌کنه. اگه تست‌ها پاس نشدن، باید کد رو اصلاح کنیم تا همه تست‌ها پاس بشن.

# Run tests using Jest
npm test

4⃣‏Refactor کردن کد:

‏Refactor یعنی بازسازی و بهبود ساختار کد بدون تغییر در عملکردش. بعد از پاس شدن همه تست‌ها، می‌تونیم کد رو Refactor کنیم. تو این مرحله باید مطمئن بشیم که تست‌ها همچنان پاس میشن.

// Improved add function
const add = (a, b) => a + b;

5⃣تکرار مراحل:

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

مزایای TDD در فرانت‌اند:

• بهبود کیفیت کد : با نوشتن تست‌ها قبل از کد اصلی، مطمئن می‌شیم که همه جوانب عملکردی اپلیکیشن و پروژه پوشش داده میشه.

• کاهش باگ‌ها: تست‌های اولیه کمک می‌کنن تا باگ‌ها تو مراحل ابتدایی توسعه شناسایی و رفع بشن.

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

‌
توسعه مبتنی بر تست، یکی از بهترین روش‌ها برای تضمین کیفیت و پایداری کد تو پروژه‌های فرانت‌اند هست. امیدوارم از این پست لذت برده باشید 😎

#vesal
‌🤘 PgTwEeT | توییت برنامه نویسی

‏SOLID چیه و چه کاربردی داره؟ 🦦

‏SOLID یک مجموعه اصول طراحی شیءگرا هست که به توسعه‌دهندگان کمک می‌کنه تا کدهای قابل فهم، قابل نگهداری و انعطاف‌پذیر بنویسن. این اصول توسط Robert C. Martin معرفی شده و شامل پنج اصل مهم هست:

1⃣‌‏Single Responsibility Principle‏ (SRP) هر کلاس یا ماژول باید تنها یک وظیفه مشخص داشته باشه. این اصل کمک می‌کنه تا کدها ساده‌تر و قابل درک‌تر بشن.

2⃣‌‏Open/Closed Principle (OCP) کلاس‌ها و ماژول‌ها باید برای توسعه باز و برای تغییر بسته باشن. این به این معنیه که باید بتونیم بدون تغییر در کد اصلی، ویژگی‌های جدید اضافه کنیم.

3⃣‏Liskov Substitution Principle (LSP) هر کلاسی که از کلاس دیگه‌ای ارث‌بری می‌کنه باید بتونه به جای کلاس پایه استفاده بشه، بدون اینکه رفتار برنامه خراب بشه.

4⃣‏Interface Segregation Principle‏ (ISP) به جای ایجاد اینترفیس‌های بزرگ و همه‌کاره، باید اینترفیس‌های کوچک و اختصاصی ایجاد کنیم که فقط متدهای مربوط به خودشون رو داشته باشن.

5⃣‏Dependency Inversion Principle‏ (DIP) ماژول‌های سطح بالا نباید به ماژول‌های سطح پایین وابسته باشن. هر دو باید به آبسترکشن‌ها وابسته باشن. این اصل کمک می‌کنه تا وابستگی‌ها بهتر مدیریت بشن و کدها قابل تست‌تر باشن.

برخی از مزایای اصول SOLID ⬇️

🔵کاهش پیچیدگی کد

🔵افزایش قابلیت نگهداری

🔵تسهیل در تست‌پذیری

🔵بهبود قابلیت توسعه

همچنین برای استفاده از اصول SOLID، می‌تونید از ابزارها و فریم‌ورک‌های مختلفی که این اصول رو تسهیل می‌کنن، استفاده کنید ⬇️

‏Spring: یک فریم‌ورک جامع برای توسعه برنامه‌های جاوا که بسیاری از اصول SOLID رو پیاده‌سازی می‌کنه.

‏Angular: یک فریم‌ورک برای ساخت اپلیکیشن‌های وب که به شما کمک می‌کنه تا اصول SOLID رو در برنامه‌های خود پیاده‌سازی کنید.

‏Django: یک فریم‌ورک برای توسعه وب با زبان پایتون که با پیاده‌سازی اصول SOLID به بهبود ساختار کد کمک می‌کنه.

همچنین شرکت‌های بزرگی مثل گوگل و فیسبوک، از اصول SOLID استفاده می‌کنن تا بتونن پروژه‌های بزرگ و پیچیده خودشون رو به صورت یکپارچه و کارآمد مدیریت کنن.

#vesal
🤘 PgTwEeT | توییت برنامه نویسی

‏Major ربات پولساز تلگرام ⭐️

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

اما چطوری؟ 🤔

• وظایف روزانه: کارهای ساده‌ای مثل نظر دادن، لایک کردن و اشتراک‌گذاری پست‌ها رو انجام بده و استارز جمع کن.

• دعوت دوست: دوستات رو به Major دعوت کن و از هر کد دعوت که فعال بشه، استارز بگیر.

• مسابقات: توی مسابقات هفتگی شرکت کن و با بقیه رقابت کن تا جایزه‌های نقدی و استارز ببری.

مزایای ربات Major⬇️

پول واقعی: هر 100 استارز 1.69 دلاره!

جوایز هیجان‌انگیز: توی مسابقات شرکت کن و جایزه‌های نقدی و استارز ببر.

اکانت پریمیوم: با استارزها اکانت پریمیوم بخر و از امکانات بیشتر لذت ببر.

بازی‌های جذاب: با دوستات رقابت کن و مهارت‌های خودت رو به چالش بکش.

قابلیت‌های جدید: به زودی قابلیت‌های جدید و منحصر به فردی به بازی اضافه می‌شه.
معطل چی هستی؟ همین الان شروع کن!

روی لینک زیر بزن و استارز رایگان دریافت کن :)

⭐️| لینک ورود

#aradin00
‌🤘 PgTwEeT | توییت برنامه نویسی

قیمت احتمالی استارز 💰

🔵 ‏CORS Policy چیه و چرا باید درموردش بدونیم؟

خیلی وقت ها در پروژه به ارور هایی مربوط به CORS بر میخوریم و علتش رو شاید ندونیم. این پست میتونه بهتون کمک کنه که CORS رو بهتر بشناسید.

‌
درک عمیق CORS (Cross-Origin Resource Sharing) به عنوان یک سیاست امنیتی در وب، می‌تونه به بهبود امنیت و عملکرد برنامه‌های وب کمک کنه. این سیاست پایه‌ای برای کنترل دسترسی به منابع بین دامنه‌های مختلف هست.

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

‏📌CORS یک مکانیزم امنیتیه که توسط مرورگرها پیاده‌سازی شده تا از دسترسی غیرمجاز به منابع بین دامنه‌ای جلوگیری کنه. به طور پیش‌فرض، مرورگرها درخواست‌های HTTP به منابع یک دامنه دیگر رو مسدود می‌کنن، مگر اینکه این درخواست‌ها به صراحت مجاز شده باشن.

‏📌Preflight Requests درخواست‌های پیش‌فاصله‌ای هستن که مرورگر قبل از انجام درخواست اصلی ارسال می‌کنه تا مطمئن بشه که سرور مقصد، دسترسی به منابع رو مجاز کرده. این درخواست‌ها معمولا با روش HTTP OPTIONS ارسال می‌شن.

‏📌 HTTP Headers شامل هدرهایی مثل موارد زیر هست تا به مرورگر اطلاع بدن که چه نوع درخواست‌هایی مجاز هستن.

"Access-Control-Allow-Origin"، "Access-Control-Allow-Methods", "Access-Control-Allow-Headers" 

یادگیری این مفاهیم بهتون کمک میکنه که:

• بتونید درخواست‌های HTTP بین دامنه‌ای رو به درستی مدیریت کنید.

• از مشکلات امنیتی ناشی از دسترسی غیرمجاز به منابع جلوگیری کنید.

• بتونید به درستی خطاها و مشکلات ناشی از CORS رو پیدا و رفع کنید.

حالا مزایای CORS چیه؟! 🤔

🟢کدهای شما امن‌تر و قابل اعتمادتر میشن.

🟢می‌تونید به راحتی با APIهای مختلف تعامل کنید و داده‌ها رو بین دامنه‌های مختلف تبادل کنید.

🟢درک بهتری از امنیت و ساختار HTTP پیدا می‌کنید.

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

#vesal
🤘 PgTwEeT | توییت برنامه نویسی

‏Event Loop & Call Stack چیه و چه کاربردی در جاوااسکریپت داره؟ 🤔

درک عمیق Event Loop و Call Stack به عنوان دو مفهوم اصلی در جاوااسکریپت، می‌تونه به بهبود کارایی و بهینه‌سازی کدهاتون کمک کنه. این دو مفهوم پایه‌ای برای مدیریت زمان و ترتیب اجرای کدها در جاوااسکریپت هستن و دونستن اونا کمک می‌کنه، از مشکلاتی مثل بلاک شدن کد و کاهش کارایی جلوگیری کنید.

‏🟡Call Stack یک ساختار داده‌ای LIFO (Last In, First Out) هست که برای نگهداری و پیگیری توابع فراخوانی شده استفاده میشه. وقتی تابعی اجرا میشه، به Call Stack اضافه میشه و پس از اتمام، از اون حذف میشه.

‏🟡Event Loop مکانیزمی هست که برای مدیریت و هماهنگی بین Call Stack و Task Queue (صف کارها) استفاده میشه. Event Loop وظیفه داره که بررسی کنه آیا Call Stack خالی هست یا نه و در صورت خالی بودن، وظایف موجود در Task Queue رو به Call Stack انتقال میده.

‏🟡Task Queue محلیه که وظایف غیرهمزمان مثل تایمرها، درخواست‌های HTTP و Event ها در اون ذخیره میشن تا توسط Event Loop به Call Stack منتقل بشن.

چرا باید به این مفاهیم اهمیت بدیم؟ ❗

- بتونید کدهای غیرهمزمان (Async) رو به درستی بنویسید و مدیریت کنید.

- از بلاک شدن مرورگر و کاهش کارایی جلوگیری کنید.

- بتونید به درستی خطاها و باگ‌های ناشی از عملکرد نادرست توابع غیرهمزمان رو پیدا و رفع کنید.

برای کسب اطلاعات بیشتر، به داکیومنت‌های مربوطه مراجعه کنید 🏖️
[ Event Loop ]
[ Call Stack ]

#vesal
🤘 PgTwEeT | توییت برنامه نویسی

تست نویسی چیه و به چه دردی میخوره؟ 🌀

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

فرآیند تست نویسی چطور انجام میشه ؟

هر پروژه از چندین واحد تشکیل شده و هر واحد یه کار خاص انجام میده. حالا باید دید که هر کدوم از این واحد ها کاری که باید انجام بدن و با موفقیت به سرانجام میرسونن یا نه؟؟ برای این کار از مفهوم Unit Testing استفاده میشه، توی این مفهوم هر بخش از پروژه ما یه واحد یا Unit به حساب میاد و کد هایی نوشته میشه که اون Unit و تست کنند.
اگه توی اون تست موفق بودیم، به اصطلاح تستمون Pass میشه و ما تونستیم واحد مورد نظرمونو از نظر کارایی تست کنیم.

چرا باید تست نویسی انجام بدیم ؟

با استفاده از مفهوم تست نویسی، میتونیم اشکالات برناممون و خیلی سریع پیدا کنیم و دیگه وقت زیادی صرف دیباگ و پیدا کردن مشکل نکنیم. مخصوصا اینکه در پروژه های بزرگ، موارد بسیار زیادی برای تست هست که اگه بخواییم همه این موارد و تکی تکی و به شکل دستی تست کنیم، کارمون بعد از کار تو معدن سخت ترین کار دنیا میشه☹️


چالش های تست نویسی چیه ؟

تست نویسی نمیتونه همه اشکالات و باگ های موجود در پروژه و تشخیص بده.
همه بخش های پروژه رو نمیشه تست کرد چون که بعضی از قسمت ها قابلیت پیاده سازی به شکل تست ندارن و برای تست اون قسمت ها باید به شکل دستی وارد عمل شد.


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

#shahin
🤘 PgTwEeT | توییت برنامه نویسی

📌 با سیستم‌های ماژول و باندلینگ (Module Systems & Bundling) بیشتر آشنا بشید

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

‏🟢 CommonJS: این سیستم در Node.js استفاده می‌شه و از require و module.exports برای وارد کردن و صادر کردن ماژول‌ها استفاده می‌کنه.
‏
🟢‏ AMD (Asynchronous Module Definition): بیشتر در مرورگرها استفاده می‌شه و از define و require برای مدیریت ماژول‌ها استفاده می‌کنه.

‏🟢 E‏S Modules (ESM): استاندارد مدرن جاوااسکریپت برای ماژول‌ها که از import و export استفاده می‌کنه و هم در مرورگرها و هم در Node.js پشتیبانی می‌شه.

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

‏🟡 Webpack: یک باندلر قدرتمند‌ که به شما امکان می‌ده کدهای جاوااسکریپت، CSS و سایر منابع رو‌ باندل کنید. قابلیت‌های پیشرفته‌ای مانند کد اسپلیتینگ و مدیریت وابستگی‌ها رو فراهم می‌کنه.

‏🟡 Rollup: این باندلر بیشتر برای‌ کتابخانه‌ها و پروژه‌های مدولار استفاده می‌شه و خروجی‌هایی با حجم کم تولید می‌کنه.

🟡 ‏Parcel: یک باندلر سریع و بدون‌ تنظیمات که به شما امکان می‌ده بدون نیاز به پیکربندی پیچیده،
فایل‌های خودتون رو باندل کنید

‌
‌

‌
مزایای استفاده از سیستم‌های ماژول و باندلینگ چیه؟ 🤔

1⃣سازماندهی بهتر کدها

2⃣مدیریت راحت‌تر وابستگی‌ها

3⃣بهبود عملکرد با کاهش تعداد درخواست‌های HTTP

4⃣قابلیت استفاده مجدد از کدها در پروژه‌های مختلف

5⃣تسهیل فرآیند توسعه و تست

چند مثال از استفاده سیستم‌های ماژول و باندلینگ در پروژه‌ها:

استفاده از ES Modules:
‌

// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from './math.js';
console.log(add(2, 3));

‌
استفاده از Webpack برای باندلینگ:
‌

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  mode: 'development'
};

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

#vesal
🤘 PgTwEeT | توییت برنامه نویسی