बिल्डिंग डिज़ाइनसींबर

Designcember के हॉलिडे-कैलेंडर-स्टाइल के अनुभव को बेहतर बनाने के लिए इस्तेमाल की गई प्रोसेस और टूल की जानकारी.

एडम आर्गील

ऊना क्रावेट्स

दिसंबर और लोगों के कई कैलेंडर की मदद से, हम काउंटडाउन और जश्न मनाने के लिए, कम्यूनिटी और Chrome टीम का वेब कॉन्टेंट हाइलाइट करना चाहते थे. हर दिन, हमने यूज़र इंटरफ़ेस (यूआई) डेवलप करने और डिज़ाइन से जुड़ा एक कॉन्टेंट हाइलाइट किया. इसमें कुल 31 हाइलाइट शामिल की गईं. इनमें 26 नई डेमो साइटें, टूल, सूचनाएं, पॉडकास्ट, वीडियो, लेख, और केस स्टडी शामिल थीं.

पूरा अनुभव पाने के लिए, designcember.com पर जाएं.

खास जानकारी

हमारा लक्ष्य कम से कम बाइट में, लोगों को ऐसा वेब अनुभव देना था जो आसानी से समझ में आए, शानदार, आधुनिक, और रिस्पॉन्सिव वेब अनुभव. हम कंटेनर क्वेरी जैसे नए रिस्पॉन्सिव एपीआई को हाइलाइट करना चाहते हैं. साथ ही, हम ऐसी वेबसाइट में डार्क मोड का एक सुंदर उदाहरण शामिल करना चाहते हैं जो डिज़ाइन पर फ़ोकस करता हो और एसेट से जुड़ा हो. इस मकसद को पूरा करने के लिए, हमने फ़ाइलों को कंप्रेस किया, कई फ़ॉर्मैट इस्तेमाल किए, और साइट के स्टैटिक वर्शन जनरेट करने के लिए ऑप्टिमाइज़ किए गए बिल्ड टूल इस्तेमाल किए. साथ ही, हमने नया पॉलीफ़िल भेजा वगैरह.

शानदार शुरुआत से

Designcember कैलेंडर साइट का विचार था, खुद एक डेमो साइट की तरह काम करते हुए उन सभी कामों को शोकेस के तौर पर दिखाना जिन्हें हम दिसंबर महीने में दिखाना चाहते थे. हमने एक ऐसी रिस्पॉन्सिव अपार्टमेंट बिल्डिंग बनाने का फ़ैसला लिया जो लंबा और ज़्यादा संकरा हो या छोटा और चौड़ा हो. साथ ही, ऐसी खिड़कियों को फ़्रेम में फिर से व्यवस्थित कर दिया गया हो. हर विंडो एक दिन दिखाती थी (और इसलिए, कॉन्टेंट का एक हिस्सा). हमने अपने विज़न को जीवंत बनाने के लिए, इलस्ट्रेटर ऐलिस ली के साथ काम किया.

ऐलिस ने प्रेरणा देने वाली कहानियां और स्केच शेयर किए थे, जो शुरुआती कॉन्सेप्ट में भी काफ़ी दिलचस्प थे. उन्होंने कला पर काम करते हुए, वास्तुकला को भी हैक कर लिया. शुरुआती चर्चा मैक्रो लेआउट, इमारत, और इसकी खिड़कियों को लेकर थी. व्यूपोर्ट में ज़्यादा जगह मिलने पर, विंडो एक, दो या तीन कॉलम के हिसाब से कैसे बदलती हैं? वे कितनी दूर तक सिकुड़ सकते हैं या खिंच सकते हैं? इमारत का ज़्यादा से ज़्यादा साइज़ कितना होगा? विंडो कितनी शिफ़्ट होंगी?

यहां grid-auto-flow: dense का इस्तेमाल करके, रिस्पॉन्सिव प्रोटोटाइप की झलक दी गई है. इसमें दिखाया गया है कि ग्रिड एल्गोरिदम, विंडो को अपने-आप कैसे प्लेस कर सकता है. हमें जल्द ही यह महसूस हुआ कि आसपेक्ट रेशियो ग्रिड में आर्ट दिखाने के लिए वे बहुत अच्छे तरीके से काम करते हैं. हालांकि, वे विंडो को बड़ा करने और एक ऐसी जगह पर सिकुड़ने का मौका नहीं देते जो कंटेनर क्वेरी का पावर है.

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

हर विंडो को एक तय मात्रा में साइज़ बदलने से जुड़ी परेशानी को हैंडल करना होगा. नीचे एक विंडो का प्रोटोटाइप दिया गया है, जो टर्बलेंस के मामले में अपनी रिस्पॉन्स को दिखा रहा है. इसमें दिखाया गया है कि हर इंटरैक्टिव विंडो में कितना बदलाव हो सकता है.

स्प्राइटशीट के साथ विंडो ऐनिमेशन

कुछ विंडो में ऐनिमेशन होते हैं, जिनसे आपको ज़्यादा इंटरैक्शन करने में मदद मिलती है. ऐनिमेशन को Photoshop में हाथ से तैयार किया जाता है और फ़्रेम के हिसाब से तैयार किया जाता है. हर फ़्रेम को एक्सपोर्ट किया जाता है और उसे इस स्प्राइटशीट जनरेटर की मदद से, स्प्राइटशीट में बदल दिया जाता है. इसके बाद, स्क्वॉश की मदद से उसे ऑप्टिमाइज़ किया जाता है. इसके बाद, सीएसएस ऐनिमेशन में background-position-x और animation-timing-function का इस्तेमाल किया गया है, जैसा कि यहां दिए गए उदाहरण में दिखाया गया है.

.una
  background: url("/day1/una_sprite.webp") 0% 0%;
  background-size: 400% auto;
}

.day:is(:hover, :focus-within) .una {
  animation: una-wave .5s steps(1) alternate infinite;
}

@keyframes una-wave {
  0%  { background-position-x: 0%; }
  25% { background-position-x: 300%; }
  50% { background-position-x: 200%; }
  75% { background-position-x: 100%; }
}

छहवें दिन का पिगी बैंक जैसे कुछ ऐनिमेशन, सिलसिलेवार सीएसएस ऐनिमेशन थे. हमने इस इफ़ेक्ट को steps() का इस्तेमाल करके, मिलती-जुलती तकनीक के ज़रिए हासिल किया है. इसमें अंतर यह है कि मुख्य-फ़्रेम, बैकग्राउंड की स्थितियों के बजाय पोज़िशन बदलने के लिए बने होते हैं.

सीएसएस मास्किंग

कुछ खिड़कियों के आकार खास थे. हमने मास्क और aspect-ratio का इस्तेमाल बड़े पैमाने पर, खास आकार की, और अडैप्टिव विंडो बनाने के लिए किया.

विंडो आठ के लिए, जैसा कि एक मास्क बनाने के लिए, फ़ोटोशॉप के कुछ क्लासिक तरीकों की ज़रूरत थी. साथ ही, इस बात की थोड़ी-बहुत जानकारी थी कि वेब पर मास्क कैसे काम करते हैं. चलिए, आठवें दिन के लिए विंडो पर नज़र डालते हैं.

मास्क बनने के लिए, चार पत्तियों वाले क्लोवर की तरह का आकार अलग-अलग करना होता है. मास्क को सफ़ेद रंग से भरना होता है. सफ़ेद रंग से सीएसएस को पता चलता है कि कौनसा कॉन्टेंट सेव रहेगा और सफ़ेद रंग के अलावा कोई भी कॉन्टेंट नहीं दिखेगा. Photoshop में, विंडो के अंदर का हिस्सा चुना गया, उसे 1px पर फ़ेदर किया गया (उपनाम की समस्या हटाने के लिए) किया गया. इसके बाद, उसे सफ़ेद रंग से भरा गया और विंडो के फ़्रेम की ऊंचाई और चौड़ाई के हिसाब से एक्सपोर्ट किया गया. इस तरह फ़्रेम और मास्क को एक-दूसरे के ऊपर सीधे लेयर किया जा सकता है. इससे, फ़्रेम के अंदर का कॉन्टेंट उम्मीद के मुताबिक दिखेगा.

एक बार पूरा होने के बाद, विंडो की सामग्री में बदलाव किया जा सकता है और हमेशा कस्टम फ़्रेम में ही दिखेगी. नीचे दी गई इमेज में, विंडो का गहरे रंग वाला मोड वाला वर्शन दिखाया गया है. इसमें, बैकग्राउंड में अलग-अलग ग्रेडिएंट और रोशनी पर चमक वाला सीएसएस फ़िल्टर लागू किया गया है.

मास्क करने की सुविधा, रिस्पॉन्सिव कंटेनर-क्वेरी पर आधारित विंडो के साथ भी काम करती है. नौवीं विंडो में एक किरदार है, जिसे मास्क के पीछे तब तक छिपाया गया है, जब तक उस विंडो का साइज़ छोटा नहीं हो जाता. यह पक्का करने के लिए कि उपयोगकर्ता इमेज को फ़्रेम से बाहर एडजस्ट न कर सके, ऐलिस ने हमारे लिए पूरा वर्ण पूरा कर दिया. किरदार को खिड़की के अंदर मास्क किया जाता है, लेकिन पौधे नहीं लगाए जाते. इसलिए, हमने मास्क वाले कई एलिमेंट को बिना मास्क वाली लेयर पर लेयर करने का काम किया. साथ ही, यह पक्का करना था कि सब एक साथ सही तरीके से फ़िट हो जाएं.

इस इमेज में दिखाया गया है कि विंडो और वर्ण पर, मास्क लगाए बिना यह कैसा दिखता है.

कला को हाइलाइट करें

इमेज की क्वालिटी को बनाए रखने और यह पक्का करने के लिए कि हाई डेफ़िनिशन स्क्रीन धुंधली उपयोगकर्ता अनुभव न दें, ऐलिस ने 3x पिक्सल के अनुपात में काम किया. हमारी योजना थी कि imgix का इस्तेमाल किया जाए और इसके सर्वर पर ऑप्टिमाइज़ की गई इमेज और फ़ॉर्मैट दिखाए जाएं. हालांकि, हमने पाया कि Squoosh टूल में मैन्युअल तरीके से बदलाव करके, हम 50% या उससे ज़्यादा की बचत कर सकते हैं.

इस इलस्ट्रेशन में, कंप्रेशन से जुड़ी यूनीक चुनौतियां हैं. खास तौर पर, इसमें ब्रश स्ट्रोक और ऐलिस की पारदर्शी रफ़ एज स्टाइल का इस्तेमाल किया गया है. हमने Photoshop से एक्सपोर्ट किए गए हर 3x रिज़ॉल्यूशन के png इमेज को छोटे png, webp, और avif में एक्सपोर्ट करने के तरीके को चुना. हर फ़ाइल टाइप की अपनी खास कंप्रेशन क्षमता होती है. साथ ही, कुछ सामान्य ऑप्टिमाइज़ेशन सेटिंग को ढूंढने में 50 से ज़्यादा इमेज को कंप्रेस करने की ज़रूरत होती है.

इसमें 200 से ज़्यादा इमेज को ऑप्टिमाइज़ करने के लिए, Squoosh सीएलआई का इस्तेमाल किया गया. हालांकि, मैन्युअल तरीके से सेट की गई सभी इमेज को ऑप्टिमाइज़ करने में काफ़ी समय लगता. सामान्य ऑप्टिमाइज़ेशन सेटिंग मिलने के बाद, हमने उन्हें कमांड लाइन के निर्देशों के तौर पर उपलब्ध कराया था. साथ ही, PNG इमेज के पूरे फ़ोल्डर को उनके WebP और AVIF कंप्रेस किए गए काउंटरपार्ट में प्रोसेस किया गया.

यहां इस्तेमाल किए गए AVIF CLI स्क्वॉश कमांड का उदाहरण दिया गया है:

npx @squoosh/cli --quant '{"enabled":true,"zx":0,"maxNumColors":256,"dither":1}' --avif '{"cqLevel":19,"cqAlphaLevel":17,"subsample":1,"tileColsLog2":0,"tileRowsLog2":0,"speed":6,"chromaDeltaQ":false,"sharpness":5,"denoiseLevel":0,"tune":0}' image-1.png image-2.png image-3.png

रेपो में ऑप्टिमाइज़ किए गए आर्टवर्क की जांच करने के बाद, हम उन्हें एचटीएमएल से लोड करना शुरू कर सकते हैं:

<picture>
  <source srcset="/day1/inner-frame.avif" type="image/avif">
  <source srcset="/day1/inner-frame.webp" type="image/webp">
  <img alt="" decoding="async" role="presentation" src="/day1/inner-frame.png">
</picture>

इमेज का सोर्स कोड बार-बार लिखा जा रहा था. इसलिए, हमने एक लाइन वाले कोड से इमेज जोड़ने के लिए, एक एस्ट्रो कॉम्पोनेंट बनाया.

<Pic filename="day1/inner-frame" role="presentation" />

स्क्रीन रीडर और कीबोर्ड उपयोगकर्ता

Designcember का ज़्यादातर अनुभव कला और इंटरैक्टिव विंडो से मिलता है. हमारे लिए यह ज़रूरी था कि कीबोर्ड इस्तेमाल करने वाला व्यक्ति, साइट का इस्तेमाल कर सके और विंडो में झांक सके. साथ ही, स्क्रीन रीडर इस्तेमाल करने वालों को डिवाइस पर बढ़िया अनुभव मिल सके.

उदाहरण के लिए, इमेज एम्बेड करते समय हमने role="presentation" का इस्तेमाल करके, स्क्रीन रीडर के लिए इमेज को प्रज़ेंटेशन के तौर पर मार्क किया. हमें लगता है कि 5 से 12 बिखरे हुए alt ब्यौरे का उपयोगकर्ता अनुभव खराब होने वाला था. इसलिए, हमने उन इमेज को प्रज़ेंटेशन के तौर पर मार्क किया और विंडो के बारे में पूरी जानकारी दी. स्क्रीन रीडर पर विंडो से गुज़रने पर एक अच्छी कहानी का एहसास होता है. हमें उम्मीद है कि इससे साइट को दिलचस्प और मज़ेदार अनुभव मिलेगा.

इस वीडियो में, कीबोर्ड इस्तेमाल करने के अनुभव का डेमो दिखाया गया है. टैब, Enter, Spacebar, और Escape बटन का इस्तेमाल, विंडो पॉप-अप और विंडो पर फ़ोकस करने और उनसे फ़ोकस करने के लिए किया जाता है.

स्क्रीन रीडर के अनुभव में खास ARIA एट्रिब्यूट होते हैं, जो कॉन्टेंट को साफ़ तौर पर बताते हैं. उदाहरण के लिए, दिनों के लिंक सिर्फ़ "एक" या "दो" बताते हैं, लेकिन कुछ जोड़ी गई ARIA के साथ, उन्हें "पहला दिन" और "दो दिन" के तौर पर बताया जाता है. साथ ही, सभी इमेज की खास जानकारी एक ही लेबल में दी जाती है, ताकि हर विंडो में ब्यौरा मौजूद हो.

एस्ट्रो, स्टैटिक फ़र्स्ट, कॉम्पोनेंट पर आधारित साइट जनरेटर

एस्ट्रो ने टीम के लिए साइट पर साथ मिलकर काम करना आसान बना दिया. कॉम्पोनेंट मॉडल, Angular और React डेवलपर, दोनों के लिए जाना-पहचाना था. हालांकि, स्कोप वाले क्लासनाम स्टाइल सिस्टम की मदद से, हर डेवलपर को यह पता चला कि विंडो पर उनके काम का किसी दूसरे के साथ टकराव नहीं होगा.

कॉम्पोनेंट के तौर पर दिन

हर दिन एक कॉम्पोनेंट था, जो बिल्ड टाइम डेटा स्टोर से स्टेटस फ़ेच करता था. इससे, एचटीएमएल के ब्राउज़र में पहुंचने से पहले, हमें टेंप्लेट लॉजिक को चलाने में मदद मिलती है. लॉजिक से यह तय होगा कि दिन को अपना टूलटिप दिखेगा या नहीं, क्योंकि इनऐक्टिव दिनों के पॉप-अप नहीं होते.

बिल्ड हर घंटे चलाए जाते हैं और बिल्ड सर्वर के आधी रात का समय बीतने पर, बिल्ड के समय का डेटा स्टोर एक नए दिन को अनलॉक कर देगा. ये अपने-आप अपडेट होने वाले और अपने-आप काम करने वाले छोटे सिस्टम, साइट को अप-टू-डेट रखते हैं.

स्कोप वाली स्टाइल और ओपन प्रॉप

एस्ट्रो स्कोप के कॉम्पोनेंट मॉडल के अंदर लिखी गई स्टाइल की मदद से, टीम के कई सदस्यों के बीच वर्कलोड को डिस्ट्रिब्यूट करना आसान हो गया है. साथ ही, ओपन प्रॉप्स का इस्तेमाल करके, इसे बनाने का मज़ेदार काम किया गया है. Open Props Generalize.css स्टाइल के लिए, अडैप्टिव (हल्के और गहरे रंग वाली) थीम के साथ-साथ पैराग्राफ़ और हेडर जैसी चीज़ों को गलत तरीके से इस्तेमाल करने में मददगार साबित हुआ.

Astro को शुरुआती तौर पर इस्तेमाल करने के बाद, हमें PostCSS के साथ कुछ समस्याएं मिली हैं. उदाहरण के लिए, बिल्ड से जुड़ी कई समस्याओं की वजह से हम Astro के सबसे नए वर्शन पर अपडेट नहीं कर पाए. बिल्ड और डेवलपर वर्कफ़्लो को ऑप्टिमाइज़ करने में ज़्यादा समय बिताया जा सकता है.

सुविधाजनक कंटेनर

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

विंडो के लिए ज़्यादा जगह होने पर, हम विंडो के साइज़ या चाइल्ड एलिमेंट में बदलाव कर सकते हैं. हमें पता चला कि अडैप्टिव विंडो को पूरा करने के लिए, कंटेनर क्वेरी को दिखाना न सिर्फ़ मज़ेदार होगा, बल्कि वे कुछ लेआउट को व्यवस्थित करके बहुत आसान बना देंगी.

.day {
  container: inline-size;
}

.day > .pane {
  min-block-size: 250px;

  @container (min-width: 220px) {
    min-block-size: 300px;
  }

  @container (min-width: 260px) {
    min-block-size: 310px;
  }

  @container (min-width: 360px) {
    min-block-size: 450px;
  }
}

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

कंटेनर क्वेरी की मदद से हम ब्लॉक-निर्देश (वर्टिकल) को रोकने में भी मदद कर पाते हैं. इसलिए, जब विंडो की लंबाई बढ़ती है, तो हम इसकी स्टाइल में सही तरीके से बदलाव कर सकते हैं. इसे ऊंचाई पर आधारित क्वेरी में देखा जाता है, जिसे हमने स्टैंडअलोन और चौड़ाई पर आधारित क्वेरी के अलावा इस्तेमाल किया:

.person {
  place-self: flex-end;
  margin-block: 25% 50%;
  margin-inline-start: -15%;
  z-index: var(--layer-1);

  @container (max-height: 350px) and (max-width: 425px) {
    place-self: center flex-end;
    inline-size: 50%;
    inset-block-end: -15%;
    margin-block-start: -2%;
    margin-block-end: -25%;
    z-index: var(--layer-2);
  }
}

हमने ज़्यादा जानकारी दिखाने और छिपाने के लिए, कंटेनर क्वेरी का भी इस्तेमाल किया. ऐसा इसलिए हुआ, क्योंकि आर्ट में छोटे साइज़ और बड़े साइज़ के कॉन्टेंट में ज़्यादा लोग आने लगे. विंडो नौ, इसका सबसे अच्छा उदाहरण है:

क्रॉस-ब्राउज़र सहायता

एक बेहतरीन आधुनिक क्रॉस-ब्राउज़र अनुभव देने के लिए, खास तौर पर कंटेनर क्वेरी जैसे एक्सपेरिमेंटल एपीआई के लिए, हमें एक बढ़िया पॉलीफ़िल की ज़रूरत है. हमने अपनी टीम को कॉल आउट किया और सुर्मा ने नए कंटेनर क्वेरी पॉलीफ़िल के लिए बिल्ड की अगुवाई की. पोलीफ़िल, ResizeObserver, MutationObserver, और सीएसएस :is() फ़ंक्शन पर निर्भर करता है. इसलिए, सभी मॉडर्न ब्राउज़र पॉलीफ़िल के साथ काम करते हैं, खास तौर पर वर्शन 88 से Chrome और Edge, 78 वर्शन से Firefox, और वर्शन 14 से Safari. पॉलीफ़िल का इस्तेमाल करने पर, इनमें से कोई भी सिंटैक्स इस्तेमाल किया जा सकता है:

/* These are all equivalent */
@container (min-width: 200px) {
  /* ... */
}
@container (width >= 200px) {
  /* ... */
}
@container size(width >= 200px) {
  /* ... */
}

गहरे रंग वाला मोड

Designcember वेबसाइट के लिए एक और ज़रूरी बात, एक खूबसूरत डार्क थीम थी. हम आपको यह बताना चाहते हैं कि आर्ट मोड का इस्तेमाल करके, लोगों को गहरे रंग वाले मोड का बेहतरीन अनुभव कैसे दें. इसके लिए, हमने हर विंडो की बैकग्राउंड स्टाइल को प्रोग्राम के हिसाब से अडजस्ट किया. साथ ही, विंडो आर्ट बनाते समय ज़रूरत के मुताबिक सीएसएस का इस्तेमाल किया. ज़्यादातर बैकग्राउंड, सीएसएस ग्रेडिएंट थे, ताकि उनकी कलर वैल्यू को आसानी से बदला जा सके. इसके बाद, हमने इन कलाकारों के ऊपर आर्ट की लेयर लगा दी.

अन्य ईस्टर अंडे

निजी तौर पर जुड़ाव

साइट को और बेहतर बनाने के लिए, हमने पेज में कुछ निजी चीज़ें जोड़ी हैं. पहले किरदार को हमारी टीम से प्रेरणा लेकर बनाया गया था. इसमें ऐक्टिव न रहने वाले दिनों में, पुराने स्टाइल का कर्सर भी होता था. साथ ही, इसे फ़ेविकॉन की स्टाइल में खेला जाता था.

फ़ंक्शनल टच

इसके अतिरिक्त फ़ंक्शनल टच में "आज पर जाएं" सुविधा है, जिसमें एक पक्षी है जो इमारत के सबसे ऊपरी हिस्से पर है. इस पक्षी पर एंटर क्लिक करने या हिट करने से आप पेज पर महीने के मौजूदा दिन पर पहुंच जाते हैं, ताकि आप तुरंत नवीनतम लॉन्च पर पहुंच सकें.

Designcember.com में एक विशेष प्रिंट स्टाइलशीट भी है जहां हम एक विशिष्ट चित्र पेश कर रहे हैं जो 8.5" x 11" पेपर पर सबसे अच्छी तरह काम करती है ताकि आप कैलेंडर को खुद प्रिंट कर सकें और पूरे साल इसका उत्साह बना सकें.

कुल मिलाकर, दिसंबर में पूरे महीने यूआई डेवलपमेंट का जश्न मनाने के लिए, हमने मज़ेदार और शानदार मॉडर्न वेब अनुभव तैयार किया. उम्मीद है कि आपको यह पसंद आया होगा!