‏show-keystrokes: کلیدهایی که می‌زنی رو روی صفحه نشون بده

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

نتیجه یه وب‌کامپوننته به اسم . ماژولش رو از npm یا یه CDN لود می‌کنی و همون تگ کاستوم المنت رو می‌ذاری تو صفحه، تمام. پیش‌فرض فقط شورتکات‌ها (مثل ⌘ + A) و کلیدهای ناوبری (Tab، فلش‌ها، Enter، Esc) رو نشون می‌ده و تایپ معمولی رو نادیده می‌گیره. با اتربیوت keystrokes می‌تونی همه‌چی رو ببینی یا فقط یکی از اون دو دسته رو، و با position هم جای نمایشش رو عوض کنی.

<show-keystrokes keystrokes="all"></show-keystrokes>
<show-keystrokes position="pointer"></show-keystrokes>

خودش رو با پلتفرم هماهنگ می‌کنه: روی مک ⌘ و ⌥ نشون می‌ده و روی ویندوز و لینوکس CTRL و ALT. هم گلیف نمادی رو قبول می‌کنه هم برچسب متنی، دو تم آماده داره که با light-dark() به حالت روشن و تاریک واکنش می‌ده، و استایلش کامل از طریق ::part()ها و کاستوم پراپرتی‌های بیرون‌داده‌شده قابل تغییره. مقدار پیش‌فرض position هم viewport top right هست، ولی می‌تونی بذاریش کنار نشانگر موس یا به شکل معمولی توی جریان سند.

نکتهٔ فنی جالبش اینه که برای این کارها هیچ محاسبهٔ دستی مختصات یا جنگ z-index لازم نیست. کانتینر داخلی کامپوننت با popover="manual" به Top Layer مرورگر (یعنی لایه‌ای که بالای همهٔ استکینگ‌کانتکست‌های صفحه می‌نشینه) منتقل می‌شه، پس هیچ المانی نمی‌تونه قطعش کنه یا بپوشونش. جاگیری هم با CSS Anchor Positioning انجام می‌شه: تو حالت pointer یه انکر نامرئی مختصات موس رو دنبال می‌کنه و position-area پاپ‌اور رو کنارش می‌چینه.

چون همیشه کد سایتی که می‌خوای دمو بدی دست خودت نیست، پروژه یه بوکمارکلت و افزونهٔ مرورگر هم داره تا کامپوننت رو روی هر صفحه‌ای تزریق کنی. افزونهٔ کروم منتشر شده و نسخهٔ فایرفاکس منتظر بازبینیه. افزونه پکیج رو لوکال همراه خودش داره، پس با سایت‌های دارای CSP سختگیر هم کار می‌کنه، بین جابه‌جایی صفحه‌ها باقی می‌مونه و با ⇧ + ⌘ + K روشن و خاموش می‌شه. نویسنده می‌گه خود کامپوننت رو با کمک Gemini ساخته.

نکات کلیدی:

• پیش‌فرض فقط شورتکات‌ها و کلیدهای ناوبری نشون داده می‌شن؛ با keystrokes="all" همهٔ کلیدها
• جای نمایش با position عوض می‌شه: گوشهٔ viewport (پیش‌فرض viewport top right)، pointer یا normal
• برای بالا موندن روی صفحه از Popover API با popover="manual" استفاده می‌کنه
• جاگیری با CSS Anchor Positioning و position-try-fallbacks انجام می‌شه
• بوکمارکلت، افزونهٔ کروم (منتشرشده) و افزونهٔ فایرفاکس (در انتظار بازبینی) هم داره