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

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

آدرس سایت 👈🏻: codelines.ir
Download Telegram
🤖 این پرامپت رو ذخیره کن؛ باهاش سریع‌تر باگ کدت رو پیدا کن! 🔥

هر وقت توی کدت گیر کردی، این پرامپت رو به AI بده تا مثل یک Debugger حرفه‌ای بررسیش کنه.

📌 فقط کدت و ارورت رو جایگذاری کن.

Act as a senior software
engineer and expert debugger.

Analyze the following code and:

1. Find the main issue or bug in the code.
2. Explain why this error is happening in a simple way.
3. Point out exactly where the problem is and why.
4. Provide the corrected version of the code.
5. Suggest a cleaner or more optimized approach if possible.

Programming language:
[Insert language]

Code:
[Paste your code here]

Error message or unexpected behavior:
[Describe the issue here]


🔥 با این پرامپت فقط جواب نمی‌گیری؛ دلیل مشکل رو هم یاد می‌گیری.

📌 ذخیره کن؛ موقع گیر کردن توی پروژه نجاتت می‌ده.

📤 برای یه برنامه‌نویس بفرست که همیشه دنبال پیدا کردن باگه 😄
4👏1
کدام مقدار Falsy نیست؟
Anonymous Quiz
12%
0
27%
“”
27%
[ ]
34%
null
🤯 چرا هرچی آموزش می‌بینی… فرداش هیچی یادت نیست؟

۱۰ تا ویدیو می‌بینی
۲۰ تا مقاله می‌خونی
کلی نکته ذخیره می‌کنی

اما وقتی می‌خوای خودت کد بزنی… مغزت میگه:
«من اینو کی دیدم؟! 😐» 😂

مشکل از حافظه‌ات نیست…

مشکل اینجاست که مغز با تماشا کردن برنامه‌نویس نمی‌سازه؛ با ساختن یاد می‌گیره. 🔥

هر خط کدی که خودت می‌نویسی، هر باگی که خودت حل می‌کنی، یه قدم تو رو قوی‌تر می‌کنه. 💪

قانون طلایی یادگیری برنامه‌نویسی:

👀 ۳۰٪ آموزش
⌨️ ۷۰٪ تمرین و پروژه

کمتر فقط آموزش ببین…
بیشتر چیزی بساز 🚀

چون برنامه‌نویس‌ها با دیدن کد حرفه‌ای نمی‌شن؛
با نوشتن کد حرفه‌ای می‌شن. 🔥
7👍1
🔥 ۵ میانبر ویندوز که هر برنامه‌نویسی باید بلد باشه 💻

هنوز برای کارهای ساده وقت تلف می‌کنی؟ 😅
این ۵ تا میانبر رو یاد بگیر، سرعتت چند برابر میشه 🚀

1️⃣ Win + E
📁 باز کردن سریع File Explorer
(دیگه دنبال پوشه پروژه‌هات نگرد!)

2️⃣ Ctrl + Shift + Esc
باز کردن Task Manager
(وقتی برنامه هنگ کرد، نجاتت میده 😎)

3️⃣ Win + Shift + S
✂️ گرفتن اسکرین‌شات از هر قسمت صفحه
(برای ذخیره خطاها و کدها عالیه)

4️⃣ Alt + Tab
🔄 جابه‌جایی سریع بین برنامه‌ها
(ادیتور، مرورگر، ترمینال... مثل حرفه‌ای‌ها!)

5️⃣ Win + V
📋 تاریخچه کلیپ‌بورد
(چندتا متن رو کپی کن و هر وقت خواستی برگردون)

💡 یه برنامه‌نویس حرفه‌ای فقط کد بهتر نمی‌نویسه؛
سریع‌تر هم کار می‌کنه
. 🔥
3👍1🔥1
🤖 کانتکست (Context) توی هوش مصنوعی یعنی چی؟

تا حالا شده یه چیزی از هوش مصنوعی بخوای، ولی جوابش اصلاً اون چیزی نباشه که می‌خواستی؟

احتمالاً مشکل از کانتکست بوده!

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

بدون کانتکست:
«یه سایت برام بساز.»

با کانتکست:
«یه سایت فروشگاهی با React و Tailwind بساز؛ تمش دارک باشه، طراحی مینیمال داشته باشه و روی موبایل هم درست نمایش داده بشه.»


💡 خلاصه: هرچی اطلاعات بهتری به AI بدی، احتمال اینکه همون چیزی که می‌خوای تحویلت بده بیشتره.

پس دفعه بعد به‌جای اینکه فقط بگی «بساز»، یکم کانتکست بده! 🚀
3👍3
۱۰ سایت برای پیدا کردن ایده UI/UX

Dribbble
Behance
Awwwards
Mobbin
Land-book
Lapa Ninja
Refero
UI8
Godly
Figma Community

🔥 وقتی ایده نداری، لازم نیست از صفر شروع کنی؛ اول خوب ببین!
👏2👍1
۱۰ ترفند CSS که ارزش یاد گرفتن دارن

clamp() → سایز Responsive
aspect-ratio → حفظ نسبت تصویر
:has() → انتخاب بر اساس فرزند
gap → فاصله بین عناصر
minmax() → Grid حرفه‌ای
object-fit → کنترل تصویر
scroll-behavior → اسکرول نرم
backdrop-filter → افکت شیشه‌ای
accent-color → تغییر رنگ کنترل‌ها
scrollbar → شخصی‌سازی اسکرول

📌 این پست رو ذخیره کن؛ بعضیاشون واقعاً تو پروژه نجاتت میدن.
4
🔥 ۱۰ پکیج CSS پرطرفدار در npm

اگه Front-End کاری، این پکیج‌ها رو حداقل یک‌بار ببین 👇


Tailwind CSS → استایل‌دهی سریع و مدرن
Bootstrap → کامپوننت‌های آماده و معروف
Sass → نوشتن CSS حرفه‌ای‌تر
styled-components → استایل‌دهی در React
Emotion → CSS-in-JS سریع و انعطاف‌پذیر
Animate.css → انیمیشن‌های آماده
AOS → انیمیشن هنگام اسکرول
Bulma → فریمورک CSS سبک
UIkit → کامپوننت‌های آماده UI
PostCSS → پردازش و بهینه‌سازی CSS

📌 سیوش کن؛ موقع شروع پروژه بعدی شاید یکی از اینا به کارت بیاد.
3❤‍🔥1🔥1
نقشه_راه_فرانت_اند_کدلاینز_لینک_دار.pdf
102.7 KB
🚀 نقشه راه جامع برنامه نویسی فرانت‌اند؛ از صفر تا بازار کار

اگه تازه می‌خوای برنامه‌نویسی فرانت‌اند رو شروع کنی، احتمالاً یکی از بزرگ‌ترین سؤال‌هات اینه:

از کجا شروع کنم و دقیقاً به چه ترتیبی جلو برم؟ 🤔

چه پروژه‌هایی بسازم؟
کجای مسیر رو یاد بگیرم؟
و اصلاً از کجا بفهمم آماده بازار کار شدم؟
برای همین یه PDF جامع و رایگان نقشه راه فرانت‌اند آماده کردم که مسیر رو

مرحله‌به‌مرحله برات مشخص می‌کنه. 👇

📎 فایل PDF رو بالا همین پست گذاشتم.

اگه دوست یا هم‌کلاسی‌ای داری که تازه می‌خواد فرانت‌اند رو شروع کنه، این فایل رو براش بفرست. شاید کلی از سردرگمی اول مسیرش کم کنه. ❤️
6💯1
می‌خوای ببینی یه آرایه واقعاً Array هست
یا نه؟ به‌جای typeof از این استفاده کن:


Array.isArray(value)

مثلاً:
Array.isArray([1, 2, 3]) true


🎯 ساده‌ست، ولی توی کار با API و داده‌ها خیلی به دردت می‌خوره.
3🔥1
😳 می‌دونستی سایتت می‌تونه بدون JavaScript تاریک بشه؟

فقط اینو بذار توی HTML:

<meta name="color-scheme"
content="dark light">


حالا مرورگر می‌فهمه سایتت از Dark Mode پشتیبانی می‌کنه و بعضی المان‌های پیش‌فرضش رو خودش با تم سیستم هماهنگ می‌کنه. 🌙

کوچیکه، ولی برای یه سایت تمیز خیلی به‌دردبخوره. 🔥
1🔥1
const a = [1, 2, 3];

const b = a;

b.push(4);

console.log(a);
🚨 اینا رو توی JavaScript قاطی کنی به باگ می‌خوری !

چندتا مقدار هستن که ظاهرشون ساده‌ست، ولی رفتارشون می‌تونه غافلگیرت کنه 👇

null → عمداً میگی مقداری وجود نداره

undefined → مقدار هنوز تعیین نشده

0 → عدد صفره، نه «بدون مقدار»

"" → رشته خالیه


false → مقدار منطقی غلطه

NaN → نتیجه‌ی یک محاسبه عددی معتبر نیست
Infinity → عددی که از محدوده معمول خارج شده

[] → آرایه خالیه، ولی در شرط‌ها Truthy محسوب میشه 😳

{} → آبجکت خالیه و اون هم Truthy محسوب میشه

🔥 همین تفاوت‌های کوچیک، یکی از دلایل باگ‌های عجیب JavaScript هستن.

📌 اینو نگه دار؛ مخصوصاً وقتی داری شرط‌ها و داده‌های API رو هندل می‌کنی.
🔥3
🚨 ۷ چیز که نباید توی پروژه JavaScript بهشون اعتماد کنی!

بعضی باگ‌ها دقیقاً از جایی شروع میشن که فکر می‌کنی همه‌چی اوکیه

localStorage → اطلاعات حساس رو اینجا نگه ندار
innerHTML → با داده‌ی کاربر با احتیاط استفاده کن
Date → محاسبات زمانی همیشه اون‌قدر ساده نیستن
Math.random() → برای چیزهای امنیتی مناسب نیست
parseInt("10px") → ممکنه نتیجه‌ای بگیری که انتظارشو نداری
JSON.parse() → هر چیزی که JSON
به نظر میاد، لزوماً قابل Parse نیست
window → کدت رو فقط به خاطر اینکه روی

سیستم خودت کار می‌کنه، برای همه مرورگرها قابل اعتماد ندون

🔥 برنامه‌نویسی فقط این نیست که کدت کار کنه؛
باید بدونی کجا ممکنه خراب بشه.

📌 اینو ذخیره کن؛ موقع پروژه واقعی به کارت میاد.
3❤‍🔥1
🌐 HTTP و HTTPS
چه فرقی دارن؟

وقتی وارد یه سایت میشی، مرورگرت یه Request برای سرور می‌فرسته و سرور هم جوابشو برمی‌گردونه.

HTTP
این ارتباط رو بدون رمزنگاری انجام
میده؛ یعنی اطلاعات می‌تونه در مسیر قابل مشاهده باشه.

ولی HTTPS همون ارتباطه، با این تفاوت که اطلاعات بین مرورگر و سرور رمزنگاری میشه 🔒

خلاصه:
HTTP → ارتباط معمولی

HTTPS → ارتباط امن و رمزنگاری‌شده

برای همینه که کنار آدرس بیشتر سایت‌های امروزی علامت 🔒 می‌بینی.
2🏆1
🚀 Deployment
یعنی چی؟

فرض کن سایتت رو روی لپ‌تاپت ساختی؛ فعلاً فقط خودت می‌تونی ببینیش.

برای اینکه بقیه هم بتونن وارد سایتت بشن، باید پروژه رو Deploy کنی.

معمولاً این اتفاق میفته:

💻 کدت رو می‌نویسی ⬇️ 📦 پروژه رو Build می‌کنی ⬇️ ☁️ فایل‌های پروژه روی یک Server قرار می‌گیرن ⬇️ 🌐 به یک Domain وصلش می‌کنی ⬇️
👥 حالا هر کسی آدرس سایت رو بزنه،
سرور فایل‌ها رو براش می‌فرسته.

مثلاً وقتی پروژه React رو روی سرویس‌هایی مثل Vercel یا Netlify Deploy می‌کنی، کدت از حالت «فقط روی سیستم من» درمیاد و تبدیل میشه به یک سایت قابل دسترسی از اینترنت.

خلاصه:
Development = ساختن پروژه 🛠
Deployment = منتشر کردن پروژه روی اینترنت 🚀
31🔥1
🤖 شبیه‌سازی مصاحبه Front-End با AI

می‌خوای قبل از مصاحبه واقعی، خودت رو محک بزنی؟ 😈

این پرامپت رو به AI بده:

Act as a Senior Front-End interviewer.

Conduct a realistic interview.
Ask only one question at a time.

Questions should cover JavaScript, React, CSS, Browser, and Performance.

Do not reveal the correct answer until I respond.

After each answer:

* Give me a score from 0 to 10.
* Point out my mistakes.
* Ask a harder related question.

At the end, tell me how ready I am for a Junior / Mid / Senior position.


اینطوری AI فقط سؤال نمی‌پرسه؛ نقاط ضعف مصاحبه‌ات رو هم پیدا می‌کنه.
3💯1
CORS
چیه؟


قانون امنیتی مرورگره که مشخص می‌کنه یک سایت اجازه داره به منابع سایت دیگه درخواست بفرسته یا نه.
2💯1