🧹 از کجا بفهمیم کدمون داره تبدیل به Spaghetti Code میشه؟
🚩 یک Function چند صد خطه 🚩 یک فایل همهکاره داری 🚩 اسم Variableها نامفهومه 🚩 یک کد رو چندین بار کپی کردی 🚩 تغییر یک بخش، سه جای دیگه رو خراب میکنه
Clean Code
یعنی کدی که فهمیدن و
تغییر دادنش راحت باشه.
نه کدی که فقط ظاهر قشنگی داشته باشه.
#CleanCode #برنامه_نویسی #SoftwareDevelopment #کدنویسی #فرانت_اند #Developer
🚩 یک Function چند صد خطه 🚩 یک فایل همهکاره داری 🚩 اسم Variableها نامفهومه 🚩 یک کد رو چندین بار کپی کردی 🚩 تغییر یک بخش، سه جای دیگه رو خراب میکنه
Clean Code
یعنی کدی که فهمیدن و
تغییر دادنش راحت باشه.
نه کدی که فقط ظاهر قشنگی داشته باشه.
#CleanCode #برنامه_نویسی #SoftwareDevelopment #کدنویسی #فرانت_اند #Developer
❤3👍1
😱 یه اشتباه کردی و میخوای آخرین Commit رو برگردونی؟
قبل از اینکه دستپاچه بشی:
💡 برای پروژههای تیمی معمولاً از پاک کردن تاریخچه Git امنتره.
📌 Git
رو فقط برای
حتما ذخیره ش کن خیلی به کارت میاد
#Git #GitHub #برنامه_نویسی #Developer #کدنویسی #WebDevelopment
قبل از اینکه دستپاچه بشی:
git revert HEAD
این دستور یک Commit جدید میسازه که تغییرات Commit قبلی رو برمیگردونه.💡 برای پروژههای تیمی معمولاً از پاک کردن تاریخچه Git امنتره.
📌 Git
رو فقط برای
push و pull استفاده نکن!حتما ذخیره ش کن خیلی به کارت میاد
#Git #GitHub #برنامه_نویسی #Developer #کدنویسی #WebDevelopment
❤2❤🔥1
👨💻 اگر تازه وارد پروژه واقعی شدی، اینا
رو زیاد میشنوی:
حتما ذخیرهش کن توی محیط کاری خیلی به دردت میخوره
🔹 Code Review → بررسی کد
🔹 Pull Request → درخواست ادغام تغییرات
🔹 CI/CD → فرآیند خودکار
Build/Test/Deploy
🔹 Staging → محیط قبل از Production
🔹 Production → محیط واقعی کاربران
📌 این اصطلاحات رو فقط حفظ نکن؛ باید بدونی کجا و چرا استفاده میشن.
#برنامه_نویسی #GitHub #DevOps #SoftwareDevelopment #Developer #FrontEnd
رو زیاد میشنوی:
حتما ذخیرهش کن توی محیط کاری خیلی به دردت میخوره
🔹 Code Review → بررسی کد
🔹 Pull Request → درخواست ادغام تغییرات
🔹 CI/CD → فرآیند خودکار
Build/Test/Deploy
🔹 Staging → محیط قبل از Production
🔹 Production → محیط واقعی کاربران
📌 این اصطلاحات رو فقط حفظ نکن؛ باید بدونی کجا و چرا استفاده میشن.
#برنامه_نویسی #GitHub #DevOps #SoftwareDevelopment #Developer #FrontEnd
❤2💯1
🕵️ میخوای بفهمی یک سایت با چی ساخته شده؟
این ابزارها رو امتحان کن:
🔍 Wappalyzer 🔍 BuiltWith 🔍 WhatRuns
میتونی سرنخهایی درباره:
Framework
CMS
Analytics
Server
CDN
و تکنولوژیهای استفادهشده
پیدا کنی.
📌 برای تحقیق و بررسی سایتهای مختلف خیلی کاربردیه.
#Wappalyzer #WebDevelopment
#Frontend #برنامه_نویسی #Developer #توسعه_وب
این ابزارها رو امتحان کن:
🔍 Wappalyzer 🔍 BuiltWith 🔍 WhatRuns
میتونی سرنخهایی درباره:
Framework
CMS
Analytics
Server
CDN
و تکنولوژیهای استفادهشده
پیدا کنی.
📌 برای تحقیق و بررسی سایتهای مختلف خیلی کاربردیه.
#Wappalyzer #WebDevelopment
#Frontend #برنامه_نویسی #Developer #توسعه_وب
❤3🔥1
برای دسترسی به مقدار name در کد بالا کدام گزینه صحیح است؟
Anonymous Quiz
32%
user[name]
10%
user->name
47%
10%
user::name
⚡ ۸ میانبر VS Code که بهتره حفظشون کنی:
📌 اینا رو یکییکی وارد عادتت کن؛ بعد از چند روز متوجه تفاوت سرعتت میشی.
#VSCode #برنامه_نویسی #فرانت_اند #کدنویسی #Developer #WebDevelopment
Ctrl + P → پیدا کردن فایل Ctrl + Shift + P → Command Palette Ctrl + D → انتخاب مشابه بعدی Alt + ↑ / ↓ → جابهجایی خط Shift + Alt + ↓ → کپی خط Ctrl + / → Comment Ctrl + B → باز/بسته کردن Sidebar Ctrl + Shift + F → جستجو در کل پروژه📌 اینا رو یکییکی وارد عادتت کن؛ بعد از چند روز متوجه تفاوت سرعتت میشی.
#VSCode #برنامه_نویسی #فرانت_اند #کدنویسی #Developer #WebDevelopment
❤3🔥2
👀 یه قابلیت GitHub که خیلیها ازش استفاده نمیکنن:
برو داخل یک Repository و کلید:
.
رو بزن.
GitHub
پروژه رو داخل یک محیط VS Code تحت وب باز میکنه. 😮
بدون اینکه پروژه رو روی سیستم Clone کنی، میتونی کدها رو سریع بررسی کنی.
📌 دفعه بعد که خواستی کد یک Repository رو نگاه کنی، امتحانش کن.
#GitHub #VSCode #برنامه_نویسی #Developer #WebDevelopment #کدنویسی
برو داخل یک Repository و کلید:
.
رو بزن.
GitHub
پروژه رو داخل یک محیط VS Code تحت وب باز میکنه. 😮
بدون اینکه پروژه رو روی سیستم Clone کنی، میتونی کدها رو سریع بررسی کنی.
📌 دفعه بعد که خواستی کد یک Repository رو نگاه کنی، امتحانش کن.
#GitHub #VSCode #برنامه_نویسی #Developer #WebDevelopment #کدنویسی
❤3👏1
🌐 چرا بعضی سایتها با اینترنت ضعیف هم سریع باز میشن؟
چون فقط به «سرعت اینترنت» وابسته نیستن.
از چیزهایی مثل:
⚡ CDN 📦 Cache 🖼️ تصاویر بهینه 📉 Compression 💾 Browser Cache 🚀 Lazy Loading
استفاده میکنن.
یعنی Performance فقط این نیست که:
«کدم سریع اجرا بشه.»
کل مسیر بین کاربر تا محتوایی که میبینه مهمه.
#Performance #WebDevelopment #Frontend #سرعت_سایت #برنامه_نویسی #توسعه_وب
چون فقط به «سرعت اینترنت» وابسته نیستن.
از چیزهایی مثل:
⚡ CDN 📦 Cache 🖼️ تصاویر بهینه 📉 Compression 💾 Browser Cache 🚀 Lazy Loading
استفاده میکنن.
یعنی Performance فقط این نیست که:
«کدم سریع اجرا بشه.»
کل مسیر بین کاربر تا محتوایی که میبینه مهمه.
#Performance #WebDevelopment #Frontend #سرعت_سایت #برنامه_نویسی #توسعه_وب
❤4💯1
🌐 اگه 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
کاربر روی دکمه Login میزنه.
تو فقط UI رو میبینی.
ولی پشت صحنه:
Browser → Request → Server → Response → Browser
اگر Login کار نکرد، مشکل میتونه:
❌ Front-End ❌ API ❌ Authentication ❌ Server ❌ CORS ❌ Network
باشه.
🔥 Front-End
فقط ساختن ظاهر نیست.
باید بدونی چیزی که ساختی چطور با دنیای بیرون حرف میزنه.
#Frontend #Network #API #WebDevelopment #برنامه_نویسی #Developer
❤3
🎯 سؤال مصاحبه:
فرض کن یک API داری که گاهی ۵ ثانیه طول میکشه جواب بده.
چه کار میکنی که کاربر فکر نکنه سایت خراب شده؟
جواب فقط «Loading میذارم» نیست.
میتونی بررسی کنی:
⏳ Loading State 💀 Timeout 🔁 Retry ⚡ Caching 📦 Optimistic UI 🚨 Error State
🔥 توی پروژه واقعی، فقط «درست کار کردن» کافی نیست؛
باید رفتار سیستم در شرایط بد رو هم
طراحی کنی.
#مصاحبه_برنامه_نویسی #Frontend #Programming #Developer #برنامه_نویسی
فرض کن یک API داری که گاهی ۵ ثانیه طول میکشه جواب بده.
چه کار میکنی که کاربر فکر نکنه سایت خراب شده؟
جواب فقط «Loading میذارم» نیست.
میتونی بررسی کنی:
⏳ Loading State 💀 Timeout 🔁 Retry ⚡ Caching 📦 Optimistic UI 🚨 Error State
🔥 توی پروژه واقعی، فقط «درست کار کردن» کافی نیست؛
باید رفتار سیستم در شرایط بد رو هم
طراحی کنی.
#مصاحبه_برنامه_نویسی #Frontend #Programming #Developer #برنامه_نویسی
Merge Conflict
یعنی چی؟
تو و همکارت روی یک فایل کار کردید.
تو یک قسمت رو تغییر دادی.
اون هم همون قسمت رو تغییر داده.
حالا Git میگه:
CONFLICT
خوردی
یعنی Git نمیتونه خودش تصمیم بگیره کدوم تغییر باید باقی بمونه.
باید Conflict رو بررسی کنی، تصمیم بگیری چه کدی درستتره و بعد دوباره Commit کنی.
📌 Merge Conflict
چیز عجیبی نیست؛
بخشی از کار روزمره تیمهای برنامهنویسیه.
#Git #GitHub #MergeConflict #Developer #Programming #برنامه_نویسی
یعنی چی؟
تو و همکارت روی یک فایل کار کردید.
تو یک قسمت رو تغییر دادی.
اون هم همون قسمت رو تغییر داده.
حالا Git میگه:
CONFLICT
خوردی
یعنی Git نمیتونه خودش تصمیم بگیره کدوم تغییر باید باقی بمونه.
باید Conflict رو بررسی کنی، تصمیم بگیری چه کدی درستتره و بعد دوباره Commit کنی.
📌 Merge Conflict
چیز عجیبی نیست؛
بخشی از کار روزمره تیمهای برنامهنویسیه.
#Git #GitHub #MergeConflict #Developer #Programming #برنامه_نویسی
Rollback
یعنی چی؟ 🔙
Deploy
کردی.
۵ دقیقه بعد:
سایت خراب میشه.
اولین سؤال ممکنه این باشه:
Can we rollback?
Rollback
یعنی برگردوندن سیستم به نسخه قبلی که سالم بوده
.
مثلاً:
تا وقتی مشکل بررسی و Fix بشه، نسخه سالم قبلی دوباره فعال میشه.
🔥 یکی از چیزهایی که در پروژه واقعی
خیلی مهمه:
فقط Deploy کردن رو بلد نباش؛ برگشتن از Deploy خراب رو هم باید بلد باشی.
#Rollback #Deploy #Production #DevOps #Developer #برنامه_نویسی
یعنی چی؟ 🔙
Deploy
کردی.
۵ دقیقه بعد:
سایت خراب میشه.
اولین سؤال ممکنه این باشه:
Can we rollback?
Rollback
یعنی برگردوندن سیستم به نسخه قبلی که سالم بوده
.
مثلاً:
v1.4.2 ❌ v1.4.1 ✅تا وقتی مشکل بررسی و Fix بشه، نسخه سالم قبلی دوباره فعال میشه.
🔥 یکی از چیزهایی که در پروژه واقعی
خیلی مهمه:
فقط Deploy کردن رو بلد نباش؛ برگشتن از Deploy خراب رو هم باید بلد باشی.
#Rollback #Deploy #Production #DevOps #Developer #برنامه_نویسی
❤2
HOTFIX
یعنی چی و چرا برنامهنویسها ازش میترسن؟
فرض کن ساعت ۱۰ شب متوجه میشن پرداخت سایت خراب شده و کاربران نمیتونن خرید کنن.
قرار نیست صبر کنن تا Sprint بعدی!
یک تغییر سریع و ضروری انجام میدن تا مشکل Production برطرف بشه.
این میشه:
🔥 Hotfix
ولی حواست باشه:
Hotfix
یعنی سریع حل کردن مشکل، نه
اینکه بدون بررسی کد رو بندازی روی Production.
بعدش باید علت اصلی مشکل هم بررسی بشه.
#Hotfix #Production #Developer #Programming #برنامه_نویسی #Frontend
یعنی چی و چرا برنامهنویسها ازش میترسن؟
فرض کن ساعت ۱۰ شب متوجه میشن پرداخت سایت خراب شده و کاربران نمیتونن خرید کنن.
قرار نیست صبر کنن تا Sprint بعدی!
یک تغییر سریع و ضروری انجام میدن تا مشکل Production برطرف بشه.
این میشه:
🔥 Hotfix
ولی حواست باشه:
Hotfix
یعنی سریع حل کردن مشکل، نه
اینکه بدون بررسی کد رو بندازی روی Production.
بعدش باید علت اصلی مشکل هم بررسی بشه.
#Hotfix #Production #Developer #Programming #برنامه_نویسی #Frontend
چرا filter یکی از کاربردیترین متدهای JavaScriptـه؟
فرض کن فقط میخوای کاربران بالای ۱۸ سال رو داشته باشی:
📌 این دقیقاً همون کاریه که توی پروژههای واقعی برای فیلتر محصولات، کاربران، سفارشها و کلی داده دیگه انجام میدی.
#JavaScript #Filter #Frontend #Programming #برنامه_نویسی #کدنویسی
فرض کن فقط میخوای کاربران بالای ۱۸ سال رو داشته باشی:
const users = [
{ name: "Ali", age: 22 },
{ name: "Sara", age: 16 },
{ name: "Reza", age: 25 }
];
const adults = users.filter(user => user.age >= 18);
حالا:console.log(adults);
خروجی:[
{ name: "Ali", age: 22 },
{ name: "Reza", age: 25 }
]
یعنی filter میاد از بین آیتمهای آرایه، فقط مواردی که شرطت رو پاس میکنن نگه میداره.📌 این دقیقاً همون کاریه که توی پروژههای واقعی برای فیلتر محصولات، کاربران، سفارشها و کلی داده دیگه انجام میدی.
#JavaScript #Filter #Frontend #Programming #برنامه_نویسی #کدنویسی
❤5
❤1
اگه میخوای Frontend Developer بشی:
❌ هر روز دنبال Framework جدید نباش.
✅ JavaScript رو عمیق یاد بگیر.
چون Frameworkها عوض میشن؛
ولی JavaScript هنوز سر جاشه. 🔥
#Frontend #JavaScript #React #WebDevelopment #برنامه_نویسی
❌ هر روز دنبال Framework جدید نباش.
✅ JavaScript رو عمیق یاد بگیر.
چون Frameworkها عوض میشن؛
ولی JavaScript هنوز سر جاشه. 🔥
#Frontend #JavaScript #React #WebDevelopment #برنامه_نویسی
❤4🔥1
چرا همه Developerها باید HTTP رو بفهمن؟
وقتی مینویسی:
فقط یک خط JavaScript میبینی.
ولی پشتش یک دنیای کامل وجود داره:
و Status Codeهایی مثل:
مثلاً:
401 یعنی احراز هویت مشکل داره.
403 یعنی هویت مشخصه ولی اجازه دسترسی نداری.
404 یعنی Resource پیدا نشده.
500 یعنی مشکل سمت Server اتفاق افتاده.
📌 اگر HTTP رو نفهمی، Debug کردن پروژههای واقعی خیلی سختتر میشه.
#HTTP #API #Frontend #Backend #WebDevelopment #Programming
وقتی مینویسی:
fetch("/api/users")فقط یک خط JavaScript میبینی.
ولی پشتش یک دنیای کامل وجود داره:
GET
POST
PUT
PATCH
DELETE
و Status Codeهایی مثل:
200
201
400
401
403
404
500
مثلاً:
401 یعنی احراز هویت مشکل داره.
403 یعنی هویت مشخصه ولی اجازه دسترسی نداری.
404 یعنی Resource پیدا نشده.
500 یعنی مشکل سمت Server اتفاق افتاده.
📌 اگر HTTP رو نفهمی، Debug کردن پروژههای واقعی خیلی سختتر میشه.
#HTTP #API #Frontend #Backend #WebDevelopment #Programming
❤4🔥1
فرق slice و splice رو قاطی نکن!
این دو تا اسمشون شبیه همدیگهست ولی رفتار متفاوتی دارن.
اما:
📌 خلاصه:
slice → بخشی از Array رو برمیداره،
بدون تغییر اصل آرایه
splice → خود Array رو تغییر میده
#JavaScript #Array #JS #Frontend
#Programming
این دو تا اسمشون شبیه همدیگهست ولی رفتار متفاوتی دارن.
const numbers = [1, 2, 3, 4, 5];
numbers.slice(1, 3);
خروجی:
[2, 3]
و Array اصلی تغییر نمیکنه.اما:
numbers.splice(1, 2);
آیتمها رو از خود Array حذف میکنه.📌 خلاصه:
slice → بخشی از Array رو برمیداره،
بدون تغییر اصل آرایه
splice → خود Array رو تغییر میده
#JavaScript #Array #JS #Frontend
#Programming
❤2🔥1
۱۰
Extension
کاربردی Chrome برای Developerها
React Developer Tools
Redux DevTools
JSON Viewer
Lighthouse
Wappalyzer
WhatFont
ColorZilla
CSS Viewer
EditThisCookie
VisBug
📌 لازم نیست مرورگرت رو با ۵۰ تا Extension پر کنی؛ فقط چیزهایی رو نصب کن که واقعاً در Workflowت استفاده میشن.
#Chrome #DevTools #Frontend #Developer #Programming
Extension
کاربردی Chrome برای Developerها
React Developer Tools
Redux DevTools
JSON Viewer
Lighthouse
Wappalyzer
WhatFont
ColorZilla
CSS Viewer
EditThisCookie
VisBug
📌 لازم نیست مرورگرت رو با ۵۰ تا Extension پر کنی؛ فقط چیزهایی رو نصب کن که واقعاً در Workflowت استفاده میشن.
#Chrome #DevTools #Frontend #Developer #Programming
❤3