نویسنده: Mahyarmi

طراحی سایدبارهای مدرن (Dashboard Sidebar) با قابلیت جمع‌شدن

طراحی سایدبارهای مدرن (Dashboard Sidebar) با قابلیت جمع‌شدن رفیق برنامه‌نویس، تا حالا شده به یه داشبورد نگاه کنی و ببینی چقدر شلوغه؟ یا برعکس، چقدر ساده و دلبازه؟ یکی از اجزای کلیدی که این حس رو منتقل می‌کنه، سایدبار یا همون نوار کناریه. ولی نه هر سایدباری! منظورم یه سایدبار مدرن و حرفه‌ایه که علاوه […]

ترفندهای Flexbox برای تراز کردن المان‌های پیچیده در موبایل

ترفندهای Flexbox برای تراز کردن المان‌های پیچیده در موبایل رفیق توسعه‌دهنده! اگه از اونایی هستی که همیشه دنبال راهکارهای تمیز و قدرتمند برای چیدمان توی موبایلی، این مقاله برای تو نوشته شده. Flexbox یه گنجینه بی‌نظیره که اگه قلقش دستت بیاد، دیگه لازم نیست برای هر چیدمان پیچیده‌ای ساعت‌ها کلنجار بری. اینجا قراره تمام فوت […]

اسنیپت‌های کاربردی برای طراحی فوترهای مینیمال و چندستونه

اسنیپت‌های کاربردی برای طراحی فوترهای مینیمال و چندستونه رفیق برنامه‌نویس، بیا یه نگاه بندازیم به یکی از مهمترین و البته گاهی دست‌کم گرفته شده‌ترین بخش‌های هر سایت: فوتر! خیلی‌ها فکر می‌کنن فوتر فقط یه گوشه برای کپی‌رایت و یه سری لینک اضافیه، اما اگه خلاقیت به خرج بدیم، می‌تونه تبدیل بشه به یک ابزار قدرتمند […]

چگونه هدر چسبنده (Sticky Header) هوشمند بسازیم که هنگام اسکرول مخفی شود؟

چگونه هدر چسبنده (Sticky Header) هوشمند بسازیم که هنگام اسکرول مخفی شود؟ ⭐ نقشه راه: ساخت هدر هوشمند در یک نگاه ⭐ 💡 مرحله ۱: HTML پایه ساختار اصلی هدر و محتوای صفحه رو می‌چنیم. <header> و <nav> محتوای کافی برای اسکرول 💡 مرحله ۲: CSS چسبنده هدر رو با CSS چسبنده می‌کنیم و استایل […]

آموزش ساخت گالری تصاویر به سبک Pinterest با کدهای CSS

آموزش ساخت گالری تصاویر به سبک Pinterest با کدهای CSS رفیق برنامه‌نویس، حالت چطوره؟ امروز قراره دست به کار شیم و یه گالری تصویر بزنیم که هرکی دید بگه: “واو، چه کدی زدی!” منظورم همون چیدمان جذاب و نامنظم پینترستی هست که تصاویر با ارتفاع‌های مختلف رو بدون فضای خالی اضافه کنار هم می‌چینه. شاید […]

۵ ساختار مدرن با CSS Grid که جایگزین بوت‌استرپ می‌شوند

۵ ساختار مدرن با CSS Grid که جایگزین بوت‌استرپ می‌شوند رفیق توسعه‌دهنده! این روزها دیگه کمتر کسی سراغ فریم‌ورک‌های سنگین و جاوااسکریپتی مثل بوت‌استرپ میره تا یه چیدمان ساده بزنه. راستش رو بخوای، دنیای CSS انقدر پیشرفت کرده که با ابزارهایی مثل CSS Grid می‌تونی هر طرحی رو که تو ذهنته، با کمترین کد و […]

آموزش پیاده‌سازی Dark Mode در سایت با کمترین خط کد

آموزش پیاده‌سازی Dark Mode در سایت با کمترین خط کد نقشه راه سریع: پیاده‌سازی دارک مود در یک نگاه ۱. CSS اولیه با prefers-color-scheme ظاهر اولیه را تنظیم کن. ۲. سوئیچ دارک مود یک دکمه یا توگل برای تغییر دستی (HTML, CSS). ۳. جاوااسکریپت منطق تغییر کلاس‌ها و ذخیره تنظیمات (Local Storage). ۴. بهینه‌سازی متغیرهای […]

کدهای آماده برای تبدیل اعداد انگلیسی به فارسی و بالعکس در وب

کدهای آماده برای تبدیل اعداد انگلیسی به فارسی و بالعکس در وب رفیق برنامه‌نویس، تا حالا شده بخوای یه عدد رو از انگلیسی به فارسی یا برعکس تبدیل کنی و کلی دنبال یه تکه کد درست‌وحسابی بگردی؟ می‌دونم چی می‌گی! توی دنیای وب فارسی، این نیاز مثل نون شب واجبه. چه برای نمایش تاریخ شمسی […]

چگونه با استفاده از APIهای مرورگر، موقعیت مکانی کاربر را نمایش دهیم؟

چگونه با استفاده از APIهای مرورگر، موقعیت مکانی کاربر را نمایش دهیم؟ 👋 رفیق برنامه‌نویس! دنبال ابزارهای خفن برای توسعه‌ای؟ قبل از اینکه بریم سراغ شیرجه زدن تو دنیای جذاب APIهای موقعیت مکانی مرورگر، یه سر به فروشگاه ابزارهای FA-Tools بزن. اونجا کلی چیزای باحال برای پروژه‌هات پیدا می‌کنی که کارتو راه میندازه و سرعتت […]

ساخت سیستم جستجوی لحظه‌ای (Instant Search) با Vanilla JS

ساخت سیستم جستجوی لحظه‌ای (Instant Search) با Vanilla JS ✨نقشه راه جستجوی لحظه‌ای شما: خلاصه و سریع! رفیق برنامه‌نویس، این یک راهنمای جامع برای ساخت سیستم جستجوی لحظه‌ای (Instant Search) با جاوااسکریپت خالص (Vanilla JS) هست. اینجا، قراره صفر تا صد قضیه رو با هم پیش بریم، از طراحی ساختار تا بهینه‌سازی نهایی. اگه آماده‌ای […]