🔥 چرا بعضیها بعد از یک سال هنوز برنامهنویس مبتدی هستن؟
چون بیشتر وقتشون رو صرف یاد گرفتن میکنن، نه ساختن. 👇
📌 فقط آموزش جمع میکنن
📌 پروژه واقعی انجام نمیدن
📌 با اولین چالش جا میزنن
📌 منتظرن تا «کاملاً آماده» بشن
اما واقعیت اینه:
برنامهنویسی با شروع کردن رشد میکنه، نه با آماده شدن. 🚀
قرار نیست اول همهچیز رو بلد باشی و بعد پروژه بزنی؛
پروژه میزنی تا کمکم همهچیز رو یاد بگیری.
پس منتظر زمان مناسب نباش.
چون بیشتر وقتشون رو صرف یاد گرفتن میکنن، نه ساختن. 👇
📌 فقط آموزش جمع میکنن
📌 پروژه واقعی انجام نمیدن
📌 با اولین چالش جا میزنن
📌 منتظرن تا «کاملاً آماده» بشن
اما واقعیت اینه:
برنامهنویسی با شروع کردن رشد میکنه، نه با آماده شدن. 🚀
قرار نیست اول همهچیز رو بلد باشی و بعد پروژه بزنی؛
پروژه میزنی تا کمکم همهچیز رو یاد بگیری.
پس منتظر زمان مناسب نباش.
👍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
🚨 ۵ چیزی که هر Front-End Developer باید درباره API بدونه:
🔹
🔹
🔹
🔹
🔹
اما یه نکته مهم:
❌ فقط بلد بودن
Status Code
، Error Handling،
Authentication
و Loading State
رو هم باید بلد باشی.
📌 Save
کن؛ توی پروژه به کارت میاد.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
🔹
GET → گرفتن اطلاعات🔹
POST → ساخت اطلاعات جدید🔹
PUT → جایگزینی کامل اطلاعات🔹
PATCH → ویرایش بخشی از اطلاعات🔹
DELETE → حذف اطلاعاتاما یه نکته مهم:
❌ فقط بلد بودن
fetch()نشون نمیده که API رو کامل بلدی !Status Code
، Error Handling،
Authentication
و Loading State
رو هم باید بلد باشی.
📌 Save
کن؛ توی پروژه به کارت میاد.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
❤3🔥1
🔥 ۱۰ سایتی که باعث میشن سریعتر برنامهنویسی کنی:
🤖 ChatGPT → رفع خطا، توضیح کد و
ایده گرفتن.
🎨 Figma Community → UIهای آماده برای تمرین و پروژه.
🧩 Shadcn/UI → کامپوننتهای حرفهای React.
✨ Magic UI → کامپوننتها و انیمیشنهای آماده.
🌊 Tailwind CSS → مستندات کامل و نمونههای کاربردی.
🎯 React Icons → هزاران آیکون رایگان.
📦 NPM → پیدا کردن پکیجهای موردنیاز پروژه.
⚡ Excalidraw → طراحی سریع فلوچارت و ایدههای پروژه.
🌍 JSONPlaceholder → API رایگان برای تمرین.
🚀 Roadmap.sh → نقشه راه یادگیری برنامهنویسی.
📌 اگه این ۱۰ سایت رو بشناسی، هم سریعتر یاد میگیری، هم موقع پروژه کمتر گیر میکنی. 💙
🤖 ChatGPT → رفع خطا، توضیح کد و
ایده گرفتن.
🎨 Figma Community → UIهای آماده برای تمرین و پروژه.
🧩 Shadcn/UI → کامپوننتهای حرفهای React.
✨ Magic UI → کامپوننتها و انیمیشنهای آماده.
🌊 Tailwind CSS → مستندات کامل و نمونههای کاربردی.
🎯 React Icons → هزاران آیکون رایگان.
📦 NPM → پیدا کردن پکیجهای موردنیاز پروژه.
⚡ Excalidraw → طراحی سریع فلوچارت و ایدههای پروژه.
🌍 JSONPlaceholder → API رایگان برای تمرین.
🚀 Roadmap.sh → نقشه راه یادگیری برنامهنویسی.
📌 اگه این ۱۰ سایت رو بشناسی، هم سریعتر یاد میگیری، هم موقع پروژه کمتر گیر میکنی. 💙
❤1
🌐 چند روش ذخیره اطلاعات در مرورگر که هر Front-End Developer باید بدونه:
📦 localStorage → ذخیره اطلاعات تا
زمان پاک شدن
⏱️ sessionStorage → اطلاعات تا پایان بستن تب
🍪 Cookie → دادههای کوچک + امکان ارسال به سرور
🗄️ IndexedDB → ذخیره حجم زیادی از دادههای ساختاریافته
⚡ Cache Storage → ذخیره فایلها و Responseها برای افزایش سرعت
💾 Storage API → مدیریت و بررسی فضای ذخیرهسازی
📌 Save
کن؛ اینا از اون چیزاست که توی پروژه واقعاً به کارت میاد.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
📦 localStorage → ذخیره اطلاعات تا
زمان پاک شدن
⏱️ sessionStorage → اطلاعات تا پایان بستن تب
🍪 Cookie → دادههای کوچک + امکان ارسال به سرور
🗄️ IndexedDB → ذخیره حجم زیادی از دادههای ساختاریافته
⚡ Cache Storage → ذخیره فایلها و Responseها برای افزایش سرعت
💾 Storage API → مدیریت و بررسی فضای ذخیرهسازی
📌 Save
کن؛ اینا از اون چیزاست که توی پروژه واقعاً به کارت میاد.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
❤1
آموزش NestJS 12 از صفر تا پروژه واقعی | PDF فارسی
NestJS 12
رو از صفر و با زبان ساده یاد
بگیر؛
از Prisma، PostgreSQL و JWT تا Redis، تست، Docker و ساخت یه API واقعی برای پروژه CourseHub.
قیمت اصلی ۴۵۰
قیمت با تخفیف ۴۲۰
ثبت نام
NestJS 12
رو از صفر و با زبان ساده یاد
بگیر؛
از Prisma، PostgreSQL و JWT تا Redis، تست، Docker و ساخت یه API واقعی برای پروژه CourseHub.
قیمت با تخفیف ۴۲۰
ثبت نام
🔥1
⚡ ۸ میانبر 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
❤1🔥1
🔐 JWT
اگه تا حالا وارد یه سایت یا اپ شدی و دیگه لازم نبوده هر بار دوباره لاگین کنی، احتمال زیاد پشت صحنه از JWT استفاده شده.
JWT
یه توکنه که بعد از ورود موفق، سرور بهت میده. از اون به بعد هر درخواستی به سرور میفرستی، همین توکن رو هم همراهش میفرستی تا سرور بفهمه خودتی.
JWT
از ۳ بخش تشکیل شده:
🔹 Header: نوع توکن و الگوریتم امضا
🔹 Payload: اطلاعاتی مثل شناسه کاربر و زمان انقضا
🔹 Signature: مطمئن میکنه توکن دستکاری نشده.
⚠️ فقط یادت باشه اطلاعات داخل Payload رمزگذاری نشده؛ فقط Encode شده، پس اطلاعات حساس داخلش نذار.
#JWT #Backend #API #Security
اگه تا حالا وارد یه سایت یا اپ شدی و دیگه لازم نبوده هر بار دوباره لاگین کنی، احتمال زیاد پشت صحنه از JWT استفاده شده.
JWT
یه توکنه که بعد از ورود موفق، سرور بهت میده. از اون به بعد هر درخواستی به سرور میفرستی، همین توکن رو هم همراهش میفرستی تا سرور بفهمه خودتی.
JWT
از ۳ بخش تشکیل شده:
🔹 Header: نوع توکن و الگوریتم امضا
🔹 Payload: اطلاعاتی مثل شناسه کاربر و زمان انقضا
🔹 Signature: مطمئن میکنه توکن دستکاری نشده.
⚠️ فقط یادت باشه اطلاعات داخل Payload رمزگذاری نشده؛ فقط Encode شده، پس اطلاعات حساس داخلش نذار.
#JWT #Backend #API #Security
⚡1❤1
🤔 null و undefined
چه فرقی دارن؟
این دوتا خیلی شبیه هم به نظر میان، ولی
یکی نیستن!
حالا اینو ببین:
💡 خلاصه:
✅
✅
همین تفاوت کوچیک، موقع کار با APIها
خیلی مهم میشه.
#JavaScript #Frontend
چه فرقی دارن؟
این دوتا خیلی شبیه هم به نظر میان، ولی
یکی نیستن!
let name;
console.log(name);
خروجی:undefined
یعنی هنوز هیچ مقداری به متغیر ندادی.حالا اینو ببین:
let name = null;
اینجا خودت عمداً گفتی که این متغیر فعلاً هیچ مقداری نداره.💡 خلاصه:
✅
undefined = هنوز مقداردهی نشده.✅
null = عمداً خالیه.همین تفاوت کوچیک، موقع کار با APIها
خیلی مهم میشه.
#JavaScript #Frontend
❤1👏1
🤔 Library
و Framework چه فرقی دارن؟
خیلی ساده:
🔹 Library → تو تصمیم میگیری کِی ازش استفاده کنی.
🔹 Framework → ساختار و جریان کلی پروژه بیشتر توسط Framework
مشخص میشه.
مثلاً در دنیای Front-End:
React
معمولاً بهعنوان Library شناخته میشه،
در حالی که Next.js یک Framework بر پایه React محسوب میشه.
📌 این تفاوت رو برای مصاحبه هم بلد باش.
#React #NextJS #JavaScript #فرانت_اند #برنامه_نویسی #FrontEnd
و Framework چه فرقی دارن؟
خیلی ساده:
🔹 Library → تو تصمیم میگیری کِی ازش استفاده کنی.
🔹 Framework → ساختار و جریان کلی پروژه بیشتر توسط Framework
مشخص میشه.
مثلاً در دنیای Front-End:
React
معمولاً بهعنوان Library شناخته میشه،
در حالی که Next.js یک Framework بر پایه React محسوب میشه.
📌 این تفاوت رو برای مصاحبه هم بلد باش.
#React #NextJS #JavaScript #فرانت_اند #برنامه_نویسی #FrontEnd
❤1🔥1