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

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

آدرس سایت 👈🏻: codelines.ir
Download Telegram
۸ میانبر 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
1🔥1
👀 این ۵ تا Attribute HTML رو خیلی‌ها جدی نمی‌گیرن:

loading="lazy" → لود تنبل تصاویر
autocomplete → تجربه بهتر فرم‌ها
aria-label → دسترسی‌پذیری بهتر
defer → جلوگیری از بلاک شدن HTML
rel="noopener" → امنیت بیشتر لینک‌های جدید

همین جزئیات کوچیکه که کد یه Junior رو از یه Developer حرفه‌ای جدا می‌کنه. 🚀

📌 Save
کن؛ بعداً به کارت میاد.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
3🔥1
const arr = [1, 2, 3]; 

arr[10] = 99;

console.log(arr.length);
خروجی کد بالا چیه؟
Anonymous Quiz
11%
3
25%
11
21%
10
44%
Error
🔥2
🌐 ۷ سایت برای پیدا کردن API و دیتای آماده برای پروژه:

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

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

📌 Save
کن؛ برای پروژه بعدی به کارت میاد.
3💯1
👀 یه قابلیت GitHub که خیلی‌ها ازش استفاده نمی‌کنن:

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

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

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

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

#GitHub #VSCode #برنامه_نویسی #Developer #WebDevelopment #کدنویسی
3👏1
🚨 ۱۰ سایت مخفی که کلی وقت برنامه‌نویس‌ها رو نجات میده!

اگه برنامه‌نویسی می‌کنی، این سایت‌ها رو یه گوشه ذخیره کن؛ یه روزی حسابی به کارت میان 👇

🧠 Stack Overflow → وقتی به یه خطای عجیب می‌خوری، احتمالاً جوابش اینجاست.
📚 DevDocs → مستندات چندین تکنولوژی رو یکجا داشته باش.
🔍 Regex101 → ساخت و تست Regex بدون دردسر.
🎯 Frontend Mentor → تمرین پروژه‌های واقعی فرانت‌اند.
🖼️ Unsplash → عکس‌های حرفه‌ای رایگان برای پروژه‌ها.
TinyPNG → حجم تصاویر رو کم کن و سرعت سایتت رو بالا ببر.
🎨 CSS Tricks → کلی ترفند خفن برای CSS.
🧪 JSFiddle → کدت رو سریع تست کن.
📦 Bundlephobia → قبل از نصب پکیج‌ها حجمشون رو بررسی کن.
🚀 Lighthouse → سرعت، سئو و کیفیت سایتت رو بررسی کن.

📌 خیلی از برنامه‌نویس‌ها این ابزارها رو دیر پیدا می‌کنن...
تو ذخیره‌ش کن که موقع پروژه دنبال ابزار نگردی. 🔥

.
2🔥1
🚀 ترفند ساده برای سریع‌تر کردن سایت:

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

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


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

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

📌 این ترفند کوچیک رو Save کن؛ توی پروژه واقعی به کارت میاد.
2🔥1
⚡️ Arrow Function

به جای اینکه اینجوری بنویسی:
function sum(a, b) {
return a + b;
}

میتونی خیلی خلاصه‌تر بنویسی:
const sum = (a, b) => a + b;


هم کد کوتاه‌تره، هم خواناتر.

📌 فقط یادت باشه Arrow Function همیشه جای Function معمولی رو نمی‌گیره و توی بحث this رفتار متفاوتی داره.

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

#JavaScript #Frontend
5
وقتی می‌خوای چیزی رو از یک 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() → تمام آیتم‌هایی که شرط رو داشته باشن برمی‌گردونه.

📌 این دوتا رو قاطی نکنی؛ توی پروژه زیاد باهاشون کار می‌کنی.
1👏1
🌳 اگه Front-End Developer هستی، حداقل این دستورات Gitها رو بلد باش:

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

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

📌 Save
کن؛ برای کار تیمی لازمت میشه.
4🔥1
for (var i = 0; i < 3; i++) { setTimeout(() => console.log("Hello"), 0); }
کد بالا چند بار Hello رو چاپ می‌کنه؟
Anonymous Quiz
8%
1 بار
25%
2 بار
46%
3 بار
21%
هیچ‌کدام
💻 اولین قانون برنامه‌نویسی: از ارورها نترس! 😄

اگر برنامه‌نویسی می‌کنی، دیر یا زود با این صحنه روبه‌رو می‌شی:
🔴 Error!
اما یه نکته مهم رو یادت باشه:
ارور یعنی شکست خوردی؟ نه!

ارور یعنی کامپیوتر داره بهت می‌گه کجای کارت نیاز به بررسی داره.

هر برنامه‌نویسی، حتی حرفه‌ای‌ترین‌ها، هر روز با خطا و باگ سروکله می‌زنن.

تفاوت یک برنامه‌نویس مبتدی و حرفه‌ای این نیست که یکی ارور می‌بینه و دیگری نه؛

🔥 تفاوتشون اینه که برنامه‌نویس حرفه‌ای بلد شده ارور رو بخونه، علتش رو پیدا کنه و حلش کنه.

پس دفعه بعد که با یک ارور روبه‌رو شدی، فرار نکن! 😎

📌 ارور دشمن تو نیست؛ یکی از بهترین معلم‌های توئه.
4🔥1
آموزش برنامه نویسی فرانت اند
بچه‌ها، یه سری تبلیغات خودِ تلگرام داخل کانال می‌ذاره. اینا همشون کلاهبرداریه، حواستون باشه. در صورت دیدن این تبلیغات، حتماً بزنید ریپورتشون کنید.
بچه‌ها، یه سری تبلیغات خودِ تلگرام داخل کانال می‌ذاره.
اینا کلاً کلاهبرداریه، حواستون باشه.
در صورت دیدن این تبلیغات، حتماً بزنید ریپورتشون کنید.
2🔥1
🔥 ۱۰ پکیج 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

📌 سیوش کن؛ موقع شروع پروژه بعدی شاید یکی از اینا به کارت بیاد.
4
🚨 ۵ چیزی که هر Front-End Developer باید درباره API بدونه:

🔹 GET → گرفتن اطلاعات
🔹 POST → ساخت اطلاعات جدید
🔹 PUT → جایگزینی کامل اطلاعات
🔹 PATCH → ویرایش بخشی از اطلاعات
🔹 DELETE → حذف اطلاعات
اما یه نکته مهم:

فقط بلد بودن fetch()نشون نمیده که API رو کامل بلدی !

Status Code
، Error Handling،
Authentication
و Loading State
رو هم باید بلد باشی.

📌 Save
کن؛ توی پروژه به کارت میاد.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
5
💼 یه پروژه معمولی داری و می‌خوای تبدیلش کنی به چیزی که توی رزومه بدرخشه؟

این 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]


🔥 به‌جای اینکه پروژه‌ات فقط «قشنگ» باشه، کاری کن مهارتت رو ثابت کنه.
4
سوال مصاحبه JavaScript
console.log(NaN === NaN);