HTML कोड रनर कैसे काम करता है

वास्तुकला सिंहावलोकन

HTML कोड रनर पूरी तरह से क्लाइंट-साइड एप्लिकेशन है। कोई बैकएंड सर्वर प्रोसेसिंग कोड नहीं है, कोई डेटाबेस स्निपेट संग्रहीत नहीं करता है, और बाहरी सेवाओं के लिए कोई एपीआई कॉल नहीं है। संपूर्ण टूल मानक वेब प्रौद्योगिकियों: HTML, CSS और JavaScript का उपयोग करके उपयोगकर्ता के ब्राउज़र में चलता है।

कोड निष्पादन पाइपलाइन

जब आप रन बटन पर क्लिक करते हैं, तो निम्नलिखित क्रम होता है:

1. कोड कैप्चर - टेक्स्टएरिया संपादक से HTML सामग्री को एक स्ट्रिंग के रूप में पढ़ा जाता है
2. ब्लॉब निर्माण - कोड स्ट्रिंग को ब्लॉब ऑब्जेक्ट में MIME प्रकार text/html के साथ लपेटा गया है।
3. यूआरएल जनरेशन - एक अस्थायी ब्लॉब यूआरएल URL.createObjectURL() का उपयोग करके बनाया जाता है।
4. आईफ्रेम लोड हो रहा है - ब्लॉब यूआरएल को सैंडबॉक्स वाले आईफ्रेम की src विशेषता को सौंपा गया है।
5. रेंडरिंग - ब्राउज़र किसी भी एम्बेडेड सीएसएस और जावास्क्रिप्ट को निष्पादित करते हुए, आईफ्रेम के भीतर HTML दस्तावेज़ को प्रस्तुत करता है
6. कंसोल कैप्चर - आईफ्रेम के <कोड क्लास = "नो-ट्रांसलेट"> कंसोल.लॉग, <कोड क्लास = "नो-ट्रांसलेट"> कंसोल.एरर, और <कोड क्लास = "नो-ट्रांसलेट"> कंसोल.वार्न तरीकों को कंसोल आउटपुट पैनल में पाइप आउटपुट के लिए ओवरराइड किया गया है।
7. क्लीनअप - ब्लॉब यूआरएल को फ्री मेमोरी में लोड करने के बाद निरस्त कर दिया जाता है

सुरक्षा मॉडल

सुरक्षा एक मुख्य डिज़ाइन विचार है। हम अलगाव की कई परतों का उपयोग करते हैं:

सैंडबॉक्स्ड इफ्रेम

पूर्वावलोकन iframe निम्नलिखित अनुमतियों के साथ HTML5 sandbox विशेषता का उपयोग करता है:

• <कोड क्लास='नो-ट्रांसलेट'>अनुमति-स्क्रिप्ट - आईफ्रेम के भीतर जावास्क्रिप्ट निष्पादन को सक्षम करता है (जेएस पूर्वावलोकन के लिए आवश्यक)
• allow-modals — alert(), confirm(), और prompt() संवादों की अनुमति देता है।
• allow-same-origin — ब्लॉब यूआरएल लोडिंग के लिए आवश्यक (सामग्री को ब्लॉब यूआरएल के साथ मूल साझा करना होगा)

सैंडबॉक्स में स्पष्ट रूप से नहीं शामिल है:

• <कोड क्लास='नो-ट्रांसलेट'>अनुमति-शीर्ष-नेविगेशन - आईफ्रेम मूल पृष्ठ पर नेविगेट नहीं कर सकता
• allow-form — फॉर्म सबमिशन अवरुद्ध हैं (आकस्मिक डेटा घुसपैठ को रोकता है)
• allow-popups — पॉप-अप विंडो अवरुद्ध हैं

ब्लॉब यूआरएल अलगाव

document.write() या srcdoc के माध्यम से कोड इंजेक्ट करने के बजाय, हम ब्लॉब यूआरएल का उपयोग करते हैं। यह बेहतर अलगाव प्रदान करता है क्योंकि ब्राउज़र ब्लॉब यूआरएल को अपने स्वयं के निष्पादन संदर्भ के साथ एक अलग दस्तावेज़ के रूप में मानता है।

कोई सर्वर-साइड प्रोसेसिंग नहीं

आपका कोड कभी भी नेटवर्क पर प्रसारित नहीं होता है. यह आपके टाइप करने के क्षण से लेकर टैब बंद करने तक आपके ब्राउज़र की मेमोरी में रहता है। समझौता करने के लिए कोई सर्वर नहीं है, उल्लंघन करने के लिए कोई डेटाबेस नहीं है, और शोषण करने के लिए कोई एपीआई एंडपॉइंट नहीं है।

संपादक डिज़ाइन

कोड संपादक निम्नलिखित विशेषताओं वाला एक स्टाइलयुक्त </code> तत्व है:

• लाइन नंबर - एक सिंक्रनाइज़, रीड-ओनली पैनल जो संपादक के साथ मिलकर लाइन नंबर और स्क्रॉल प्रदर्शित करता है
• टैब समर्थन - टैब कुंजी फोकस को स्थानांतरित करने के बजाय दो स्थान सम्मिलित करती है (मानक कोड संपादक व्यवहार)
• मोनोस्पेस फ़ॉन्ट - इष्टतम कोड पठनीयता के लिए JetBrains मोनो का उपयोग करता है
• वर्तनी जांच अक्षम — ब्राउज़र को कोड "गलत वर्तनी" को रेखांकित करने से रोकता है

प्रदर्शन संबंधी विचार

• संपूर्ण टूल दो छोटी JS फ़ाइलों और एक CSS फ़ाइल के साथ एक HTML फ़ाइल में लोड होता है
• किसी जावास्क्रिप्ट फ्रेमवर्क या लाइब्रेरी का उपयोग नहीं किया जाता है - सभी कोड वेनिला जेएस हैं
• फ़ॉन्ट्स को font-display: swim के साथ एसिंक्रोनस रूप से लोड किया जाता है
• टूल पेज लोड होने के मिलीसेकंड के भीतर इंटरैक्टिव है
• मेमोरी लीक को रोकने के लिए उपयोग के बाद ब्लॉब यूआरएल निरस्त कर दिए जाते हैं

सरल उपयोग

यह टूल पहुंच-योग्यता को ध्यान में रखकर डिज़ाइन किया गया है:

• सभी इंटरैक्टिव तत्वों में ARIA लेबल होते हैं
• FAQ अकॉर्डियन उचित aria-expanded स्थितियों का उपयोग करता है
• सभी इंटरैक्टिव तत्वों पर फोकस स्पष्ट रूप से दिखाई देता है
• रंग कंट्रास्ट WCAG AA दिशानिर्देशों के अनुरूप है
• यह टूल पूरी तरह से कीबोर्ड नेविगेशन योग्य है
• टोस्ट सूचनाएं role='status' और aria-live='polite' का उपयोग करती हैं

उत्तरदायी आकार

इंटरफ़ेस सभी स्क्रीन आकारों के अनुकूल है:

• डेस्कटॉप (1024px+) — साइड-बाय-साइड संपादक और पूर्वावलोकन पैनल
• टैबलेट (768px–1024px) - पूर्ण-चौड़ाई वाले लेआउट के साथ स्टैक्ड पैनल
• मोबाइल (<768px) - स्टैक्ड पैनल, संक्षिप्त नेविगेशन, अनुकूलित स्पर्श लक्ष्य

एसईओ कार्यान्वयन

इस साइट के प्रत्येक पृष्ठ में शामिल हैं:

• अद्वितीय शीर्षक टैग और मेटा विवरण
• सिमेंटिक HTML5 तत्व (शीर्ष लेख, मुख्य, पाद लेख, नेविगेशन, अनुभाग, लेख)
• डुप्लिकेट सामग्री समस्याओं को रोकने के लिए कैनोनिकल यूआरएल
• वेबपेज, सॉफ्टवेयरएप्लिकेशन, FAQPage और ब्रेडक्रंबलिस्ट स्कीमा के लिए संरचित डेटा (JSON-LD)
• बहुभाषी समर्थन के लिए Hreflang टैग
• उचित शीर्षक पदानुक्रम के साथ प्रति पृष्ठ एक एकल H1

HTML कोड रनर आज़माएं →