۶ سایت رایگان برای ساخت UI حرفهای که باید ذخیرهشون کنی
اگه فرانتاند کار میکنی، این لیست رو یه جا نگه دار:
shadcn/ui
Magic UI
Aceternity UI
Flowbite
DaisyUI
HyperUI
همهشون برای پیدا کردن کامپوننتهای آماده و ساخت سریعتر رابط کاربری کاربردیان.
این پست رو Save کن؛ یه روز بهش نیاز پیدا میکنی.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری #فرانت_اند #برنامه_نویسی
اگه فرانتاند کار میکنی، این لیست رو یه جا نگه دار:
shadcn/ui
Magic UI
Aceternity UI
Flowbite
DaisyUI
HyperUI
همهشون برای پیدا کردن کامپوننتهای آماده و ساخت سریعتر رابط کاربری کاربردیان.
این پست رو Save کن؛ یه روز بهش نیاز پیدا میکنی.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری #فرانت_اند #برنامه_نویسی
❤5🔥1
📲 میدونستی بخش زیادی از سایتهای معروفی که هر روز میبینی، با React و next ساخته شدن؟
🏆 از اینستاگرام و دیجیکالا گرفته تا کلی وبسایت و اپلیکیشن محبوب، React , next یکی از تکنولوژیهای پرکاربرد برای ساخت رابط کاربریه.
🔥 اگه به دنیای فرانتاند علاقه داری، React , next یکی از مهمترین تکنولوژیهاییه که باید یاد بگیری!
🏆 از اینستاگرام و دیجیکالا گرفته تا کلی وبسایت و اپلیکیشن محبوب، React , next یکی از تکنولوژیهای پرکاربرد برای ساخت رابط کاربریه.
🔥 اگه به دنیای فرانتاند علاقه داری، React , next یکی از مهمترین تکنولوژیهاییه که باید یاد بگیری!
❤6👍2
🌳 اگه Front-End Developer هستی، حداقل این دستورات Gitها رو بلد باش:
❌ Git
فقط
📌 Save
کن؛ برای کار تیمی لازمت میشه.
clone → گرفتن پروژه branch → ساخت شاخه checkout → جابهجایی add → آماده کردن تغییرات commit → ثبت تغییرات pull → گرفتن تغییرات push → فرستادن تغییرات merge → ترکیب Branchها❌ Git
فقط
push و pull نیست!📌 Save
کن؛ برای کار تیمی لازمت میشه.
❤5🔥2
📱 Mobile First
یعنی چی؟
یعنی طراحی و توسعه رو اول برای صفحه کوچک شروع کنی:
Mobile → Tablet → Desktop
نه اینکه اول یه سایت دسکتاپ بسازی و آخر کار
سعی کنی جمعش کنی داخل موبایل. 😄
✅ CSS سادهتر
✅ تمرکز روی محتوای ضروری
✅ Responsive Design بهتر
📌 اگه Front-End کار میکنی، Mobile First رو جدی بگیر.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
یعنی چی؟
یعنی طراحی و توسعه رو اول برای صفحه کوچک شروع کنی:
Mobile → Tablet → Desktop
نه اینکه اول یه سایت دسکتاپ بسازی و آخر کار
سعی کنی جمعش کنی داخل موبایل. 😄
✅ CSS سادهتر
✅ تمرکز روی محتوای ضروری
✅ Responsive Design بهتر
📌 اگه Front-End کار میکنی، Mobile First رو جدی بگیر.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
❤5🔥1
۵ نشونه که هنوز برای ورود به بازار کار آماده نیستی
❌ نمیتونی یک پروژه رو از صفر بسازی
❌ وقتی ارور میبینی گیر میکنی
❌ نمیدونی چه چیزهایی رو باید یاد بگیری
❌ Git و GitHub
بلد نیستی
❌ پروژه برای رزومه نداری
ولی خبر خوب اینه:
همه اینها قابل یادگیریه.
❌ نمیتونی یک پروژه رو از صفر بسازی
❌ وقتی ارور میبینی گیر میکنی
❌ نمیدونی چه چیزهایی رو باید یاد بگیری
❌ Git و GitHub
بلد نیستی
❌ پروژه برای رزومه نداری
ولی خبر خوب اینه:
همه اینها قابل یادگیریه.
❤3👍2
افزونههای ضروری VS Code
⭐ Prettier فرمت خودکار کد
⭐ ESLint پیدا کردن خطاها
⭐ GitLens
قدرت بیشتر برای Git
⭐ Error Lens نمایش خطا کنار کد
⭐ Auto Rename Tag
تغییر همزمان تگهای HTML
⭐ Thunder Client
تست API داخل VS Code
⭐ Prettier فرمت خودکار کد
⭐ ESLint پیدا کردن خطاها
⭐ GitLens
قدرت بیشتر برای Git
⭐ Error Lens نمایش خطا کنار کد
⭐ Auto Rename Tag
تغییر همزمان تگهای HTML
⭐ Thunder Client
تست API داخل VS Code
❤4👍3
🎯 سوال مصاحبه | DNS چیه؟
فرض کن میخوای بری خونه دوستت؛ اسمش رو میدونی، ولی آدرس دقیقش رو نه.
اینجاست که DNS وارد عمل میشه. 😄
DNS اسم سایته مثل:
رو به آدرس واقعی سرورش (IP) تبدیل میکنه تا مرورگر بدونه باید به کجا وصل بشه.
📌 خلاصه:
💡 نکته : کامپیوترها اسم سایتها رو نمیفهمن، فقط با IP Address ارتباط برقرار میکنن.
فرض کن میخوای بری خونه دوستت؛ اسمش رو میدونی، ولی آدرس دقیقش رو نه.
اینجاست که DNS وارد عمل میشه. 😄
DNS اسم سایته مثل:
google.com
رو به آدرس واقعی سرورش (IP) تبدیل میکنه تا مرورگر بدونه باید به کجا وصل بشه.
📌 خلاصه:
google.com
⬇️
DNS
⬇️
142.250.xxx.xxx
💡 نکته : کامپیوترها اسم سایتها رو نمیفهمن، فقط با IP Address ارتباط برقرار میکنن.
❤4
🚨 ۱۰ سایت مخفی که کلی وقت برنامهنویسها رو نجات میده!
اگه برنامهنویسی میکنی، این سایتها رو یه گوشه ذخیره کن؛ یه روزی حسابی به کارت میان 👇
🧠 Stack Overflow → وقتی به یه خطای عجیب میخوری، احتمالاً جوابش اینجاست.
📚 DevDocs → مستندات چندین تکنولوژی رو یکجا داشته باش.
🔍 Regex101 → ساخت و تست Regex بدون دردسر.
🎯 Frontend Mentor → تمرین پروژههای واقعی فرانتاند.
🖼️ Unsplash → عکسهای حرفهای رایگان برای پروژهها.
⚡ TinyPNG → حجم تصاویر رو کم کن و سرعت سایتت رو بالا ببر.
🎨 CSS Tricks → کلی ترفند خفن برای CSS.
🧪 JSFiddle → کدت رو سریع تست کن.
📦 Bundlephobia → قبل از نصب پکیجها حجمشون رو بررسی کن.
🚀 Lighthouse → سرعت، سئو و کیفیت سایتت رو بررسی کن.
📌 خیلی از برنامهنویسها این ابزارها رو دیر پیدا میکنن...
تو ذخیرهش کن که موقع پروژه دنبال ابزار نگردی. 🔥
.
اگه برنامهنویسی میکنی، این سایتها رو یه گوشه ذخیره کن؛ یه روزی حسابی به کارت میان 👇
🧠 Stack Overflow → وقتی به یه خطای عجیب میخوری، احتمالاً جوابش اینجاست.
📚 DevDocs → مستندات چندین تکنولوژی رو یکجا داشته باش.
🔍 Regex101 → ساخت و تست Regex بدون دردسر.
🎯 Frontend Mentor → تمرین پروژههای واقعی فرانتاند.
🖼️ Unsplash → عکسهای حرفهای رایگان برای پروژهها.
⚡ TinyPNG → حجم تصاویر رو کم کن و سرعت سایتت رو بالا ببر.
🎨 CSS Tricks → کلی ترفند خفن برای CSS.
🧪 JSFiddle → کدت رو سریع تست کن.
📦 Bundlephobia → قبل از نصب پکیجها حجمشون رو بررسی کن.
🚀 Lighthouse → سرعت، سئو و کیفیت سایتت رو بررسی کن.
📌 خیلی از برنامهنویسها این ابزارها رو دیر پیدا میکنن...
تو ذخیرهش کن که موقع پروژه دنبال ابزار نگردی. 🔥
.
کدلاینز
کدلاینز | آموزش فرانت اند پروژه محور از صفر تا استخدام
آموزش فرانت اند از صفر تا استخدام: دورههای پروژه محور ری اکت (React)، جاوا اسکریپت (JavaScript)، HTML و CSS و گیت و گیت هاب — با دسترسی مادامالعمر و پشتیبانی واقعی.
❤5🔥1
اگه ۶ ماهه داری برنامهنویسی یاد میگیری ولی هنوز نمیتونی یه پروژه رو تنهایی بسازی، اینو بخون.
احتمالاً مشکل از هوش یا استعدادت نیست.
حتی شاید مشکل از کمبود آموزش هم نباشه.
مشکل اینه که بیشترِ وقتت رو صرف «یاد گرفتن» کردی، نه «حل کردن».
و این دوتا با هم فرق دارن.
وقتی آموزش میبینی، مدرس بهت میگه:
«اینجا این کد رو بنویس.»
تو هم مینویسی و همهچیز درست پیش میره.
اما وقتی خودت با یک صفحه خالی روبهرو میشی:
❌ نمیدونی از کجا شروع کنی
❌ نمیدونی چه چیزی رو سرچ کنی
❌ با اولین ارور گیر میکنی
❌ سریع فکر میکنی «من برای برنامهنویسی ساخته نشدم»
در حالی که واقعیت اینه:
تو کم آموزش ندیدی؛ کم «مسئله حل کردی».
از امروز یه قانون برای خودت بذار:
هر چیزی که یاد میگیری، قبل از اینکه بری سراغ آموزش بعدی، باهاش یک چیز واقعی بساز.
حتی اگر کوچیک باشه. حتی اگر خراب بشه. حتی اگر مجبور بشی ۲۰ بار سرچ کنی.
چون هدف نهایی برنامهنویسی این نیست که بگی:
«من این مبحث رو بلدم.»
هدف اینه که وقتی بهت یک مسئله دادن، بتونی بگی:
«باشه، بذار ببینم چطور حلش کنم.» 🚀
احتمالاً مشکل از هوش یا استعدادت نیست.
حتی شاید مشکل از کمبود آموزش هم نباشه.
مشکل اینه که بیشترِ وقتت رو صرف «یاد گرفتن» کردی، نه «حل کردن».
و این دوتا با هم فرق دارن.
وقتی آموزش میبینی، مدرس بهت میگه:
«اینجا این کد رو بنویس.»
تو هم مینویسی و همهچیز درست پیش میره.
اما وقتی خودت با یک صفحه خالی روبهرو میشی:
❌ نمیدونی از کجا شروع کنی
❌ نمیدونی چه چیزی رو سرچ کنی
❌ با اولین ارور گیر میکنی
❌ سریع فکر میکنی «من برای برنامهنویسی ساخته نشدم»
در حالی که واقعیت اینه:
تو کم آموزش ندیدی؛ کم «مسئله حل کردی».
از امروز یه قانون برای خودت بذار:
هر چیزی که یاد میگیری، قبل از اینکه بری سراغ آموزش بعدی، باهاش یک چیز واقعی بساز.
حتی اگر کوچیک باشه. حتی اگر خراب بشه. حتی اگر مجبور بشی ۲۰ بار سرچ کنی.
چون هدف نهایی برنامهنویسی این نیست که بگی:
«من این مبحث رو بلدم.»
هدف اینه که وقتی بهت یک مسئله دادن، بتونی بگی:
«باشه، بذار ببینم چطور حلش کنم.» 🚀
❤7
🤯 میدونستی؟
در JavaScript آرایه هم در واقع یک Object محسوب میشه!
برای اینکه بفهمی یک متغیر واقعاً آرایه است، از این استفاده کن:
📌 نکته مصاحبه:
در JavaScript آرایه هم در واقع یک Object محسوب میشه!
console.log(typeof [])
// "object"
برای اینکه بفهمی یک متغیر واقعاً آرایه است، از این استفاده کن:
Array.isArray([])
📌 نکته مصاحبه:
typeof نمیتواند Array را از Object تشخیص دهد.❤4🔥1
👀 این ۵ تا Attribute HTML رو خیلیها جدی نمیگیرن:
همین جزئیات کوچیکه که کد یه Junior رو از یه Developer حرفهای جدا میکنه. 🚀
📌 Save
کن؛ بعداً به کارت میاد.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
loading="lazy" → لود تنبل تصاویرautocomplete → تجربه بهتر فرمهاaria-label → دسترسیپذیری بهترdefer → جلوگیری از بلاک شدن HTMLrel="noopener" → امنیت بیشتر لینکهای جدیدهمین جزئیات کوچیکه که کد یه Junior رو از یه Developer حرفهای جدا میکنه. 🚀
📌 Save
کن؛ بعداً به کارت میاد.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
❤3🔥1
🌳 اگه Front-End Developer هستی، حداقل این دستورات Gitها رو بلد باش:
❌ Git
فقط
📌 Save
کن؛ برای کار تیمی لازمت میشه.
clone → گرفتن پروژه branch → ساخت شاخه checkout → جابهجایی add → آماده کردن تغییرات commit → ثبت تغییرات pull → گرفتن تغییرات push → فرستادن تغییرات merge → ترکیب Branchها❌ Git
فقط
push و pull نیست!📌 Save
کن؛ برای کار تیمی لازمت میشه.
❤3👍1
۶ سایت رایگان برای ساخت UI حرفهای که باید ذخیرهشون کنی
اگه فرانتاند کار میکنی، این لیست رو یه جا نگه دار:
shadcn/ui
Magic UI
Aceternity UI
Flowbite
DaisyUI
HyperUI
همهشون برای پیدا کردن کامپوننتهای آماده و ساخت سریعتر رابط کاربری کاربردیان.
این پست رو Save کن؛ یه روز بهش نیاز پیدا میکنی.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری #فرانت_اند #برنامه_نویسی
اگه فرانتاند کار میکنی، این لیست رو یه جا نگه دار:
shadcn/ui
Magic UI
Aceternity UI
Flowbite
DaisyUI
HyperUI
همهشون برای پیدا کردن کامپوننتهای آماده و ساخت سریعتر رابط کاربری کاربردیان.
این پست رو Save کن؛ یه روز بهش نیاز پیدا میکنی.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری #فرانت_اند #برنامه_نویسی
❤4
📌میانبرهای کیبورد که همه ی برنامه نویسان باید بلد باشن
با
با
با
با
با
با
با علامت نقلقول، عبارت دقیق رو در گوگل پیدا کن
با
با
با
با
Win + V تاریخچه کپیها رو ببینبا
Ctrl + Shift + T تب بستهشده رو برگردونبا
Win + Shift + S از بخشی از صفحه عکس بگیربا
Ctrl + L مستقیم برو روی نوار آدرسبا
Ctrl + F داخل هر صفحه دنبال کلمه بگردبا
site: فقط داخل یک سایت جستوجو کنبا علامت نقلقول، عبارت دقیق رو در گوگل پیدا کن
با
filetype:pdf فقط فایل PDF جستوجو کنبا
Ctrl + Backspace یک کلمه کامل رو پاک کنبا
Alt + Tab سریع بین برنامهها جابهجا شو❤1👍1🔥1
⚡ ۸ میانبر VS Code که بهتره حفظشون کنی:
📌 اینا رو یکییکی وارد عادتت کن؛ بعد از چند روز متوجه تفاوت سرعتت میشی.
#VSCode #برنامه_نویسی #فرانت_اند #کدنویسی #Developer #WebDevelopment
Ctrl + P → پیدا کردن فایل Ctrl + Shift + P → Command Palette Ctrl + D → انتخاب مشابه بعدی Alt + ↑ / ↓ → جابهجایی خط Shift + Alt + ↓ → کپی خط Ctrl + / → Comment Ctrl + B → باز/بسته کردن Sidebar Ctrl + Shift + F → جستجو در کل پروژه📌 اینا رو یکییکی وارد عادتت کن؛ بعد از چند روز متوجه تفاوت سرعتت میشی.
#VSCode #برنامه_نویسی #فرانت_اند #کدنویسی #Developer #WebDevelopment
❤1❤🔥1
🤯 میدونستی؟
در JavaScript آرایه هم در واقع یک Object محسوب میشه!
برای اینکه بفهمی یک متغیر واقعاً آرایه است، از این استفاده کن:
📌 نکته مصاحبه:
در JavaScript آرایه هم در واقع یک Object محسوب میشه!
console.log(typeof [])
// "object"
برای اینکه بفهمی یک متغیر واقعاً آرایه است، از این استفاده کن:
Array.isArray([])
📌 نکته مصاحبه:
typeof نمیتواند Array را از Object تشخیص دهد.❤1👏1
👨💻 اگر تازه وارد پروژه واقعی شدی، اینا
رو زیاد میشنوی:
حتما ذخیرهش کن توی محیط کاری خیلی به دردت میخوره
🔹 Code Review → بررسی کد
🔹 Pull Request → درخواست ادغام تغییرات
🔹 CI/CD → فرآیند خودکار
Build/Test/Deploy
🔹 Staging → محیط قبل از Production
🔹 Production → محیط واقعی کاربران
📌 این اصطلاحات رو فقط حفظ نکن؛ باید بدونی کجا و چرا استفاده میشن.
#برنامه_نویسی #GitHub #DevOps #SoftwareDevelopment #Developer #FrontEnd
رو زیاد میشنوی:
حتما ذخیرهش کن توی محیط کاری خیلی به دردت میخوره
🔹 Code Review → بررسی کد
🔹 Pull Request → درخواست ادغام تغییرات
🔹 CI/CD → فرآیند خودکار
Build/Test/Deploy
🔹 Staging → محیط قبل از Production
🔹 Production → محیط واقعی کاربران
📌 این اصطلاحات رو فقط حفظ نکن؛ باید بدونی کجا و چرا استفاده میشن.
#برنامه_نویسی #GitHub #DevOps #SoftwareDevelopment #Developer #FrontEnd
❤2❤🔥1
🚀 ۱۰ سایت رایگان برای آنلاین کردن پروژههای برنامهنویسی 🔥
📌 ذخیره کن؛ بعداً بهشون نیاز پیدا میکنی
Vercel
Netlify
GitHub Pages
Cloudflare Pages
Firebase Hosting
Render
GitLab Pages
Surge
Replit
Gitpod
📤 برای یه برنامهنویس بفرست که هنوز پروژههاشو فقط روی سیستمش نگه داشته.
برای نشون دادن نمونه کارهاتون عالیه🙃
📌 ذخیره کن؛ بعداً بهشون نیاز پیدا میکنی
Vercel
Netlify
GitHub Pages
Cloudflare Pages
Firebase Hosting
Render
GitLab Pages
Surge
Replit
Gitpod
📤 برای یه برنامهنویس بفرست که هنوز پروژههاشو فقط روی سیستمش نگه داشته.
برای نشون دادن نمونه کارهاتون عالیه🙃
❤1💯1
کدوم متد برای تبدیل رشته JSON به شیء جاوااسکریپت استفاده میشه؟
Anonymous Quiz
24%
JSON.stringify()
32%
JSON.parse()
34%
JSON.object()
11%
JSON.convert()
🔥 ۵ افزونه 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
📌 حتماً ذخیره کن؛ یه روز به کارت میاد!
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
❤1👏1
Forwarded from نظرات دانشجویان
تا تو بری مسیر آموزشی یاد بگیری،
با هوش مصنوعی خودتو گول بزنی 😂
اقا حمید ما پروژه دلاری شو گرفته
اول صبح این پیام ها رو میبینم کل روزم ساخته میشه
قطعا پشتکار مسیر درست پشتیبانی حرفه ای
نتیجه ش میشه این 🌱👌🏻🥰
با هوش مصنوعی خودتو گول بزنی 😂
اقا حمید ما پروژه دلاری شو گرفته
اول صبح این پیام ها رو میبینم کل روزم ساخته میشه
قطعا پشتکار مسیر درست پشتیبانی حرفه ای
نتیجه ش میشه این 🌱👌🏻🥰
❤3🥰1