htmz - अति-लघु HTML फ्रेमवर्क

 (leanrada.com)
21 पॉइंट द्वारा GN⁺ 2024-02-21 | 3 टिप्पणियां | WhatsApp पर शेयर करें
  • एक minimalist HTML microframework, जिससे plain HTML जैसी सरल शैली में modular और dynamic web user interfaces बनाए जा सकते हैं
  • यह केवल एक ही काम करता है: पेज पर किसी भी element से HTML resource लोड करना
    • इससे पेज के केवल किसी हिस्से को अपडेट करना संभव होता है, यानी page fragments को बदला जा सकता है
  • कुल आकार सिर्फ 166 bytes है, यह pure HTML का उपयोग करता है, dependency-free है, और इसे JS bundle, backend, special attributes, DSL, या custom elements की ज़रूरत नहीं होती
  • यह real DOM interaction का उपयोग करता है, और VDOM, click listeners, AJAX, fetch आदि का उपयोग नहीं करता
  • बस iframe के रूप में inline HTML snippet जोड़ना है, और काम हो जाता है
<iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(this.contentWindow.location.hash||null)?.replaceWith(...this.contentDocument.body.childNodes))"></iframe>

बुनियादी उपयोग

  • htmz का उपयोग करने के लिए, resource URL की ओर इशारा करने वाला href attribute (या form का action) और destination ID selector वाला hyperlink (या form) चाहिए।
  • यह URL fragment को destination ID selector के रूप में दोबारा उपयोग करने जैसा दिखता है, लेकिन इस context में URL fragment का किसी और उद्देश्य से उपयोग नहीं होता, इसलिए इसे पुनः उपयोग किया जाता है।

यह वास्तव में क्या करता है?

  • htmz एक ही सुविधा देता है: पेज के भीतर किसी भी element के अंदर HTML resource लोड करना।
  • यह विचार नया नहीं है; web page को ऐसे हिस्सों में बाँटना जिन्हें स्वतंत्र रूप से reload किया जा सके, 1990 के दशक के मध्य से मौजूद है।
  • htmz, HTML frames का generalized रूप है, जो पेज के भीतर किसी भी element से HTML resource लोड कर सकता है।

उन्नत उपयोग

  • वर्तमान HTML5 में केवल a और form elements ही htmz को target करके invoke कर सकते हैं।
  • base element का उपयोग करके सभी relative links के लिए htmz को default target के रूप में सेट किया जा सकता है।
  • अगर आप वास्तविक target value का उपयोग करना पसंद करते हैं, तो एक hack इस्तेमाल किया जा सकता है जिसमें destination ID selector को सीधे target attribute में लिखा जाता है।

scripting / interaction

  • यदि अधिक interaction चाहिए, तो htmz की companion scripting language, JavaScript, का उपयोग किया जा सकता है।
  • htmz, JS लिखने या UI libraries उपयोग करने से नहीं रोकता, और htmz के साथ regular HTTP form के रूप में form values अभी भी submit की जा सकती हैं।

extensibility

  • यदि advanced selectors, error handling, multiple targets आदि की ज़रूरत हो, तो developers इसे आवश्यकता अनुसार extend कर सकते हैं।

FAQ

  • htmz एक iframe है जिसका नाम htmz होता है, और यह iframe के माध्यम से URL लोड करके htmz को invoke करता है।
  • htmz एक proxy target की तरह काम करता है, जो response को निर्दिष्ट target तक पहुँचाता है।
  • htmz लगातार DOM parse नहीं करता, special attributes या syntax नहीं खोजता, और DOM पर listeners attach नहीं करता।
  • htmz एक HTML microframework है, जो न्यूनतम JS का उपयोग करता है।
  • htmz एक snippet है, और इसका अर्थ 'Html with Targeted Manipulation Zones' है।
  • यह project htmx के जवाब के रूप में शुरू हुआ था, और यह एक प्रयोग था कि क्या htmx का उपयोग किए बिना आज के web में load-link-target functionality लागू की जा सकती है।
  • अपने छोटे आकार के बावजूद htmz काफी शक्तिशाली महसूस होता है, और इसकी मुख्य सीमा यह है कि प्रति response केवल एक ही destination हो सकता है।

GN⁺ की राय

  • नवोन्मेषी दृष्टिकोण: htmz web development में framework की जटिलता को कम करता है और pure HTML का उपयोग करके web interfaces बनाने का एक नवोन्मेषी तरीका देता है। इसका मतलब यह है कि web development का यह तरीका शुरुआती software engineers के लिए भी आसानी से सुलभ हो सकता है।
  • performance और simplicity का संतुलन: 166 bytes का बेहद हल्का आकार और dependency-free संरचना web pages की performance को काफी बेहतर बना सकती है। साथ ही यह जटिल JavaScript frameworks सीखे बिना प्रभावी web pages बनाने की सरलता भी देती है।
  • web development का भविष्य: htmz web development के भविष्य पर एक रोचक नज़रिया देता है। यह दिखाता है कि web standards और technologies का विकास किस तरह developers को अधिक सरल और अधिक efficient tools दे सकता है।

संबंधित पढ़ाई

3 टिप्पणियां

 
joyfui 2024-03-06

वाह, यह तो काफ़ी नया और दिलचस्प है lol. लिंक में लिखा है कि यह खुद को library या framework भी नहीं, बस एक snippet मानता है... हाह
 
savvykang 2024-02-21

उन्नत उपयोग: वर्तमान HTML5 में केवल और elements ही -> वर्तमान HTML5 में केवल और elements ही ऐसा लगता है कि HTML escaping लागू नहीं है
 
GN⁺ 2024-02-21
Hacker News राय

  • पहले कमेंट का सार:

    • server-rendered pages और style-scoped widgets के लिए named iframes और targeted forms इस्तेमाल करने के आइडिया पर सकारात्मक प्रतिक्रिया।
    • htmz ने इस आइडिया को अच्छी तरह लागू किया हुआ लगता है।
    • अच्छे आइडिया को छोड़ना नहीं चाहिए, बल्कि परिपक्वता और उत्कृष्टता पर ध्यान देना चाहिए, और आइडिया को अच्छी तरह संप्रेषित करना चाहिए — इस पर ज़ोर।
    • इसे एक शानदार hack माना गया है, जो दिखाता है कि browser मूल रूप से SPA दे सकता है।
    • platform को अच्छी तरह समझने वाले किसी व्यक्ति का बेहतरीन demo।
    • vanilla web सरल और शक्तिशाली होना चाहिए — ऐसा मत।
    • web की उपलब्ध बुनियादी सामग्री का भरपूर उपयोग करने पर सकारात्मक मूल्यांकन।
    • रचनाकार की communication और marketing skills की प्रशंसा।

  • दूसरे कमेंट का सार:

    • यह एक hack है जो दिखाता है कि browser मूल रूप से SPA दे सकता है।
    • iframe से बचने के लिए बस कुछ attributes की ज़रूरत है।
    • यह वास्तविक tool की तुलना में point साबित करने में अधिक उपयोगी हो सकता है।
    • htmx जो देता है, उसकी तुलना में इसे बहुत जटिल बताया गया।

  • तीसरे कमेंट का सार:

    • 2001 के आसपास HTML-आधारित email client विकसित करने का अनुभव साझा किया गया।
    • hidden iframe का उपयोग करके server से data लोड किया गया और DOM में बदलाव किए गए।
    • उस समय browser support पर्याप्त नहीं था, लेकिन बुनियादी mechanism वही था।
    • बहुत सी libraries के बिना इसे एक संक्षिप्त package में लागू करने पर सकारात्मक प्रतिक्रिया।
    • आज व्यापक रूप से इस्तेमाल होने वाले React जैसे frontend frameworks की तुलना में, यह अधिकांश use cases के लिए उपयुक्त हो सकता है।

  • चौथे कमेंट का सार:

    • response के रूप में DOM को replace करना platform का हिस्सा होना चाहिए — ऐसा मजबूत तर्क।
    • declaratively external content को page में लोड करने वाले element के लिए first step का प्रस्ताव।
    • यह भी कहा गया कि HTML को ऐसे elements का समर्थन करना चाहिए जो link के target बन सकें।

  • पाँचवें कमेंट का सार:

    • platform को सच में समझने वाले व्यक्ति के शानदार demo की प्रशंसा।
    • वास्तव में इसका इस्तेमाल होने की संभावना कम है, लेकिन इसे बेहतरीन बताया गया।

  • छठे कमेंट का सार:

    • inline event listeners में this. हटाकर code size और कम करने का सुझाव।
    • snippet में 10 bytes बचाने की टिप दी गई।

  • सातवें कमेंट का सार:

    • target का उपयोग करने से, JS disabled होने पर यह htmx की तरह gracefully degrade नहीं कर सकता — यह बात कही गई।
    • JS disabled होने की स्थिति पर एक आदर्शवादी दृष्टिकोण व्यक्त किया गया।

  • आठवें कमेंट का सार:

    • <slot> element को इस तरह reuse करना बुरा आइडिया बताया गया।
    • browser में <slot> का बहुत specific behavior होता है, और library चाहे जो करे, यह host element के children से replace हो जाता है।
    • यह भी कहा गया कि ऐसी स्थिति के लिए <output> element पहले से मौजूद है।

  • नौवें कमेंट का सार:

    • demo section में सुधार की ज़रूरत बताई गई।
    • "tabs" पर क्लिक करके example code बदलने पर history event तो जुड़ता है, लेकिन URL update नहीं होता।
    • "सिर्फ HTML" होने का दावा करते हुए web/UX के बुनियादी नियम तोड़ने की आलोचना की गई।

  • दसवें कमेंट का सार:

    • यह pjax की याद दिलाता है; pjax iframe की जगह XHR का उपयोग करता है और default रूप से pushState इस्तेमाल करता है ताकि back button काम करे।