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

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

آدرس سایت 👈🏻: codelines.ir
Download Telegram
🚀 ترفند ساده برای سریع‌تر کردن سایت:

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

از این استفاده کن:
<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);
خروجی کد بالا چیست ؟
Anonymous Quiz
44%
true
31%
false
15%
undefined
11%
خطا
🧹 ۱۰ نشونه که کدت نیاز به Refactor داره

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

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

#CleanCode #Refactoring #Programming #Developer #کدنویسی
3🔥1
📦 کتابخونه React | Framer Motion

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

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

Fade
Slide
Drag
Layout Animation

📌 انتخاب اول خیلی از پروژه‌های مدرن React.
آموزش SQL رایگان از صفر تا کوئری‌نویسی | PDF فارسی کاربردی


قیمت دوره رایگان!

برای ثبت نام و دریافت 👇🏻

https://codelines.ir/course/sql-practical-commands
4
const a = [1, 2, 3];

const b = a;

b.push(4);

console.log(a);
🔥 ۵ افزونه VS Code که کدنویسی رو اعتیادآور می‌کنن!
📌 حتماً ذخیره کن؛ یه روز به کارت میاد!

1️⃣ Prettier
کدت رو همیشه تمیز و حرفه‌ای نگه می‌داره
فرمت خودکار کد
پایان جنگ با فاصله‌ها و خط‌ها

2️⃣ Error Lens 🚨
ارورها رو همون جایی که اتفاق افتادن نشون می‌ده
دیگه دنبال خطا نگرد
سریع‌تر Debug کن

3️⃣ GitLens 🔥
قدرت Git رو داخل VS Code بیار
ببین کی و چرا یک خط کد تغییر کرده
مدیریت حرفه‌ای پروژه‌ها

4️⃣ Auto Rename Tag
تغییر اسم تگ‌ها بدون دردسر
مخصوص HTML / React
سرعت بیشتر در کدنویسی

5️⃣ Material Icon Theme 🎨
ظاهر VS Code رو حرفه‌ای کن
آیکون‌های جذاب برای فایل‌ها
پیدا کردن فایل‌ها سریع‌تر میشه

📌 Save
کن که بعداً دنبال اسم افزونه‌ها نگردی

📤 برای رفیق برنامه‌نویست بفرست
#programming #vscode #developer #coding #frontend #webdevelopment
4🔥1
برای شروع برنامه‌نویسی فرانت اند و طراحی سایت، اصلاً نیازی نیست که:

چیزی از کامپیوتر یا برنامه‌نویسی بدونی
مدرک دانشگاهی داشته باشی
رشته‌ت کامپیوتر یا مرتبط باشه (حتی اگه معماری خوندی، میتونی برنامه نویس بشی!)
ریاضی‌ت خیلی قوی باشه (فقط همون چهارتا عمل اصلی کافی‌ه ✖️)
به زبان انگلیسی مسلط باشی

🎂 سن هم اصلاً مهم نیست
چه ۱۰ سالت باشه، چه ۵۰ سال، مهم فقط پشتکاره 💪🔥

💻 فقط کافیه بلد باشی سیستم رو روشن و خاموش کنی...
بقیه‌ش با منه 😉

🚀 پشتکار، پشتکار، پشتکار
همین کافیه تا بتونی وارد دنیای فوق‌العاده‌ی برنامه‌نویسی بشی! 🌈
7🔥1🫡1