سلام، به CodeTrail خوش اومدید. ☘️

این کانال با هدف ثبت مسیر یادگیری، اشتراک‌گذاری تجربه‌ها و انتشار نکات کاربردی در حوزه Front-End Development ایجاد شده.

اینجا هر چیزی که یاد می‌گیرم، پروژه‌هایی که انجام میدم و تجربه‌هایی که تو این مسیر کسب می‌کنم رو باهاتون به اشتراک می‌ذارم. 📚

امیدوارم این مسیر برای شما هم مفید و الهام‌بخش باشه. 🌱

💡 JavaScript Tip #1

در جاوااسکریپت، کپی کردن آبجکت‌ها همیشه اون چیزی نیست که فکر می‌کنیم! 🤔
مثلاً:

let user1 = {
  name: "Sara"
};

let user2 = user1;

user2.name = "Raha";

console.log(user1.name);

خروجی:
Sara
چرا؟
چون user1 و user2 به جای داشتن دو آبجکت جدا، هر دو به یک آبجکت در حافظه اشاره می‌کنند.

برای ساخت یک کپی واقعی می‌توانیم از روش‌هایی مثل

spread operator

استفاده کنیم:

let user2 = { ...user1 };

این موضوع در کار با React، مدیریت State و جلوگیری از باگ‌ها خیلی مهم است.

#JavaScript #CodeTrail

💡 CSS Tip #1
میدونستی فقط JavaScript نیست که می‌تونه از انتخاب شدن متن جلوگیری کنه؟
فقط با یک خط CSS می‌تونی انتخاب شدن متن رو غیرفعال کنی.

user-select: none;

مثال:

button {
  user-select: none;
}

حالا اگر کاربر چند بار روی دکمه کلیک کنه یا موس رو روی اون بکشه، متن دکمه انتخاب نمی‌شه.
📌 این ویژگی برای دکمه‌ها، آیکون‌ها و المان‌هایی که نباید متنشون انتخاب بشه خیلی کاربردیه.
#CSS #CodeTrail

💡 JavaScript Tip #2
فکر می‌کنی خروجی این کد چیه؟ 👀

console.log([] + [])

قبل از اینکه جواب رو ببینی، چند ثانیه بهش فکر کن...
👇
👇
👇
خروجی:

""

چون جاوااسکریپت قبل از استفاده از +، آرایه‌ها رو به رشته تبدیل می‌کنه:

String([]) // ""

و در نهایت:

"" + ""

📌 این یکی از مثال‌های جالب Type Coercion در JavaScript هست.

#JavaScript #CodeTrail
🔗https://t.me/codetrailWeb

📌خروجی پروژه امروز
کد این مینی پروژه در پست بعدی👇

💡 JavaScript Tip #3

در این پروژه با استفاده از OOP (Object-Oriented Programming) یک سیستم Modal قابل استفاده مجدد پیاده‌سازی شده است.

به جای نوشتن کد تکراری برای هر Modal، فقط کافی است یک Instance جدید از کلاس Modal بسازید.

✅ Reusable Code
✅ Clean Code
✅ Easy to Maintain

#JavaScript #OOP #CodeTrail

CSS Tip #2

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

Width : min ( 500px,90% );
} 

#CSS #CodeTrail

خروجی:
عرض عنصر هیچ‌وقت بیشتر از 500px نمی‌شود، اما در صفحه‌های کوچک تا 90% عرض صفحه کوچک می‌شود.

📌 به جای نوشتن:

max-width: 500px;

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

width: min(500px, 90%);

این یکی از قابلیت‌های کمتر شناخته‌شده‌ی توابع min() و max() در CSS است که کدها را کوتاه‌تر و خواناتر می‌کند.

#CSS #Frontend #CodeTrail

💡 #Frontend Fact

میدونستی همه تصاویر یک صفحه، همون لحظه که سایت باز می‌شه دانلود نمی‌شن؟ 🧐

بیشتر وب‌سایت‌های امروزی از قابلیتی به اسم Lazy Loading استفاده می‌کنند

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

📌 نتیجه؟

- سرعت بارگذاری اولیه سایت بیشتر می‌شه.
- مصرف اینترنت کاربر کمتر می‌شه.
- عملکرد سایت بهتر می‌شه.

به همین دلیله که گاهی وقتی سریع اسکرول می‌کنی، بعضی تصاویر با یک تأخیر کوتاه ظاهر می‌شن.

#Frontend
#LazyLoading
#CodeTrail

💡 #JavaScript OOP Fact Tip #4

میدونستی در JavaScript لازم نیست دو کلاس از یک والد ارث‌بری کنن تا Polymorphism داشته باشی؟

اگر چند آبجکت فقط متدی با اسم یکسان داشته باشن، می‌تونی با همه‌شون یکسان رفتار کنی

  speak() {
    console.log("Woof!");
  }
}

class Cat {
  speak() {
    console.log("Meow!");
  }
}

function makeSound(animal) {
  animal.speak();
}

makeSound(new Dog());
makeSound(new Cat());

خروجی 👇
Woof!
Meow!

📌 جاوااسکریپت به جای اینکه بپرسه «این آبجکت از چه کلاسی ساخته شده؟»، فقط می‌بینه آیا متد "speak()" رو داره یا نه

به این سبک، Duck Typing می‌گن.

#JavaScript #OOP #CodeTrail

#Frontend Fact

❓فکر می‌کنی این سه کد چه تفاوتی باهم دارن؟

display: none;
visibility: hidden;
opacity: 0;

✅ "display: none"
المان کاملاً از صفحه حذف می‌شه انگار هیچ‌وقت وجود نداشته

✅ "visibility: hidden"
المان دیده نمی‌شه، اما جای خودش رو توی صفحه حفظ می‌کنه

✅ "opacity: 0"
المان نامرئیه، ولی هنوز وجود داره و حتی می‌تونه رویدادهایی مثل "click" رو دریافت کنه

💡 این تفاوت‌های کوچک، توی طراحی رابط کاربری و رفع باگ‌ها می‌تونن خیلی مهم باشن✔️

#CSS #Frontend #CodeTrail
🔗https://t.me/codetrailWeb