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

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

آدرس سایت 👈🏻: codelines.ir
Download Telegram
🌐 SSR یا CSR؟
کدوم بهتره؟


CSR → صفحه بیشتر سمت
Browser
ساخته میشه.

SSR → HTML
صفحه روی Server تولید میشه و بعد به کاربر می‌رسه.

🚀 CSR → مناسب اپلیکیشن‌های تعاملی
🔍 SSR →
مناسب صفحاتی که SEO و نمایش سریع محتوا مهمه

هیچ‌کدوم همیشه بهتر نیست.
انتخاب درست، به نوع پروژه بستگی داره.

Save
کن؛ این سؤال توی مصاحبه‌ها هم زیاد مطرح میشه.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
1👏1
📱 Mobile First
یعنی چی؟

یعنی طراحی و توسعه رو اول برای صفحه کوچک شروع کنی:

Mobile → Tablet → Desktop

نه اینکه اول یه سایت دسکتاپ بسازی و آخر کار
سعی کنی جمعش کنی داخل موبایل. 😄
CSS ساده‌تر
تمرکز روی محتوای ضروری
Responsive Design بهتر

📌 اگه Front-End کار می‌کنی، Mobile First رو جدی بگیر.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
🔥1
بیا یه واقعیت بازار کار رو با هم ببینیم. 👇

این آگهی‌های Front-End، حقوق ۶۰ تا ۷۰ میلیون گذاشتن رو باز کن ببین.
حتی آگهی‌پایین تری ۶۰ تا ۱۰۰ میلیون حقوق در نظر گرفتن. برای کسی که به:
JavaScript + React + Next.js + TypeScript
مسلط باشه،

حالا یه سؤال:

چرا این شرکت‌ها اکانت ChatGPT نمی‌خرن و نمی‌گن خودش برامون سایت یا ابزار بسازه؟ 😂

چون مسئله شرکت فقط نوشتن کد نیست.
وقتی پروژه بزرگ میشه، باید بتونی:
🔹 معماری درست طراحی کنی
🔹 سیستم رو تحلیل کنی
🔹 تصمیم بگیری هر Feature چطور پیاده‌سازی بشه
🔹 کدی بنویسی که چند ماه بعد هم قابل توسعه باشه
🔹 مشکلات Performance و Scalability رو پیش‌بینی کنی
🔹 و کاری کنی که وقتی ۱۰۰ هزار کاربر همزمان وارد سایت شدن، سیستم نخوابه!
AI
می‌تونه برات کد بنویسه؛
اما مسئولیت تصمیم درست هنوز با توئه.

پس اگه هدفت فقط اینه که با AI چندتا سایت خوشگل بسازی،
داری با خودت شوخی می‌کنی.

اینم آخرش اضافه کنم رقابت برای گرفتن این مدل آگهی ها زیاده پس باید خیلی روی مطالب مسلط و پروژه های حرفه ای داشته باشی تا بتونی استخدامشون بشی
5💯1
🚨 اگه Front-End کار می‌کنی، این اشتباه CORS رو باید بشناسی!

وقتی Front-End و Backend روی Originهای متفاوت باشن، مرورگر ممکنه درخواست رو بلاک کنه.

مثلاً:
frontend.com → api.com   


و یهو می‌بینی:
CORS Error

نکته مهم:

CORS
معمولاً مشکل Backend/Server
Configuration

هست، نه اینکه JavaScript
تو خراب باشه!

؛ این خطا دیر یا زود سراغت میاد.
2👍1🔥1
💼 یه پروژه معمولی داری و می‌خوای تبدیلش کنی به چیزی که توی رزومه بدرخشه؟

این Prompt رو امتحان کن:

Act as a Senior Front-End Engineer and a Technical Recruiter.

I will describe my current project.

Analyze it and suggest features that would make the project demonstrate real-world engineering skills.

Prioritize features that demonstrate:
- Complex state management
- Authentication and authorization
- API integration
- Error handling
- Performance optimization
- Responsive design
- Accessibility
- Testing
- Real-world business logic

Avoid generic features that only make the project look bigger.

For each feature, explain what skill it demonstrates and why a recruiter would care.

Project:
[DESCRIBE PROJECT]


🔥 به‌جای اینکه پروژه‌ات فقط «قشنگ» باشه، کاری کن مهارتت رو ثابت کنه.
6🔥1
🤔 Hoisting
در JavaScript چیه؟


قبل از اجرای کد، بعضی Declarationها در فرآیند ایجاد Execution Context
پردازش میشن.

برای همینه که این کد:

sayHi();

function sayHi() {
console.log("Hi");
}


کار می‌کنه.

ولی رفتار let و const با var فرق داره.
📌 Hoisting
رو با «انتقال واقعی کد به بالا» اشتباه نگیر.
5👍1
console.log("5" - 2);
2
خروجی کد بالا چیه ؟
Anonymous Quiz
20%
“52”
25%
3
19%
“3”
36%
NaN
وقتی می‌خوای چیزی رو از یک Array پیدا کنی، لازم نیست همیشه for بنویسی.
از
find() استفاده کن:

const users = [
{ id: 1, name: "Ali" },
{ id: 2, name: "Reza" }
];

const user = users.find(user => user.id === 2);


console.log(user);

خروجی:
{ id: 2, name: "Reza" }


🧠 فرقش با filter() اینه:

find() → اولین آیتمی که شرط رو داشته
باشه برمی‌گردونه.

filter() → تمام آیتم‌هایی که شرط رو داشته باشن برمی‌گردونه.

📌 این دوتا رو قاطی نکنی؛ توی پروژه زیاد باهاشون کار می‌کنی.
3🔥1💯1
🚨 یه ترفند خیلی ساده برای تست Responsive بودن سایت:

لازم نیست هر بار صفحه مرورگرت رو با موس کوچیک و بزرگ کنی!

داخل Chrome بزن:
F12 → Ctrl + Shift + M

حالا وارد حالت Device Toolbar میشی و می‌تونی سایتت رو روی سایزهای مختلف موبایل، تبلت و دسکتاپ تست کنی. 📱💻
حتی می‌تونی سایز دلخواه خودت رو وارد کنی.

💡 یه نکته مهم: فقط با یک سایز تست نکن؛
ممکنه سایتت روی iPhone عالی باشه ولی روی یه صفحه 768px کاملاً به‌هم بریزه.

📌 قبل از Deploy کردن، Responsive بودن رو روی چند سایز مختلف چک کن.
2🔥1👏1
یه سوالی که این روزها زیاد ازم می‌پرسن:
«نظرت درباره Vibe Coding چیه؟»

ببین عزیز، کلاً ولش کن! 😄

به هر کسی یه قلم‌مو و یه سطل رنگ بدی، می‌تونه یه دیوار رو رنگ کنه؛
ولی نقاش حرفه‌ای کجا و آدم آماتور کجا؟
داستان Vibe Coding هم همینه.
من وقتی از AI استفاده می‌کنم، کد رو می‌فهمم، معماری رو می‌فهمم، مشکلاتش رو پیدا می‌کنم و می‌دونم چرا باید یک راه‌حل رو انتخاب کنم.

AI
به من کمک می‌کنه سریع‌تر و بهتر نتیجه خلق کنم.

اما اینکه چند کلمه به AI بدی، یه پروژه تحویل بگیری و فقط به خاطر ظاهرش ذوق کنی، اسمش تخصص نیست.

🔥 AI
جای متخصص رو نمی‌گیره؛ متخصصی که AI بلده، جای کسی رو می‌گیره که فقط AI بلده.
2❤‍🔥1💯1
🌐 ۷ سایت برای پیدا کردن API و دیتای آماده برای پروژه:

Public APIs → لیست
APIهای رایگان
JSONPlaceholder → API
فیک برای تمرین
Fake Store API → دیتای فروشگاه
Open-Meteo → API آب‌وهوا
REST Countries → اطلاعات کشورها
PokeAPI → دیتای Pokémon
The Movie Database → دیتای فیلم و سریال

🔥 دیگه برای هر پروژه لازم نیست خودت از صفر دیتای تست بسازی.

📌 Save
کن؛ برای پروژه بعدی به کارت میاد.
3👍2👏1
💻 ۷ جا برای تمرین واقعی Front-End:

🔥 Frontend Mentor
🔥 Codewell
🔥 DevChallenges
🔥 Frontend Practice
🔥 CSSBattle
🔥 JavaScript30
🔥 100 Days CSS

فقط Tutorial نبین.

یه طراحی بردار → خودت پیاده‌سازی کن → منتشرش کن.

هم تمرین میشه، هم نمونه‌کار.
3👏1
🖼️ ۶ ابزار برای کار با تصاویر که هر Front-End باید بشناسه:
🔹 Squoosh → فشرده‌سازی

🔹 TinyPNG → کاهش حجم
🔹 SVGOMG → بهینه‌سازی SVG
🔹 Remove.bg → حذف Background
🔹 CloudConvert → تبدیل فرمت
🔹 ImageOptim → بهینه‌سازی تصاویر

💡 عکس سنگین یکی از ساده‌ترین راه‌ها برای خراب کردن Performance سایته. 😐

📌
Save کن.
4🔥1
🌳 اگه Front-End Developer هستی، حداقل این دستورات Gitها رو بلد باش:

clone → گرفتن پروژه
branch → ساخت شاخه
checkout → جابه‌جایی
add → آماده کردن تغییرات
commit → ثبت تغییرات
pull → گرفتن تغییرات
push → فرستادن تغییرات
merge → ترکیب Branchها

Git
فقط push و pull نیست!

📌 Save
کن؛ برای کار تیمی لازمت میشه.
3🔥1👏1
کدوم گزینه برای تعریف متغیری که مقدارش قابل تغییر هستش مناسب‌تره؟
Anonymous Quiz
24%
const
57%
let
14%
static
5%
define
1
🔍 ۵ ابزار برای تست سایت قبل از تحویل به کارفرما:

Lighthouse → Performance و SEO
PageSpeed Insights → بررسی سرعت
WAVE → Accessibility
GTmetrix → Performance
Responsive Design Checker → تست نمایش در سایزهای مختلف

📌 اینا رو قبل از تحویل پروژه اجرا کن؛ ممکنه چیزهایی پیدا کنی که با چشم نمی‌بینی.
6❤‍🔥1👍1
⚛️ قبل از شروع آموزش React اینا رو بلد باش.

نه در حد اینکه اسمشون رو شنیده باشی:

DOM
Event
Promise
async/await
Array Methods
Destructuring
Modules
Scope
Closure
Fetch API

چون React قرار نیست JavaScript رو برات یاد بگیره.

اگر JavaScript رو نفهمیده باشی،
React
فقط مشکل رو پیچیده‌تر می‌کنه.

📌 این پست رو برای کسی بفرست که تازه می‌خواد React شروع کنه.

#JavaScript #React #فرانت_اند #جاوااسکریپت #یادگیری_برنامه_نویسی #برنامه_نویسی
2🔥1👏1
😵‍💫 وقتی توی پروژه گیر کردی، این ۷ جا می‌تونن نجاتت بدن:

🔍 Google → پیدا کردن راه‌حل
📚 MDN → فهمیدن APIهای Web
💬 Stack Overflow → دیدن تجربه دیگران
🤖 ChatGPT → تحلیل و Debug
🧪 CodePen → تست سریع UI
🛠️ DevTools → پیدا کردن مشکل واقعی
📖 Documentation → منبع اصلی هر Library
اما یه قانون:

اول Error رو بخون، بعد Search کن.

خیلی وقت‌ها جواب دقیقاً توی همون Errorـه.

📌 Save
کن برای روزی که پروژه قفل کرد.

#برنامه_نویسی #DeveloperTools #برنامه_نویس #توسعه_وب #کدنویسی #FrontEnd
2👍1
🤔 Library
و Framework چه فرقی دارن؟


خیلی ساده:

🔹 Library → تو تصمیم می‌گیری کِی ازش استفاده کنی.
🔹 Framework → ساختار و جریان کلی پروژه بیشتر توسط Framework
مشخص میشه.

مثلاً در دنیای Front-End:
React
معمولاً به‌عنوان Library شناخته میشه،

در حالی که Next.js یک Framework بر پایه React محسوب میشه.

📌 این تفاوت رو برای مصاحبه هم بلد باش.

#React #NextJS #JavaScript #فرانت_اند #برنامه_نویسی #FrontEnd
💯2🔥1
💾 LocalStorage یا SessionStorage؟

🔹 localStorage اطلاعات بعد از بستن Browser هم باقی می‌مونه.

🔹 sessionStorage اطلاعات معمولاً با پایان Session همان Tab از بین میره.

مثلاً:
تنظیمات ساده کاربر → localStorage اطلاعات موقت یک Session → sessionStorage

⚠️ هیچ‌کدوم جای مناسبی برای نگهداری Secretهای حساس نیستن.

📌 این تفاوت ساده رو خوب یاد بگیر.

#JavaScript #WebStorage #LocalStorage #SessionStorage #فرانت_اند #برنامه_نویسی
3🔥1