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
🔥 ۷ چیزی که قبل از استخدام شدن بهعنوان Frontend Developer باید بلد باشی
Git و GitHub
کار با API
Authentication
مدیریت State
Error Handling
Debugging
Deploy کردن پروژه
ولی نکته اینجاست 👇
خیلیها اینا رو تئوری بلدن.
ولی وقتی میگی:
«خب حالا یه پروژه از صفر بساز.»
اینجاست که تفاوت بلد بودن و تونستن مشخص میشه.
اگه هدفت اینه که فقط آموزش نبینی و واقعاً بتونی پروژه بسازی، مسیر یادگیریت باید پروژهمحور باشه.
#برنامه_نویسی #فرانت_اند #جاوااسکریپت #Frontend #JavaScript #React #Git #GitHub #برنامه_نویس #بازار_کار #استخدام #Codelines
Git و GitHub
کار با API
Authentication
مدیریت State
Error Handling
Debugging
Deploy کردن پروژه
ولی نکته اینجاست 👇
خیلیها اینا رو تئوری بلدن.
ولی وقتی میگی:
«خب حالا یه پروژه از صفر بساز.»
اینجاست که تفاوت بلد بودن و تونستن مشخص میشه.
اگه هدفت اینه که فقط آموزش نبینی و واقعاً بتونی پروژه بسازی، مسیر یادگیریت باید پروژهمحور باشه.
#برنامه_نویسی #فرانت_اند #جاوااسکریپت #Frontend #JavaScript #React #Git #GitHub #برنامه_نویس #بازار_کار #استخدام #Codelines
❤5🔥1
. کدام عملگر در JavaScript برای مقایسه مقدار و نوع داده استفاده میشود؟
Anonymous Quiz
5%
=
27%
==
55%
===
13%
=!
⏳ «وقت ندارم برنامهنویسی یاد بگیرم!»
لازم نیست هر روز ۵ ساعت وقت بذاری.
اگر روزی فقط ۴۵ دقیقه وقت داری:
۱۵ دقیقه → یادگیری
۲۰ دقیقه → کدنویسی
۱۰ دقیقه → مرور
بعد از چند ماه، همین زمانهای کوچک جمع میشن.
📌 مشکل خیلی وقتها کمبود زمان نیست؛
نداشتن برنامه مشخصه.
لازم نیست هر روز ۵ ساعت وقت بذاری.
اگر روزی فقط ۴۵ دقیقه وقت داری:
۱۵ دقیقه → یادگیری
۲۰ دقیقه → کدنویسی
۱۰ دقیقه → مرور
بعد از چند ماه، همین زمانهای کوچک جمع میشن.
📌 مشکل خیلی وقتها کمبود زمان نیست؛
نداشتن برنامه مشخصه.
❤8👍2
😵💫 چرا با اینکه زیاد آموزش میبینی، هنوز نمیتونی پروژه بزنی؟
شاید مشکل از هوش یا استعدادت نباشه.
مشکل اینه که بیشتر وقتت صرف دیدن آموزش میشه، نه ساختن.
یک آموزش ۲ ساعته میبینی و آخرش حس میکنی خیلی چیزها یاد گرفتی.
اما وقتی صفحه رو میبندی و میخوای خودت شروع کنی، نمیدونی از کجا.
این یعنی باید نسبتِ «آموزش دیدن» به «تمرین کردن» رو تغییر بدی.
📌 آموزش باید شروع یادگیری باشه، نه پایانش.
#برنامه_نویسی #یادگیری #فرانت_اند #Frontend #Developer
شاید مشکل از هوش یا استعدادت نباشه.
مشکل اینه که بیشتر وقتت صرف دیدن آموزش میشه، نه ساختن.
یک آموزش ۲ ساعته میبینی و آخرش حس میکنی خیلی چیزها یاد گرفتی.
اما وقتی صفحه رو میبندی و میخوای خودت شروع کنی، نمیدونی از کجا.
این یعنی باید نسبتِ «آموزش دیدن» به «تمرین کردن» رو تغییر بدی.
📌 آموزش باید شروع یادگیری باشه، نه پایانش.
#برنامه_نویسی #یادگیری #فرانت_اند #Frontend #Developer
❤6👍3
۵ چیزی که یک دوره برنامهنویسی خوب باید داشته باشه
قبل از خرید هر دورهای اینا رو بررسی کن:
مسیر مشخص داشته باشه.
فقط Syntax آموزش نده.
پروژه واقعی داشته باشه.
تمرین و Challenge داشته باشه.
بعد از دوره بدون مدرس هم بتونی ادامه بدی.
چون هدف دوره این نیست که:
«ویدیوها رو تموم کنی.»
هدف اینه که بعدش بتونی خودت پروژه بسازی.
#آموزش_برنامه_نویسی #دوره_برنامه_نویسی #Developer #Programming
قبل از خرید هر دورهای اینا رو بررسی کن:
مسیر مشخص داشته باشه.
فقط Syntax آموزش نده.
پروژه واقعی داشته باشه.
تمرین و Challenge داشته باشه.
بعد از دوره بدون مدرس هم بتونی ادامه بدی.
چون هدف دوره این نیست که:
«ویدیوها رو تموم کنی.»
هدف اینه که بعدش بتونی خودت پروژه بسازی.
#آموزش_برنامه_نویسی #دوره_برنامه_نویسی #Developer #Programming
❤3👏1
🧹 ۱۰ نشونه که کدت نیاز به Refactor داره
یک Function خیلی بزرگه
یک کد چند بار تکرار شده
اسم متغیرها نامفهومه
شرطهای تو در تو زیادن
تغییر یک چیز چند فایل رو خراب میکنه
یک فایل هزاران خط شده
Function چند کار مختلف انجام میده
کامنتهای عجیب برای توضیح کد لازم شده
حذف یک Feature خیلی سخت شده
خودت از خواندن کد میترسی
📌 Refactor
یعنی بهتر کردن ساختار کد، بدون تغییر رفتار اصلی برنامه.
#CleanCode #Refactoring #Programming #Developer #کدنویسی
یک Function خیلی بزرگه
یک کد چند بار تکرار شده
اسم متغیرها نامفهومه
شرطهای تو در تو زیادن
تغییر یک چیز چند فایل رو خراب میکنه
یک فایل هزاران خط شده
Function چند کار مختلف انجام میده
کامنتهای عجیب برای توضیح کد لازم شده
حذف یک Feature خیلی سخت شده
خودت از خواندن کد میترسی
📌 Refactor
یعنی بهتر کردن ساختار کد، بدون تغییر رفتار اصلی برنامه.
#CleanCode #Refactoring #Programming #Developer #کدنویسی
❤4
۱۰ سؤال مهم قبل از شروع یک پروژه
قبل از کدنویسی بپرس:
کاربر این پروژه کیه؟
مشکل اصلی چیه؟
مهمترین Feature چیه؟
چه اطلاعاتی نیاز داریم؟
API از کجا میاد؟
چه محدودیتهایی داریم؟
نسخه موبایل داریم؟
چه حالتهای خطایی داریم؟
معیار موفقیت پروژه چیه؟
Deadline
واقعی چقدره؟
📌 خیلی از مشکلات پروژه از کد شروع نمیشن؛ از ابهام در نیازمندیها شروع میشن.
#SoftwareDevelopment
#ProjectManagement #Developer #Programming
قبل از کدنویسی بپرس:
کاربر این پروژه کیه؟
مشکل اصلی چیه؟
مهمترین Feature چیه؟
چه اطلاعاتی نیاز داریم؟
API از کجا میاد؟
چه محدودیتهایی داریم؟
نسخه موبایل داریم؟
چه حالتهای خطایی داریم؟
معیار موفقیت پروژه چیه؟
Deadline
واقعی چقدره؟
📌 خیلی از مشکلات پروژه از کد شروع نمیشن؛ از ابهام در نیازمندیها شروع میشن.
#SoftwareDevelopment
#ProjectManagement #Developer #Programming
❤2🔥1
🔥 این ترفند JavaScript رو خیلیها نمیدونن
فرض کن اینو داری:
احتمالاً مینویسی:
حتی میتونی چندتا مقدار بگیری:
اگر JavaScript میزنی،
#JavaScript #JS #Frontend #React
#Programming #کدنویسی #برنامه_نویسی #Codelines
فرض کن اینو داری:
const user = {
name: "Ali",
age: 22
};
میخوای name رو ازش بگیری.احتمالاً مینویسی:
const name = user.name;
اما میتونی خیلی تمیزتر بنویسی:const { name } = user;
این قابلیت اسمش Destructuringـه.حتی میتونی چندتا مقدار بگیری:
const { name, age } = user;
و جالبتر اینکه میتونی اسم متغیر رو هم عوض کنی:const { name: username } = user;
console.log(username);
📌 اینو زیاد توی React، کار با API و پروژههای واقعی میبینی.اگر JavaScript میزنی،
Destructuring از اون چیزهاییه که باید واقعاً بلد باشی، نه فقط اسمش رو شنیده باشی.#JavaScript #JS #Frontend #React
#Programming #کدنویسی #برنامه_نویسی #Codelines
❤2❤🔥1
🔥 ۵ قابلیت JavaScript که کدت رو تمیزتر میکنه
اگه هنوز اینا رو استفاده نمیکنی، وقتشه یادشون بگیری 👇
1. Optional Chaining
#JavaScript #JS #Frontend #Programming #کدنویسی #برنامه_نویسی #Codelines
اگه هنوز اینا رو استفاده نمیکنی، وقتشه یادشون بگیری 👇
1. Optional Chaining
user?.profile?.name
2. Nullish Coalescing
const name = user.name ?? "Guest";
3. Destructuring
const { name, age } = user;
4. Spread
const newUser = { ...user, age: 25 };
5. Default Parameter
function greet(name = "Guest") {}
📌 اینا چیزهای کوچیکین، ولی توی پروژههای واقعی خیلی زیاد استفاده میشن.#JavaScript #JS #Frontend #Programming #کدنویسی #برنامه_نویسی #Codelines
❤2
🚨 ۵ موردی که قبل از Push کردن کدت باید چک کنی
قبل از اینکه این دستور رو بزنی:
اینارو ببین:
☑️
☑️ فایل
☑️ Error
توی Console نداری؟
☑️ اسم متغیرهای تستی باقی نمونده؟
☑️ پروژه روی سیستم خودت واقعاً کار میکنه؟
همین ۳۰ ثانیه میتونه جلوی یک دردسر واقعی رو بگیره.
#Git #GitHub #Programming #Developer #Frontend #JavaScript #کدنویسی #Codelines
قبل از اینکه این دستور رو بزنی:
git pushاینارو ببین:
☑️
console.log
اضافی نداری؟☑️ فایل
.env اشتباهی Push نمیشه؟☑️ Error
توی Console نداری؟
☑️ اسم متغیرهای تستی باقی نمونده؟
☑️ پروژه روی سیستم خودت واقعاً کار میکنه؟
همین ۳۰ ثانیه میتونه جلوی یک دردسر واقعی رو بگیره.
#Git #GitHub #Programming #Developer #Frontend #JavaScript #کدنویسی #Codelines
❤2👏1
let numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers.length);