🧹 ۱۰ نشونه که کدت نیاز به 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);
❤3
🤖 شبیهسازی مصاحبه Front-End با AI
میخوای قبل از مصاحبه واقعی، خودت رو محک بزنی؟ 😈
این پرامپت رو به AI بده:
اینطوری AI فقط سؤال نمیپرسه؛ نقاط ضعف مصاحبهات رو هم پیدا میکنه.
میخوای قبل از مصاحبه واقعی، خودت رو محک بزنی؟ 😈
این پرامپت رو به AI بده:
Act as a Senior Front-End interviewer.
Conduct a realistic interview.
Ask only one question at a time.
Questions should cover JavaScript, React, CSS, Browser, and Performance.
Do not reveal the correct answer until I respond.
After each answer:
* Give me a score from 0 to 10.
* Point out my mistakes.
* Ask a harder related question.
At the end, tell me how ready I am for a Junior / Mid / Senior position.
اینطوری AI فقط سؤال نمیپرسه؛ نقاط ضعف مصاحبهات رو هم پیدا میکنه.
❤2🔥1
«اگه برنامهنویسی بلدی، این ۷ کار رو میتونی بفروشی»
خیلیها فکر میکنن برای درآمد گرفتن باید حتماً پروژههای خیلی بزرگ بگیرن.
درحالیکه کلی کار کوچک وجود داره:
🔹 تبدیل Figma به سایت
🔹 رفع Bug
🔹 ساخت Landing Page
🔹 اتصال API
🔹 ساخت Dashboard
🔹 بهینهسازی سرعت
🔹 اضافه کردن Feature به پروژه موجود
اولین پول برنامهنویسیات قرار نیست از یک پروژه ۵۰۰ میلیونی بیاد.
از حل یک مشکل واقعی شروع میشه.
#درآمد_برنامه_نویسی #فریلنسری #برنامه_نویسی #Frontend #Developer #Codelines
خیلیها فکر میکنن برای درآمد گرفتن باید حتماً پروژههای خیلی بزرگ بگیرن.
درحالیکه کلی کار کوچک وجود داره:
🔹 تبدیل Figma به سایت
🔹 رفع Bug
🔹 ساخت Landing Page
🔹 اتصال API
🔹 ساخت Dashboard
🔹 بهینهسازی سرعت
🔹 اضافه کردن Feature به پروژه موجود
اولین پول برنامهنویسیات قرار نیست از یک پروژه ۵۰۰ میلیونی بیاد.
از حل یک مشکل واقعی شروع میشه.
#درآمد_برنامه_نویسی #فریلنسری #برنامه_نویسی #Frontend #Developer #Codelines
❤4👏1
«اگر فقط ۳ ماه وقت داشتی برای ورود به بازار کار آماده بشی...»
این کارها رو میکردم:
ماه اول:
JavaScript + Git + API
ماه دوم:
React + یک پروژه واقعی
ماه سوم:
TypeScript + next + پروژه دوم + Portfolio + تمرین مصاحبه
نه اینکه:
۵ Framework
۳ زبان
۱۰ دوره
رو نصفه شروع کنم.
هدف ورود به بازار کاره، نه جمع کردن تکنولوژی.
#بازار_کار #مسیر_یادگیری #Frontend #JavaScript #React #Programming #Codelines
این کارها رو میکردم:
ماه اول:
JavaScript + Git + API
ماه دوم:
React + یک پروژه واقعی
ماه سوم:
TypeScript + next + پروژه دوم + Portfolio + تمرین مصاحبه
نه اینکه:
۵ Framework
۳ زبان
۱۰ دوره
رو نصفه شروع کنم.
هدف ورود به بازار کاره، نه جمع کردن تکنولوژی.
#بازار_کار #مسیر_یادگیری #Frontend #JavaScript #React #Programming #Codelines
❤4
«این سؤال رو توی مصاحبه ازت بپرسن، معلوم میشه واقعاً برنامهنویسی بلدی یا نه»
فرض کن یک API داری که گاهی ۳ ثانیه طول میکشه جواب بده.
چی کار میکنی؟
❌ فقط Loading میذاری؟
یا بررسی میکنی:
API چرا کند شده؟
Cache لازم داریم؟
Request اضافی داریم؟
Pagination داریم؟
Query سنگینه؟
میتونیم اطلاعات رو Lazy Load کنیم؟
برنامهنویس واقعی فقط کد نمینویسه؛ دلیل کند بودن سیستم رو پیدا میکنه.
#مصاحبه_برنامه_نویسی #Developer #Frontend #Backend #Programming #کدنویسی
فرض کن یک API داری که گاهی ۳ ثانیه طول میکشه جواب بده.
چی کار میکنی؟
❌ فقط Loading میذاری؟
یا بررسی میکنی:
API چرا کند شده؟
Cache لازم داریم؟
Request اضافی داریم؟
Pagination داریم؟
Query سنگینه؟
میتونیم اطلاعات رو Lazy Load کنیم؟
برنامهنویس واقعی فقط کد نمینویسه؛ دلیل کند بودن سیستم رو پیدا میکنه.
#مصاحبه_برنامه_نویسی #Developer #Frontend #Backend #Programming #کدنویسی
❤4🔥1
💰 اگه میخوای اولین پروژه یا اولین شغلت رو بگیری، این ۵ کار رو انجام بده:
✅ توی سایتهای استخدام مثل جابینجا، جابویژن و... رزومه بساز و هر روز برای آگهیهای جدید رزومه بفرست. حتی اگه همه شرایطش رو نداری.
✅ توی سایتهای فریلنسری مثل پونیشا و کارلنسر پروفایل کامل بساز و هر روز برای چند پروژه پیشنهاد بفرست.
✅ توی لینکدین، با برنامهنویسها و مدیرهای فنی ارتباط بگیر. خیلی از
فرصتهای شغلی اصلاً آگهی نمیشن.
✅ نمونهکارهات رو داخل GitHub و یک پورتفولیو منتشر کن. خیلی از شرکتها قبل از مصاحبه اول کدهای تو رو نگاه میکنن.
✅ توی گروههای تلگرام و کامیونیتیهای برنامهنویسی عضو باش. خیلی از پروژههای کوچک و معرفیها از همین گروهها پیدا میشن.
یه اشتباه بزرگ اینه که فقط منتظر بمونی یه آگهی مناسب پیدا بشه.
هر روز ۱۰ تا درخواست بفرست.
ممکنه ۹ تاش بیجواب بمونه، ولی همون یکی، میتونه مسیر شغلی تو رو عوض کنه. 🚀
✅ توی سایتهای استخدام مثل جابینجا، جابویژن و... رزومه بساز و هر روز برای آگهیهای جدید رزومه بفرست. حتی اگه همه شرایطش رو نداری.
✅ توی سایتهای فریلنسری مثل پونیشا و کارلنسر پروفایل کامل بساز و هر روز برای چند پروژه پیشنهاد بفرست.
✅ توی لینکدین، با برنامهنویسها و مدیرهای فنی ارتباط بگیر. خیلی از
فرصتهای شغلی اصلاً آگهی نمیشن.
✅ نمونهکارهات رو داخل GitHub و یک پورتفولیو منتشر کن. خیلی از شرکتها قبل از مصاحبه اول کدهای تو رو نگاه میکنن.
✅ توی گروههای تلگرام و کامیونیتیهای برنامهنویسی عضو باش. خیلی از پروژههای کوچک و معرفیها از همین گروهها پیدا میشن.
یه اشتباه بزرگ اینه که فقط منتظر بمونی یه آگهی مناسب پیدا بشه.
هر روز ۱۰ تا درخواست بفرست.
ممکنه ۹ تاش بیجواب بمونه، ولی همون یکی، میتونه مسیر شغلی تو رو عوض کنه. 🚀
❤3👏1
🔥 چرا بعضیها بعد از یک سال هنوز برنامهنویس مبتدی هستن؟
چون بیشتر وقتشون رو صرف یاد گرفتن میکنن، نه ساختن. 👇
📌 فقط آموزش جمع میکنن
📌 پروژه واقعی انجام نمیدن
📌 با اولین چالش جا میزنن
📌 منتظرن تا «کاملاً آماده» بشن
اما واقعیت اینه:
برنامهنویسی با شروع کردن رشد میکنه، نه با آماده شدن. 🚀
قرار نیست اول همهچیز رو بلد باشی و بعد پروژه بزنی؛
پروژه میزنی تا کمکم همهچیز رو یاد بگیری.
پس منتظر زمان مناسب نباش.
چون بیشتر وقتشون رو صرف یاد گرفتن میکنن، نه ساختن. 👇
📌 فقط آموزش جمع میکنن
📌 پروژه واقعی انجام نمیدن
📌 با اولین چالش جا میزنن
📌 منتظرن تا «کاملاً آماده» بشن
اما واقعیت اینه:
برنامهنویسی با شروع کردن رشد میکنه، نه با آماده شدن. 🚀
قرار نیست اول همهچیز رو بلد باشی و بعد پروژه بزنی؛
پروژه میزنی تا کمکم همهچیز رو یاد بگیری.
پس منتظر زمان مناسب نباش.
❤5👏1
🔥 ۳ ترفند CSS خفن و کاربردی که کمتر کسی استفاده میکنه!
اگر CSS کار میکنی، این ۳ مورد رو حتماً ذخیره کن 👇
1️⃣ سایز متن رو هوشمند کن با clamp()
📱 متن بین موبایل و دسکتاپ خودش متناسب میشه؛ بدون Media Query
2️⃣نسبت تصویر رو همیشه ثابت نگه دارگه دار
🔥 برای کارتهای محصول، گالری و Thumbnail فوقالعا
3️⃣ متنهای چندخطی رو حرفهایتر کن
✨ مرورگر خطوط عنوان رو متعادلتر میچینه و ظاهر UI تمیزتر میشه.
💡و CSS فقط رنگ و فاصله نیست؛ وقتی ابزارهای جدیدش رو بشناسی، خیلی از کارها بدون JavaScript انجام میشن.
اگر CSS کار میکنی، این ۳ مورد رو حتماً ذخیره کن 👇
1️⃣ سایز متن رو هوشمند کن با clamp()
h1 {
font-size: clamp(2rem, 5vw, 4rem);
}📱 متن بین موبایل و دسکتاپ خودش متناسب میشه؛ بدون Media Query
2️⃣نسبت تصویر رو همیشه ثابت نگه دارگه دار
img {
aspect-ratio: 16 / 9;
object-fit: cover;
}🔥 برای کارتهای محصول، گالری و Thumbnail فوقالعا
3️⃣ متنهای چندخطی رو حرفهایتر کن
h2 {
text-wrap: balance;
}✨ مرورگر خطوط عنوان رو متعادلتر میچینه و ظاهر UI تمیزتر میشه.
💡و CSS فقط رنگ و فاصله نیست؛ وقتی ابزارهای جدیدش رو بشناسی، خیلی از کارها بدون JavaScript انجام میشن.
❤6🔥1
💻 اولین قانون برنامهنویسی: از ارورها نترس! 😄
اگر برنامهنویسی میکنی، دیر یا زود با این صحنه روبهرو میشی:
🔴 Error!
اما یه نکته مهم رو یادت باشه:
❌ ارور یعنی شکست خوردی؟ نه!
✅ ارور یعنی کامپیوتر داره بهت میگه کجای کارت نیاز به بررسی داره.
هر برنامهنویسی، حتی حرفهایترینها، هر روز با خطا و باگ سروکله میزنن.
تفاوت یک برنامهنویس مبتدی و حرفهای این نیست که یکی ارور میبینه و دیگری نه؛
🔥 تفاوتشون اینه که برنامهنویس حرفهای بلد شده ارور رو بخونه، علتش رو پیدا کنه و حلش کنه.
پس دفعه بعد که با یک ارور روبهرو شدی، فرار نکن! 😎
📌 ارور دشمن تو نیست؛ یکی از بهترین معلمهای توئه.
اگر برنامهنویسی میکنی، دیر یا زود با این صحنه روبهرو میشی:
🔴 Error!
اما یه نکته مهم رو یادت باشه:
❌ ارور یعنی شکست خوردی؟ نه!
✅ ارور یعنی کامپیوتر داره بهت میگه کجای کارت نیاز به بررسی داره.
هر برنامهنویسی، حتی حرفهایترینها، هر روز با خطا و باگ سروکله میزنن.
تفاوت یک برنامهنویس مبتدی و حرفهای این نیست که یکی ارور میبینه و دیگری نه؛
🔥 تفاوتشون اینه که برنامهنویس حرفهای بلد شده ارور رو بخونه، علتش رو پیدا کنه و حلش کنه.
پس دفعه بعد که با یک ارور روبهرو شدی، فرار نکن! 😎
📌 ارور دشمن تو نیست؛ یکی از بهترین معلمهای توئه.
😁3❤2👍1
🤖 با وجود هوش مصنوعی، هنوز برنامهنویسی یاد بگیریم؟
قطعاً بله! 🔥
هوش مصنوعی قرار نیست برنامهنویسهای خوب رو حذف کنه؛
بلکه کارهای تکراری رو سریعتر و سادهتر میکنه.
کسی که فقط کد مینویسه، ممکنه جایگزین بشه.
اما کسی که بلد باشه:
🧠 درست فکر کنه
💡 ایده بده
🛠 مسئله حل کنه
با هوش مصنوعی، چند برابر قدرتمندتر میشه. 🚀
🎯 برنامهنویس آینده کسی نیست که با AI رقابت کنه؛
کسیه که بلد باشه از AI درست استفاده کنه.
#برنامه_نویسی #هوش_مصنوعی #AI #تکنولوژی
قطعاً بله! 🔥
هوش مصنوعی قرار نیست برنامهنویسهای خوب رو حذف کنه؛
بلکه کارهای تکراری رو سریعتر و سادهتر میکنه.
کسی که فقط کد مینویسه، ممکنه جایگزین بشه.
اما کسی که بلد باشه:
🧠 درست فکر کنه
💡 ایده بده
🛠 مسئله حل کنه
با هوش مصنوعی، چند برابر قدرتمندتر میشه. 🚀
🎯 برنامهنویس آینده کسی نیست که با AI رقابت کنه؛
کسیه که بلد باشه از AI درست استفاده کنه.
#برنامه_نویسی #هوش_مصنوعی #AI #تکنولوژی
❤3👍1💯1
🎯 یه ابزار خفن که هر برنامهنویسی باید بشناسه!
🧠 Excalidraw
قبل از اینکه کد بزنی، ایدهت رو اینجا بکش!
میتونی باهاش فلوچارت، دیاگرام، وایرفریم و معماری پروژه طراحی کنی؛ حتی چند نفر همزمان روی یک صفحه کار کنن. ✨
🔥 رایگان و Open Source
⚡ بدون نیاز به نصب
📤 خروجی PNG و SVG
🤝 همکاری آنلاین
اگه تازه برنامهنویسی رو شروع کردی، برای اینکه قبل از کدنویسی ذهنت رو مرتب کنی فوقالعادهست.
🔗 [excalidraw.com](https://excalidraw.com/?utm_source=chatgpt.com)
#برنامه_نویسی #ابزار_برنامه_نویسی #Developer
🧠 Excalidraw
قبل از اینکه کد بزنی، ایدهت رو اینجا بکش!
میتونی باهاش فلوچارت، دیاگرام، وایرفریم و معماری پروژه طراحی کنی؛ حتی چند نفر همزمان روی یک صفحه کار کنن. ✨
🔥 رایگان و Open Source
⚡ بدون نیاز به نصب
📤 خروجی PNG و SVG
🤝 همکاری آنلاین
اگه تازه برنامهنویسی رو شروع کردی، برای اینکه قبل از کدنویسی ذهنت رو مرتب کنی فوقالعادهست.
🔗 [excalidraw.com](https://excalidraw.com/?utm_source=chatgpt.com)
#برنامه_نویسی #ابزار_برنامه_نویسی #Developer
Excalidraw
Excalidraw — Collaborative whiteboarding made easy
Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.
👏2❤1
const user = {
name: "Sara",
age: 20
};
console.log(user.name);اگه چند وقته داری برنامهنویسی یاد میگیری، این پست رو تا آخر بخون 👇
یه مشکل خیلی رایج بین بچههایی که فرانتاند یاد میگیرن وجود داره:
مدام در حال یاد گرفتنن، ولی هیچوقت احساس نمیکنن آمادهان!
یه مدت HTML و CSS میخونن...
بعد میرن سراغ JavaScript.
وسطش میبینن همه درباره React حرف میزنن، میرن React.
بعد یکی میگه Git و GitHub برای استخدام لازمه.
یکی میگه پروژه بزن.
یکی میگه رزومه بساز.
یکی میگه بدون TypeScript شانسی نداری...
و آخرش چی؟ 😐
بعد از چند ماه کلی چیز دیدی، ولی هنوز نمیدونی:
«الان دقیقاً باید چی یاد بگیرم و قدم بعدیم چیه؟»
یه مشکل خیلی رایج بین بچههایی که فرانتاند یاد میگیرن وجود داره:
مدام در حال یاد گرفتنن، ولی هیچوقت احساس نمیکنن آمادهان!
یه مدت HTML و CSS میخونن...
بعد میرن سراغ JavaScript.
وسطش میبینن همه درباره React حرف میزنن، میرن React.
بعد یکی میگه Git و GitHub برای استخدام لازمه.
یکی میگه پروژه بزن.
یکی میگه رزومه بساز.
یکی میگه بدون TypeScript شانسی نداری...
و آخرش چی؟ 😐
بعد از چند ماه کلی چیز دیدی، ولی هنوز نمیدونی:
«الان دقیقاً باید چی یاد بگیرم و قدم بعدیم چیه؟»
❤3🔥1
«الان دقیقاً باید چی یاد بگیرم و قدم بعدیم چیه؟»
مشکل خیلی وقتها کمبود آموزش نیست.
اتفاقاً آموزش رایگان اونقدر زیاده که خودش تبدیل شده به مشکل!
چیزی که خیلیها ندارن یک مسیر مشخص و منظمه.
مسیری که بگه:
از اینجا شروع کن ➜ اینها رو یاد بگیر ➜ تمرین کن ➜ پروژه بساز ➜ برو مرحله بعد.
قبل از اینکه امروز دوباره یک آموزش جدید باز کنی، از خودت بپرس:
من واقعاً دارم در یک مسیر جلو میرم، یا فقط دارم آموزش جمع میکنم؟
مشکل خیلی وقتها کمبود آموزش نیست.
اتفاقاً آموزش رایگان اونقدر زیاده که خودش تبدیل شده به مشکل!
چیزی که خیلیها ندارن یک مسیر مشخص و منظمه.
مسیری که بگه:
از اینجا شروع کن ➜ اینها رو یاد بگیر ➜ تمرین کن ➜ پروژه بساز ➜ برو مرحله بعد.
قبل از اینکه امروز دوباره یک آموزش جدید باز کنی، از خودت بپرس:
من واقعاً دارم در یک مسیر جلو میرم، یا فقط دارم آموزش جمع میکنم؟
❤6🔥1