Oat - अल्ट्रा-लाइटवेट, zero-dependency, semantic HTML·CSS·JS UI लाइब्रेरी

 (oat.ink)
3 पॉइंट द्वारा GN⁺ 2026-02-16 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • HTML और CSS आधारित अल्ट्रा-लाइटवेट UI component लाइब्रेरी, जिसकी संरचना में build process या framework dependency बिल्कुल नहीं है
  • केवल 6KB CSS और 2.2KB JS (compressed और gzip के आधार पर) से बनी है, इसलिए web application के लिए जरूरी प्रमुख UI elements तुरंत इस्तेमाल किए जा सकते हैं
  • <button>, <input>, <dialog> आदि semantic HTML elements को सीधे style करती है, और classes का उपयोग न्यूनतम रखकर code pollution कम करती है
  • Accessibility को ध्यान में रखते हुए ARIA roles और keyboard navigation का built-in support देती है
  • जटिल JS ecosystem की dependencies और over-engineering से हटकर, सरल और standards-based, लंबे समय तक उपयोग योग्य UI composition को लक्ष्य बनाती है

Oat का अवलोकन

  • Oat एक HTML + CSS आधारित अल्ट्रा-लाइटवेट semantic UI component लाइब्रेरी है, जो पूरी तरह external dependencies से मुक्त है
    • किसी framework, build tool, या development environment setup की जरूरत नहीं
    • सिर्फ छोटे CSS और JS files शामिल करते ही तुरंत उपयोग संभव
  • लगभग 8KB (6KB CSS + 2.2KB JS) के आकार में, web application का basic UI तेजी से बनाया जा सकता है
  • प्रमुख components में Button, Card, Dialog, Table, Tabs, Tooltip, Toast, Sidebar आदि शामिल हैं

Semantic HTML और accessibility

  • semantic tags और attributes के आधार पर styles अपने-आप लागू हो जाते हैं, जिससे class दिए बिना भी consistent design बना रहता है
    • उदाहरण: <button>, <input>, <dialog> जैसे basic HTML elements पर सीधे style लागू
    • role="button" जैसी semantic attributes भी अपने-आप पहचानी जाती हैं
  • ARIA roles और keyboard navigation का support सभी components में उपलब्ध है
    • accessibility standards को मूल रूप से लागू करके user experience बेहतर बनाया जाता है

Zero dependency और सरलता

  • JS या CSS framework, लाइब्रेरी dependency नहीं
    • Node.js ecosystem की complexity और अनावश्यक dependency समस्याओं को पूरी तरह बाहर रखती है
    • build या package management process के बिना सीधे उपयोग संभव
  • कुछ dynamic components को WebComponents से implement किया गया है, इसलिए JS का उपयोग न्यूनतम है

Customization और theme

  • CSS variables के जरिए theme colors और styles को आसानी से समायोजित किया जा सकता है
    • data-theme="dark" attribute को body में जोड़ने पर dark theme अपने-आप लागू हो जाती है
  • समग्र design पर shadcn aesthetics का प्रभाव है

बनाने की पृष्ठभूमि

  • इसकी शुरुआत मौजूदा JavaScript UI frameworks की अत्यधिक जटिलता और dependency समस्याओं के प्रति असंतोष से हुई
    • Node.js ecosystem के “dependency hell” और “lock-in” जैसे मुद्दों से बचने का उद्देश्य
  • इसे एक सरल, standards-based, लंबे समय तक maintain की जा सकने वाली UI लाइब्रेरी को स्वयं उपयोग करने के लिए बनाया गया
  • Oat के जरिए developers बिना अनावश्यक build process के तुरंत उपयोग योग्य UI composition बना सकते हैं

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

1 टिप्पणियां

 
GN⁺ 2026-02-16
Hacker News की राय

  • मुझे लगता है कि सिर्फ semantic HTML elements के सहारे web app में सही effect लाने की कोशिश काफ़ी शानदार है।
    इसका “classless CSS” paradigm अपनाना भी पसंद आया। लेकिन component catalog देखने पर semantic elements, basic elements, data tags और aria attributes, साथ ही CSS classes सब मिले-जुले दिखते हैं, इसलिए consistency थोड़ी कम लगती है।
    फिर भी aria attributes के आधार पर CSS का react करके styling होना प्रभावशाली है। React जैसी भारी component libraries की जगह aria-first approach में सोचने की अच्छी practice बन सकती है।
    खासकर इस component library में native sidebar शामिल होना अच्छा लगा। ज़्यादातर libraries सिर्फ reusable छोटे components पर ध्यान देती हैं, लेकिन यह aside > nav > ul structure के साथ main के बगल में स्वाभाविक रूप से रखा गया है, इसलिए साफ़-सुथरा लगता है।

  • इस साइट को देखकर मैं हैरान रह गया। लिंक टैप करते ही पेज तुरंत load हो गया और लगभग चाबुक जैसी तेज़ी महसूस हुई।
    इंटरनेट पर ऐसी speed को मैं भूल ही गया था, अब web development आज़माने का मन हो रहा है।

    • अगर साइट बनानी है तो Astro से बनाने की सलाह दूँगा। इसकी loading speed सच में कमाल की है।
    • वैसे Hacker News भी इसी तरह की speed feel का एक अच्छा उदाहरण है।

  • यह project वैसी simplicity को सच में लागू करता हुआ लगता है जिसकी मुझे DaisyUI से उम्मीद थी।
    इसके साथ Datastar को जोड़ें तो web standards पर आधारित एक ताकतवर combination बन सकता है। यह “ecosystem” से ज़्यादा असली web technologies पर टिके रहने वाला approach है।

  • fosiao/rclone-webui-oat
    शायद मौजूदा भारी और maintenance न होने वाले rclone-webui-react की जगह ले रहा है।

  • front page पर link किया गया blog post framework से भी ज़्यादा दिलचस्प चर्चा शुरू कर सकता है।
    मैं काम में Angular और Next.js दोनों संभालता हूँ, और धीरे-धीरे इस लेख के नज़रिए से सहमत होने लगा हूँ।
    संबंधित लेख: JavaScript ecosystem is a hot mess

    • अच्छा link है। 2021 का लेख है, लेकिन आज भी इसमें बहुत सी सार्थक insights हैं।
      उस समय की चर्चा: HN thread
    • यह website सच में बहुत पसंद आई। click से पूरी तरह load होने तक 0 सेकंड latency है।
    • जानकारी के लिए, 2021 में भी यही विषय यहाँ चर्चा में आया था।

  • <aside> हमेशा sidebar के लिए सही semantic element नहीं होता।
    इसका मूल उद्देश्य ऐसे content के लिए है जो मुख्य लेख से परोक्ष रूप से जुड़ा हो। कभी sidebar उस definition में फिट बैठता है, लेकिन हमेशा नहीं।

  • इस तरह की semantic drop-in CSS libraries वाकई बहुत हैं। नया project देखना अच्छा लगता है।
    quality अलग-अलग है, लेकिन इस साइट पर semantic HTML के लिए 50 से ज़्यादा drop-in stylesheets को इकट्ठा किया गया है।
    link: Drop-in Minimal CSS संग्रह

    • अरे, तुम “drop in” कहना चाहते थे। एक hyphen इतना महत्वपूर्ण हो सकता है, यह नहीं पता था :)
    • इसे और ज़्यादा ध्यान मिलना चाहिए। सच कहूँ तो यह सामग्री मूल पोस्ट से भी ज़्यादा दिलचस्प है।
    • बहुत पसंद आया। दाएँ तीर से stylesheets को चक्र में browse किया जा सकता है।
    • सोच रहा हूँ कि उस सूची में से कोई recommend करने लायक stylesheet है क्या।

  • यह project मुझे 10 साल पहले के Bootstrap के शुरुआती versions की याद दिलाता है।
    आज का Bootstrap kाफ़ी bloated हो गया है, लेकिन इसमें उस दौर की सादगी महसूस होती है।
    संदर्भ: Bootstrap आधिकारिक साइट

  • पुराने browsers में भी test करने के लिए धन्यवाद। यह सच में बेहद minimal library है।
    screenshot: छवि1, छवि2

    • जिज्ञासा है, क्या आप आमतौर पर पुराने browsers को ही primary browser की तरह इस्तेमाल करते हैं, और अगर हाँ तो क्यों?

  • मैंने भी अपने app में ऐसा कुछ करने की कोशिश की थी, लेकिन पता चला कि कुछ semantic/functional tags अभी भी browsers में ठीक से supported नहीं हैं।
    उदाहरण के लिए Safari में dialog tag का showModal इस्तेमाल करें तो पूरा page layout फिर से calculate होता है, और यह Chromium से 59 गुना धीमा है।
    फिर भी यह overall approach मुझे अब भी पसंद है।