🤔 Hoisting
در JavaScript چیه؟

قبل از اجرای کد، بعضی Declarationها در فرآیند ایجاد Execution Context
پردازش میشن.

برای همینه که این کد:

sayHi();

function sayHi() {
  console.log("Hi");
}



کار می‌کنه. ✅

ولی رفتار let و const با var فرق داره.
📌 Hoisting
رو با «انتقال واقعی کد به بالا» اشتباه نگیر.

وقتی می‌خوای چیزی رو از یک Array پیدا کنی، لازم نیست همیشه for بنویسی.
از find() استفاده کن:

const users = [
  { id: 1, name: "Ali" },
  { id: 2, name: "Reza" }
];

const user = users.find(user => user.id === 2);

console.log(user);


خروجی:

{ id: 2, name: "Reza" }



🧠 فرقش با filter() اینه:

find() → اولین آیتمی که شرط رو داشته
باشه برمی‌گردونه.

filter() → تمام آیتم‌هایی که شرط رو داشته باشن برمی‌گردونه.

📌 این دوتا رو قاطی نکنی؛ توی پروژه زیاد باهاشون کار می‌کنی.

🚨 یه ترفند خیلی ساده برای تست Responsive بودن سایت:

لازم نیست هر بار صفحه مرورگرت رو با موس کوچیک و بزرگ کنی!

داخل Chrome بزن:
F12 → Ctrl + Shift + M

حالا وارد حالت Device Toolbar میشی و می‌تونی سایتت رو روی سایزهای مختلف موبایل، تبلت و دسکتاپ تست کنی. 📱💻
حتی می‌تونی سایز دلخواه خودت رو وارد کنی.

💡 یه نکته مهم: فقط با یک سایز تست نکن؛
ممکنه سایتت روی iPhone عالی باشه ولی روی یه صفحه 768px کاملاً به‌هم بریزه.

📌 قبل از Deploy کردن، Responsive بودن رو روی چند سایز مختلف چک کن.

یه سوالی که این روزها زیاد ازم می‌پرسن:
«نظرت درباره Vibe Coding چیه؟»

ببین عزیز، کلاً ولش کن! 😄

به هر کسی یه قلم‌مو و یه سطل رنگ بدی، می‌تونه یه دیوار رو رنگ کنه؛
ولی نقاش حرفه‌ای کجا و آدم آماتور کجا؟
داستان Vibe Coding هم همینه.
من وقتی از AI استفاده می‌کنم، کد رو می‌فهمم، معماری رو می‌فهمم، مشکلاتش رو پیدا می‌کنم و می‌دونم چرا باید یک راه‌حل رو انتخاب کنم.

AI
به من کمک می‌کنه سریع‌تر و بهتر نتیجه خلق کنم.

اما اینکه چند کلمه به AI بدی، یه پروژه تحویل بگیری و فقط به خاطر ظاهرش ذوق کنی، اسمش تخصص نیست.

🔥 AI
جای متخصص رو نمی‌گیره؛ متخصصی که AI بلده، جای کسی رو می‌گیره که فقط AI بلده.

🌐 ۷ سایت برای پیدا کردن API و دیتای آماده برای پروژه:

Public APIs → لیست
APIهای رایگان
JSONPlaceholder → API
فیک برای تمرین
Fake Store API → دیتای فروشگاه
Open-Meteo → API آب‌وهوا
REST Countries → اطلاعات کشورها
PokeAPI → دیتای Pokémon
The Movie Database → دیتای فیلم و سریال

🔥 دیگه برای هر پروژه لازم نیست خودت از صفر دیتای تست بسازی.

📌 Save
کن؛ برای پروژه بعدی به کارت میاد.

💻 ۷ جا برای تمرین واقعی Front-End:

🔥 Frontend Mentor
🔥 Codewell
🔥 DevChallenges
🔥 Frontend Practice
🔥 CSSBattle
🔥 JavaScript30
🔥 100 Days CSS

فقط Tutorial نبین.

یه طراحی بردار → خودت پیاده‌سازی کن → منتشرش کن.

هم تمرین میشه، هم نمونه‌کار.

🖼️ ۶ ابزار برای کار با تصاویر که هر Front-End باید بشناسه:
🔹 Squoosh → فشرده‌سازی

🔹 TinyPNG → کاهش حجم
🔹 SVGOMG → بهینه‌سازی SVG
🔹 Remove.bg → حذف Background
🔹 CloudConvert → تبدیل فرمت
🔹 ImageOptim → بهینه‌سازی تصاویر

💡 عکس سنگین یکی از ساده‌ترین راه‌ها برای خراب کردن Performance سایته. 😐

📌
Save کن.

🌳 اگه Front-End Developer هستی، حداقل این دستورات Gitها رو بلد باش:

clone → گرفتن پروژه
branch → ساخت شاخه
checkout → جابه‌جایی
add → آماده کردن تغییرات
commit → ثبت تغییرات
pull → گرفتن تغییرات
push → فرستادن تغییرات
merge → ترکیب Branchها

❌ Git
فقط push و pull نیست!

📌 Save
کن؛ برای کار تیمی لازمت میشه.

🔍 ۵ ابزار برای تست سایت قبل از تحویل به کارفرما:

Lighthouse → Performance و SEO
PageSpeed Insights → بررسی سرعت
WAVE → Accessibility
GTmetrix → Performance
Responsive Design Checker → تست نمایش در سایزهای مختلف

📌 اینا رو قبل از تحویل پروژه اجرا کن؛ ممکنه چیزهایی پیدا کنی که با چشم نمی‌بینی.

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

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

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

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

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

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

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

😵‍💫 وقتی توی پروژه گیر کردی، این ۷ جا می‌تونن نجاتت بدن:

🔍 Google → پیدا کردن راه‌حل
📚 MDN → فهمیدن APIهای Web
💬 Stack Overflow → دیدن تجربه دیگران
🤖 ChatGPT → تحلیل و Debug
🧪 CodePen → تست سریع UI
🛠️ DevTools → پیدا کردن مشکل واقعی
📖 Documentation → منبع اصلی هر Library
اما یه قانون:

اول Error رو بخون، بعد Search کن.

خیلی وقت‌ها جواب دقیقاً توی همون Errorـه.

📌 Save
کن برای روزی که پروژه قفل کرد.

#برنامه_نویسی #DeveloperTools #برنامه_نویس #توسعه_وب #کدنویسی #FrontEnd

🤔 Library
و Framework چه فرقی دارن؟

خیلی ساده:

🔹 Library → تو تصمیم می‌گیری کِی ازش استفاده کنی.
🔹 Framework → ساختار و جریان کلی پروژه بیشتر توسط Framework
مشخص میشه.

مثلاً در دنیای Front-End:
React
معمولاً به‌عنوان Library شناخته میشه،

در حالی که Next.js یک Framework بر پایه React محسوب میشه.

📌 این تفاوت رو برای مصاحبه هم بلد باش.

#React #NextJS #JavaScript #فرانت_اند #برنامه_نویسی #FrontEnd

💾 LocalStorage یا SessionStorage؟

🔹 localStorage اطلاعات بعد از بستن Browser هم باقی می‌مونه.

🔹 sessionStorage اطلاعات معمولاً با پایان Session همان Tab از بین میره.

مثلاً:
تنظیمات ساده کاربر → localStorage اطلاعات موقت یک Session → sessionStorage

⚠️ هیچ‌کدوم جای مناسبی برای نگهداری Secretهای حساس نیستن.

📌 این تفاوت ساده رو خوب یاد بگیر.

#JavaScript #WebStorage #LocalStorage #SessionStorage #فرانت_اند #برنامه_نویسی

😂 «کد روی سیستم من که کار می‌کنه ولی ت گوشی کاربر ن!»

یکی از خطرناک‌ترین جمله‌های Developerها!

ممکنه مشکل از اینا باشه:

🌐 Browser
متفاوت
📱 سایز صفحه متفاوت 🐌 اینترنت ضعیف 🔐 Environment Variable 🗄️ API 📦 Version یک Dependency ⚙️ تنظیمات Production

پس قبل از Deploy فقط روی سیستم خودت تست نکن.

محیط واقعی کاربر با لپ‌تاپ Developer فرق داره.

#برنامه_نویسی #فرانت_اند #WebDevelopment #Debugging #Developer #توسعه_وب

🧹 از کجا بفهمیم کدمون داره تبدیل به Spaghetti Code میشه؟

🚩 یک Function چند صد خطه 🚩 یک فایل همه‌کاره داری 🚩 اسم Variableها نامفهومه 🚩 یک کد رو چندین بار کپی کردی 🚩 تغییر یک بخش، سه جای دیگه رو خراب می‌کنه

Clean Code
یعنی کدی که فهمیدن و
تغییر دادنش راحت باشه.
نه کدی که فقط ظاهر قشنگی داشته باشه.

#CleanCode #برنامه_نویسی #SoftwareDevelopment #کدنویسی #فرانت_اند #Developer

😱 یه اشتباه کردی و می‌خوای آخرین Commit رو برگردونی؟

قبل از اینکه دستپاچه بشی:

git revert HEAD



این دستور یک Commit جدید می‌سازه که تغییرات Commit قبلی رو برمی‌گردونه.

💡 برای پروژه‌های تیمی معمولاً از پاک کردن تاریخچه Git امن‌تره.

📌 Git
رو فقط برای push و pull استفاده نکن!

حتما ذخیره ش کن خیلی به کارت میاد

#Git #GitHub #برنامه_نویسی #Developer #کدنویسی #WebDevelopment

👨‍💻 اگر تازه وارد پروژه واقعی شدی، اینا
رو زیاد می‌شنوی:

حتما ذخیره‌ش کن توی محیط کاری خیلی به دردت میخوره

🔹 Code Review → بررسی کد

🔹 Pull Request → درخواست ادغام تغییرات

🔹 CI/CD → فرآیند خودکار
Build/Test/Deploy

🔹 Staging → محیط قبل از Production

🔹 Production → محیط واقعی کاربران

📌 این اصطلاحات رو فقط حفظ نکن؛ باید بدونی کجا و چرا استفاده میشن.

#برنامه_نویسی #GitHub #DevOps #SoftwareDevelopment #Developer #FrontEnd

🕵️ می‌خوای بفهمی یک سایت با چی ساخته شده؟

این ابزارها رو امتحان کن:

🔍 Wappalyzer 🔍 BuiltWith 🔍 WhatRuns

می‌تونی سرنخ‌هایی درباره:

Framework
CMS
Analytics
Server
CDN
و تکنولوژی‌های استفاده‌شده
پیدا کنی.

📌 برای تحقیق و بررسی سایت‌های مختلف خیلی کاربردیه.

#Wappalyzer #WebDevelopment
#Frontend #برنامه_نویسی #Developer #توسعه_وب