TGViewer
Channel Public Channel
آموزش برنامه نویسی فرانت اند

آموزش برنامه نویسی فرانت اند

@codelines_ir

👈🏻 ارتباط با من: @codelines_support 🔅

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

آدرس سایت 👈🏻: codelines.ir
Open in Telegram
Subscribers
6.49K
Photos
357
Videos
48
Links
133

Showing posts older than #4749 · Back to latest

Older Posts 20 shown
Post #4748 255
۵ چیزی که یک دوره برنامه‌نویسی خوب باید داشته باشه

قبل از خرید هر دوره‌ای اینا رو بررسی کن:

مسیر مشخص داشته باشه.
فقط Syntax آموزش نده.
پروژه واقعی داشته باشه.
تمرین و Challenge داشته باشه.
بعد از دوره بدون مدرس هم بتونی ادامه بدی.

چون هدف دوره این نیست که:
«ویدیوها رو تموم کنی.»
هدف اینه که بعدش بتونی خودت پروژه بسازی.

#آموزش_برنامه_نویسی #دوره_برنامه_نویسی #Developer #Programming
  • ❤ 3
  • 👏 1
Post #4747 279
😵‍💫 چرا با اینکه زیاد آموزش می‌بینی، هنوز نمی‌تونی پروژه بزنی؟

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

یک آموزش ۲ ساعته می‌بینی و آخرش حس می‌کنی خیلی چیزها یاد گرفتی.

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

این یعنی باید نسبتِ «آموزش دیدن» به «تمرین کردن» رو تغییر بدی.

📌 آموزش باید شروع یادگیری باشه، نه پایانش.

#برنامه_نویسی #یادگیری #فرانت_اند #Frontend #Developer
  • ❤ 6
  • 👍 3
Post #4746 279
⏳ «وقت ندارم برنامه‌نویسی یاد بگیرم!»

لازم نیست هر روز ۵ ساعت وقت بذاری.

اگر روزی فقط ۴۵ دقیقه وقت داری:
۱۵ دقیقه → یادگیری
۲۰ دقیقه → کدنویسی
۱۰ دقیقه → مرور

بعد از چند ماه، همین زمان‌های کوچک جمع میشن.

📌 مشکل خیلی وقت‌ها کمبود زمان نیست؛

نداشتن برنامه مشخصه.
  • ❤ 8
  • 👍 2
Post #4744 326
🔥 ۷ چیزی که قبل از استخدام شدن به‌عنوان Frontend Developer باید بلد باشی

Git و GitHub
کار با API
Authentication
مدیریت State
Error Handling
Debugging
Deploy کردن پروژه

ولی نکته اینجاست 👇
خیلی‌ها اینا رو تئوری بلدن.

ولی وقتی میگی:
«خب حالا یه پروژه از صفر بساز.»

اینجاست که تفاوت بلد بودن و تونستن مشخص میشه.

اگه هدفت اینه که فقط آموزش نبینی و واقعاً بتونی پروژه بسازی، مسیر یادگیریت باید پروژه‌محور باشه.

#برنامه_نویسی #فرانت_اند #جاوااسکریپت #Frontend #JavaScript #React #Git #GitHub #برنامه_نویس #بازار_کار #استخدام #Codelines
  • ❤ 5
  • 🔥 1
Post #4743 298
🤯 یک اشتباه کوچیک در React

این کد رو ببین:

<button onClick={handleClick()}>
  Click
</button>

به نظرت درست نوشته شده؟
❌ نه!

اینجا handleClick همون لحظه Render اجرا میشه.

✅ معمولاً باید بنویسی:

<button onClick={handleClick}>
  Click
</button>


📌 یک جفت () می‌تونه کل رفتار Component رو عوض کنه.
  • ❤ 5
Post #4742 287
۱۰ اشتباه امنیتی رایج در پروژه‌های Web

نگه‌داشتن Secret داخل Frontend

اعتماد کردن به داده کاربر

نداشتن Authorization سمت Server

Password
بدون Hash مناسب

نمایش اطلاعات حساس در Error

CORS اشتباه

نبود Rate Limiting

Dependencyهای قدیمی

Validation ناقص

Log کردن اطلاعات حساس

📌 امنیت چیزی نیست که آخر پروژه بهش اضافه کنی؛ از اول باید بخشی از طراحی باشه.

#CyberSecurity #WebSecurity #Backend #Frontend #Programming
  • ❤ 3
  • 🔥 1
Post #4741 288
۱۰
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
Post #4740 273
فرق slice و splice رو قاطی نکن!

این دو تا اسمشون شبیه همدیگه‌ست ولی رفتار متفاوتی دارن.


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
Post #4739 308
چرا همه Developerها باید HTTP رو بفهمن؟

وقتی می‌نویسی:
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
Post #4738 265
اگه می‌خوای Frontend Developer بشی:

❌ هر روز دنبال Framework جدید نباش.

✅ JavaScript
رو عمیق یاد بگیر.

چون Frameworkها عوض می‌شن؛
ولی JavaScript هنوز سر جاشه. 🔥

#Frontend #JavaScript #React #WebDevelopment #برنامه_نویسی
  • ❤ 4
  • 🔥 1
Post #4736 289 
let arr = [10, 20, 30];
console.log(arr[1]);
Post #4735 314
چرا filter یکی از کاربردی‌ترین متدهای JavaScriptـه؟

فرض کن فقط می‌خوای کاربران بالای ۱۸ سال رو داشته باشی:

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
Post #4734 273
HOTFIX
یعنی چی و چرا برنامه‌نویس‌ها ازش می‌ترسن؟

فرض کن ساعت ۱۰ شب متوجه میشن پرداخت سایت خراب شده و کاربران نمی‌تونن خرید کنن.

قرار نیست صبر کنن تا Sprint بعدی!

یک تغییر سریع و ضروری انجام میدن تا مشکل Production برطرف بشه.
این میشه:

🔥 Hotfix
ولی حواست باشه:

Hotfix
یعنی سریع حل کردن مشکل، نه
اینکه بدون بررسی کد رو بندازی روی Production.

بعدش باید علت اصلی مشکل هم بررسی بشه.

#Hotfix #Production #Developer #Programming #برنامه_نویسی #Frontend
Post #4733 270
Rollback
یعنی چی؟ 🔙

Deploy
کردی.
۵ دقیقه بعد:
سایت خراب میشه.

اولین سؤال ممکنه این باشه:

Can we rollback?

Rollback
یعنی برگردوندن سیستم به نسخه قبلی که سالم بوده
.
مثلاً:

v1.4.2 ❌ v1.4.1 ✅

تا وقتی مشکل بررسی و Fix بشه، نسخه سالم قبلی دوباره فعال میشه.

🔥 یکی از چیزهایی که در پروژه واقعی
خیلی مهمه:

فقط Deploy کردن رو بلد نباش؛ برگشتن از Deploy خراب رو هم باید بلد باشی.

#Rollback #Deploy #Production #DevOps #Developer #برنامه_نویسی
  • ❤ 2
Post #4732 245
Merge Conflict
یعنی چی؟

تو و همکارت روی یک فایل کار کردید.
تو یک قسمت رو تغییر دادی.
اون هم همون قسمت رو تغییر داده.

حالا Git میگه:

CONFLICT
خوردی

یعنی Git نمی‌تونه خودش تصمیم بگیره کدوم تغییر باید باقی بمونه.

باید Conflict رو بررسی کنی، تصمیم بگیری چه کدی درست‌تره و بعد دوباره Commit کنی.

📌 Merge Conflict
چیز عجیبی نیست؛

بخشی از کار روزمره تیم‌های برنامه‌نویسیه.

#Git #GitHub #MergeConflict #Developer #Programming #برنامه_نویسی
Post #4731 263
🎯 سؤال مصاحبه:

فرض کن یک API داری که گاهی ۵ ثانیه طول می‌کشه جواب بده.

چه کار می‌کنی که کاربر فکر نکنه سایت خراب شده؟

جواب فقط «Loading می‌ذارم» نیست.
می‌تونی بررسی کنی:

⏳ Loading State 💀 Timeout 🔁 Retry ⚡ Caching 📦 Optimistic UI 🚨 Error State

🔥 توی پروژه واقعی، فقط «درست کار کردن» کافی نیست؛
باید رفتار سیستم در شرایط بد رو هم
طراحی کنی.

#مصاحبه_برنامه_نویسی #Frontend #Programming #Developer #برنامه_نویسی
Post #4730 265
🌐 اگه Front-End کار می‌کنی و Network رو نمی‌شناسی، نصف ماجرا رو نمی‌بینی.

کاربر روی دکمه Login می‌زنه.
تو فقط UI رو می‌بینی.

ولی پشت صحنه:

Browser → Request → Server → Response → Browser

اگر Login کار نکرد، مشکل می‌تونه:

❌ Front-End ❌ API ❌ Authentication ❌ Server ❌ CORS ❌ Network
باشه.

🔥 Front-End
فقط ساختن ظاهر نیست.

باید بدونی چیزی که ساختی چطور با دنیای بیرون حرف می‌زنه.

#Frontend #Network #API #WebDevelopment #برنامه_نویسی #Developer
  • ❤ 3
Post #4729 275
🌐 چرا بعضی سایت‌ها با اینترنت ضعیف هم سریع باز میشن؟

چون فقط به «سرعت اینترنت» وابسته نیستن.

از چیزهایی مثل:

⚡ CDN 📦 Cache 🖼️ تصاویر بهینه 📉 Compression 💾 Browser Cache 🚀 Lazy Loading
استفاده می‌کنن.

یعنی Performance فقط این نیست که:
«کدم سریع اجرا بشه.»

کل مسیر بین کاربر تا محتوایی که می‌بینه مهمه.

#Performance #WebDevelopment #Frontend #سرعت_سایت #برنامه_نویسی #توسعه_وب
  • ❤ 4
  • 💯 1
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →