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

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

آدرس سایت 👈🏻: codelines.ir
Download Telegram
خروجی کد بالا چیه ؟
Anonymous Quiz
12%
No
16%
10
59%
Yes
14%
Undefined
🚨 ۵ نکته JavaScript که خیلی‌ها دیر یاد می‌گیرن:

🔹 ?. → جلوگیری از خطای دسترسی به null/undefined
🔹 ?? → مقدار پیش‌فرض فقط وقتی مقدار null/undefined باشه
🔹 Object.freeze() → جلوگیری از تغییر مستقیم آبجکت
🔹 structuredClone() → کپی عمیق داده‌ها
🔹 Promise.all() → اجرای چند Promise به‌صورت همزمان

💡 لازم نیست JavaScript رو فقط با حفظ کردن یاد بگیری؛

بفهم هر ابزار کِی به درد می‌خوره.

📌 Save
کن؛ اینا توی پروژه واقعاً کاربردی‌ان.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
3🔥1
یکی اومد توی پیوی پشتیبانی بهم گفت:

«هر کاری می‌کنم نمی‌تونم کار پیدا کنم.»
گفتم: نمونه‌کار داری؟
گفت: آره.
یه صفحه وبلاگ ساده برام فرستاد.
بعد چندتا سؤال درباره پروژه ازش پرسیدم؛
رفته بود جواب‌ها رو از ChatGPT گرفته و برام فرستاده بود! 😐

عزیز، اینطوری داری سر خودت رو گول می‌زنی.
اگه می‌خوای استخدام بشی، باید واقعاً به مفاهیم مسلط باشی، پروژه درست‌وحسابی داشته باشی و بتونی چیزی که ساختی رو توضیح بدی. سر جلسه مصاحبه تموم مفاهیم رو ازتون میپرسن من نمیفهمم چرا اینو نمیخواید قبول کنید
اینکه فقط پروژه رو با کمک AI بسازی و حتی ندونی داخلش چه خبره، توی مصاحبه خیلی زود مشخص میشه ردت میکنن
از طرفی، وقتی نمونه‌کار قوی نداری، چرا کارفرما باید تو رو انتخاب کنه؟
کارفرما داره برای یک نیروی متخصص 50 الی 80 م هزینه می‌کنه؛

قرار نیست پول بده که تو تازه سر پروژه یاد بگیری.

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

اگه دنبال استخدامی، اول مطمئن شو واقعاً چیزی برای ارائه داری. 👨‍💻
🔥71
🚀 ترفند ساده برای سریع‌تر کردن سایت:

اگه عکس‌های زیادی توی صفحه داری، همه‌شون رو از اول لود نکن!

از این استفاده کن:
<img src="image.webp" loading="lazy" alt="...">


🔹 عکس‌هایی که پایین صفحه هستن، لازم نیست همون اول دانلود بشن.

نتیجه؟
⚡️ درخواست کمتر در شروع صفحه
⚡️ لود اولیه سریع‌تر
⚡️ تجربه بهتر کاربر

📌 این ترفند کوچیک رو Save کن؛ توی پروژه واقعی به کارت میاد.
🔥3
🌐 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