💡 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

🌐 Website معرفی

⭕️ Bundlephobia

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

فقط اسم پکیج رو وارد کن تا ببینی:

📦 حجم واقعی پکیج
⚡ حجم بعد از Gzip
📊 تعداد وابستگی‌ها
⏱️ زمان تقریبی دانلود

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

🔗https://bundlephobia.com

#JavaScript #Performance #CodeTrail

به همه دوستان جدیدمون خوش اومد میگم 🌱👩🏻‍💻

ممنون از دوستمون بابت حمایت و معرفی کانال✨

اینجا قراره مسیر یادگیری فرانت‌اند، تجربه‌ها، چیزهایی که یاد می‌گیرم و پروژه‌هایی که می‌سازم رو با هم به اشتراک بذاریم👩‍💻

اگر شما هم کانال برنامه‌نویسی یا تکنولوژی دارید، لینک کانالتون رو توی دایرکت کانال بفرستید تا من هم وارد کانالتون بشم✨

خوشحالم که جمعمون داره بزرگ‌تر میشه 🌱

🧠 چالش JavaScript

به نظرتون خروجی این کد چی میشه؟

const a = [1, 2, 3];
const b = a.map(Number);

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

خروجی هر سه "console.log" رو حدس بزنید❓

جواب‌هاتون رو میتونین توی کامنت بنویسید👇

✅ جواب چالش JavaScript#

اگر حدستون این بود:
[1, 2, 3]
false
false
درست حدس زدید! 🎯

اما چرا؟ 🤔

const b = a.map(Number);

چون map یک آرایه جدید ایجاد میکنه
بنابراین a و b با اینکه دقیقا محتویات یکسانی دارن، اما دو آرایه متفاوت هستن
پس:
b == a // false
b === a // false

چون آرایه‌ها در JavaScript با Reference مقایسه میشن، نه با محتویاتشون
برای مثال:

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

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

اینجا "b" و "a" به همون آرایه اشاره می‌کنن، پس نتیجه "true" میشه

📌 نکته مهم:
[1, 2, 3] === [1, 2, 3] // false

حتی اگر محتویات دو آرایه کاملاً یکسان باشه، چون دو Reference متفاوت دارن، نتیجه "false" خواهد بود.

#JavaScript #JS #Frontend #Programming

تا حالا به این فکر کردی که JavaScript چطور با وجود Dynamic بودن، می‌تونه این‌قدر سریع اجرا بشه؟🤔

پشت این سرعت، فقط خود JavaScript نیست؛ V8 Engine نقش مهمی داره

توی این پست یه نگاه کوتاه به کاری که V8 و JIT Compilation انجام میدن انداختیم👆


🔗https://t.me/codetrailWeb

#JavaScript #Performance #CodeTrail

💡 #Frontend Insight

یکی از قابلیت‌های کمتر شناخته‌شده‌ی CSS
قابلیت content-visibility هست

.card {
  content-visibility: auto;
}

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

📌 نتیجه؟
در صفحات طولانی و لیست‌های بزرگ، مقدار کاری که مرورگر برای Rendering انجام می‌ده می‌تونه کمتر بشه

گاهی برای بهبود Performance لازم نیست سراغ JavaScript یا یک کتابخونه جدید بریم
خود CSS هم ابزارهای جالبی برای کمک به مرورگر داره

#Frontend #CSS #Performance #CodeTrail

💻 VS Code Extensions | Frontend

بعضی از مهم ترین Extension های Vscode 👇

🔹 Error Lens
نمایش Error و Warning کنار همان خط کد

🔹 Import Cost
نمایش حجم تقریبی پکیج‌ها کنار import

🔹 GitLens
نمایش جزئیات تغییرات Git و اینکه چه کسی هر خط را تغییر داده

🔹 Tailwind CSS IntelliSense
پیشنهاد و تکمیل کلاس‌های Tailwind

🔹 ES7+ React/Redux Snippets
نوشتن سریع‌تر Componentها و کدهای رایج React

🔹 Pretty TypeScript Errors
خواناتر کردن Errorهای پیچیده TypeScript

🔹 Path Intellisense
پیشنهاد خودکار مسیر فایل‌ها هنگام Import

🔹 Auto Rename Tag
با تغییر تگ باز، تگ بسته هم خودکار تغییر می‌کنه

#VSCode #Frontend #Extensions #CodeTrail

💡 Frontend Insight

مهم‌ترین مهارت یک Front-End Developer فقط بلد بودن JavaScript و بقیه زبان های برنامه نویسی مرتبط نیست❗️

بلکه توانایی حل مسئله‌ست 🧠

ممکنه امروز با مشکلی روبه‌رو بشی که هیچ‌وقت قبلاً ندیدی

اونجا چیزی که نجاتت می‌ده حفظ کردن کدها نیست

اینکه بتونی:

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

📌 تکنولوژی‌ها مدام تغییر می‌کنن، اما توانایی حل مسئله همیشه باهات می‌مونه

#Frontend #CodeTrail

📉 بیاید از روتین یادگیری‌مون بگیم 👀

کنجکاوم بدونم شما چطور برای یادگیری برنامه‌نویسی پیش می‌رید؟

⏱️ روزی چند ساعت مطالعه و تمرین می‌کنید؟
💻 بیشتر وقتتون صرف یادگیری می‌شه یا پروژه؟
📝 برنامه مشخص دارید یا روزبه‌روز پیش می‌رید؟

توی کامنت‌ها از روتینتون بگید، شاید از تجربه‌های هم چیزای خوبی یاد گرفتیم🌱

از مهم ترین دستورات Git که حتما باید یاد داشته باشید👌

📍شروع پروژه
git init

📍وضعیت فایل‌ها
git status

📍اضافه کردن فایل‌ها
git add .

📍ثبت تغییرات
git commit -m "message"

📍فرستادن تغییرات به GitHub
git push

📍دریافت تغییرات
git pull

📍دریافت یک Repository
git clone <repository-url>

📍ساخت Branch
git branch <branch-name>

📍جابه‌جایی بین Branchها
git switch <branch-name>

📍ساخت و ورود همزمان به Branch
git switch -c <branch-name>

📍دیدن Branchها
git branch

📍ادغام Branch
git merge <branch-name>

📍دیدن تاریخچه Commitها
git log

📍دیدن تغییرات
git diff

📍برگرداندن فایل به آخرین Commit
git restore <file>