🕵️ می‌خوای بفهمی یک سایت با چی ساخته شده؟

این ابزارها رو امتحان کن:

🔍 Wappalyzer 🔍 BuiltWith 🔍 WhatRuns

می‌تونی سرنخ‌هایی درباره:

Framework
CMS
Analytics
Server
CDN
و تکنولوژی‌های استفاده‌شده
پیدا کنی.

📌 برای تحقیق و بررسی سایت‌های مختلف خیلی کاربردیه.

#Wappalyzer #WebDevelopment
#Frontend #برنامه_نویسی #Developer #توسعه_وب

⚡️ Arrow Function

به جای اینکه اینجوری بنویسی:

function sum(a, b) {
  return a + b;
}

میتونی خیلی خلاصه‌تر بنویسی:

const sum = (a, b) => a + b;

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

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

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

#JavaScript #Frontend

📌میانبرهای کیبورد که همه ی برنامه نویسان باید بلد باشن

با Win + V تاریخچه کپی‌ها رو ببین
با Ctrl + Shift + T تب بسته‌شده رو برگردون
با Win + Shift + S از بخشی از صفحه عکس بگیر
با Ctrl + L مستقیم برو روی نوار آدرس
با Ctrl + F داخل هر صفحه دنبال کلمه بگرد
با site: فقط داخل یک سایت جست‌وجو کن
با علامت نقل‌قول، عبارت دقیق رو در گوگل پیدا کن
با filetype:pdf فقط فایل PDF جست‌وجو کن
با Ctrl + Backspace یک کلمه کامل رو پاک کن
با Alt + Tab سریع بین برنامه‌ها جابه‌جا شو

🌐 ۷ سایت برای پیدا کردن API و دیتای آماده برای پروژه:

Public APIs → لیست
APIهای رایگان
JSONPlaceholder → API
فیک برای تمرین
Fake Store API → دیتای فروشگاه
Open-Meteo → API آب‌وهوا
REST Countries → اطلاعات کشورها
PokeAPI → دیتای Pokémon
The Movie Database → دیتای فیلم و سریال

🔥 دیگه برای هر پروژه لازم نیست خودت از صفر دیتای تست بسازی.

📌 Save
کن؛ برای پروژه بعدی به کارت میاد.

🔥 ۵ افزونه 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

خیلی از مسیرهای سالم رشد عمدتاً هیجان‌انگیز نیستن. و اکثر روزها ممکنه تکراری و عاری از دستاورد مهیج زودبازده باشن. اما اگه بتونی اینا رو دووم بیاری و مستمر طی کنی، از ۹۰٪ مردم که اغلب دنبال هیجان می‌دوئن حسابی جلو می‌افتی و به جاهای خیلی خوبی می‌رسی.

🔥 این ترفند 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

«اگر فقط ۳ ماه وقت داشتی برای ورود به بازار کار آماده بشی...»

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

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

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

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

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

📄 اگه فریلنسری کار می‌کنی، اینو جدی بگیر!

قبل از اینکه پروژه رو شروع کنی، حتماً یه قرارداد داشته باش.

لازم نیست پیچیده باشه، فقط اینا توش باشه:
✅ دقیقاً قراره چی تحویل بدی
✅ مبلغ پروژه و زمان پرداخت
✅ کی باید پروژه رو تحویل بدی
✅ چند بار اصلاح رایگانه
✅ فایل‌ها بعد از تسویه مال کیه
✅ اگه یکی وسط کار انصراف داد، تکلیف چیه

باور کن یه قرارداد ساده، می‌تونه جلوی کلی دردسر و بحث بیخودی رو بگیره. 😉

Rollback
یعنی چی؟ 🔙

Deploy
کردی.
۵ دقیقه بعد:
سایت خراب میشه.

اولین سؤال ممکنه این باشه:

Can we rollback?

Rollback
یعنی برگردوندن سیستم به نسخه قبلی که سالم بوده
.
مثلاً:

v1.4.2 ❌ v1.4.1 ✅

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

🔥 یکی از چیزهایی که در پروژه واقعی
خیلی مهمه:

فقط Deploy کردن رو بلد نباش؛ برگشتن از Deploy خراب رو هم باید بلد باشی.

#Rollback #Deploy #Production #DevOps #Developer #برنامه_نویسی

🔥 ۷ چیزی که قبل از استخدام شدن به‌عنوان Frontend Developer باید بلد باشی

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

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

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

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

#برنامه_نویسی #فرانت_اند #جاوااسکریپت #Frontend #JavaScript #React #Git #GitHub #برنامه_نویس #بازار_کار #استخدام #Codelines

۶ سایت رایگان برای ساخت UI حرفه‌ای که باید ذخیره‌شون کنی

اگه فرانت‌اند کار می‌کنی، این لیست رو یه جا نگه دار:

shadcn/ui
Magic UI
Aceternity UI
Flowbite
DaisyUI
HyperUI

همه‌شون برای پیدا کردن کامپوننت‌های آماده و ساخت سریع‌تر رابط کاربری کاربردی‌ان.

این پست رو Save کن؛ یه روز بهش نیاز پیدا می‌کنی.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری #فرانت_اند #برنامه_نویسی

⚡ ۸ میانبر VS Code که بهتره حفظشون کنی:

Ctrl + P → پیدا کردن فایل
Ctrl + Shift + P → Command Palette
Ctrl + D → انتخاب مشابه بعدی
Alt + ↑ / ↓ → جابه‌جایی خط
Shift + Alt + ↓ → کپی خط
Ctrl + / → Comment
Ctrl + B → باز/بسته کردن Sidebar
Ctrl + Shift + F → جستجو در کل پروژه

📌 اینا رو یکی‌یکی وارد عادتت کن؛ بعد از چند روز متوجه تفاوت سرعتت میشی.
#VSCode #برنامه_نویسی #فرانت_اند #کدنویسی #Developer #WebDevelopment

⚡️ فرق npm install و npm ci چیه؟

اگه روی پروژه تیمی کار می‌کنی، این تفاوت رو حتماً بدون.

npm install
پکیج‌ها رو نصب می‌کنه و اگه لازم باشه فایل package-lock.json رو هم تغییر می‌ده.

npm install

npm ci
دقیقاً همون نسخه‌هایی که داخل package-lock.json ثبت شده رو نصب می‌کنه و هیچ تغییری هم توی فایل‌ها نمی‌ده.

npm ci

💡 کی از npm ci استفاده کنیم؟
موقع Deploy
توی CI/CD
وقتی می‌خوای مطمئن باشی همه دقیقاً یک نسخه از پکیج‌ها رو دارن.

📌 خلاصه:
برای توسعه روزمره → npm install
برای نصب سریع و مطمئن → npm ci

🔥 ۵ افزونه 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