TGViewer
Channel Public Channel
آموزش برنامه نویسی فرانت اند

آموزش برنامه نویسی فرانت اند

@codelines_ir

👈🏻 ارتباط با من: @codelines_support 🔅

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

آدرس سایت 👈🏻: codelines.ir
Subscribers
6.57K
Photos
358
Videos
48
Links
133

Showing posts older than #4904 · Back to latest

Older Posts 20 shown
Post #4902 350
const a = [1, 2, 3];

const b = a;

b.push(4);

console.log(a);
Post #4900 306
📦 کتابخونه React | Framer Motion

می‌خوای انیمیشن‌های حرفه‌ای بسازی؟

Framer Motion تقریباً هر چیزی که بخوای رو
با چند خط کد انجام می‌ده.

✅ Fade
✅ Slide
✅ Drag
✅ Layout Animation

📌 انتخاب اول خیلی از پروژه‌های مدرن React.
Post #4899 320
🧹 ۱۰ نشونه که کدت نیاز به Refactor داره

یک Function خیلی بزرگه
یک کد چند بار تکرار شده
اسم متغیرها نامفهومه
شرط‌های تو در تو زیادن
تغییر یک چیز چند فایل رو خراب می‌کنه
یک فایل هزاران خط شده
Function چند کار مختلف انجام میده
کامنت‌های عجیب برای توضیح کد لازم شده
حذف یک Feature خیلی سخت شده
خودت از خواندن کد می‌ترسی

📌 Refactor
یعنی بهتر کردن ساختار کد، بدون تغییر رفتار اصلی برنامه.

#CleanCode #Refactoring #Programming #Developer #کدنویسی
  • ❤ 3
  • 🔥 1
Post #4897 327
console.log(NaN === NaN);
Post #4896 531
سوال مصاحبه JavaScript
Post #4895 614
💼 یه پروژه معمولی داری و می‌خوای تبدیلش کنی به چیزی که توی رزومه بدرخشه؟

این 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
Post #4894 421
🚨 ۵ چیزی که هر 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 #طراحی_رابط_کاربری
  • ❤ 6
Post #4893 360
🔥 ۱۰ پکیج 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
Post #4892 628
آموزش برنامه نویسی فرانت اند بچه‌ها، یه سری تبلیغات خودِ تلگرام داخل کانال می‌ذاره. اینا همشون کلاهبرداریه، حواستون باشه. در صورت دیدن این تبلیغات، حتماً بزنید ریپورتشون کنید.
بچه‌ها، یه سری تبلیغات خودِ تلگرام داخل کانال می‌ذاره.
اینا کلاً کلاهبرداریه، حواستون باشه.
در صورت دیدن این تبلیغات، حتماً بزنید ریپورتشون کنید.
  • ❤ 2
  • 🔥 1
Post #4890 644
💻 اولین قانون برنامه‌نویسی: از ارورها نترس! 😄

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

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

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

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

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

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

📌 ارور دشمن تو نیست؛ یکی از بهترین معلم‌های توئه.
  • ❤ 4
  • 🔥 1
Post #4888 469
for (var i = 0; i < 3; i++) { setTimeout(() => console.log("Hello"), 0); }
Post #4887 466
🌳 اگه Front-End Developer هستی، حداقل این دستورات Gitها رو بلد باش:

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

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

📌 Save
کن؛ برای کار تیمی لازمت میشه.
  • ❤ 4
  • 🔥 1
Post #4886 321
وقتی می‌خوای چیزی رو از یک 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
Post #4885 278
⚡️ Arrow Function

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

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


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

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

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

#JavaScript #Frontend
  • ❤ 5
Post #4884 258
🚀 ترفند ساده برای سریع‌تر کردن سایت:

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

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


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

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

📌 این ترفند کوچیک رو Save کن؛ توی پروژه واقعی به کارت میاد.
  • ❤ 2
  • 🔥 1
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →