ओस्टोहलो — हमारी अपनी साइट, जो समान मानक पर बनाई गई है

01प्रोजेक्ट का अवलोकन

ostohlo.com यह स्टूडियो की अपनी साइट है, और यह अन्य साइटों की तरह ही इस सूची में है: इसे उसी तरह से डिज़ाइन, बनाया और बनाए रखा गया है जैसे हम ग्राहकों के लिए करते हैं। पृष्ठ एक डेटाबेस में रहते हैं और हमारे अपने इंजन द्वारा प्रस्तुत किए जाते हैं; टेम्पलेट फ़ाइलों में रहते हैं; इंटरफ़ेस एक डिज़ाइन सिस्टम है जिसे शून्य से लिखा गया है न कि कहीं से खरीदी गई थीम।

यह एक कार्यशील उत्पाद है, व्यवसाय कार्ड नहीं। ऐसे मुफ्त उपकरण हैं जिनके लिए साइन-अप की आवश्यकता नहीं है, एक परियोजना अनुमानक, एक तीन-स्तरीय भागीदार कार्यक्रम जिसमें अपना डैशबोर्ड है, और एक ब्लॉग जो हमारी प्लेटफॉर्म से तीन भाषाओं में अपने आप भरता है।

02एक स्टूडियो साइट क्यों कठिन है

एक स्टूडियो साइट का कोई मालिक नहीं होता जो शिकायत करे। यह ग्राहक परियोजनाओं के बीच लिखा जाता है, और इसमें हर शॉर्टकट वर्षों तक जीवित रहता है: एक भाषा जो पीछे रह गई, एक पृष्ठ जिसे कोई संपादित करने की हिम्मत नहीं करता क्योंकि यह हाथ से लिखा गया HTML है, एक कार्य की गैलरी जो कार्य से मेल खाना बंद कर चुकी है।

हमारे पास बिल्कुल यही इतिहास था। साइट स्थिर फ़ाइलों के रूप में शुरू हुई, और डेटाबेस में पहला माइग्रेशन इसकी लागत दिखाता है: दृश्य पाठ की तुलना करने से सब कुछ मेल खाता है, जबकि सैकड़ों पृष्ठ चुपचाप अपनी स्टाइलशीट बंडल खो चुके थे। तब से यहाँ नियम यह है कि एक परिवर्तन को माप द्वारा सिद्ध किया जाता है, न कि पृष्ठ के सही दिखने से।

03प्रोजेक्ट के लक्ष्य

• डेटाबेस में सामग्री और फ़ाइलों में टेम्पलेट्स, इसलिए एक पाठ परिवर्तन के लिए एक डेवलपर की आवश्यकता नहीं होती;
• तीन भाषाएँ जो कभी भिन्न नहीं होती: एक कुंजी जो एक में जोड़ी जाती है, वह सभी तीन में उसी कार्य में जोड़ी जाती है;
• हमारा अपना डिज़ाइन सिस्टम — गति, WebGL दृश्य और टाइपोग्राफी जो इस ब्रांड की है;
• उपकरण जो वास्तव में उपयोगी और वास्तव में मुफ्त हैं, जिसमें कुछ भी सर्वर-साइड पर संग्रहीत नहीं है;
• एक भागीदार कार्यक्रम जिसमें डैशबोर्ड में वास्तविक संख्या होती है, न कि लैंडिंग पृष्ठ पर एक वादा;
• मापने योग्य गुणवत्ता: 320 पिक्सल तक का लेआउट, साफ संरचित डेटा, कोई टूटे हुए लिंक नहीं।

04इंजन: एक डेटाबेस में पृष्ठ

हर पृष्ठ — एक सेवा, एक केस स्टडी, एक लेख, एक कानूनी पाठ — एक पंक्ति है: पथ, भाषा, शीर्षक, विवरण, शरीर, संरचित डेटा, प्रकाशन ध्वज। एक प्रवेश बिंदु इसे प्रकार द्वारा चुने गए टेम्पलेट के साथ प्रस्तुत करता है, और साझा शीर्षक और पाद लेख उन फ़ाइलों से आते हैं जिन्हें एक जनरेटर लिखता है, इसलिए तीन सौ पृष्ठों का क्रोम एक ही स्थान पर बदलता है।

सूक्ष्मता फ़ाइल प्रणाली में है, कोड में नहीं: वेब सर्वर किसी भी फ़ाइल को देता है जो डिस्क पर मौजूद है और केवल तभी एप्लिकेशन पर जाता है। सार्वजनिक निर्देशिका में पुराने पृष्ठ के नाम वाली फ़ाइल डालने से उस पृष्ठ को डेटाबेस से चुपचाप बंद कर दिया जाएगा - जो कि वही प्रकार की विफलता है जो कहीं भी कोई त्रुटि नहीं छोड़ती।

05तीन भाषाएँ, जड़ में अंग्रेजी

अंग्रेज़ी जड़ में है, रूसी के तहत /ru/, यूक्रेनी के तहत /uk/. जड़ में कौन सी भाषा है, यह कोड में केवल एक स्थान पर लिखा गया है, और फ्रंट एंड उसी तथ्य को एक स्थायी से जानता है - एक जांच उन्हें तुलना करती है, क्योंकि उस प्रश्न के दो उत्तर आधे-अनुवादित साइटों का जन्म देते हैं।

इंटरफेस स्ट्रिंग्स एक शब्दकोश हैं जिसमें प्रति-भाषा बंडल होते हैं, और नियम स्पष्ट है: एक भाषा में जोड़ा गया कुंजी सभी तीनों में उसी कार्य में जोड़ा जाता है। एक गायब कुंजी कोई त्रुटि नहीं उठाती, यह पाठक को गलत भाषा दिखाती है - चुप्पी का सबसे महंगा प्रकार।

06हमारा अपना डिज़ाइन सिस्टम

वर्तमान इंटरफेस इस साइट की चौथी पीढ़ी है, और इसे शून्य से लिखा गया है: टोकन, टाइपोग्राफी, घटक, गति और एक सेट WebGL दृश्यों का जो नायक ब्लॉकों के पीछे बैठते हैं। स्रोत एक ही स्थान पर रहते हैं और हैश किए गए बंडलों में संकलित होते हैं; संकलित फ़ाइल को हाथ से संपादित करना अगले निर्माण में बस खो जाएगा, इसलिए इस पर बहस करने के लिए कुछ नहीं है।

यहां गति हमेशा चालू है - कोई कम गति गेट नहीं - जो मालिक का एक जानबूझकर निर्णय है, और इसके साथ एक कर्तव्य आता है: सब कुछ 320 पिक्सेल पर अभी भी पढ़ने योग्य और पहुंच योग्य होना चाहिए, और हर दृश्य एनीमेशन वास्तव में समाप्त होना चाहिए। दोनों को एक प्रॉब द्वारा जांचा जाता है जो पृष्ठ को दो बार स्क्रॉल करता है और प्रकट होने की प्रतीक्षा करता है, क्योंकि एक ब्लॉक जो कभी प्रकट नहीं होता वह बहुत जल्दी लिए गए स्क्रीनशॉट के लिए अदृश्य होता है।

07मुफ्त उपकरण जो कुछ भी संग्रहीत नहीं करते

सात छोटे उपकरण: एक पासवर्ड जनरेटर और एक लीक चेक, एक QR जनरेटर, एक UTM बिल्डर, एक स्लग मेकर, एक वर्ण गिनने वाला और एक फोन चेक करने वाला। कोई साइन-अप नहीं, कोई खाता नहीं, और - जो महत्वपूर्ण है - कोई सर्वर-साइड स्टोरेज नहीं। जो उपकरण याद रखता है, वह आगंतुक के अपने ब्राउज़र में याद रखता है, और केवल सेटिंग्स, कभी भी सामग्री नहीं।

लीक चेक सबसे स्पष्ट उदाहरण है: यह कभी भी पासवर्ड नहीं भेजता। केवल इसके हैश का एक छोटा उपसर्ग ब्राउज़र से बाहर जाता है, और उत्तर स्थानीय रूप से इकट्ठा किया जाता है, जो एक उपयोगी उपकरण और पासवर्ड एकत्र करने के लिए एक खूबसूरती से डिज़ाइन किया गया तरीके के बीच का अंतर है।

08एक वास्तविक डैशबोर्ड के साथ साझेदारी कार्यक्रम

तीन स्तरों के रेफरल: एक भागीदार उन ग्राहकों पर कमाता है जो वे लाते हैं, उन भागीदारों पर जो वे ग्राहक लाते हैं, और उस स्तर के नीचे। डैशबोर्ड दिखाता है कि वास्तव में क्या हुआ — अभियान द्वारा क्लिक, पंजीकरण, अधिग्रहण — और यह एक लिंक के माध्यम से पहुंचा जा सकता है जिसमें एक टोकन होता है न कि किसी पासवर्ड द्वारा जिसे कोई याद नहीं रखेगा।

टोकन पहले अनुरोध भेजने से पहले पते से हटा दिया जाता है, अनुरोधों में कोई क्रेडेंशियल्स और कोई रेफरर नहीं होते हैं, और डेमो मोड कभी भी सर्वर को छूता नहीं है। एक भागीदार कैबिनेट वह स्थान है जहाँ पैसे दिखाए जाते हैं; यह वह स्थान नहीं होना चाहिए जहाँ एक लिंक खाता लीक करता है।

09एक ब्लॉग जो अपने आप भरता है

लेख आते हैं Astrina — हमारा अपना प्लेटफॉर्म — एक साइन किए गए एंडपॉइंट के माध्यम से: एक सामग्री, तीन भाषा संस्करण, प्रत्येक अपनी भाषा की ट्री में अपने-अपने भाषा के विकल्पों के साथ। चित्रों को खींचा जाता है और स्थानीय रूप से संग्रहीत किया जाता है न कि हॉट-लिंक किया जाता है, और उस लेख के लिए ब्लॉग इंडेक्स कार्ड उसी पास में लिखा जाता है।

इस तरह की स्वचालन में चुपचाप नुकसान होता है, इसलिए इनटेक जो प्राप्त करता है उसे सामान्यीकृत करता है: आंतरिक लिंक लेख की भाषा में फिर से लिखे जाते हैं, और कच्चे मार्कडाउन के रूप में छोड़े गए लिंक वास्तविक में बदल दिए जाते हैं। नियम सरल है — रूसी संस्करण का पाठक कभी भी एक लिंक द्वारा अंग्रेजी पृष्ठ पर नहीं भेजा जाना चाहिए जो स्रोत में केवल ठीक दिखता है।

10SEO, GEO और मशीन पाठक

हर पृष्ठ में एक शीर्षक, एक विवरण, एक कैनोनिकल पता, सभी तीन भाषाओं के लिए पारस्परिक विकल्प और एक डिफ़ॉल्ट, ओपन ग्राफ और संरचित डेटा होता है — और इसका सारा प्रिंट एक ही स्थान से होता है, क्योंकि जो पृष्ठ अपने स्वयं के मेटा टैग के लिए जिम्मेदार होते हैं वे उन्हें भूल जाते हैं।

मशीन पाठकों के लिए एक सारांश फ़ाइल है जो अनुभागों, उत्पादों और भाषाओं की सूची देती है, जो डेटाबेस से एकत्रित की गई है न कि हाथ से लिखी गई: हाथ से लिखी गई फ़ाइल ने महीनों तक गलत संख्या में उत्पादों का दावा किया था। साइटमैप - पृष्ठ और छवियाँ - रात में फिर से बनाए जाते हैं, और जो कुछ भी बदला है उसे खोज इंजनों को उसी रन में घोषित किया जाता है।

11फॉर्म, मेल और बाहरी दुनिया

संक्षिप्त फ़ॉर्म साइट पर एकमात्र स्थान है जहाँ पैसे की शुरुआत होती है, इसलिए यह सबसे सुरक्षित है: एक विधि अनुमति सूची, एक हनीपॉट, प्रति-पता और वैश्विक दर सीमाएँ, प्रत्येक फ़ील्ड पर आकार की जाँच, और एक अटैचमेंट जो इसके वास्तविक सामग्री प्रकार द्वारा स्वीकार किया जाता है न कि इसके नाम द्वारा। अनुरोध को डेटाबेस में लिखा जाता है इससे पहले कि कुछ भी भेजा जाए, क्योंकि एक खोई हुई पत्रिका का मतलब खोया हुआ ग्राहक नहीं होना चाहिए।

साइट द्वारा भेजा गया सब कुछ — मेल, सूचनाएँ, बाहरी कॉल — एक प्रॉक्सी के माध्यम से जाता है और यदि वह प्रॉक्सी डाउन है तो यह बंद हो जाता है। सर्वर का अपना पता तीसरे पक्षों तक नहीं पहुँचता, और पत्र एक मेलबॉक्स से भेजे जाते हैं जिसे डोमेन के रिकॉर्ड वास्तव में अधिकृत करते हैं।

12प्रौद्योगिकी स्टैक

• PHP 8.4 और MariaDB: डेटाबेस में पृष्ठ, फ़ाइलों में टेम्पलेट, एक प्रवेश बिंदु;
• हमारा अपना डिज़ाइन सिस्टम — टोकन, घटक, गति, WebGL दृश्य, हैश किए गए बंडलों में संकलित;
• तीन भाषाएँ जिनमें प्रति-भाषा शब्दकोश बंडल और एक समानता जांच;
• ब्राउज़र में लिखे गए मुफ्त उपकरण, जिसमें कुछ भी सर्वर-साइड पर संग्रहीत नहीं है;
• तीन संदर्भ स्तरों के साथ एक साझेदार इंजन और एक टोकन-आधारित डैशबोर्ड;
• Astrina से लेखों के लिए एक हस्ताक्षरित इनटेक, हमारी अपनी एनालिटिक्स, केवल ब्लॉग में हमारा अपना विज्ञापन नेटवर्क।

13परिणाम

एक साइट जहाँ पाठ परिवर्तन एक पैनल में संपादन है, न कि एक डिप्लॉयमेंट; जहाँ तीन भाषाएँ स्तर पर रहती हैं क्योंकि नियम उसी कार्य में लागू होता है; जहाँ कार्य अनुभाग एक रजिस्ट्र्री से उत्पन्न होता है, इसलिए एक केस जोड़ने से आधी साइट को पुराने गिनती का दावा नहीं करना पड़ता।

और एक साइट जो एक क्लाइंट प्रोजेक्ट की तरह मापी जाती है: हर प्रकाशित पता उत्तर दिया गया, आंतरिक लिंक बिना रीडायरेक्ट या त्रुटियों के, प्रति पृष्ठ एक शीर्षक और एक विवरण, अपने स्वयं के साइटमैप में घोषित छवियाँ, और सभी तीन भाषाओं में 320 पिक्सल तक लेआउट की जांच की गई।

14सीखने योग्य बातें

अपने स्वयं के साइट को उस मानक पर करना जिसे आप बेचते हैं असुविधाजनक है, और यही बिंदु है: हर शॉर्टकट जो आप यहाँ लेते, वह एक है जो आप एक क्लाइंट के लिए ले सकते हैं। हमारे ने हमें तीन बातें सिखाईं।उस सामग्री को रखें जहाँ उसे लिखने वाले लोग पहुँच सकें। भाषाओं को एक नियम बनाएं, न कि एक इरादा — अन्यथा कुछ भी एक महीने के भीतर भटक जाता है।परिवर्तनों को माप के साथ प्रमाणित करें: यह साइट एक बार दृश्य तुलना में पास हुई थी जबकि इसके सैकड़ों पृष्ठों ने अपनी शैलियाँ खो दी थीं।

यदि आप एक ऐसी साइट चाहते हैं जो एक उत्पाद हो न कि एक ब्रोशर — जिसमें उपकरण, एक डैशबोर्ड, कई भाषाएँ और एक इंटरफ़ेस हो जो आपका हो — तो यही हम करते हैं।