API
چیه و چرا باید یادش بگیری؟ 🌐

اگه فرانت‌اند کار می‌کنی و هنوز API رو خوب نفهمیدی، هیچی دیگه!

API
در واقع یه پل ارتباطیه بین سایت و سرور.

مثلاً وقتی اینستاگرام رو باز می‌کنی، عکس‌ها و پست‌ها از قبل داخل برنامه نیستن. برنامه یه درخواست (Request) به سرور می‌فرسته، سرور هم اطلاعات رو برمی‌گردونه (Response) و تو اون‌ها رو می‌بینی.

تقریباً هر چیزی که توی سایت می‌بینی، از API میاد:

✅ لیست محصولات فروشگاه
✅ اطلاعات کاربر
✅ پست‌های وبلاگ
✅ قیمت ارز و طلا
✅ وضعیت آب‌وهوا

اگه API رو یاد بگیری، می‌تونی سایت‌هایی بسازی که اطلاعاتشون همیشه به‌روز باشه، نه فقط چند تا متن و عکس ثابت!

#API #Frontend #JavaScript #React

💾 LocalStorage
چیه؟

اگه بخوای یه سری اطلاعات رو داخل مرورگر کاربر ذخیره کنی تا حتی بعد از بستن تب یا مرورگر هم باقی بمونن، LocalStorage بهترین گزینه است.

مثلاً می‌تونی این موارد رو داخلش نگه داری:

✅ تنظیمات سایت (مثل حالت تاریک)
✅ زبان انتخابی کاربر
✅ اطلاعات غیرحساس

چند دستور پرکاربرد:

// ذخیره
localStorage.setItem("name", "Ali");

// دریافت
localStorage.getItem("name");

// حذف یک مقدار
localStorage.removeItem("name");

// پاک کردن همه
localStorage.clear();

⚠️ نکته مهم:

LocalStorage
جای مناسبی برای ذخیره اطلاعات حساس مثل رمز عبور یا JWT نیست؛ چون هر اسکریپتی که روی صفحه اجرا شود، می‌تواند به آن دسترسی داشته باشد.

#JavaScript #LocalStorage #Frontend #WebDevelopment

تا حالا شده بخوای مقادیر تکراری یک آرایه رو حذف کنی؟

❌ روش قدیمی:

const unique = arr.filter((item, index) => arr.indexOf(item) === index);

✅ روش مدرن با Set:

const numbers = [1, 2, 2, 3, 4, 4, 5];

const uniqueNumbers = 
[...new Set(numbers)];

console.log(uniqueNumbers);
// [1, 2, 3, 4, 5]

چرا از Set استفاده کنیم؟

✅ کد کوتاه‌تر و خواناتر می‌شود.
✅ عملکرد بهتری روی آرایه‌های بزرگ دارد.
✅ یکی از قابلیت‌های کاربردی ES6 است که در پروژه‌های واقعی زیاد استفاده می‌شود.

💡 هر وقت خواستی مقادیر تکراری یک آرایه را حذف کنی، Set یکی از بهترین انتخاب‌هاست.

#JavaScript #ES6 #CodeTips #WebDevelopment #Programming #Frontend

💡 یه ترفند باحال برای دیباگ کردن

اگه تا حالا یه آرایه از آبجکت‌ها رو با console.log() چاپ کردی، حتماً دیدی خروجیش یه‌کم شلوغ و اعصاب‌خردکنه. 😅

به جاش اینو امتحان کن:

const users = [
  { name: "Ali", age: 20 },
  { name: "Sara", age: 22 },
  { name: "Reza", age: 19 }
];




console.table(users);



👀 به‌جای یه خروجی شلوغ، همه‌چی رو توی یه جدول مرتب بهت نشون می‌ده.
📌 دفعه بعد که خواستی داده‌های API یا یه آرایه از آبجکت‌ها رو بررسی کنی، console.table() رو فراموش نکن. احتمالاً دیگه کمتر سراغ console.log() می‌ری. 😉

#JavaScript #Programming #CodeTips

🚀 ۵ افزونه کروم که هر برنامه‌نویس فرانت‌اند باید نصب داشته باشه

🛠 Wappalyzer با یه کلیک می‌فهمی هر سایتی با چه تکنولوژی‌هایی ساخته شده؛ از React و Next.js گرفته تا CMS و سرویس‌های Analytics.

🎨 ColorZilla رنگ هر بخش از هر سایتی رو بردار، گرادینت بساز و کد HEX یا RGB رو کپی کن.

📏 Dimensions فقط با نگه داشتن Alt، فاصله بین المان‌های صفحه رو اندازه بگیر؛ خیلی به درد پیاده‌سازی دقیق از روی دیزاین می‌خوره.

⚡ React Developer Tools اگه با React کار می‌کنی، این افزونه واجبه! کامپوننت‌ها، State و Props رو راحت بررسی و دیباگ کن.

🌐 JSONVue فایل‌های JSON رو به‌جای یه متن شلوغ، به‌صورت مرتب، رنگی و قابل جمع‌کردن نمایش می‌ده.

#Frontend #React #Chrome #ChromeExtensions #JavaScript #WebDevelopment #Developer #Programming #Nextjs

⚛️ قبل از شروع آموزش React اینا رو بلد باش.

نه در حد اینکه اسمشون رو شنیده باشی:

DOM
Event
Promise
async/await
Array Methods
Destructuring
Modules
Scope
Closure
Fetch API

چون React قرار نیست JavaScript رو برات یاد بگیره.

اگر JavaScript رو نفهمیده باشی،
React
فقط مشکل رو پیچیده‌تر می‌کنه.

📌 این پست رو برای کسی بفرست که تازه می‌خواد React شروع کنه.

#JavaScript #React #فرانت_اند #جاوااسکریپت #یادگیری_برنامه_نویسی #برنامه_نویسی