👨💻 اگر تازه وارد پروژه واقعی شدی، اینا
رو زیاد میشنوی:
حتما ذخیرهش کن توی محیط کاری خیلی به دردت میخوره
🔹 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
۱۰ اشتباه امنیتی رایج در پروژههای Web
نگهداشتن Secret داخل Frontend
اعتماد کردن به داده کاربر
نداشتن Authorization سمت Server
Password
بدون Hash مناسب
نمایش اطلاعات حساس در Error
CORS اشتباه
نبود Rate Limiting
Dependencyهای قدیمی
Validation ناقص
Log کردن اطلاعات حساس
📌 امنیت چیزی نیست که آخر پروژه بهش اضافه کنی؛ از اول باید بخشی از طراحی باشه.
#CyberSecurity #WebSecurity #Backend #Frontend #Programming
نگهداشتن Secret داخل Frontend
اعتماد کردن به داده کاربر
نداشتن Authorization سمت Server
Password
بدون Hash مناسب
نمایش اطلاعات حساس در Error
CORS اشتباه
نبود Rate Limiting
Dependencyهای قدیمی
Validation ناقص
Log کردن اطلاعات حساس
📌 امنیت چیزی نیست که آخر پروژه بهش اضافه کنی؛ از اول باید بخشی از طراحی باشه.
#CyberSecurity #WebSecurity #Backend #Frontend #Programming
❤3🔥1
🤯 یک اشتباه کوچیک در React
این کد رو ببین:
❌ نه!
اینجا
✅ معمولاً باید بنویسی:
این کد رو ببین:
<button onClick={handleClick()}>
Click
</button>
به نظرت درست نوشته شده؟❌ نه!
اینجا
handleClick همون لحظه Render اجرا میشه.✅ معمولاً باید بنویسی:
<button onClick={handleClick}>
Click
</button>
📌 یک جفت () میتونه کل رفتار Component رو عوض کنه.❤5