‏وقتی ⌘ رو ویندوز هم ⌘ می‌مونه

نویسنده یه نکتهٔ ظریف تو رابط کاربری خیلی از سایت‌ها رو نشون می‌ده: وقتی برای میان‌بر کیبورد از نماد ⌘ (Command مک) استفاده می‌کنن، حتی رو ویندوز هم همون ⌘ رو نشون می‌دن. مثلاً تو راهنمای میان‌برهای ردیت و نوار جستجوی اسکریمبا، رو یه سیستم ویندوزی هنوز ⌘ K دیده می‌شه؛ در حالی که ویندوز اصلاً همچین کلیدی نداره و برای کاربر غیرمهندس گیج‌کننده‌ست.

دلیلش اینه که خیلی از برنامه‌نویس‌ها رو مک‌بوک کار می‌کنن، پس رو دستگاه خودشون ⌘ کاملاً درست به‌نظر می‌رسه و متوجه مشکل نمی‌شن. اما طبق آمار StatCounter حدود ۷۱ درصد کاربرای دسکتاپ دنیا از ویندوز استفاده می‌کنن. به گفتهٔ نویسنده، همین جزئیات کوچیکه که یه محصول دقیق مثل Linear، VS Code یا Slack رو از بقیه جدا می‌کنه؛ چون این ابزارا بسته به سیستم‌عامل، بین ⌘ و Ctrl سوییچ می‌کنن.

راه‌حلی که پیشنهاد می‌ده استفاده از API مرورگر navigator.platform برای تشخیص سیستم‌عامله. یه تابع ساده می‌سازه که چک می‌کنه پلتفرم با "Mac" شروع شده یا "iPhone"ه:

export function isApplePlatform() {
  if (typeof navigator === "undefined") return false;
  return navigator.platform.startsWith("Mac") || navigator.platform === "iPhone";
}

نکتهٔ مهم بعدی مربوط به SSR (رندر سمت سرور) هست: چون navigator رو سرور وجود نداره، باید یه هوک بسازیم که بعد از mount شدن کامپوننت تو مرورگر مقدار درست رو ست کنه؛ وگرنه ری‌اکت با یه hydration mismatch (یعنی وقتی HTML سرور و HTML مرورگر با هم فرق می‌کنن) مواجه می‌شه. نویسنده حتی پیشنهاد می‌ده این قانون رو به‌جای اصلاح دستی، به‌صورت یه اسکیل (skill) برای ایجنت‌های هوش مصنوعی هم بنویسیم، چون یه مدل زبانی هم اگه تو کدبیس الگوی هاردکد شده ببینه، همون الگو رو تکرار می‌کنه.

نکات کلیدی:

• navigator.platform.startsWith("Mac") تشخیص می‌ده کاربر رو دستگاه اپلی هست یا نه
• طبق StatCounter حدود ۷۱٪ کاربرای دسکتاپ دنیا از ویندوز استفاده می‌کنن
• برای جلوگیری از hydration mismatch تو React، باید مقدار درست رو بعد از mount شدن با useEffect ست کرد
• ابزارایی مثل Linear، VS Code و Slack بسته به سیستم‌عامل بین ⌘ و Ctrl سوییچ می‌کنن