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

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

Adam Argyle

Una Kravets

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

सभी सुविधाएं देखने के लिए, designcember.com पर जाएं.

खास जानकारी

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

व्हिम्सी से शुरू करना

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

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

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

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

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

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

कुछ विंडो में ऐनिमेशन होते हैं, ताकि उपयोगकर्ताओं को ज़्यादा इंटरैक्टिव अनुभव दिया जा सके. ये ऐनिमेशन, Photoshop में फ़्रेम के हिसाब से हाथ से बनाए जाते हैं. हर फ़्रेम को एक्सपोर्ट करके, इस स्प्राइटशीट जनरेटर की मदद से स्प्राइटशीट में बदला जाता है. इसके बाद, Squoosh की मदद से उसे ऑप्टिमाइज़ किया जाता है. इसके बाद, सीएसएस ऐनिमेशन 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 की कुछ बुनियादी स्किल के साथ-साथ, वेब पर मास्क के काम करने के तरीके के बारे में थोड़ी जानकारी भी ज़रूरी थी. आइए, आठवें दिन की विंडो पर नज़र डालते हैं.

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

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

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

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

कला को देखना

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

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

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

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

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>

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

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

स्क्रीन रीडर और कीबोर्ड का इस्तेमाल करने वाले लोग

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

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

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

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

Astro, स्टैटिक फ़र्स्ट, कॉम्पोनेंट-ड्रिवन साइट जनरेटर

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

दिनों को कॉम्पोनेंट के तौर पर इस्तेमाल करना

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

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

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

Astro कॉम्पोनेंट मॉडल में लिखे गए स्टाइल को स्कोप करता है. इससे टीम के कई सदस्यों के बीच वर्कलोड को बांटना आसान हो गया. साथ ही, ओपन प्रॉप का इस्तेमाल भी मज़ेदार हो गया. अडैप्टिव (हल्के और गहरे रंग वाली) थीम के साथ Open Propsnormalize.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() फ़ंक्शन पर निर्भर करता है. इसलिए, सभी आधुनिक ब्राउज़र, पॉलीफ़िल के साथ काम करते हैं. खास तौर पर, Chrome और Edge के 88 वर्शन, Firefox के 78 वर्शन, और Safari के 14 वर्शन के साथ. पॉलीफ़िल का इस्तेमाल करके, इनमें से किसी भी सिंटैक्स का इस्तेमाल किया जा सकता है:

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

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

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

अन्य ईस्टर एग

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

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

फ़ंक्शनल टच

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

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

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