کافه کد | 𝗖𝗮𝗳𝗲 𝗖𝗼𝗱𝗲

✅ AJAX Call: هنگامی که ما از XMLHttpRequest به جای Promise ها در تسک های asynchronous استفاده می کنیم، یک سری توابع بازگشتی ایجاد می کند که به آن callback hell می گویند. ✨ این نه تنها خواندن کد را سخت‌تر می‌کند و قابلیت نگهداری کمتری دارد، بلکه هندل کردن خطاها را برای ما سخت‌تر می‌کند🛠️ #javascript #frontend Channel ° @Cafe_Of_Code Group ° @IRdeveloperchat

🔥Css Transform Skew 🔥 ⚡️قابلیت skew, skewX و skewY در CSS Transform امکان انحراف یک عنصر را در محور X یا Y فراهم می‌کند. این خاصیت‌ها به شما امکان می‌دهند تا یک عنصر را به صورت ناسازگار به سمت راست یا چپ (skewX یا skewY) یا به صورت مورب (skew) دور بزنید. استفاده از این خاصیت‌ها به صورت زیر است: استفاده از skew :

.element {
  transform: skew(30deg, 20deg);
}

در این مثال ، عنصر .element با ۳۰ درجه به سمت راست و با ۲۰ درجه به سمت پایین مورب می‌شود. استفاده از skewX :

.element {
  transform: skewX(30deg);
}

در این مثال، عنصر ، element ۳۰ درجه به سمت راست مورب می‌شود. و استفاده از skewY:

.element {
  transform: skewY(20deg);
}

در این مثال، عنصر ، element ۲۰ درجه به سمت پایین مورب می‌شود. #css #transform #skew #Ah_sear Channel ° @Cafe_Of_Code Group ° @Irdeveloperchat

👾 سوییچ ها و مقایسه آن ها با هاب : همانطور که قبل تر اشاره شد هاب ها مشکلات بسیار زیادی داشتند و مدت کوتاهی در بین شبکه ها حضور داشتند. اما کمی بعد سوییچ ها با قابلیت های بیشتر ، سرعت بیشتر ، و ایرادات بسیار کمتر وارد بازار شدند. سوییچ ها تمامی مشکلات هاب ها را رفع کرده اند و هم اکنون سهم بزرگی را در شبکه دارند. سوییچ ها بر خلاف هاب دیگر تمام پکت هارا به همه نود های شبکه ارسال نمی کنند و فقط پکت را از مبدا می گیرند و به مقصد تحویل می دهند،‌ شاید برای شما سوال باشد که چگونه می دانند مقصد کجاست؟ سوییچ ها مک آدرس های متصل به پورت های مختلف خود را به خاطر می سپارند تا در آینده برای جا به جایی پکت از آن ها استفاده کنند، در سوییچ ها جدولی در حافظه ای مختصر ذخیره شده که این مک آدرس هارا نگه داری میکند. این جدول شماره پورت و مک آدرس متصل به آن را ذخیره دارد ، به این مثال توجه کنید:

            MAC                  |                 Port Number
 10:bf:48:82:c9:4e       |                          1
 7c:dd:90:57:9d:dc      |                          2

اما شاید پکتی ارسال شود که سوییچ نداند مقصد کجاست، آن موقع تکلیف چیست؟ در این موارد سوییچ پکت را بین تمام نود های شبکه پخش می کند ( Broadcast ). 💥مثلا به پکت زیر نگاه کنید :

Source Address (MAC) => 10:bf:48:82:c9:4e 
Destination Address (MAC) => 7c:dd:90:57:9d:dc

سوییچ این پکت را دریافت می کند و به این شکل ارسال می کند:

Source Address (MAC) => 10:bf:48:82:c9:4e 
Destination Address (MAC) => FF:FF:FF:FF:FF:FF

البته راه هایی برای شنود اینگونه شبکه ها وجود دارد، مثلا هکر خود را به جای DHCP جا می زند یا آنقدر درخواست با MAC ادرس های مختلف می فرستد تا جدول پر شود، در این هنگام سوییچ مانند هاب عمل می کند و پکت را به همه می فرستد. 👨‍💻 مزایا Switch نسبت به Hub : ✅ سرعت بالا تر ( تا ۱۰ گیگابیت بر ثانیه ) ✅ ترافیک کمتر نسبت به هاب ✅ کالیژن (‌ Collision ) کمتر #Network Channel • @Cafe_Of_Code Group • @IRdeveloperchat

امروز ۱۳ تیرماه ، روز ملی دماونده.❤️‍🔥

👾 هاب چیست؟ هاب به وسیله ای در شبکه گفته می شود که برای متصل کردن چند گره ( Node ) یا رایانه به هم استفاده می شود. هاب ها دیگر در شبکه های امروزی استفاده نمی شوند چرا که معایب زیادی از نظر امنیتی و از نظر پرفورمنس داشتند. هاب ها هنگامی که یک پکت به آنها می رسد، آن پکت را به تمام رایانه های متصل به خود ارسال می کند و رایانه مقصد آن پکت را دریافت می کند و سایر دستگاه ها آن را Drop می کنند. این موضوع مشکلات زیادی را به وجود می آورد. مثلا اگر پکت را کامپیوتر A برای کامپیوتر D ارسال کند، این پکت را کامپیوتر های B و C نیز می بینند که این موضوع از نظر امنیتی بسیار بد است همچنین ترافیک بسیار زیادی هم ایجاد می کند. این موضوع می تواند تصادف پکت ها را هم ایجاد کند، فرض کنید کامپیوتر A و B هم زمان یک پکت را ارسال کنند، این موضوع باعث می شود تا بین پکت ها Collision ایجاد شود و از بین بروند. سرعت هاب ها بین ۱۰ مگابیت تا ۱۰۰ مگابیت خواهد بود و این مقدار به ندرت به بالاترین حد خود می رسد. پست های مرتبط روز های آینده #Network Channel • @Cafe_Of_Code Group • @IRdeveloperchat

GoodNight😔 . . #Music Channel • @Cafe_Of_Code Group • @IRdeveloperchat

🔴امروز 1 July ، روز جهانی جوک گفتن . +شمام تو کامنتا جوک بگید

👾 کنترل تگ های HTML با جاوا اسکریپت: برای ساخت صفحات پویا یا Dynamic باید از زبان های فرانت اند مانند جاوا اسکریپت استفاده کنید. صفحات پویا صفحاتی هستند که محتوای آن ها با انتخاب های کاربر نغییر می کند. به عنوان مثال ما می خواهیم صفحه ای بسازیم که به کاربر سلام کند؛‌ برای این کار باید یک ورودی نام برای کاربر بسازیم.

<input type="text" placeholder="Name" name="text" class="input" , id="userName">

در اینجا ما یک ورودی با آیدی userName ساختیم که کاربر نام خود را وارد می کند. سپس باید مقدار دریافت شده را با Hello جمع کنیم و در یک تگ دیگر نمایش دهیم. برای اینکار ابتدا یک تگ نتیجه (‌ Result ) میسازیم و به آن آیدی lblResult را اختصاص می دهیم.

<h2 id="lblResult"></h2>

تقریبا همه چیز آماده است اکنون یک تابع برای ساخت پیام سلام می سازیم و مقدار ها را در آن دریافت می کنیم:

 function sayHello()

{
    var result = document.getElementById("lblResult");
    var userName = document.getElementById("userName").value;
    return "Hello" + userName + ", Welcome.";
}

حالا باید دکمه نمایش نتیجه را بسازیم و به آن یک رویداد (‌ Event ) اختصاص بدهیم تا هنگامی که کاربر کلیک کرد نتیجه در تگ lblResult نمایش داده شود.

 <button type="button" onclick="sayHello()">Say Hello</button>

اکنون این صفحه آماده است. کاربر پس از وارد کردن نام خود شاهد پیام زیر خواهد بود: Hello name , Welcome. برای دریافت سورس به قسمت کامنت های پست سر بزنید. #JavaScript Channel • @Cafe_Of_Code Group • @IRdeveloperchat

🔥Css Transform Scale 🔥 ⚡️در CSS، Transform این امکان را فراهم می‌کند که عناصر HTML را تغییر اندازه دهیم. برای این کار می‌توان از پراپرتی transform: scale() استفاده کرد. این پراپرتی اندازه اولیه عنصر را تغییر داده و آن را بزرگتر یا کوچکتر می‌کند. استفاده از scale(): - برای تغییر همه ابعاد از scale() استفاده می‌شود. برای مثال transform: scale(2); عرض، ارتفاع و عمق عنصر را دو برابر می‌کند. - برای تغییر اندازه در جهت افقی یا عمودی می‌توان از scaleX() و scaleY() استفاده کرد. به عنوان مثال transform: scaleX(2); اندازه عرض عنصر را دو برابر می‌کند و transform: scaleY(0.5); ارتفاع عنصر را به نصف کاهش می‌دهد.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scale Example</title>
<style>
    .scaled {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        transform-origin: 50% 50%;
    }

    .scaled:hover {
        transform: scale(1.5); /* تغییر همه ابعاد */
    }

    .scale-x {
        transform: scaleX(2); /* افزایش عرض دو برابر */
    }

    .scale-y {
        transform: scaleY(0.5); /* کاهش ارتفاع به نصف */
    }

</style>
</head>
<body>

<div class="scaled">Hover to scale</div>
<div class="scaled scale-x">ScaleX</div>
<div class="scaled scale-y">ScaleY</div>

</body>
</html>

در این مثال، با هاور کردن روی عنصر اول (.scaled)، اندازه آن با ضریب 1.5 افزایش می‌یابد. عناصر دوم و سوم نیز با استفاده از کلاس‌های scale-x و scale-y به ترتیب عرض و ارتفاع را تغییر می‌دهند. #css #transform #scale #Ah_sear Channel° @Cafe_Of_Code Group° @Irdeveloperchat