فرق 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
«این سؤال رو توی مصاحبه ازت بپرسن، معلوم میشه واقعاً برنامهنویسی بلدی یا نه»
فرض کن یک API داری که گاهی ۳ ثانیه طول میکشه جواب بده.
چی کار میکنی؟
❌ فقط Loading میذاری؟
یا بررسی میکنی:
API چرا کند شده؟
Cache لازم داریم؟
Request اضافی داریم؟
Pagination داریم؟
Query سنگینه؟
میتونیم اطلاعات رو Lazy Load کنیم؟
برنامهنویس واقعی فقط کد نمینویسه؛ دلیل کند بودن سیستم رو پیدا میکنه.
#مصاحبه_برنامه_نویسی #Developer #Frontend #Backend #Programming #کدنویسی
فرض کن یک API داری که گاهی ۳ ثانیه طول میکشه جواب بده.
چی کار میکنی؟
❌ فقط Loading میذاری؟
یا بررسی میکنی:
API چرا کند شده؟
Cache لازم داریم؟
Request اضافی داریم؟
Pagination داریم؟
Query سنگینه؟
میتونیم اطلاعات رو Lazy Load کنیم؟
برنامهنویس واقعی فقط کد نمینویسه؛ دلیل کند بودن سیستم رو پیدا میکنه.
#مصاحبه_برنامه_نویسی #Developer #Frontend #Backend #Programming #کدنویسی
❤4🔥1
💰 اگه میخوای اولین پروژه یا اولین شغلت رو بگیری، این ۵ کار رو انجام بده:
✅ توی سایتهای استخدام مثل جابینجا، جابویژن و... رزومه بساز و هر روز برای آگهیهای جدید رزومه بفرست. حتی اگه همه شرایطش رو نداری.
✅ توی سایتهای فریلنسری مثل پونیشا و کارلنسر پروفایل کامل بساز و هر روز برای چند پروژه پیشنهاد بفرست.
✅ توی لینکدین، با برنامهنویسها و مدیرهای فنی ارتباط بگیر. خیلی از
فرصتهای شغلی اصلاً آگهی نمیشن.
✅ نمونهکارهات رو داخل GitHub و یک پورتفولیو منتشر کن. خیلی از شرکتها قبل از مصاحبه اول کدهای تو رو نگاه میکنن.
✅ توی گروههای تلگرام و کامیونیتیهای برنامهنویسی عضو باش. خیلی از پروژههای کوچک و معرفیها از همین گروهها پیدا میشن.
یه اشتباه بزرگ اینه که فقط منتظر بمونی یه آگهی مناسب پیدا بشه.
هر روز ۱۰ تا درخواست بفرست.
ممکنه ۹ تاش بیجواب بمونه، ولی همون یکی، میتونه مسیر شغلی تو رو عوض کنه. 🚀
✅ توی سایتهای استخدام مثل جابینجا، جابویژن و... رزومه بساز و هر روز برای آگهیهای جدید رزومه بفرست. حتی اگه همه شرایطش رو نداری.
✅ توی سایتهای فریلنسری مثل پونیشا و کارلنسر پروفایل کامل بساز و هر روز برای چند پروژه پیشنهاد بفرست.
✅ توی لینکدین، با برنامهنویسها و مدیرهای فنی ارتباط بگیر. خیلی از
فرصتهای شغلی اصلاً آگهی نمیشن.
✅ نمونهکارهات رو داخل GitHub و یک پورتفولیو منتشر کن. خیلی از شرکتها قبل از مصاحبه اول کدهای تو رو نگاه میکنن.
✅ توی گروههای تلگرام و کامیونیتیهای برنامهنویسی عضو باش. خیلی از پروژههای کوچک و معرفیها از همین گروهها پیدا میشن.
یه اشتباه بزرگ اینه که فقط منتظر بمونی یه آگهی مناسب پیدا بشه.
هر روز ۱۰ تا درخواست بفرست.
ممکنه ۹ تاش بیجواب بمونه، ولی همون یکی، میتونه مسیر شغلی تو رو عوض کنه. 🚀
❤3👏1