سلام، به 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

💡 #Frontend Insight

یه نکته جالب که امروز یاد گرفتم...

مرورگر فقط فایل‌های JavaScript رو دانلود نمی‌کنه؛ بعد از دانلود، باید اون‌ها رو در سه مرحله پردازش کنه:

Download → Parse → Execute

جالب اینجاست که توی بعضی پروژه‌ها، زمان Parse و Execute حتی از زمان Download هم بیشتره!

📌 یعنی همیشه مشکل کند بودن سایت، سرعت اینترنت یا حجم فایل نیست؛ گاهی خود JavaScript زمان زیادی برای پردازش نیاز داره

📌 برای همین، حذف یک کتابخونه‌ی غیرضروری بعضی وقت‌ها تأثیر بیشتری روی سرعت سایت داره تا کم کردن چند کیلوبایت از حجم فایل

📌 به همین دلیله که توسعه‌دهنده‌های حرفه‌ای سعی می‌کنن Taskهای سنگین رو به بخش‌های کوچک‌تر تقسیم کنن یا اجرای اون‌ها رو به زمان مناسب موکول کنن

🔗 https://t.me/codetrailWeb

#Frontend #JavaScript #Performance #CodeTrail

💡 #Frontend Fact

این روزها خیلی‌ها میگن هوش مصنوعی قراره جای برنامه‌نویس‌های فرانت‌اند رو بگیره❗️

اما یه نکته جالب اینجاست...

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

📌 چیزی که یک Frontend Developer رو ارزشمند می‌کنه، فقط کدنویسی نیست؛ درک UI/UX، حل مسئله، تصمیم‌گیری و طراحی معماری پروژه‌ست

به همین دلیله که AI بیشتر شبیه یک دستیار قدرتمند عمل می‌کنه، نه جایگزین یک توسعه‌دهنده🚀

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

💡 #Frontend Fact

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

در واقع اول CSSOM (درخت CSS) رو می‌سازه، بعد اون رو با DOM ترکیب می‌کنه و چیزی به اسم Render Tree می‌سازه

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

📌 به همین دلیله که CSS هم می‌تونه Render Blocking باشه، نه فقط JavaScript

🔗https://t.me/codetrailWeb
#Frontend #Browser #Performance #CodeTrail

🌐 Website معرفی

#Frontend Mentor


اگر نمی‌دونی بعد از یاد گرفتن HTML، CSS و JavaScript چه پروژه‌ای بزنی، این سایت بهترین نقطه‌ی شروعه🚀
🔗https://www.frontendmentor.io

✔️ ده‌ها پروژه واقعی با طراحی آماده
✔️ از سطح مبتدی تا حرفه‌ای
✔️ امکان مقایسه راه‌حل خودت با بقیه برنامه‌نویس‌ها
✔️ مناسب برای ساخت Portfolio

📌 یکی از بهترین سایت‌ها برای تبدیل دانش تئوری به تجربه‌ی واقعی👩‍💻

#Frontend #Portfolio #CodeTrail

💡 #React Fact

در React، تغییر دادن مستقیم یک "state" می‌تونه باعث بشه UI اصلاً آپدیت نشه

مثلاً این کار اشتباهه:

const [user, setUser] = useState({
  name: "Fateme"
});

user.name = "Sara";

اینجا مقدار "name" تغییر کرده، اما React لزوماً متوجه این تغییر نمی‌شه

باید یک object جدید بسازی:

setUser({
  ...user,
  name: "Sara"
});

📌 دلیلش اینه که React برای تشخیص خیلی از تغییرات، به reference آبجکت‌ها توجه می‌کنه، نه اینکه تک‌تک propertyهای داخلشون رو بررسی کنه

یعنی برای React:
oldUser === newUser

اگر "true" باشه، ممکنه نتیجه بگیره که چیزی تغییر نکرده.

🤯 پس در React، گاهی حتی وقتی مقدار داخل یک Object رو تغییر دادی، React می‌گه: «من چیزی ندیدم.»

#React #JavaScript #Frontend #CodeTrail