كيف يعمل HTML Code Runner

نظرة عميقة على البنية التقنية ونموذج الأمان وقرارات التصميم وراء الأداة.

نظرة عامة على الهندسة المعمارية

HTML Code Runner هو تطبيق محض من جانب العميل. لا يوجد كود معالجة لخادم الواجهة الخلفية، ولا توجد قاعدة بيانات لتخزين مقتطفات، ولا توجد مكالمات API للخدمات الخارجية. تعمل الأداة بأكملها داخل متصفح المستخدم باستخدام تقنيات الويب القياسية: HTML وCSS وJavaScript.

خط أنابيب تنفيذ التعليمات البرمجية

عند النقر فوق الزر "تشغيل"، يحدث التسلسل التالي:

  1. التقاط التعليمات البرمجية — تتم قراءة محتوى HTML من محرر منطقة النص كسلسلة
  2. إنشاء كائن ثنائي كبير الحجم — يتم تغليف سلسلة التعليمات البرمجية في كائن Blob بنوع MIME text/html
  3. إنشاء عنوان URL — يتم إنشاء عنوان URL مؤقت لـ Blob باستخدام URL.createObjectURL()
  4. تحميل Iframe — يتم تعيين عنوان URL Blob للسمة src الخاصة بإطار iframe المحمي
  5. العرض — يعرض المتصفح مستند HTML داخل إطار iframe، وينفذ أي CSS وJavaScript مضمنين
  6. التقاط وحدة التحكم — يتم تجاوز أساليب console.log وconsole.error وconsole.warn الخاصة بـ iframe لتوجيه الإخراج إلى لوحة إخراج وحدة التحكم
  7. التنظيف — يتم إبطال عنوان URL للكائن Blob بعد التحميل لتحرير الذاكرة

نموذج الأمان

الأمان هو أحد الاعتبارات الأساسية في التصميم. نستخدم طبقات متعددة من العزل:

إطار Iframe في وضع الحماية

يستخدم إطار iframe للمعاينة سمة HTML5 sandbox مع الأذونات التالية:

  • allow-scripts — تمكين تنفيذ JavaScript داخل إطار iframe (ضروري لمعاينات JS)
  • allow-modals — يسمح alert()، وconfirm()، وprompt() بمربعات الحوار
  • allow-same-origin — مطلوب لتحميل عنوان URL للكائن Blob (يجب أن يشارك المحتوى الأصل مع عنوان URL للكائن Blob)

من الواضح أن وضع الحماية لا يتضمن ما يلي:

  • السماح بالتنقل العلوي — لا يمكن لإطار iframe التنقل في الصفحة الرئيسية
  • allow-forms — تم حظر عمليات إرسال النماذج (يمنع تسرب البيانات غير المقصود)
  • السماح بالنوافذ المنبثقة — يتم حظر النوافذ المنبثقة

عزل URL Blob

بدلاً من إدخال التعليمات البرمجية عبر document.write() أو srcdoc، فإننا نستخدم عناوين URL للكائنات الثنائية الكبيرة (Blob URLs). يوفر هذا عزلًا أفضل لأن المتصفح يتعامل مع عنوان URL Blob كمستند منفصل بسياق التنفيذ الخاص به.

لا توجد معالجة من جانب الخادم

لا يتم نقل الرمز الخاص بك مطلقًا عبر الشبكة. ويظل في ذاكرة المتصفح الخاص بك من لحظة كتابته حتى إغلاق علامة التبويب. لا يوجد خادم يمكن اختراقه، ولا توجد قاعدة بيانات يمكن اختراقها، ولا توجد نقطة نهاية لواجهة برمجة التطبيقات (API) لاستغلالها.

تصميم المحرر

محرر التعليمات البرمجية هو عنصر

  • أرقام الأسطر — لوحة متزامنة للقراءة فقط تعرض أرقام الأسطر وتمريرها جنبًا إلى جنب مع المحرر
  • دعم علامة التبويب — يقوم مفتاح Tab بإدراج مسافتين بدلاً من نقل التركيز (سلوك محرر التعليمات البرمجية القياسي)
  • خط Monospace — يستخدم JetBrains Mono لسهولة قراءة التعليمات البرمجية بشكل مثالي
  • تعطيل التدقيق الإملائي — يمنع المتصفح من وضع خط تحت "الأخطاء الإملائية" في التعليمات البرمجية

اعتبارات الأداء

  • يتم تحميل الأداة بأكملها في ملف HTML واحد يحتوي على ملفين JS صغيرين وملف CSS واحد
  • لا يتم استخدام أي أطر أو مكتبات JavaScript - كل التعليمات البرمجية هي Vanilla JS
  • يتم تحميل الخطوط بشكل غير متزامن باستخدام font-display: Swap
  • الأداة تفاعلية خلال ميلي ثانية من تحميل الصفحة
  • يتم إبطال عناوين URL الثنائية الكبيرة بعد الاستخدام لمنع تسرب الذاكرة

إمكانية الوصول

تم تصميم الأداة مع وضع إمكانية الوصول في الاعتبار:

  • جميع العناصر التفاعلية تحمل تسميات ARIA
  • يستخدم أكورديون الأسئلة الشائعة حالات aria-expanded المناسبة
  • التركيز واضح على جميع العناصر التفاعلية
  • يتوافق تباين الألوان مع إرشادات WCAG AA
  • الأداة قابلة للتنقل بالكامل باستخدام لوحة المفاتيح
  • تستخدم إشعارات الخبز المحمص role="status" وaria-live="polite"

تصميم سريع الاستجابة

تتكيف الواجهة مع جميع أحجام الشاشات:

  • سطح المكتب (1024 بكسل+) — محرر جنبًا إلى جنب ولوحات المعاينة
  • الجهاز اللوحي (768 بكسل - 1024 بكسل) — لوحات مكدسة بتصميم كامل العرض
  • الجوال (<768 بكسل) — اللوحات المجمعة، والتنقل المصغر، وأهداف اللمس المحسنة

تنفيذ تحسين محركات البحث

تتضمن كل صفحة في هذا الموقع ما يلي:

  • علامات عنوان فريدة وأوصاف تعريفية
  • عناصر HTML5 الدلالية (الرأس، الرئيسي، التذييل، التنقل، القسم، المقالة)
  • عناوين URL الأساسية لمنع مشكلات المحتوى المكررة
  • البيانات المنظمة (JSON-LD) لمخططات WebPage وSoftwareApplication وFAQPage وBreadcrumbList
  • علامات Hreflang لدعم متعدد اللغات
  • H1 واحد لكل صفحة مع التسلسل الهرمي للعناوين المناسبة

جرّب HTML Code Runner →