37 पॉइंट द्वारा GN⁺ 2024-06-25 | 2 टिप्पणियां | WhatsApp पर शेयर करें
  • ब्लॉग के user experience को बेहतर बनाने वाले माइक्रो फीचर्स का परिचय

साइडनोट

  • मुख्य लेखन को बाधित किए बिना अतिरिक्त जानकारी देने वाला फीचर
  • इससे पाठक अतिरिक्त विवरण या स्रोतों को आसानी से देख सकते हैं
  • Gwern का साइडनोट उपयोग विशेष रूप से प्रभावशाली है। उनके लेख साइडनोट का बहुत अधिक उपयोग करते हैं और मुख्य सामग्री के प्रवाह को बाधित किए बिना अतिरिक्त जानकारी देते हैं।
  • साइडनोट का उपयोग करने पर, फ़ुटनोट को देखने के लिए पेज के नीचे तक स्क्रोल किए बिना भी उसे आसानी से संदर्भित किया जा सकता है।
  • Tufte CSS से प्रेरित कई तरह के approaches देखे जा सकते हैं।

विषय सूची

  • विषय सूची से लेख के मुख्य विषय एक नज़र में देखे जा सकते हैं और इच्छित हिस्से पर आसानी से जाया जा सकता है।
  • static site generators (जैसे Hugo) विषय सूची अपने-आप बना सकते हैं।
  • Lars Hupel’s साइट series के भीतर विषय सूची देती है, जिससे navigation आसान हो जाता है।
बोनस: पेज प्रगति संकेतक
  • पेज प्रगति bar पाठक को दृश्य रूप से दिखाती है कि वह पेज में कहाँ है।
  • Quanta Magazine में ऐसा फीचर देखा जा सकता है।
  • CSS Tricks के tutorial se ise implement karne ka tarika seekha ja sakta hai.

आसानी से लिंक किए जा सकने वाले heading

  • HTML elements के ID का उपयोग करके पेज के किसी खास section का लिंक बनाया जा सकता है।
  • चूँकि यह उपयोगकर्ता को सीधे दिखाई नहीं देता, इसलिए हर element को linkable बनाकर उसे आसानी से refer किया जा सकता है।
  • Hugo documentation में ऐसा फीचर देखा जा सकता है।

series posts का grouping

  • जब कई विषयों पर विस्तार से लिखना हो, तो उन्हें series में बाँटकर प्रकाशित करना पाठकों तक सामग्री पहुँचाने का आसान तरीका हो सकता है।
  • अपने-आप "अगला", "पिछला" buttons जोड़े जा सकते हैं या navigation hub बनाया जा सकता है।
  • Chapel भाषा ब्लॉग में ऐसा फीचर देखा जा सकता है।

संवादात्मक लेख

  • संवादात्मक शैली के लेख, पाठक के दृष्टिकोण से सवाल पूछकर और कम अनुभवी नज़रिए की चिंताओं को व्यक्त करके, लेख को अधिक रोचक और समझने में आसान बनाते हैं।
  • Xe Iaso’s साइट और Faster than Lime में इस तरह के लेख अक्सर उपयोग किए जाते हैं।

code blocks में source प्रदर्शन

  • कोड लिखते समय code block में file name और line number दिखाने से पाठक के लिए समझना आसान हो जाता है।
  • उदाहरण: Crafting Interpreters
बोनस: clickable links वाले code blocks
  • Agda programming language HTML code blocks बनाती है और हर symbol को उसकी definition वाली जगह से लिंक करती है।
  • Programming Languages Foundations in Agda में ऐसा फीचर देखा जा सकता है।

external links का प्रदर्शन

  • बाहरी domain पर जाने वाले links को छोटे icon से दिखाया जाता है।
  • James’ Coffee Blog ☕ में ऐसा फीचर देखा जा सकता है।
बोनस: अलग-अलग destinations के लिए अलग markers
  • Gwern’s वेबसाइट लिंक की destination के अनुसार icons बदलती है।
  • उदाहरण: Wikipedia links पर "W" और Haskell.org links पर lambda symbol दिखता है।
बोनस: link preview
  • link पर mouse hover करने पर पेज preview दिखाया जाता है, जिससे क्लिक करने से पहले सामग्री को देखा जा सकता है।
  • Gwern’s वेबसाइट में ऐसा फीचर देखा जा सकता है।

RSS feed

  • RSS एक feed standard है जो साइट को updates प्रकाशित करने की सुविधा देता है।
  • इससे पाठक साइट पर सीधे जाए बिना भी updates प्राप्त कर सकते हैं।

दूसरी साइटों के लिंक

  • अन्य ब्लॉगों या साइटों की पोस्ट के links शामिल करके संबंधित सामग्री को बढ़ावा दिया जाता है।
  • Drew DeVault’s ब्लॉग में ऐसा फीचर देखा जा सकता है।

निष्कर्ष

  • ऐसे माइक्रो फीचर्स किसी साइट को अधिक उपयोगी और आकर्षक बना सकते हैं
  • अपनी साइट में ऐसे फीचर्स को शामिल करना एक अच्छा विचार है

2 टिप्पणियां

 
tsboard 2024-06-26

मैं भी अभी अपना ब्लॉग बना रहा था, ऐसे में इतनी काम की ख़बर के लिए धन्यवाद haha

 
GN⁺ 2024-06-25
Hacker News राय
  • कुछ सुझाव अच्छे हैं, लेकिन progress bar बहुत ध्यान भटकाने वाला और अनावश्यक है। पहले से scroll bar मौजूद है, इसलिए अतिरिक्त scroll bar की ज़रूरत नहीं है।
  • link decoration की ज़रूरत नहीं है। browser पहले से ही link का स्थान अच्छी तरह दिखाता है। preview popup भी अनावश्यक बाधा है।
  • ब्लॉग पर सभी पोस्टों का single-page index लागू करना अच्छा है। इससे शीर्षकों को एक नज़र में देखा जा सकता है और खोज भी आसान होती है।
  • अच्छा लगा कि blogging का विषय Hacker News पर आया। जिस blogging service पर मैं काम कर रहा हूँ, वह minimalism पर केंद्रित है। मैं यह समस्या हल करना चाहता हूँ कि ASCII art Android पर सही तरह से नहीं दिखता।
  • कई "micro features" पसंद आए। मैं उन features को प्राथमिकता देता हूँ जिनके लिए JavaScript की आवश्यकता नहीं होती। मैं अपने ब्लॉग में कई तरह के micro features लागू कर रहा हूँ।
  • मैं पोस्ट में पूरी तारीख शामिल करना पसंद करता हूँ। technical content के लिए यह जानना महत्वपूर्ण है कि वह कब लिखा गया था।
  • मुझे dialogue format में explanation पसंद नहीं है। अलग paragraph में समझाना बेहतर है।
  • मैं link preview feature से सहमत नहीं हूँ। privacy concerns की वजह से मैं link पर क्लिक करने से पहले URL देखना पसंद करता हूँ।
  • RSS कोई 'micro' feature नहीं, बल्कि core feature होना चाहिए।
  • Gwern की website बहुत ज़्यादा features आज़माती है, इसलिए browser धीमा हो जाता है। खासकर mobile पर समस्या गंभीर है।
  • table of contents feature web browser में लागू होना चाहिए। page progress, linkable headings, link previews आदि भी browser को ही संभालने चाहिए। document author को fonts और colors निर्दिष्ट करने की ज़रूरत नहीं होनी चाहिए.