اگه میخوای Frontend Developer بشی:
❌ هر روز دنبال Framework جدید نباش.
✅ JavaScript رو عمیق یاد بگیر.
چون Frameworkها عوض میشن؛
ولی JavaScript هنوز سر جاشه. 🔥
#Frontend #JavaScript #React #WebDevelopment #برنامه_نویسی
❌ هر روز دنبال Framework جدید نباش.
✅ JavaScript رو عمیق یاد بگیر.
چون Frameworkها عوض میشن؛
ولی JavaScript هنوز سر جاشه. 🔥
#Frontend #JavaScript #React #WebDevelopment #برنامه_نویسی
❤4🔥1
چرا همه Developerها باید HTTP رو بفهمن؟
وقتی مینویسی:
فقط یک خط JavaScript میبینی.
ولی پشتش یک دنیای کامل وجود داره:
و Status Codeهایی مثل:
مثلاً:
401 یعنی احراز هویت مشکل داره.
403 یعنی هویت مشخصه ولی اجازه دسترسی نداری.
404 یعنی Resource پیدا نشده.
500 یعنی مشکل سمت Server اتفاق افتاده.
📌 اگر HTTP رو نفهمی، Debug کردن پروژههای واقعی خیلی سختتر میشه.
#HTTP #API #Frontend #Backend #WebDevelopment #Programming
وقتی مینویسی:
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 رو قاطی نکن!
این دو تا اسمشون شبیه همدیگهست ولی رفتار متفاوتی دارن.
اما:
📌 خلاصه:
slice → بخشی از Array رو برمیداره،
بدون تغییر اصل آرایه
splice → خود Array رو تغییر میده
#JavaScript #Array #JS #Frontend
#Programming
این دو تا اسمشون شبیه همدیگهست ولی رفتار متفاوتی دارن.
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
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
نگهداشتن 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
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
شاید مشکل از هوش یا استعدادت نباشه.
مشکل اینه که بیشتر وقتت صرف دیدن آموزش میشه، نه ساختن.
یک آموزش ۲ ساعته میبینی و آخرش حس میکنی خیلی چیزها یاد گرفتی.
اما وقتی صفحه رو میبندی و میخوای خودت شروع کنی، نمیدونی از کجا.
این یعنی باید نسبتِ «آموزش دیدن» به «تمرین کردن» رو تغییر بدی.
📌 آموزش باید شروع یادگیری باشه، نه پایانش.
#برنامه_نویسی #یادگیری #فرانت_اند #Frontend #Developer
❤6👍3
۵ چیزی که یک دوره برنامهنویسی خوب باید داشته باشه
قبل از خرید هر دورهای اینا رو بررسی کن:
مسیر مشخص داشته باشه.
فقط Syntax آموزش نده.
پروژه واقعی داشته باشه.
تمرین و Challenge داشته باشه.
بعد از دوره بدون مدرس هم بتونی ادامه بدی.
چون هدف دوره این نیست که:
«ویدیوها رو تموم کنی.»
هدف اینه که بعدش بتونی خودت پروژه بسازی.
#آموزش_برنامه_نویسی #دوره_برنامه_نویسی #Developer #Programming
قبل از خرید هر دورهای اینا رو بررسی کن:
مسیر مشخص داشته باشه.
فقط Syntax آموزش نده.
پروژه واقعی داشته باشه.
تمرین و Challenge داشته باشه.
بعد از دوره بدون مدرس هم بتونی ادامه بدی.
چون هدف دوره این نیست که:
«ویدیوها رو تموم کنی.»
هدف اینه که بعدش بتونی خودت پروژه بسازی.
#آموزش_برنامه_نویسی #دوره_برنامه_نویسی #Developer #Programming
❤3👏1
🧹 ۱۰ نشونه که کدت نیاز به Refactor داره
یک Function خیلی بزرگه
یک کد چند بار تکرار شده
اسم متغیرها نامفهومه
شرطهای تو در تو زیادن
تغییر یک چیز چند فایل رو خراب میکنه
یک فایل هزاران خط شده
Function چند کار مختلف انجام میده
کامنتهای عجیب برای توضیح کد لازم شده
حذف یک Feature خیلی سخت شده
خودت از خواندن کد میترسی
📌 Refactor
یعنی بهتر کردن ساختار کد، بدون تغییر رفتار اصلی برنامه.
#CleanCode #Refactoring #Programming #Developer #کدنویسی
یک Function خیلی بزرگه
یک کد چند بار تکرار شده
اسم متغیرها نامفهومه
شرطهای تو در تو زیادن
تغییر یک چیز چند فایل رو خراب میکنه
یک فایل هزاران خط شده
Function چند کار مختلف انجام میده
کامنتهای عجیب برای توضیح کد لازم شده
حذف یک Feature خیلی سخت شده
خودت از خواندن کد میترسی
📌 Refactor
یعنی بهتر کردن ساختار کد، بدون تغییر رفتار اصلی برنامه.
#CleanCode #Refactoring #Programming #Developer #کدنویسی
❤4
۱۰ سؤال مهم قبل از شروع یک پروژه
قبل از کدنویسی بپرس:
کاربر این پروژه کیه؟
مشکل اصلی چیه؟
مهمترین Feature چیه؟
چه اطلاعاتی نیاز داریم؟
API از کجا میاد؟
چه محدودیتهایی داریم؟
نسخه موبایل داریم؟
چه حالتهای خطایی داریم؟
معیار موفقیت پروژه چیه؟
Deadline
واقعی چقدره؟
📌 خیلی از مشکلات پروژه از کد شروع نمیشن؛ از ابهام در نیازمندیها شروع میشن.
#SoftwareDevelopment
#ProjectManagement #Developer #Programming
قبل از کدنویسی بپرس:
کاربر این پروژه کیه؟
مشکل اصلی چیه؟
مهمترین Feature چیه؟
چه اطلاعاتی نیاز داریم؟
API از کجا میاد؟
چه محدودیتهایی داریم؟
نسخه موبایل داریم؟
چه حالتهای خطایی داریم؟
معیار موفقیت پروژه چیه؟
Deadline
واقعی چقدره؟
📌 خیلی از مشکلات پروژه از کد شروع نمیشن؛ از ابهام در نیازمندیها شروع میشن.
#SoftwareDevelopment
#ProjectManagement #Developer #Programming
❤2🔥1
🔥 این ترفند JavaScript رو خیلیها نمیدونن
فرض کن اینو داری:
احتمالاً مینویسی:
حتی میتونی چندتا مقدار بگیری:
اگر JavaScript میزنی،
#JavaScript #JS #Frontend #React
#Programming #کدنویسی #برنامه_نویسی #Codelines
فرض کن اینو داری:
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
#JavaScript #JS #Frontend #Programming #کدنویسی #برنامه_نویسی #Codelines
اگه هنوز اینا رو استفاده نمیکنی، وقتشه یادشون بگیری 👇
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 کردن کدت باید چک کنی
قبل از اینکه این دستور رو بزنی:
اینارو ببین:
☑️
☑️ فایل
☑️ Error
توی Console نداری؟
☑️ اسم متغیرهای تستی باقی نمونده؟
☑️ پروژه روی سیستم خودت واقعاً کار میکنه؟
همین ۳۰ ثانیه میتونه جلوی یک دردسر واقعی رو بگیره.
#Git #GitHub #Programming #Developer #Frontend #JavaScript #کدنویسی #Codelines
قبل از اینکه این دستور رو بزنی:
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);
❤3
🤖 شبیهسازی مصاحبه Front-End با AI
میخوای قبل از مصاحبه واقعی، خودت رو محک بزنی؟ 😈
این پرامپت رو به AI بده:
اینطوری 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
خیلیها فکر میکنن برای درآمد گرفتن باید حتماً پروژههای خیلی بزرگ بگیرن.
درحالیکه کلی کار کوچک وجود داره:
🔹 تبدیل 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
این کارها رو میکردم:
ماه اول:
JavaScript + Git + API
ماه دوم:
React + یک پروژه واقعی
ماه سوم:
TypeScript + next + پروژه دوم + Portfolio + تمرین مصاحبه
نه اینکه:
۵ Framework
۳ زبان
۱۰ دوره
رو نصفه شروع کنم.
هدف ورود به بازار کاره، نه جمع کردن تکنولوژی.
#بازار_کار #مسیر_یادگیری #Frontend #JavaScript #React #Programming #Codelines
❤4