🐸 یک نکته برای برنامه‌نویس‌ها

در کتاب قورباغه‌ات را قورت بده، یکی از ایده‌های اصلی اینه که سخت‌ترین و مهم‌ترین کار رو اول انجام بدی✅

این موضوع توی برنامه‌نویسی هم خیلی کاربردیه
اگر امروز قرار باشه JavaScript بخونی، پروژه تمرین کنی، Git یاد بگیری و چند ساعت هم آموزش ببینی، ممکنه آخر روز هیچ‌کدوم رو درست انجام نداده باشی

📌 بهتره اول مهم‌ترین کاری رو که بیشترین تأثیر رو روی پیشرفتت داره مشخص کنی و همون رو انجام بدی👌

مثلاً اگر هدفت یادگیری Javascript هست ، قبل از اینکه چند ساعت بین آموزش‌ها و ویدئوهای مختلف بچرخی، یک بخش مشخص از JavaScript رو انتخاب کن و همون روز عمیق یادش بگیر و باهاش تمرین کن

🎯 پیشرفت همیشه از انجام کارهای زیاد نمیاد، گاهی از انجام دادن مهم‌ترین کار در زمان درست میاد👌

🔗 https://t.me/codetrailWeb

🌐 پشت صحنه باز شدن یک سایت

وقتی آدرس یک سایت رو وارد می‌کنیم و Enter می‌زنیم، مرورگر فقط صفحه رو باز نمی‌کنه

⚪️ ابتدا DNS
ابتدا مرورگر باید بفهمه دامنه به کدوم آدرس IP مربوطه
در این مرحله، سیستم DNS نام دامنه رو به آدرس IP تبدیل می‌کنه

⚪️ بعد اتصال به سرور
سپس مرورگر با استفاده از آدرس IP با سرور ارتباط برقرار می‌کنه

⚪️ بعد ارسال درخواست
در ادامه، مرورگر یک درخواست HTTP یا HTTPS برای سرور ارسال می‌کنه

⚪️ بعد دریافت پاسخ
سپس سرور درخواست رو پردازش می‌کنه و پاسخ مناسب رو برای مرورگر می‌فرسته

🔹 در نهایت نمایش صفحه
بعد از دریافت فایل‌هایی مثل HTML، CSS و JavaScript، مرورگر اون‌ها رو پردازش می‌کنه و صفحه رو روی نمایشگر می‌سازه

📌 مسیر کلی
دامنه → DNS → آدرس IP → سرور → درخواست HTTP → پاسخ سرور → پردازش مرورگر → نمایش صفحه

📌 نکته جالب
چیزی که برای ما فقط چند ثانیه طول می‌کشه، در واقع نتیجه همکاری چندین بخش مختلف از شبکه و مرورگره

🔗 https://t.me/codetrailWeb

اسم تخصصی نمادهای برنامه‌نویسی⌨
.
.
.

.
.
خیلی از علامت‌هایی که هر روز توی کد استفاده می‌کنیم، اسم تخصصی دارن و دونستن اسمشون برای سرچ کردن و خوندن مستندات خیلی کاربردیه👌

`  → Backtick / Grave Accent

'  → Single Quote / Apostrophe

"  → Double Quote

;  → Semicolon

:  → Colon

,  → Comma

.  → Dot / Period

... → Spread / Rest Operator

() → Parentheses / Round Brackets

[] → Square Brackets / Brackets

{} → Curly Braces / Braces

<> → Angle Brackets

=  → Assignment Operator

== → Equality Operator

=== → Strict Equality Operator

!= → Inequality Operator

!== → Strict Inequality Operator

=> → Arrow Function / Arrow Operator

+  → Plus Operator

-  → Minus Operator

*  → Multiplication Operator

/  → Division Operator

%  → Modulo Operator

++ → Increment Operator

-- → Decrement Operator

&& → Logical AND Operator

|| → Logical OR Operator

!  → Logical NOT Operator

?? → Nullish Coalescing Operator

?. → Optional Chaining Operator

?  → Ternary Operator

&  → Bitwise AND Operator

|  → Bitwise OR Operator

^  → Bitwise XOR Operator

~  → Bitwise NOT Operator

<< → Left Shift Operator

>> → Right Shift Operator

#  → Hash / Private Class Field

_  → Underscore

@  → At Sign

$  → Dollar Sign

\  → Backslash

/  → Forward Slash

// → Single-line Comment

/* */ → Multi-line Comment



📌 نکته: اسم دقیق بعضی نمادها با توجه به زبان برنامه‌نویسی و کاربردشون می‌تونه متفاوت باشه

⭕️ این پست رو برای هر برنامه‌نویسی که میشناسی بفرست تا یاد بگیرن⚡️

🔗 https://t.me/codetrailWeb

💡 رویدادها یکی از مهم‌ترین بخش‌های JavaScript برای واکنش به اتفاقاتی هستن که هنگام تعامل کاربر یا اجرای صفحه رخ میدن

برخی از رویداد های مهم👇

🔹 "animationstart" → شروع انیمیشن
🔹 "animationend" → پایان انیمیشن
🔹 "animationiteration" → پایان هر دور از انیمیشن

🔹 "transitionstart" → شروع Transition
🔹 "transitionend" → پایان Transition
🔹 "transitioncancel" → لغو شدن Transition

🔹 "online" → اتصال دوباره مرورگر به اینترنت
🔹 "offline" → قطع شدن اتصال مرورگر از اینترنت


🔹 "load" → کامل شدن بارگذاری یک منبع یا صفحه

🔹 "copy" → کپی کردن محتوا
🔹 "cut" → بریدن محتوا
🔹 "paste" → چسباندن محتوا


🔹 "dragstart" → شروع کشیدن عنصر
🔹 "drag" → در حال کشیده شدن عنصر
🔹 "dragend" → پایان کشیدن عنصر
🔹 "dragover" → قرار گرفتن عنصر کشیده‌شده روی مقصد
🔹 "drop" → رها کردن عنصر روی مقصد


🔹 "contextmenu" → باز شدن منوی راست‌کلیک

🔹 DOMContentLoaded →
زمانی که ساختار اچ‌تی‌ام‌ال صفحه کاملاً ساخته و پردازش می‌شود، بدون اینکه منتظر بارگذاری تصاویر و منابع دیگر بماند

🔹 beforeunload → درست پیش از خروج کاربر از صفحه یا بارگذاری دوباره اجرا می‌شود

🔹 visibilitychange → زمانی که وضعیت دیده شدن صفحه تغییر می‌کند؛ برای مثال وقتی کاربر از برگه صفحه خارج می‌شود

🔹 popstate → زمانی که وضعیت تاریخچه مرورگر با رفتن به صفحه قبلی یا بعدی تغییر می‌کند

🔹 storage → زمانی که داده‌های ذخیره‌شده در حافظه محلی یا حافظه نشست، در یک برگه یا پنجره دیگر تغییر می‌کنند

🔹 beforeinput → درست قبل از اینکه تغییر جدید روی مقدار یک ورودی اعمال بشه

🔹 pointerdown → شروع تعامل با ماوس، لمس یا قلم روی یک عنصر

🔹 pointerup → پایان فشار ماوس، لمس یا قلم

🔹 pointermove → حرکت نشانگر، لمس یا قلم روی صفحه

🔗 https://t.me/codetrailWeb

💡 متدهای کاربردی Array در JavaScript

آرایه‌ها یکی از پرکاربردترین ساختارها در JavaScript هستن و شناخت متدهای مختلفشون می‌تونه خیلی از کارها رو ساده‌تر کنه

برخی از متدهای مهم 👇

🔹 "find()" → پیدا کردن اولین مقدار مطابق شرط

🔹 "findIndex()" → پیدا کردن موقعیت اولین مقدار مطابق شرط

🔹 "some()" → بررسی وجود حداقل یک مقدار مطابق شرط

🔹 "every()" → بررسی اینکه همه مقادیر شرط رو رعایت می‌کنن

🔹 "findLast()" → پیدا کردن اولین مقدار مطابق شرط از انتهای آرایه

🔹 "findLastIndex()" → پیدا کردن موقعیت اولین مقدار مطابق شرط از انتهای آرایه

🔹 "toReversed()" → ایجاد آرایه جدید به صورت معکوس، بدون تغییر آرایه اصلی

🔹 "toSorted()" → مرتب‌سازی و ایجاد آرایه جدید، بدون تغییر آرایه اصلی

🔹 "toSpliced()" → ایجاد آرایه جدید بعد از تغییر بخشی از آرایه، بدون تغییر آرایه اصلی

🔹 "flat()" → تخت کردن آرایه‌های تو در تو

🔹 "flatMap()" → اجرای "map()" و سپس تخت کردن نتیجه

🔹 "reduce()" → تبدیل عناصر آرایه به یک مقدار نهایی

🔹 "includes()" → بررسی وجود یک مقدار مشخص در آرایه

🔹 "keys()" → ایجاد Iterator برای پیمایش Indexهای آرایه

🔹 "values()" → ایجاد Iterator برای پیمایش مقادیر آرایه

🔹 "entries()" → ایجاد Iterator شامل Index و مقدار هر عنصر


📌 این پست رو ذخیره یا فوروارد کنید، ممکنه موقع کدنویسی به کارتون بیاد❕

🔗 https://t.me/codetrailWeb

💡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 خیلی زود بهشون نیاز پیدا می‌کنی👌