اگه میخوای Frontend Developer بشی:
❌ هر روز دنبال Framework جدید نباش.
✅ JavaScript
رو عمیق یاد بگیر.
چون Frameworkها عوض میشن؛
ولی JavaScript هنوز سر جاشه. 🔥
#Frontend #JavaScript #React #WebDevelopment #برنامه_نویسی
❌ هر روز دنبال Framework جدید نباش.
✅ JavaScript
رو عمیق یاد بگیر.
چون Frameworkها عوض میشن؛
ولی JavaScript هنوز سر جاشه. 🔥
#Frontend #JavaScript #React #WebDevelopment #برنامه_نویسی
❤1💯1
۳ اشتباهی که باعث میشه توی مصاحبه فرانتاند رد بشی.
اشتباه اول: فکر میکنی باید جواب همه سؤالها رو بلد باشی.
در صورتی که مصاحبهکننده بیشتر میخواد ببینه وقتی جواب رو نمیدونی، چطور فکر میکنی و به راهحل میرسی.
دومی: فقط تئوری خوندی، ولی پروژه واقعی نساختی.
وقتی ازت میپرسن «این قابلیت رو خودت پیاده کردی؟» یا «چرا این روش رو انتخاب کردی؟» دیگه جوابی نداری.
سومی: قبل از مصاحبه، پروژههای خودت رو مرور نمیکنی.
خیلی وقتها بیشتر سؤالها از روی رزومه و پروژههای خودته، نه فقط React و JavaScript.
یادت باشه، توی مصاحبه قرار نیست ثابت کنی همه چیز رو بلدی؛ قرارِ نشون بدی میتونی یاد بگیری و مسئله حل کنی
اشتباه اول: فکر میکنی باید جواب همه سؤالها رو بلد باشی.
در صورتی که مصاحبهکننده بیشتر میخواد ببینه وقتی جواب رو نمیدونی، چطور فکر میکنی و به راهحل میرسی.
دومی: فقط تئوری خوندی، ولی پروژه واقعی نساختی.
وقتی ازت میپرسن «این قابلیت رو خودت پیاده کردی؟» یا «چرا این روش رو انتخاب کردی؟» دیگه جوابی نداری.
سومی: قبل از مصاحبه، پروژههای خودت رو مرور نمیکنی.
خیلی وقتها بیشتر سؤالها از روی رزومه و پروژههای خودته، نه فقط React و JavaScript.
یادت باشه، توی مصاحبه قرار نیست ثابت کنی همه چیز رو بلدی؛ قرارِ نشون بدی میتونی یاد بگیری و مسئله حل کنی
❤2
🤯 یک اشتباه کوچیک در React
این کد رو ببین:
❌ نه!
اینجا
✅ معمولاً باید بنویسی:
این کد رو ببین:
<button onClick={handleClick()}>
Click
</button>
به نظرت درست نوشته شده؟❌ نه!
اینجا
handleClick همون لحظه Render اجرا میشه.✅ معمولاً باید بنویسی:
<button onClick={handleClick}>
Click
</button>
📌 یک جفت () میتونه کل رفتار Component رو عوض کنه.❤1
📱 Mobile First
یعنی چی؟
یعنی طراحی و توسعه رو اول برای صفحه کوچک شروع کنی:
Mobile → Tablet → Desktop
نه اینکه اول یه سایت دسکتاپ بسازی و آخر کار
سعی کنی جمعش کنی داخل موبایل. 😄
✅ CSS سادهتر
✅ تمرکز روی محتوای ضروری
✅ Responsive Design بهتر
📌 اگه Front-End کار میکنی، Mobile First رو جدی بگیر.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
یعنی چی؟
یعنی طراحی و توسعه رو اول برای صفحه کوچک شروع کنی:
Mobile → Tablet → Desktop
نه اینکه اول یه سایت دسکتاپ بسازی و آخر کار
سعی کنی جمعش کنی داخل موبایل. 😄
✅ CSS سادهتر
✅ تمرکز روی محتوای ضروری
✅ Responsive Design بهتر
📌 اگه Front-End کار میکنی، Mobile First رو جدی بگیر.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
👍2❤1🔥1
🚨 ۵ نکته JavaScript که خیلیها دیر یاد میگیرن:
🔹
🔹
🔹
🔹
🔹
💡 لازم نیست JavaScript رو فقط با حفظ کردن یاد بگیری؛
بفهم هر ابزار کِی به درد میخوره.
📌 Save
کن؛ اینا توی پروژه واقعاً کاربردیان.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
🔹
?. → جلوگیری از خطای دسترسی به null/undefined🔹
?? → مقدار پیشفرض فقط وقتی مقدار null/undefined باشه🔹
Object.freeze() → جلوگیری از تغییر مستقیم آبجکت🔹
structuredClone() → کپی عمیق دادهها🔹
Promise.all() → اجرای چند Promise بهصورت همزمان💡 لازم نیست JavaScript رو فقط با حفظ کردن یاد بگیری؛
بفهم هر ابزار کِی به درد میخوره.
📌 Save
کن؛ اینا توی پروژه واقعاً کاربردیان.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
❤1🔥1
😳 چرا نباید داخل forEach از async/await استفاده کنی؟
۹۰٪ برنامهنویسها حداقل یک بار این اشتباه رو انجام دادن.
❌
منتظر نمیمونه.
چون
✅ راه درست:
۹۰٪ برنامهنویسها حداقل یک بار این اشتباه رو انجام دادن.
users.forEach(async (user) => {
await sendEmail(user);
});
console.log("Done");
فکر میکنی اول کدوم اجرا میشه؟❌
Done منتظر نمیمونه.
چون
forEach منتظر Promiseها نمیمونه.✅ راه درست:
for (const user of users) {
await sendEmail(user);
}❤1🔥1
🔥 چرا بعضیها بعد از یک سال هنوز برنامهنویس مبتدی هستن؟
چون بیشتر وقتشون رو صرف یاد گرفتن میکنن، نه ساختن. 👇
📌 فقط آموزش جمع میکنن
📌 پروژه واقعی انجام نمیدن
📌 با اولین چالش جا میزنن
📌 منتظرن تا «کاملاً آماده» بشن
اما واقعیت اینه:
برنامهنویسی با شروع کردن رشد میکنه، نه با آماده شدن. 🚀
قرار نیست اول همهچیز رو بلد باشی و بعد پروژه بزنی؛
پروژه میزنی تا کمکم همهچیز رو یاد بگیری.
پس منتظر زمان مناسب نباش.
چون بیشتر وقتشون رو صرف یاد گرفتن میکنن، نه ساختن. 👇
📌 فقط آموزش جمع میکنن
📌 پروژه واقعی انجام نمیدن
📌 با اولین چالش جا میزنن
📌 منتظرن تا «کاملاً آماده» بشن
اما واقعیت اینه:
برنامهنویسی با شروع کردن رشد میکنه، نه با آماده شدن. 🚀
قرار نیست اول همهچیز رو بلد باشی و بعد پروژه بزنی؛
پروژه میزنی تا کمکم همهچیز رو یاد بگیری.
پس منتظر زمان مناسب نباش.
👍1🔥1
«این سؤال رو توی مصاحبه ازت بپرسن، معلوم میشه واقعاً برنامهنویسی بلدی یا نه»
فرض کن یک 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 #کدنویسی
❤2🔥1
آموزش برنامه نویسی فرانت اند
اونایی که زدن برنامه نویسن
بیینم میتونن این سوال رو جواب بدن 🙄
بیینم میتونن این سوال رو جواب بدن 🙄
console.log(typeof null);
console.log(null == undefined);
console.log(null === undefined);
console.log([] == false);
خروجی کد بالا کدومه ؟
Anonymous Quiz
23%
null / true / false / true
40%
object / true / false / true
26%
object / false / false / false
11%
null / false / true / false
🚀 ۱۰ سایت رایگان برای آنلاین کردن پروژههای برنامهنویسی 🔥
📌 ذخیره کن؛ بعداً بهشون نیاز پیدا میکنی
Vercel
Netlify
GitHub Pages
Cloudflare Pages
Firebase Hosting
Render
GitLab Pages
Surge
Replit
Gitpod
📤 برای یه برنامهنویس بفرست که هنوز پروژههاشو فقط روی سیستمش نگه داشته.
برای نشون دادن نمونه کارهاتون عالیه🙃
📌 ذخیره کن؛ بعداً بهشون نیاز پیدا میکنی
Vercel
Netlify
GitHub Pages
Cloudflare Pages
Firebase Hosting
Render
GitLab Pages
Surge
Replit
Gitpod
📤 برای یه برنامهنویس بفرست که هنوز پروژههاشو فقط روی سیستمش نگه داشته.
برای نشون دادن نمونه کارهاتون عالیه🙃
❤2
🎯 یه ابزار خفن که هر برنامهنویسی باید بشناسه!
🧠 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.
❤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
❤1👏1