CodeTrail🚀

💡 یک نکته برای مسیر یادگیری

وقتی یک پروژه رو از روی آموزش می‌سازید، سعی کنید بعد از تمام شدن آموزش پروژه رو همونجا رها نکنید

چند قابلیت جدید بهش اضافه کنید که مدرس آموزش نداده

مثلاً من توی پروژه Mini Store بعد از دیدن آموزش، قابلیت‌هایی مثل:

🔹 جست‌وجوی محصولات
🔹 مرتب‌سازی بر اساس قیمت
🔹 دریافت اطلاعات با Fetch
🔹 نمایش جزئیات محصول در Modal
🔹 نمایش ۴ محصول جدید با هر بار کلیک روی «محصولات بیشتر»
🔹 ذخیره تم دارک و لایت در LocalStorage

رو خودم به پروژه اضافه کردم

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

این قابلیت رو چطور پیاده کنم؟

همین‌جا یادگیری واقعی‌تر شروع می‌شه⚡️

چون ممکنه هنگام اضافه کردن یک قابلیت مجبور بشید مستندات بخونید، سرچ کنید، خطاها رو بررسی کنید و چند راه مختلف رو امتحان کنید📃

📌به نظرم پروژه آموزشی زمانی واقعاً ارزشمند می‌شه که بعد از تموم شدن آموزش دیگه دقیقاً ندونید قدم بعدی چیه و مجبور بشید خودتون تصمیم بگیرید👌

💻 Source Code :
https://github.com/Helali-Dev/Mini-Store-Js

#JavaScript #Frontend

💡 JavaScript Insight

پشت صحنه اجرای JavaScript چه اتفاقی می‌افته؟ 🤔

برای فهمیدن این موضوع، باید با چند مفهوم مهم آشنا بشیم:
🔹 Call Stack
🔹 Web APIs
🔹 Task Queue
🔹 Event Loop
━━━━━━━━━━━━━━
🔹 ۱. Call Stack

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

مثلاً:

console.log("A");

setTimeout(() => {
  console.log("B");
}, 1000);

console.log("C");

ابتدا "A" اجرا می‌شه
بعد "setTimeout" اجرا می‌شه، اما JavaScript برای یک ثانیه منتظر نمی‌مونه
مرورگر مدیریت Timer رو بر عهده می‌گیره و JavaScript می‌ره سراغ دستور بعدی

در نتیجه "C" هم اجرا می‌شه
━━━━━━━━━━━━━━
🔹 ۲. Web APIs
بعضی قابلیت‌ها مستقیماً توسط موتور JavaScript انجام نمی‌شن و محیط مرورگر مدیریت‌شون می‌کنه.
مثلاً:
⏱️ "setTimeout" و "setInterval"
🌐 درخواست‌های شبکه مثل "fetch"
🖱️ رویدادهایی مثل کلیک و تایپ
📍 بعضی قابلیت‌های مرورگر مثل Geolocation
━━━━━━━━━━━━━━
🔹 ۳. Task Queue
وقتی کارهایی مثل Timer آماده اجرا می‌شن، Callback اون‌ها در صف منتظر می‌مونه
در مثال ما، بعد از یک ثانیه:
console.log("B");
آماده اجرا می‌شه و منتظر می‌مونه
━━━━━━━━━━━━━━
🔹 ۴. Event Loop
اینجا Event Loop وارد ماجرا می‌شه
Event Loop مرتب بررسی می‌کنه:
«آیا Call Stack خالیه؟»
اگر خالی باشه و کاری در صف منتظر اجرا باشه، اون کار رو وارد Call Stack می‌کنه
بعد JavaScript اون رو اجرا می‌کنه
پس در نهایت:
A
C
B

📌 خلاصه:

Call Stack → محل اجرای کدها

Web APIs → مدیریت بعضی قابلیت‌های مرورگر

Task Queue → صف کارهای آماده اجرا

Event Loop → هماهنگ‌کننده انتقال کارها به Call Stack

نکته مهم اینه که Event Loop خودش کد رو اجرا نمی‌کنه؛ فقط زمان مناسب ورود کارهای آماده به Call Stack رو هماهنگ می‌کنه

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

💡 TypeScript Insight

📌یک نکته درباره TypeScript:

تایپ‌اسکریپت در زمان اجرای برنامه وجود نداره❕

در ابتدا کدهای TypeScript به JavaScript تبدیل می‌شن و در نهایت مرورگر فقط JavaScript رو اجرا می‌کنه

یعنی TypeScript خودش یک زبان Runtime نیست
بلکه در زمان توسعه، به بررسی Typeها و پیدا کردن خطاها کمک می‌کنه

📌 برای همین Typeهایی که در TypeScript تعریف می‌کنیم، در کد نهایی JavaScript وجود ندارن

🔗https://t.me/codetrailWeb

#TypeScript #JavaScript

از مهم ترین دستورات 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>

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

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

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

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

💡 Frontend Insight

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

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

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

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

اینکه بتونی:

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

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

#Frontend #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

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

.card {
  content-visibility: auto;
}

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

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

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

#Frontend #CSS #Performance #CodeTrail

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

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

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


🔗https://t.me/codetrailWeb

#JavaScript #Performance #CodeTrail

✅ جواب چالش 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

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

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

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

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

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

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

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

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

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

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

🌐 Website معرفی

⭕️ Bundlephobia

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

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

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

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

🔗https://bundlephobia.com

#JavaScript #Performance #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 معرفی

#Frontend Mentor


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

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

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

#Frontend #Portfolio #CodeTrail

💡 #Frontend Fact

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

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

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

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

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

💡 #Frontend Fact

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

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

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

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

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

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

💡 #Frontend Insight

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

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

Download → Parse → Execute

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

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

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

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

🔗 https://t.me/codetrailWeb

#Frontend #JavaScript #Performance #CodeTrail

#Frontend Fact

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

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

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

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

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

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

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