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

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

آدرس سایت 👈🏻: codelines.ir
Download Telegram
🧹 از کجا بفهمیم کدمون داره تبدیل به Spaghetti Code میشه؟

🚩 یک Function چند صد خطه 🚩 یک فایل همه‌کاره داری 🚩 اسم Variableها نامفهومه 🚩 یک کد رو چندین بار کپی کردی 🚩 تغییر یک بخش، سه جای دیگه رو خراب می‌کنه

Clean Code
یعنی کدی که فهمیدن و
تغییر دادنش راحت باشه.

نه کدی که فقط ظاهر قشنگی داشته باشه.

#CleanCode #برنامه_نویسی #SoftwareDevelopment #کدنویسی #فرانت_اند #Developer
3👍1
😱 یه اشتباه کردی و می‌خوای آخرین Commit رو برگردونی؟

قبل از اینکه دستپاچه بشی:
git revert HEAD


این دستور یک Commit جدید می‌سازه که تغییرات Commit قبلی رو برمی‌گردونه.

💡 برای پروژه‌های تیمی معمولاً از پاک کردن تاریخچه Git امن‌تره.

📌 Git
رو فقط برای push و pull استفاده نکن!

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

#Git #GitHub #برنامه_نویسی #Developer #کدنویسی #WebDevelopment
2❤‍🔥1
👨‍💻 اگر تازه وارد پروژه واقعی شدی، اینا
رو زیاد می‌شنوی:


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

🔹 Code Review → بررسی کد

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

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

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

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

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

#برنامه_نویسی #GitHub #DevOps #SoftwareDevelopment #Developer #FrontEnd
2💯1
🕵️ می‌خوای بفهمی یک سایت با چی ساخته شده؟

این ابزارها رو امتحان کن:

🔍 Wappalyzer 🔍 BuiltWith 🔍 WhatRuns

می‌تونی سرنخ‌هایی درباره:

Framework
CMS
Analytics
Server
CDN
و تکنولوژی‌های استفاده‌شده
پیدا کنی.

📌 برای تحقیق و بررسی سایت‌های مختلف خیلی کاربردیه.

#Wappalyzer #WebDevelopment
#Frontend #برنامه_نویسی #Developer #توسعه_وب
3🔥1
let user = {
name: "Ali",
age: 20
};
برای دسترسی به مقدار 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