آموزش برنامه نویسی فرانت اند
6.72K subscribers
356 photos
48 videos
27 files
132 links
👈🏻 ارتباط با من: @codelines_support 🔅

عرفان رضایی هستم ❤️
و اینجا خیلی ساده بهت یاد میدم
چطوری اصولی #برنامه_نویسی #فرانت_اند یاد بگیری 💻✨
که هم لذت ببری و هم وارد بازار کار بشی
😍🥇
@satisfaction_codelines 👈 نتایج و رضایت دوره

آدرس سایت 👈🏻: codelines.ir
Download Telegram
🔥 چرا بعضی‌ها بعد از یک سال هنوز برنامه‌نویس مبتدی هستن؟

چون بیشتر وقتشون رو صرف یاد گرفتن می‌کنن، نه ساختن. 👇

📌 فقط آموزش جمع می‌کنن
📌 پروژه واقعی انجام نمی‌دن
📌 با اولین چالش جا می‌زنن
📌 منتظرن تا «کاملاً آماده» بشن

اما واقعیت اینه:

برنامه‌نویسی با شروع کردن رشد می‌کنه، نه با آماده شدن. 🚀

قرار نیست اول همه‌چیز رو بلد باشی و بعد پروژه بزنی؛
پروژه می‌زنی تا کم‌کم همه‌چیز رو یاد بگیری.

پس منتظر زمان مناسب نباش.
👍1🔥1
«این سؤال رو توی مصاحبه ازت بپرسن، معلوم میشه واقعاً برنامه‌نویسی بلدی یا نه»

فرض کن یک 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);
🚀 ۱۰ سایت رایگان برای آنلاین کردن پروژه‌های برنامه‌نویسی 🔥

📌 ذخیره کن؛ بعداً بهشون نیاز پیدا می‌کنی

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
❤1
👨‍💻 اگر تازه وارد پروژه واقعی شدی، اینا
رو زیاد می‌شنوی:


حتما ذخیره‌ش کن توی محیط کاری خیلی به دردت میخوره

🔹 Code Review → بررسی کد

🔹 Pull Request → درخواست ادغام تغییرات

🔹 CI/CD → فرآیند خودکار
Build/Test/Deploy

🔹 Staging → محیط قبل از Production

🔹 Production → محیط واقعی کاربران

📌 این اصطلاحات رو فقط حفظ نکن؛ باید بدونی کجا و چرا استفاده میشن.

#برنامه_نویسی #GitHub #DevOps #SoftwareDevelopment #Developer #FrontEnd
❤1👏1
🚨 ۵ چیزی که هر Front-End Developer باید درباره API بدونه:

🔹 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 → نقشه راه یادگیری برنامه‌نویسی.

📌 اگه این ۱۰ سایت رو بشناسی، هم سریع‌تر یاد می‌گیری، هم موقع پروژه کمتر گیر می‌کنی. 💙
❤1
🌐 چند روش ذخیره اطلاعات در مرورگر که هر Front-End Developer باید بدونه:

📦 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.


قیمت اصلی ۴۵۰
قیمت با تخفیف ۴۲۰

ثبت نام
🔥1
⚡ ۸ میانبر VS Code که بهتره حفظشون کنی:

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
const arr = [1, 2, 3];
console.log(arr.at(-1));
خروجی‌ کد بالا چیه؟
Anonymous Quiz
6%
1
16%
2
35%
3
43%
Undefined
🔐 JWT


اگه تا حالا وارد یه سایت یا اپ شدی و دیگه لازم نبوده هر بار دوباره لاگین کنی، احتمال زیاد پشت صحنه از JWT استفاده شده.

JWT
یه توکنه که بعد از ورود موفق، سرور بهت می‌ده. از اون به بعد هر درخواستی به سرور می‌فرستی، همین توکن رو هم همراهش می‌فرستی تا سرور بفهمه خودتی.

JWT
از ۳ بخش تشکیل شده:

🔹 Header: نوع توکن و الگوریتم امضا
🔹 Payload: اطلاعاتی مثل شناسه کاربر و زمان انقضا
🔹 Signature: مطمئن می‌کنه توکن دستکاری نشده.

⚠️ فقط یادت باشه اطلاعات داخل Payload رمزگذاری نشده؛ فقط Encode شده، پس اطلاعات حساس داخلش نذار.

#JWT #Backend #API #Security
⚡1❤1
رشد کردن همین قدر سادس 😇
❤5🔥1💯1
🤔 null و undefined
چه فرقی دارن؟

این دوتا خیلی شبیه هم به نظر میان، ولی
یکی نیستن!

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
❤1🔥1