💡HTML

📍 تأثیر "button" داخل "form" → اگر برای یک "button" مقدار "type" مشخص نکنید، مرورگر به‌صورت پیش‌فرض اون رو "submit" در نظر می‌گیره

📍 مشکل رایج → اگر دکمه فقط برای اجرای یک عملیات JavaScript باشه، ممکنه با کلیک روی اون فرم ناخواسته Submit بشه

📍 راه‌حل ساده → برای دکمه‌هایی که قرار نیست فرم رو ارسال کنن، "type="button"" قرار بدید:

<button type="button">

  باز کردن منو

</button>

🔹 دکمه ارسال فرم → برای ارسال اطلاعات فرم، از "type="submit"" استفاده کنید:

<button type="submit">

  ارسال فرم

</button>

📌 مشخص کردن "type" برای "button" جلوی رفتارهای ناخواسته در فرم‌ها رو می‌گیره

🔗 https://t.me/codetrailWeb

⌨ میانبر کاربردی و حرفه‌ای ویندوز

از مهم ترین کلید های میانبر Windows 👇

🔹 "Win + E" → باز کردن File Explorer

🔹 "Win + R" → باز کردن Run

🔹 "Win + I" → باز کردن Settings

🔹 "Win + S" → باز کردن Search

🔹 "Win + V" → باز کردن Clipboard

🔹 "Win + L" → قفل کردن سیستم

🔹 "Win + D" → نمایش یا مخفی کردن Desktop

🔹 "Win + Tab" → باز کردن Task View

🔹 "Alt + Tab" → جابه‌جایی بین پنجره‌ها

🔹 "Alt + F4" → بستن پنجره فعال

🔹 "Ctrl + Shift + Esc" → باز کردن Task Manager

🔹 "Win + Shift + S" → گرفتن Screenshot از بخشی از صفحه

🔹 "Win + PrtScn" → گرفتن Screenshot از کل صفحه

🔹 "Win + Ctrl + D" → ساخت Desktop مجازی جدید

🔹 "Win + Ctrl + ← / →" → جابه‌جایی بین Desktopهای مجازی

🔹 "Win + Ctrl + F4" → بستن Desktop مجازی

🔹 "Win + ← / →" → قرار دادن پنجره در نیمه صفحه

🔹 "Win + ↑ / ↓" → بیشینه یا کمینه کردن پنجره

🔹 "Win + Z" → نمایش Snap Layouts

🔹 "Win + Space" → تغییر زبان کیبورد

🔹 "Win + ." → باز کردن Emoji و Symbolها

🔹 "Win + P" → تغییر حالت نمایشگر

🔹 "Win + K" → اتصال به دستگاه بی‌سیم

🔹 "Win + A" → باز کردن Quick Settings

🔹 "Win + N" → باز کردن Notifications

🔹 "Win + X" → باز کردن منوی مدیریتی ویندوز

🔹 "Win + H" → فعال کردن Voice Typing

🔹 "Win + T" → جابه‌جایی بین برنامه‌های Taskbar

🔹 "Win + M" → Minimize کردن همه پنجره‌ها

🔹 "Win + Shift + M" → بازگرداندن پنجره‌های Minimize شده

🔹 "Win + Home" → Minimize کردن همه پنجره‌ها به‌جز پنجره فعال

🔹 "Win + Shift + ↑" → کشیدن پنجره تا بالا و پایین صفحه

🔹 "Win + Shift + ← / →" → انتقال پنجره به مانیتور دیگر

🔹 "Alt + Space" → باز کردن منوی پنجره فعال

🔹 "F2" → تغییر نام فایل یا پوشه

🔹 "F5" → Refresh کردن صفحه یا پنجره

🔹 "Shift + F10" → باز کردن Context Menu

🔹 "Ctrl + Shift + N" → ساخت پوشه جدید در File Explorer

🔹 "Alt + Enter" → نمایش Properties فایل یا پوشه

🔹 "Ctrl + Shift + Esc" → دسترسی سریع به Task Manager

🔹 "Ctrl + Shift + T" → بازگرداندن آخرین تب بسته‌شده در مرورگر

🔹 "Ctrl + L" → رفتن مستقیم به Address Bar مرورگر

📌 این پست رو برای خودت ذخیره کن و برای دوستات هم فوروارد کن🚀
🔗 https://t.me/codetrailWeb

بالاخره پیج اینستاگرام CodeTrail هم راه‌اندازی شد✨

اونجا هم قراره یه سری محتواهای متفاوت و جذاب منتشر کنم💻

📌 اگه دوست داشتید، خوشحال میشم در اینستاگرام هم همراهم باشید 🌱

🔗 https://www.instagram.com/helali.dev?igsi=MTB6YWVsenY1NDh0eA==

⚛️ نکته کاربردی React

⭕️ مشکل State

وقتی چند بار پشت‌سرهم به state قبلی وابسته هستید، استفاده مستقیم از مقدار state ممکنه نتیجه‌ای غیرمنتظره بده

📌 برای این حالت از Functional Update استفاده کنید:

setCount(prev => prev + 1);

مثلاً برای سه بار افزایش:

setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);

📌 این روش باعث میشه هر آپدیت، مقدار به‌روز قبلی رو دریافت کنه👌

🔗 https://t.me/codetrailWeb

💡 جواب چالش JavaScript 👆

⬅️ جواب false هست چون در JavaScript، Objectها و Arrayها با Reference مقایسه میشن، نه با محتوای داخلشون

⬅️ در این کد:

[] == []

هر [] یک Array جدید می‌سازه
یعنی هر کدوم به یک Object متفاوت در حافظه اشاره می‌کنن

⬅️ برای درک بهتر، این مثال رو ببینید:

const a = [];
const b = [];

console.log(a == b); // false
console.log(a === b); // false

⬅️حتی اگر محتویات کاملاً یکسان باشن، باز هم نتیجه false میشه:

const a = [1, 2, 3];
const b = [1, 2, 3];

console.log(a === b); // false

⬅️ اما اگر هر دو متغیر به یک Array اشاره کنن، نتیجه "true" میشه:

const a = [1, 2, 3];
const b = a;

console.log(a === b); // true

⬅️ دلیلش اینه که اینجا "a" و "b" به یک Reference اشاره می‌کنن

📌 پس یادتون باشه: برای Objectها و Arrayها، یکسان بودن محتوا به معنی یکسان بودن Reference نیست

💡JavaScript

چرا وقتی این کد رو اجرا می‌کنیم، ترتیب اعداد درست درنمیاد؟ 🤔

const numbers = [1, 10, 2, 20, 3];

numbers.sort();

console.log(numbers);

نتیجه: → "[1, 10, 2, 20, 3]"

📍 دلیلش: → متد ()sort به‌صورت پیش‌فرض اعداد رو به شکل String در نظر می‌گیره و بعد اون‌ها رو مقایسه میکنه

یعنی مثلاً "10" از نظر مقایسه‌ی متنی قبل از "2" قرار می‌گیره، چون مقایسه از اولین کاراکتر شروع میشه

📍 راه‌حل: اگر می‌خوایم اعداد رو واقعاً به صورت عددی مرتب کنیم، باید روش مقایسه رو به ()sort بدیم:

numbers.sort((a, b) => a - b);
console.log(numbers);
// [1, 2, 3, 10, 20]

📌 پس هر وقت خواستی یک آرایه از اعداد رو مرتب کنی، حواست باشه()sort به‌تنهایی ممکنه نتیجه‌ای که انتظار داری رو بهت نده

⭕️ اینو ذخیره کن، یه وقت وسط پروژه به کارت میاد👀

🔗https://t.me/codetrailWeb

📍 یه قابلیت جالب JavaScript

می‌دونستی به‌جای اینکه آرایه‌ای از Objectها رو با ()console.log ببینی، می‌تونی خیلی تمیز به شکل جدول نمایش‌شون بدی؟

const users = [
  { name: "Ali", age: 22 },
  { name: "Sara", age: 25 },
  { name: "Reza", age: 20 }
];

console.table(users);

⬅️ نتیجه: اطلاعات داخل Console به شکل یک جدول مرتب نمایش داده میشه

⬅️ این قابلیت موقع Debug کردن داده‌های API خیلی به درد می‌خوره، مخصوصاً وقتی تعداد Objectها زیاده

📌 اینو ذخیره کن، دفعه بعد که خواستی Object رو بررسی کنی، از ()console.table استفاده کن👌

⚡ چند ترفند کاربردی Emmet در VS Code

اگر با HTML و CSS کار می‌کنی، ابزار Emmet می‌تونه کلی تایپ اضافه رو برات حذف کنه
چندتا از کاربردی‌ترین‌ها 👇

🔹 ساخت سریع ساختار HTML:

با نوشتن ! می‌تونی ساختار اولیه‌ی یک فایل HTML رو سریع ایجاد کنی

🔹 ساخت عنصر با کلاس:
با نوشتن div.container می‌تونی یک div با کلاس container بسازی

🔹 ساخت عنصر با شناسه:
با نوشتن #header می‌تونی یک div با شناسه‌ی header ایجاد کنی

🔹 ساخت چند عنصر مشابه:
با نوشتن ul>li*5 می‌تونی یک لیست شامل ۵ عنصر li بسازی

🔹 ساخت عناصر تو‌در‌تو:
با نوشتن div>h2+p می‌تونی یک div بسازی که داخلش h2 و p قرار داشته باشن

🔹 ترکیب کلاس و عناصر تو‌در‌تو:
با نوشتن div.box>p.text می‌تونی عناصر تو‌در‌تو همراه با کلاس‌های موردنظر بسازی

🔹 ساخت سریع منو:
با نوشتن nav>ul>li*4>a می‌تونی ساختار اولیه‌ی یک منوی چهارگزینه‌ای رو ایجاد کنی

🔹 شماره‌گذاری خودکار کلاس‌ها:
با نوشتن div.item$*5 می‌تونی پنج عنصر با کلاس‌های item1 تا item5 بسازی

🔹 ساخت متن آزمایشی:
با نوشتن lorem10 می‌تونی به‌صورت خودکار ۱۰ کلمه متن آزمایشی ایجاد کنی

🔹 ساخت ورودی متنی:
با نوشتن input:text می‌تونی یک ورودی از نوع متن ایجاد کنی

🔹 ساخت ورودی ایمیل:
با نوشتن input:email می‌تونی یک ورودی مخصوص ایمیل بسازی

🔹 ساخت لینک با ویژگی:
با نوشتن a[href="#"] می‌تونی یک لینک همراه با ویژگی href ایجاد کنی

🔹 ساخت تصویر با ویژگی‌ها:
با نوشتن img[src="image.jpg"][alt="تصویر"] می‌تونی یک تصویر همراه با src و alt بسازی

🔹 ساخت چند عنصر تو‌در‌تو:
با نوشتن div.container>div.item*3 می‌تونی یک ساختار شامل سه عنصر مشابه ایجاد کنی

📌 این پست رو ذخیره کن
موقع کدنویسی HTML کلی تایپ اضافه رو ازت می‌گیره⌨

📚 یک منبع مفید برای یادگیری JavaScript
اگر در حال یادگیری یا کار با JavaScript هستید، JavaScript.info می‌تونه یکی از منابع کاربردی برای یادگیری و مرور مطالب باشه
مطالب سایت از مباحث پایه شروع میشن و به موضوعات پیشرفته‌تری مثل Closure، Promise، async/await، Prototype و Event Loop می‌رسن
بخش‌هایی برای کار با DOM، رویدادها و APIهای مرورگر هم در سایت وجود داره
📌 یکی از نکات خوب این سایت، وجود نسخه فارسی مطالب هست که مطالعه بعضی مباحث رو راحت‌تر می‌کنه
🔗 javascript.info

این سایت رو ذخیره داشته باشید برای مرور یک مبحث یا پیدا کردن توضیح یک موضوع خاص، می‌تونه منبع مفیدی باشه

📅 چند متد کاربردی Date در JavaScript

کار با تاریخ توی JavaScript اولش یه کم گیج‌کننده به نظر میاد ولی چندتا متد هست که خیلی جاها واقعاً به کارت میاد 👇

🔹 "getTime()"
زمان رو به صورت تعداد میلی‌ثانیه از تاریخ ۱ ژانویه ۱۹۷۰ برمی‌گردونه
برای مقایسه تاریخ‌ها و محاسبه فاصله بین دو تاریخ خیلی کاربردیه

🔹 "toISOString()"
تاریخ رو به فرمت استاندارد ISO تبدیل می‌کنه
مخصوصاً وقتی با API کار می‌کنی خیلی به درد می‌خوره

🔹 "toLocaleDateString()"
تاریخ رو بر اساس زبان و منطقه کاربر نمایش میده
برای نمایش تاریخ به شکل قابل فهم برای کاربر گزینه خوبیه

🔹 "getDay()"
شماره روز هفته رو برمی‌گردونه
عدد "0" یعنی یکشنبه و عدد "6" یعنی شنبه

🔹 "getMonth()"
شماره ماه رو برمی‌گردونه ولی حواست باشه شمارش ماه‌ها از "0" شروع میشه
یعنی "0" برای ژانویه و "11" برای دسامبره

🔹 "setDate()"
روز ماه رو تغییر میده
جالب اینجاست که اگر عددی بیشتر از تعداد روزهای ماه بدی خودش وارد ماه بعد میشه

مثلاً 👇

const date = new Date()

date.setDate(35)

console.log(date)

اینجا JavaScript خودش تاریخ رو محاسبه می‌کنه و می‌بره داخل ماه بعد

📌 این متدها رو ذخیره کن چون موقع کار با تاریخ و API خیلی زود بهشون نیاز پیدا می‌کنی👌