آموزش برنامه نویسی فرانت اند

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

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

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

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

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

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

⚡ ۸ میانبر 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

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

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

🔍 Wappalyzer 🔍 BuiltWith 🔍 WhatRuns

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

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

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

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

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

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

🔹 Code Review → بررسی کد

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

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

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

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

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

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

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

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

git revert HEAD



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

💾 LocalStorage یا SessionStorage؟

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

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

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

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

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

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

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

خیلی ساده:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

📌
Save کن.

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

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

فقط Tutorial نبین.

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

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

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

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

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

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

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

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

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

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

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

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