💻 ۷ جا برای تمرین واقعی 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 #توسعه_وب

⚡ ۸ میانبر VS Code که بهتره حفظشون کنی:

Ctrl + P → پیدا کردن فایل
Ctrl + Shift + P → Command Palette
Ctrl + D → انتخاب مشابه بعدی
Alt + ↑ / ↓ → جابه‌جایی خط
Shift + Alt + ↓ → کپی خط
Ctrl + / → Comment
Ctrl + B → باز/بسته کردن Sidebar
Ctrl + Shift + F → جستجو در کل پروژه

📌 اینا رو یکی‌یکی وارد عادتت کن؛ بعد از چند روز متوجه تفاوت سرعتت میشی.
#VSCode #برنامه_نویسی #فرانت_اند #کدنویسی #Developer #WebDevelopment

👀 یه قابلیت GitHub که خیلی‌ها ازش استفاده نمی‌کنن:

برو داخل یک Repository و کلید:
.
رو بزن.

GitHub
پروژه رو داخل یک محیط VS Code تحت وب باز می‌کنه. 😮

بدون اینکه پروژه رو روی سیستم Clone کنی، می‌تونی کدها رو سریع بررسی کنی.

📌 دفعه بعد که خواستی کد یک Repository رو نگاه کنی، امتحانش کن.

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

🌐 چرا بعضی سایت‌ها با اینترنت ضعیف هم سریع باز میشن؟

چون فقط به «سرعت اینترنت» وابسته نیستن.

از چیزهایی مثل:

⚡ CDN 📦 Cache 🖼️ تصاویر بهینه 📉 Compression 💾 Browser Cache 🚀 Lazy Loading
استفاده می‌کنن.

یعنی Performance فقط این نیست که:
«کدم سریع اجرا بشه.»

کل مسیر بین کاربر تا محتوایی که می‌بینه مهمه.

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

🌐 اگه Front-End کار می‌کنی و Network رو نمی‌شناسی، نصف ماجرا رو نمی‌بینی.

کاربر روی دکمه Login می‌زنه.
تو فقط UI رو می‌بینی.

ولی پشت صحنه:

Browser → Request → Server → Response → Browser

اگر Login کار نکرد، مشکل می‌تونه:

❌ Front-End ❌ API ❌ Authentication ❌ Server ❌ CORS ❌ Network
باشه.

🔥 Front-End
فقط ساختن ظاهر نیست.

باید بدونی چیزی که ساختی چطور با دنیای بیرون حرف می‌زنه.

#Frontend #Network #API #WebDevelopment #برنامه_نویسی #Developer

🎯 سؤال مصاحبه:

فرض کن یک API داری که گاهی ۵ ثانیه طول می‌کشه جواب بده.

چه کار می‌کنی که کاربر فکر نکنه سایت خراب شده؟

جواب فقط «Loading می‌ذارم» نیست.
می‌تونی بررسی کنی:

⏳ Loading State 💀 Timeout 🔁 Retry ⚡ Caching 📦 Optimistic UI 🚨 Error State

🔥 توی پروژه واقعی، فقط «درست کار کردن» کافی نیست؛
باید رفتار سیستم در شرایط بد رو هم
طراحی کنی.

#مصاحبه_برنامه_نویسی #Frontend #Programming #Developer #برنامه_نویسی