آموزش برنامه نویسی فرانت اند
8.2K subscribers
328 photos
47 videos
26 files
113 links
👈🏻 ارتباط با من: @codelines_support 🔅

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

آدرس سایت 👈🏻: codelines.ir
Download Telegram
برای دسترسی به مقدار name در کد بالا کدام گزینه صحیح است؟
Anonymous Quiz
32%
user[name]
10%
user->name
10%
user::name
۸ میانبر 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
3🔥2
👀 یه قابلیت GitHub که خیلی‌ها ازش استفاده نمی‌کنن:

برو داخل یک Repository و کلید:
.
رو بزن.

GitHub
پروژه رو داخل یک محیط VS Code تحت وب باز می‌کنه. 😮

بدون اینکه پروژه رو روی سیستم Clone کنی، می‌تونی کدها رو سریع بررسی کنی.

📌 دفعه بعد که خواستی کد یک Repository رو نگاه کنی، امتحانش کن.

#GitHub #VSCode #برنامه_نویسی #Developer #WebDevelopment #کدنویسی
3👏1
🌐 چرا بعضی سایت‌ها با اینترنت ضعیف هم سریع باز میشن؟

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

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

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

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

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

#Performance #WebDevelopment #Frontend #سرعت_سایت #برنامه_نویسی #توسعه_وب
4💯1
🌐 اگه 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
🎯 سؤال مصاحبه:

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

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

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

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

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

#مصاحبه_برنامه_نویسی #Frontend #Programming #Developer #برنامه_نویسی
Merge Conflict
یعنی چی؟

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

حالا Git میگه:

CONFLICT
خوردی

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

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

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

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

#Git #GitHub #MergeConflict #Developer #Programming #برنامه_نویسی
Rollback
یعنی چی؟ 🔙

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

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

Can we rollback?

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

v1.4.2 v1.4.1

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

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

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

#Rollback #Deploy #Production #DevOps #Developer #برنامه_نویسی
2
HOTFIX
یعنی چی و چرا برنامه‌نویس‌ها ازش می‌ترسن؟


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

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

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

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

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

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

#Hotfix #Production #Developer #Programming #برنامه_نویسی #Frontend
چرا 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
let arr = [10, 20, 30];
console.log(arr[1]);
خروجی‌ کد بالا کدوم گزینس؟
Anonymous Quiz
13%
10
22%
1
60%
20
5%
30
1
اگه می‌خوای Frontend Developer بشی:

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

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

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

#Frontend #JavaScript #React #WebDevelopment #برنامه_نویسی
4🔥1
چرا همه 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
فرق 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
۱۰
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
۱۰ اشتباه امنیتی رایج در پروژه‌های Web

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

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

نداشتن Authorization سمت Server

Password
بدون Hash مناسب

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

CORS اشتباه

نبود Rate Limiting

Dependencyهای قدیمی

Validation ناقص

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

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

#CyberSecurity #WebSecurity #Backend #Frontend #Programming
3🔥1
🤯 یک اشتباه کوچیک در React

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

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

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

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

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

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


📌 یک جفت () می‌تونه کل رفتار Component رو عوض کنه.
5
🔥 ۷ چیزی که قبل از استخدام شدن به‌عنوان Frontend Developer باید بلد باشی

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

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

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

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

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

#برنامه_نویسی #فرانت_اند #جاوااسکریپت #Frontend #JavaScript #React #Git #GitHub #برنامه_نویس #بازار_کار #استخدام #Codelines
5🔥1
. کدام عملگر در JavaScript برای مقایسه مقدار و نوع داده استفاده می‌شود؟
Anonymous Quiz
5%
=
27%
==
55%
===
13%
=!
«وقت ندارم برنامه‌نویسی یاد بگیرم!»

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

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

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

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

نداشتن برنامه مشخصه.
8👍2