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

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

آدرس سایت 👈🏻: codelines.ir
Download Telegram
اگه می‌خوای Frontend Developer بشی:

هر روز دنبال Framework جدید نباش.

JavaScript رو عمیق یاد بگیر.

چون Frameworkها عوض می‌شن؛
ولی JavaScript هنوز سر جاشه. 🔥

#Frontend #JavaScript #React #WebDevelopment #برنامه_نویسی
4🔥1
چرا همه Developerها باید HTTP رو بفهمن؟

وقتی می‌نویسی:
fetch("/api/users")

فقط یک خط JavaScript می‌بینی.
ولی پشتش یک دنیای کامل وجود داره:
GET

POST

PUT

PATCH

DELETE

و Status Codeهایی مثل:
200

201

400

401

403

404

500

مثلاً:
401 یعنی احراز هویت مشکل داره.
403 یعنی هویت مشخصه ولی اجازه دسترسی نداری.
404 یعنی Resource پیدا نشده.
500 یعنی مشکل سمت Server اتفاق افتاده.

📌 اگر HTTP رو نفهمی، Debug کردن پروژه‌های واقعی خیلی سخت‌تر میشه.

#HTTP #API #Frontend #Backend #WebDevelopment #Programming
4🔥1
فرق slice و splice رو قاطی نکن!

این دو تا اسمشون شبیه همدیگه‌ست ولی رفتار متفاوتی دارن.


const numbers = [1, 2, 3, 4, 5];

numbers.slice(1, 3);


خروجی:


[2, 3]  


و Array اصلی تغییر نمی‌کنه.
اما:


numbers.splice(1, 2);


آیتم‌ها رو از خود Array حذف می‌کنه.
📌 خلاصه:

slice → بخشی از Array رو برمی‌داره،
بدون تغییر اصل آرایه


splice → خود Array رو تغییر میده

#JavaScript #Array #JS #Frontend
#Programming
2🔥1
۱۰
Extension
کاربردی Chrome برای Developerها

React Developer Tools
Redux DevTools
JSON Viewer
Lighthouse
Wappalyzer
WhatFont
ColorZilla
CSS Viewer
EditThisCookie
VisBug

📌 لازم نیست مرورگرت رو با ۵۰ تا Extension پر کنی؛ فقط چیزهایی رو نصب کن که واقعاً در Workflowت استفاده می‌شن.

#Chrome #DevTools #Frontend #Developer #Programming
3
۱۰ اشتباه امنیتی رایج در پروژه‌های Web

نگه‌داشتن Secret داخل Frontend

اعتماد کردن به داده کاربر

نداشتن Authorization سمت Server

Password
بدون Hash مناسب

نمایش اطلاعات حساس در Error

CORS اشتباه

نبود Rate Limiting

Dependencyهای قدیمی

Validation ناقص

Log کردن اطلاعات حساس

📌 امنیت چیزی نیست که آخر پروژه بهش اضافه کنی؛ از اول باید بخشی از طراحی باشه.

#CyberSecurity #WebSecurity #Backend #Frontend #Programming
3🔥1
🤯 یک اشتباه کوچیک در React

این کد رو ببین:

<button onClick={handleClick()}>
Click
</button>

به نظرت درست نوشته شده؟
نه!

اینجا handleClick همون لحظه Render اجرا میشه.

معمولاً باید بنویسی:

<button onClick={handleClick}>
Click
</button>


📌 یک جفت () می‌تونه کل رفتار Component رو عوض کنه.
5
🔥 ۷ چیزی که قبل از استخدام شدن به‌عنوان Frontend Developer باید بلد باشی

Git و GitHub
کار با API
Authentication
مدیریت State
Error Handling
Debugging
Deploy کردن پروژه

ولی نکته اینجاست 👇
خیلی‌ها اینا رو تئوری بلدن.

ولی وقتی میگی:
«خب حالا یه پروژه از صفر بساز.»

اینجاست که تفاوت بلد بودن و تونستن مشخص میشه.

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

#برنامه_نویسی #فرانت_اند #جاوااسکریپت #Frontend #JavaScript #React #Git #GitHub #برنامه_نویس #بازار_کار #استخدام #Codelines
5🔥1
. کدام عملگر در JavaScript برای مقایسه مقدار و نوع داده استفاده می‌شود؟
Anonymous Quiz
5%
=
27%
==
55%
===
13%
=!
«وقت ندارم برنامه‌نویسی یاد بگیرم!»

لازم نیست هر روز ۵ ساعت وقت بذاری.

اگر روزی فقط ۴۵ دقیقه وقت داری:
۱۵ دقیقه → یادگیری
۲۰ دقیقه → کدنویسی
۱۰ دقیقه → مرور

بعد از چند ماه، همین زمان‌های کوچک جمع میشن.

📌 مشکل خیلی وقت‌ها کمبود زمان نیست؛

نداشتن برنامه مشخصه.
8👍2
😵‍💫 چرا با اینکه زیاد آموزش می‌بینی، هنوز نمی‌تونی پروژه بزنی؟

شاید مشکل از هوش یا استعدادت نباشه.
مشکل اینه که بیشتر وقتت صرف دیدن آموزش میشه، نه ساختن.

یک آموزش ۲ ساعته می‌بینی و آخرش حس می‌کنی خیلی چیزها یاد گرفتی.

اما وقتی صفحه رو می‌بندی و می‌خوای خودت شروع کنی، نمی‌دونی از کجا.

این یعنی باید نسبتِ «آموزش دیدن» به «تمرین کردن» رو تغییر بدی.

📌 آموزش باید شروع یادگیری باشه، نه پایانش.

#برنامه_نویسی #یادگیری #فرانت_اند #Frontend #Developer
6👍3
۵ چیزی که یک دوره برنامه‌نویسی خوب باید داشته باشه

قبل از خرید هر دوره‌ای اینا رو بررسی کن:

مسیر مشخص داشته باشه.
فقط Syntax آموزش نده.
پروژه واقعی داشته باشه.
تمرین و Challenge داشته باشه.
بعد از دوره بدون مدرس هم بتونی ادامه بدی.

چون هدف دوره این نیست که:
«ویدیوها رو تموم کنی.»
هدف اینه که بعدش بتونی خودت پروژه بسازی.

#آموزش_برنامه_نویسی #دوره_برنامه_نویسی #Developer #Programming
3👏1
🧹 ۱۰ نشونه که کدت نیاز به Refactor داره

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

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

#CleanCode #Refactoring #Programming #Developer #کدنویسی
4
۱۰ سؤال مهم قبل از شروع یک پروژه

قبل از کدنویسی بپرس:

کاربر این پروژه کیه؟
مشکل اصلی چیه؟
مهم‌ترین Feature چیه؟
چه اطلاعاتی نیاز داریم؟
API از کجا میاد؟
چه محدودیت‌هایی داریم؟
نسخه موبایل داریم؟
چه حالت‌های خطایی داریم؟
معیار موفقیت پروژه چیه؟
Deadline
واقعی چقدره؟

📌 خیلی از مشکلات پروژه از کد شروع نمی‌شن؛ از ابهام در نیازمندی‌ها شروع می‌شن.

#SoftwareDevelopment
#ProjectManagement #Developer #Programming
2🔥1
🔥 این ترفند JavaScript رو خیلی‌ها نمی‌دونن

فرض کن اینو داری:

const user = {
name: "Ali",
age: 22
};


می‌خوای name رو ازش بگیری.
احتمالاً می‌نویسی:

const name = user.name;


اما می‌تونی خیلی تمیزتر بنویسی:
const { name } = user;


این قابلیت اسمش Destructuringـه.

حتی می‌تونی چندتا مقدار بگیری:
const { name, age } = user;


و جالب‌تر اینکه می‌تونی اسم متغیر رو هم عوض کنی:
const { name: username } = user;


console.log(username);


📌 اینو زیاد توی React، کار با API و پروژه‌های واقعی می‌بینی.
اگر JavaScript می‌زنی، Destructuring از اون چیزهاییه که باید واقعاً بلد باشی، نه فقط اسمش رو شنیده باشی.

#JavaScript #JS #Frontend #React
#Programming #کدنویسی #برنامه_نویسی #Codelines
2❤‍🔥1
🔥 ۵ قابلیت JavaScript که کدت رو تمیزتر می‌کنه

اگه هنوز اینا رو استفاده نمی‌کنی، وقتشه یادشون بگیری 👇

1. Optional Chaining

user?.profile?.name


2. Nullish Coalescing

const name = user.name ?? "Guest";


3. Destructuring

const { name, age } = user;


4. Spread

const newUser = { ...user, age: 25 };


5. Default Parameter

function greet(name = "Guest") {}


📌 اینا چیزهای کوچیکین، ولی توی پروژه‌های واقعی خیلی زیاد استفاده میشن.

#JavaScript #JS #Frontend #Programming #کدنویسی #برنامه_نویسی #Codelines
2
🚨 ۵ موردی که قبل از Push کردن کدت باید چک کنی

قبل از اینکه این دستور رو بزنی:
git push

اینارو ببین:

☑️ console.log
اضافی نداری؟

☑️ فایل .env اشتباهی Push نمی‌شه؟

☑️ Error
توی Console نداری؟

☑️ اسم متغیرهای تستی باقی نمونده؟

☑️ پروژه روی سیستم خودت واقعاً کار می‌کنه؟

همین ۳۰ ثانیه می‌تونه جلوی یک دردسر واقعی رو بگیره.

#Git #GitHub #Programming #Developer #Frontend #JavaScript #کدنویسی #Codelines
2👏1
let numbers = [1, 2, 3];
numbers.push(4);

console.log(numbers.length);
خروجی کد بالا کدوم گزینس؟
Anonymous Quiz
14%
3
54%
4
28%
undefined
4%
5
3
🤖 شبیه‌سازی مصاحبه 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 فقط سؤال نمی‌پرسه؛ نقاط ضعف مصاحبه‌ات رو هم پیدا می‌کنه.
2🔥1
«اگه برنامه‌نویسی بلدی، این ۷ کار رو می‌تونی بفروشی»

خیلی‌ها فکر می‌کنن برای درآمد گرفتن باید حتماً پروژه‌های خیلی بزرگ بگیرن.

درحالی‌که کلی کار کوچک وجود داره:

🔹 تبدیل Figma به سایت
🔹 رفع Bug
🔹 ساخت Landing Page
🔹 اتصال API
🔹 ساخت Dashboard
🔹 بهینه‌سازی سرعت
🔹 اضافه کردن Feature به پروژه موجود

اولین پول برنامه‌نویسی‌ات قرار نیست از یک پروژه ۵۰۰ میلیونی بیاد.

از حل یک مشکل واقعی شروع میشه.

#درآمد_برنامه_نویسی #فریلنسری #برنامه_نویسی #Frontend #Developer #Codelines
4👏1
«اگر فقط ۳ ماه وقت داشتی برای ورود به بازار کار آماده بشی...»

این کارها رو می‌کردم:

ماه اول:
JavaScript + Git + API
ماه دوم:
React + یک پروژه واقعی
ماه سوم:
TypeScript + next + پروژه دوم + Portfolio + تمرین مصاحبه

نه اینکه:
۵ Framework
۳ زبان
۱۰ دوره
رو نصفه شروع کنم.

هدف ورود به بازار کاره، نه جمع کردن تکنولوژی.

#بازار_کار #مسیر_یادگیری #Frontend #JavaScript #React #Programming #Codelines
4