उत्तम अभ्यास

वेब के लिए

Markdown पैटर्न का उपयोग पठनीयता बढ़ाता है और रखरखाव को आसान बनाता है, अनुवादक और आपकी वेबसाइट स्क्रिप्ट दोनों के लिए जो सामग्री को निकालेगी।

बहुभाषी साइट में नामित एंकर के लिए, एक दिलचस्प तरीका Markdown डिज़ाइन के साथ लिंक को

सीधे कोड करना

है।

उदाहरण: एंकर के साथ

<h2/>

टैग के लिए



वर्तमान भाषा में लेबल

LLM लिंक को सुरक्षित रखने में इंसानों से ज़्यादा प्रभावी होते हैं, और

LSDE

आपको विभिन्न भाषाई संस्करणों के बीच समस्याओं का पता लगाने में मदद करता है।


इस प्रकार, आप एक ऐसा लिंक साझा कर सकते हैं जो सभी भाषाओं में काम करेगा और एक अप्रचलित एंकर के प्रतिस्थापन को प्रबंधित करने के लिए

LSDE

का उपयोग कर सकते हैं।




कोड की अस्पष्टता

डेटा-उन्मुख मॉडल के साथ काम करते समय अस्पष्टताओं से बचें।


उदाहरण :


बुरी प्रथा :

'key' शब्द स्पष्ट नहीं है और इसकी खोज को कठिन बनाता है।



ts
const PRODUCTS: Product[] = [
	{
\t\tid: 'fcf7o',
\t\tlogo: '/icons/fcf7o-icon-40.webp',
\t\tlabel: 'FCF7O',
\t\tkey: 'game:fcf7o.words.game_title',
\t},
\t{
\t\tid: 'lsde',
\t\tlogo: '/icons/lsde-icon-40.webp',
\t\tlabel: '<c1>LSDE</c1>',
\t\tkey: 'software:lsde.name',
\t},
\t{
\t\tid: 'lsge',
\t\tlogo: '/icons/lsge.webp',
\t\tlabel: 'LSGE',
\t\tkey: 'software:lsge.name',
\t},
];


अच्छी प्रथा :

एक अद्वितीय और सुसंगत कन्वेंशन अपनाएं।


'i18nKey' शब्द बहुत स्पष्ट है और नियमित अभिव्यक्ति (

Regex

) के माध्यम से इस मान की सटीक खोज की अनुमति देता है।


ts
const PRODUCTS: Product[] = [
	{
\t\tid: 'fcf7o',
\t\tlogo: '/icons/fcf7o-icon-40.webp',
\t\tlabel: 'FCF7O',
\t\ti18nKey: 'game:fcf7o.words.game_title',
\t},
\t{
\t\tid: 'lsde',
\t\tlogo: '/icons/lsde-icon-40.webp',
\t\tlabel: '<c1>LSDE</c1>',
\t\ti18nKey: 'software:lsde.name',
\t},
\t{
\t\tid: 'lsge',
\t\tlogo: '/icons/lsge.webp',
\t\tlabel: 'LSGE',
\t\ti18nKey: 'software:lsge.name',
\t},
];




आलस्य

बुरी आदतें आलस्य से जन्म लेती हैं।


सामग्री को पुनः प्राप्त करने के लिए संचालन करके कुंजियों को बचाने की कोशिश न करें।


उदाहरण :


javascript
const [title, subtitle] = t( 'game:game.title' ).split( /[:：]/ );

यह एक गलत अच्छी सोच है, क्योंकि कुछ भाषाओं में वर्ण भिन्न हो सकते हैं और शब्दों का क्रम बदल सकता है।





टैग का प्रारूप

डिज़ाइन के लिए सीधे टेक्स्ट में कोड को यथासंभव कम करें, ताकि इसे कोडबेस से नियंत्रित किया जा सके।


उदाहरण के लिए, आप एक छवि का स्थान इंगित कर सकते हैं, लेकिन उसकी शैली या उसे कैसे प्रस्तुत किया जाना चाहिए, यह नहीं।


यदि आपको डिज़ाइन में बदलाव करने हैं, तो आप एक टैग की शैली बदलने के लिए 10 भाषाओं में एक टेक्स्ट का पुन: अनुवाद करने के लिए मजबूर नहीं होना चाहेंगे!



टैग में एक पहचानकर्ता (ID) शामिल हो सकता है, लेकिन अतिरिक्त जानकारी जोड़ना आमतौर पर दृढ़ता से हतोत्साहित किया जाता है और एक बुरी प्रथा है।


उदाहरण : ऐसा न करें


<img src='url' left />

बल्कि ऐसा करें


<img id=1 />

फिर आप कोडबेस में आवश्यक शैलियों को लागू करने के लिए छवि टैग का ID पुनः प्राप्त करेंगे।


ID का उपयोग शाब्दिक रूप से किया जाना चाहिए, न कि उनके अनुक्रमणिका (index) के माध्यम से।


वास्तव में, विभिन्न भाषाओं में, टैग स्थानांतरित हो सकते हैं और प्रारंभिक अनुक्रमणिका से मेल नहीं खा सकते हैं।


प्राकृतिक अनुक्रमणिका का उपयोग डेवलपर के लिए जटिलता भी पैदा करता है; यह अनुमान लगाने की कोशिश करना कि छवि या टैग किस अनुक्रमणिका से मेल खाता है, एक वास्तविक सिरदर्द है।


इसलिए, जब आप उन्हें इंटरपोलेशन के बाद अनुकूलित करना चाहते हैं तो पहचानकर्ता वाले टैग का उपयोग करें।





CSS

किसी साइट के अनुवाद के लिए, जब आपके पास पैराग्राफ होते हैं, तो भाषा बदलने पर दृश्य विस्थापन से बचने के लिए अनुवाद के बाद न्यूनतम ऊंचाई (`min-height`) का विकल्प चुनें।


उदाहरण: `mih={'3lh'}`


यह आपको उस भाषा के आधार पर न्यूनतम ऊंचाई निर्धारित करने की अनुमति देता है जो सबसे अधिक पंक्तियाँ लेती है, जिससे एक सुसंगत और संयमित उपयोगकर्ता अनुभव (UX) सुनिश्चित होता है।



नेमस्पेस


अपनी अनुवाद कुंजियों में हमेशा 'नेमस्पेस' शामिल करें, भले ही आपके पास केवल एक ही क्यों न हो।

यह आपकी कुंजियों को खोजने के लिए Regex पैटर्न स्थापित करना बहुत आसान बनाता है।


उदाहरण:

game:a.b.c

,

common:a.b.c