HN परिचय: ब्राउज़र में 100% लागू किया गया HTMX Playground

 (lassebomh.github.io)
6 पॉइंट द्वारा GN⁺ 2024-01-09 | 1 टिप्पणियां | WhatsApp पर शेयर करें

HTMX Playground

  • HTMX Playground, HTMX का उपयोग करके एक सरल code sandbox environment में प्रयोग करने का टूल है.
  • इसे बिना किसी अलग setup के तुरंत इस्तेमाल किया जा सकता है, और htmx.org के मूल examples से लाए गए उदाहरण भी देखे जा सकते हैं.
  • ब्राउज़र के भीतर backend जैसे environment में code लिखा जा सकता है, और server.js में endpoint define करके अपने templates render किए जा सकते हैं.
  • यह HTMX से जाने वाले requests को intercept करने वाला एक mock server चलाता है, और Django इस्तेमाल करने वालों के लिए परिचित request handling तथा template engine प्रदान करता है.
  • यह project सिर्फ HTMX तक सीमित नहीं है, इसलिए दूसरी libraries भी स्वतंत्र रूप से आज़माई जा सकती हैं.

सहेजना और साझा करना

  • ऊपर दाईं ओर के "Copy as JSON" बटन को दबाकर JSON फ़ॉर्मेट में कॉपी किया जा सकता है.
  • कॉपी किए गए content को Gist पर upload करके, "Load Playground" में raw URL डालने पर उस page का URL update हो जाता है और उसे share किया जा सकता है.
  • Code GitHub पर भी उपलब्ध है.

ध्यान देने योग्य बातें

  • Page navigation फीचर नहीं है.
  • Mobile support सीमित है.
  • server.js state रख सकता है, लेकिन अगर on.get("/") view में state update की जाए, तो initial page load के समय अलग iframe के ज़रिए fetch किए जाने के कारण state update खो सकती है.

उपयोग की गई libraries

  • Svelte
  • Ace (code editor)
  • PollyJS (mock server)
  • Nunjucks (template engine)

GN⁺ की राय

  • HTMX Playground, web developers के लिए HTMX का उपयोग करके interactive web applications को तेज़ी से prototype करने का एक उपयोगी टूल है.
  • Django जैसे backend framework से परिचित developers के लिए आसानी से अपनाई जा सकने वाली environment देकर, यह frontend और backend development experience को एकीकृत करने में मदद करता है.
  • यह टूल code को आसानी से save और share करने की सुविधा देता है, इसलिए collaboration या education के उद्देश्यों के लिए भी बहुत उपयोगी हो सकता है.

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

1 टिप्पणियां

 
GN⁺ 2024-01-09
Hacker News टिप्पणियाँ

  • htmx के निर्माता की ओर से धन्यवाद संदेश

    • htmx creator: htmx बनाने वाले निर्माता ने धन्यवाद व्यक्त किया। उन्होंने कहा कि अपने प्रोजेक्ट में लोगों की रुचि और उसके उपयोग को देखकर वे बहुत प्रोत्साहित हुए हैं.

  • htmx के उपयोग को लेकर चिंताएँ और सवाल

    • डेवलपर पूल को लेकर चिंता: एक उपयोगकर्ता ने कहा कि उन्होंने htmx इस्तेमाल करने पर विचार किया था, लेकिन डेवलपर पूल छोटा होने के कारण भर्ती में कठिनाई महसूस हुई। उन्होंने साझा किया कि framework-specific और specialist frontend डेवलपर नियुक्त करना, specialist full-stack डेवलपर ढूंढने से आसान रहा है। वे नहीं चाहते कि डेवलपर जटिल कोड संभालने से कतराएँ या backend डेवलपर bottleneck बन जाएँ। उन्होंने पूछा कि क्या htmx इन समस्याओं को पहचानता है, और इन्हें हल करने के लिए क्या करने की योजना है.

  • htmx और mobile app support को लेकर विचार

    • mobile app support: एक उपयोगकर्ता ने कहा कि उन्हें htmx की अवधारणा पसंद है और उन्होंने इस पर एक किताब पढ़नी शुरू की, लेकिन mobile app support की ज़रूरत पड़ने पर frontend और backend को बड़े पैमाने पर फिर से लिखना पड़ेगा—यह बात उन्हें परेशान करती है। उन्होंने कहा कि वे hyperview.org के बारे में जानते हैं, लेकिन उनकी रुचि वाले use case के लिए react-native app उपयुक्त नहीं लगती.

  • editor चयन और error output पर राय

    • editor और error output: एक उपयोगकर्ता ने कहा कि mobile support सीमित है और Ace Editor की जगह Monaco Editor इस्तेमाल किया जाना चाहिए। लेकिन यह समझाया गया कि Monaco मोबाइल पर जानबूझकर काम नहीं करता, इसलिए Ace का उपयोग किया जा रहा है। इसे समर्थन देने के लिए GitHub issue link का भी उल्लेख किया गया.

  • htmx और Django साथ इस्तेमाल करने का अनुभव

    • htmx और Django का उपयोग: एक उपयोगकर्ता ने बताया कि वे maplibre, Django और htmx को साथ इस्तेमाल कर रहे हैं, और दूसरों के साथ साझा करने के लिए एक example पोस्ट करने की योजना बना रहे हैं.

  • htmx के उपयोग का अनुभव और feedback

    • htmx का उपयोग और feedback: एक उपयोगकर्ता ने कहा कि उन्होंने काम में htmx इस्तेमाल किया है और यह अच्छी तरह काम करता है। वे आगे भी इसका उपयोग करेंगे, हालांकि संभव है कि PHP-आधारित version भी बनाएँ। उन्होंने यह भी साझा किया कि JSON को URL load field में paste करते समय उनका काम कुछ बार खो गया, और network request browser को साफ़ न कर पाने की समस्या का भी अनुभव हुआ, जिसे feature request के रूप में बताया गया.

  • तकनीकी support पर सवाल

    • ActiveX support है या नहीं: एक उपयोगकर्ता ने पूछा कि क्या htmx ActiveX को support करता है.

  • development tool चयन पर व्यंग्यात्मक टिप्पणी

    • Svelte का उपयोग: एक उपयोगकर्ता ने व्यंग्य में पूछा कि क्या htmx, Svelte से बनाया गया है। उन्होंने यह भी कहा कि MPA (Multi-Page Application) purist लोग कहाँ हैं, और उनकी प्रतिक्रिया क्या होगी—यह जानने की उत्सुकता है.

  • offline app development को लेकर जिज्ञासा

    • offline app development: एक उपयोगकर्ता ने पूछा कि क्या कोई htmx और HTML के request-response पैटर्न का उपयोग करके offline app बनाता है, और service worker के भीतर virtual server परिभाषित करता है.

  • वेबसाइट विवरण में typo की ओर इशारा

    • typo की ओर इशारा: एक उपयोगकर्ता ने बताया कि वेबसाइट के main page के विवरण में typo है। उन्होंने कहा कि "intersepts" को "intercepts" किया जाना चाहिए.