एक वास्तविक परियोजना पर सीएसएस एनिमेशन

वेब डेवलपर्स के बीच, सीएसएस एनीमेशन क्षमताओं (संक्रमण / एनीमेशन) का विषय उठाया जा रहा है, लगभग हर ग्राहक विकास सम्मेलन में आप नई तकनीक के आश्चर्यजनक लाभों के बारे में सुन सकते हैं।

CSS एनिमेशन का प्रदर्शन और लचीलापन आपको आश्चर्यजनक चीजें करने की अनुमति देता है, लेकिन क्या आप वास्तविक बड़ी परियोजनाओं पर उनकी अस्थिरता और अपरिपक्वता के कारण पहले से ही इन नई सुविधाओं का उपयोग कर सकते हैं?

इस पोस्ट में हम बताएंगे कि क्यों आज ग्राहक विकास की नई तकनीकों का उपयोग करना शुरू करना बहुत महत्वपूर्ण है और रास्ते में आने वाली कठिनाइयों का सामना करना पड़ सकता है।

विशिष्टता स्थिति

W3C में सीएसएस संक्रमण और एनिमेशन मॉड्यूल अभी भी "कार्य मसौदे" की स्थिति में हैं, लेकिन फ़ायरफ़ॉक्स, ओपेरा और इंटरनेट एक्सप्लोरर 10 पहले से ही इन गुणों के लिए उपसर्गों को फेंक चुके हैं। उपसर्गों से छुटकारा पाने का मतलब है कि ब्राउज़र निर्माता पहले से ही प्रौद्योगिकी की स्थिरता में आश्वस्त हैं और इसे सक्रिय उपयोग के लिए सलाह देते हैं।

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

जानकारी के लिए भूख

नेटवर्क पर सीएसएस एनिमेशन को शुरू करने में अनुभव की कमी के कारण, रोजमर्रा के कार्यों के कार्यान्वयन के बारे में बहुत कम जानकारी है। हर कोई अभी भी जावास्क्रिप्ट समाधान का उपयोग कर रहा है, उद्योग के अग्रदूतों के रूप में कार्य करने से डरता है।

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

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

जितनी जल्दी बड़े खिलाड़ी नई ग्राहक विकास तकनीकों का उपयोग करना शुरू करते हैं, उतनी ही तेजी से वेब विकास उद्योग विकसित होगा।

वास्तविक दुनिया में सीएसएस एनिमेशन

आइए देखें कि नई परियोजनाओं को बनाने के लिए किन वेब परियोजनाओं ने हिम्मत की और उद्योग में अग्रणी बनने से डरते नहीं थे:

VKontakte आंशिक रूप से सरल, छोटे ब्लॉकों पर एनीमेशन का उपयोग करता है, अक्सर सीएसएस के बजाय जावास्क्रिप्ट एनीमेशन चुनना, यहां तक ​​कि सरल अस्पष्टता एनिमेशन के लिए और पाठ रंग संक्रमण में भी। परियोजना शैलियों की खोज में 17 संक्रमण प्रविष्टियाँ मिलती हैं (उपसर्गों के साथ गुण गिनना नहीं)।

फ़ेसबुक पर, एनिमेशन में पूरी तरह से जड़ें नहीं थी, सभी शैलियों में केवल पाँच संक्रमण प्रविष्टियाँ मिलीं, और मेरी नज़र में आने वाला एकमात्र एनीमेशन JS पर बनाया गया था।

Google+ के लोग, जाहिरा तौर पर, मूल रूप से एनिमेशन का उपयोग नहीं करते हैं (शायद एनिमेशन के साथ काम करने की वजह से क्रोम की समस्याओं के कारण :), केवल संक्रमण प्रविष्टियां थीं। "एनीमेशन" के लिए एक खोज गोलज + में केवल एक घटना हुई।

Odnoklassniki की शैलियों में लेख लिखने के समय - 140 संक्रमण और 4 एनीमेशन कॉल, यह देखते हुए कि कुछ एनिमेशन कई स्थानों पर मानकीकृत और पुन: उपयोग किए जाते हैं।

एक दिलचस्प नोट - लेख के पहले संस्करण को लिखे हुए कुछ महीने बीत चुके हैं, इस समय के दौरान उपरोक्त परियोजनाओं पर एनिमेशन की संख्या में वृद्धि नहीं हुई है, केवल ओडनोकलास्निक के अलावा - हमारे सामाजिक नेटवर्क में एनिमेशन की संख्या लगभग 3 गुना हो गई है।

एनिमेशन करने लायक क्या है

जितना अधिक हम इंटरफ़ेस को वास्तविकता के करीब लाते हैं, उपयोगकर्ता के लिए उतना ही स्पष्ट हो जाता है। जीवन में, लगभग कुछ भी तुरंत नहीं होता है - जब एक दरवाजा खोलते हैं, या लैपटॉप बंद करते हैं, तो हम मध्यवर्ती राज्यों का एक गुच्छा देखते हैं, और एक तेज "खुला / बंद" नहीं होता है, जैसा कि वेब पर होता है।

हम सबसे सामान्य क्रियाओं पर भी एनिमेशन लागू करने का प्रयास करते हैं - एक होवर, ड्रॉप-डाउन मेनू, सूचना टूलटिप्स पर छिपे हुए नियंत्रण को दिखाते हैं। एनिमेशन विभिन्न ब्लिंक और ट्विच का उपयोग करके नियंत्रण पर उपयोगकर्ता का ध्यान केंद्रित करने में मदद करता है।

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

अनुभव का आदान-प्रदान

बग और समाधान का चयन

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

डैबल पर डेमो पेज , उदाहरण के साथ संग्रह ( जे डिस्क पर )।

ओपेरा

उदाहरणों को जोड़ते समय, उदाहरण के लिए, बॉक्स-छाया के साथ अस्पष्टता, ओपेरा में समस्याएं हो सकती हैं ( डेमो पेज पर ब्लॉक 1 देखें), जब छाया पूरी तरह से होवर के साथ गायब हो जाती है, जब एनीमेशन पिछड़े होते हैं, तो छाया देरी से और बिना सुचारू रूप से वापस आती है।

.no_sec { transition: opacity 1s, box-shadow 0; box-shadow: 0 0 5px 5px #000; } .no_sec:hover {opacity: 0; box-shadow: none;} 

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

 .no_sec.shadow { transition: opacity 1s, box-shadow .3s; box-shadow: 0 0 5px 5px blue; } .no_sec.shadow:hover {opacity: 0; box-shadow: none;} 

छद्म तत्वों के साथ ब्लॉक ओपेरा 12 में समस्याग्रस्त रूप से अनुप्राणित हैं, पहली उदाहरण (ब्लॉक 2) के साथ समान कलाकृतियों को छोड़कर, और ओपेरा 11.64 में यह काफी काम करता है।

 .pseudo { position: relative; transition: opacity 1s; } .pseudo:hover {opacity: 0;} .pseudo::after { content: 'pseudo'; position: absolute; left: 0; top: 100%; height: 10px; width: 100%; background: blue; font-size: 10px; line-height: 1; } 

आपको छद्म तत्वों को छोड़ना होगा और नियमित टैग का उपयोग करना होगा।

फ़ायरफ़ॉक्स

यदि आप संक्रमण में "s" (सेकंड) का मान निर्दिष्ट नहीं करते हैं, तो फ़ायरफ़ॉक्स एनीमेशन को पूरी तरह से अनदेखा करता है (ब्लॉक 1)। ब्लॉक 3 में, फ़ायरफ़ॉक्स में छाया एनीमेशन का कार्य मान निर्धारित है।

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

वेबकिट

क्रोम पर मैक में (कम से कम 23 वें संस्करण तक), जब ट्रांसफ़ॉर्म (ब्लॉक 4) के साथ एक साथ संक्रमण का उपयोग करते हैं, साथ ही साथ अन्य शर्तों के तहत, पूरे पृष्ठ पर पाठ चौरसाई होती है।

चौरसाई के साथ:


बिना सुचारू:

 .scale { transition: transform 1s; /*-webkit-backface- visibility: hidden;*/ } .scale:hover {transform: scale(1.5)} 

बैकफेस-दृश्यता : शरीर पर या झिलमिलाहट पाठ के साथ एक ब्लॉक पर छिपी हुई संपत्ति समस्या को हल करने में मदद करती है, लेकिन इस तरह के एक सुधार के भी इसके परिणाम हैं (नीचे दिए गए लेख में विवरण देखें), इसके अलावा, पाठ हमेशा के लिए एंटी-एलियासिंग खो देगा।

यदि कोई ब्लॉक डिस्प्ले के साथ गुण बदलता है तो क्रोम क्रोम में काम नहीं करता है: ब्लॉक -> डिस्प्ले: इनलाइन / इनलाइन-ब्लॉक (ब्लॉक 5)।

 .inline b {opacity: 0; transition: opacity 1s; display: block; max-height: 0;} .inline:hover b {opacity: 1; display: inline; } 

समस्या के आसपास जाने के लिए, आपको एनीमेशन (ब्लॉक 5.1) का उपयोग करने की आवश्यकता है।

 @-webkit-keyframes reveal { from { opacity: 0; } to { opacity: 1; } } .inline.anim:hover b {-webkit-animation: reveal 1s;} 

विंडोज पर क्रोम में, एक चिकनी ट्रांसफॉर्मेशन एनीमेशन के दौरान, सभी इनपुट को एक सफेद पृष्ठभूमि मिलती है (ब्लॉक 4 ट्रांसफॉर्मेशन के साथ और इनपुट के साथ 6)।

एक समान प्रभाव भी देखा जाता है यदि बैकफेस-दृश्यता किसी भी पृष्ठ तत्व पर लागू होती है। अभी तक कोई हल नहीं निकल पाया है।

आम बग्स

वेबकिट के अलावा, पृष्ठभूमि-छवि के काम में कोई परिवर्तन नहीं होता है, आप एक विलंब भी सेट नहीं कर सकते, चित्र तुरंत बदल जाता है (ब्लॉक 7)।

 .bg_img { background: red url(image1.png); transition: background-color 1s linear, background-image 0s linear 1s; } .bg_img:hover {background: blue url(image2.png);} 

समस्या को हल करने के लिए, हमें अस्पष्टता का उपयोग करके कई परतों में एनीमेशन को संयोजित करना था।

संक्रमण के दौरान, एक अस्पष्टता एनीमेशन वाला एक ब्लॉक अन्य ब्लॉकों को ओवरलैप करता है।

समस्याओं से बचने के लिए, आपको उन ब्लॉकों को डालने की आवश्यकता है जिन्हें घर में नीचे एनीमेशन की आवश्यकता नहीं है (इसलिए वे स्वचालित रूप से उच्च जेड-इंडेक्स प्राप्त करेंगे), या मैन्युअल रूप से जेड-इंडेक्स रजिस्टर करें (ब्लॉक 8.1)।

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

टिप्पणी

CSS संक्रमण में एनीमेशन को दोनों दिशाओं में नियंत्रित करना संभव है, उदाहरण के लिए, एनीमेशन गति को बदलना:

 .block {transition: 10s opacity;} .block:hover {opacity: 0; transition-duration: 1s;} 

जब अपारदर्शिता के लिए संक्रमण होवर: 0; 1 सेकंड में होगा, और अपारदर्शिता के लिए रिवर्स संक्रमण: 1; 10 सेकंड तक चलेगा। इस प्रकार, उदाहरण के लिए, "हमेशा के लिए" मँडराते समय, आप एक बहुत बड़ी देरी का उपयोग कर हॉवर अवस्था के गुणों को छोड़ सकते हैं।

एनीमेशन का उपयोग करते समय, आपको यह उम्मीद करनी चाहिए कि एनीमेशन के दौरान ब्लॉक किसी भी बाहरी प्रभाव (लगभग रंग बदलने वाले हॉवर) के अधीन नहीं है। ऐसा करने के लिए, आप पहले "एनीमेशन-प्ले-स्टेट: पॉज़्ड" का उपयोग करके एनीमेशन को रोक सकते हैं या "एनीमेशन: कोई नहीं;" संपत्ति का उपयोग करके एनीमेशन को पूरी तरह से शून्य कर सकते हैं।

एनिमेशन के साथ काम करते समय, आपको समय-समय पर मूल में वापस जाना पड़ता है और सबसे प्राचीन सीएसएस विशेषताओं का फिर से पता लगाना है, क्योंकि यह छद्म वर्ग के साथ निकला था : सक्रिय ।

Backface दृश्यता

पहले हमने बैककिट-दृश्यता का उल्लेख वेबकैट ब्राउज़र के कुछ बगों के समाधान के रूप में किया था, लेकिन कुछ स्थानों पर यह संपत्ति और भी बड़ी समस्या पैदा कर सकती है। इस संपत्ति के मानक उद्देश्य के अलावा (एक 3 डी एनिमेटेड ब्लॉक के पीछे छिपाने के लिए), इसका उपयोग अक्सर हार्डवेयर त्वरण को सक्षम करने के लिए किया जाता है, जो ब्राउज़र में पृष्ठों के प्रतिपादन समय को गति देने के लिए GPU का उपयोग करने की अनुमति देता है।

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

हमें हाल ही में पता चला है कि किसी पृष्ठ के एक भाग के पहले ही तैयार हो जाने के बाद इस संपत्ति को गतिशील रूप से लागू करने से, औसत पृष्ठ प्रतिपादन का समय बहुत बढ़ जाता है। सबसे अधिक संभावना है कि यह GPU त्वरण मोड में संक्रमण के कारण है, जिसमें पूरे पृष्ठ को फिर से तैयार किया गया है।

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

नजर आने पर

हमेशा ब्राउज़र अपडेट के लिए बने रहें और डेवलपर और पूर्वावलोकन संस्करणों पर अपने पोर्टल की जांच करें यदि आप नहीं चाहते कि आपका पोर्टल अगले ब्राउज़र अपडेट के कारण बग के दबाव में गुफा में जाए।

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

एक स्थिर शाखा पर क्रोम के 21 वें संस्करण की रिहाई के साथ, हमें न केवल CSS3 एनिमेशन के बारे में अकथनीय बगों के एक समूह से निपटना पड़ा, महत्वपूर्ण में से एक काले धब्बे (केवल विंडोज पर क्रोम पर) के साथ एक बग था, जो पेज के कारण अनियमित रूप से पृष्ठ पर था अस्पष्टता एनिमेशन। सबसे दिलचस्प बात यह है कि स्थिर और देव संस्करण (क्रोम में) आसानी से अलग हो सकते हैं, भले ही बग को 22 वें देव संस्करण में तय किया गया हो, न कि इस तथ्य के साथ कि फिक्स शाखा के साथ स्थिर रहेगा।

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

अनुकूलन

हमारी इंटरफ़ेस विकास टीम के मुख्य नियमों में से एक यथासंभव अधिक शुद्ध सीएसएस समाधान है। जावास्क्रिप्ट के बजाय सीएसएस का उपयोग करना इंटरफ़ेस की गति और विकास समय दोनों के मामले में ग्राहक के भाग के प्रदर्शन में एक उत्कृष्ट वृद्धि देता है।

हर बाइट मायने रखती है

प्रत्येक संपत्ति को अलग से सूचीबद्ध करने के बजाय शॉर्टहैंड नोटेशन का उपयोग करें।

 transition-property: top; transition-duration: 1s; transition-timing-function: ease; transition-delay: 0.5s; 

=

 transition: top 1s .5s; 

वैसे, न्यूनतम एनीमेशन रिकॉर्ड "संक्रमण: 1s" है, बाकी डिफ़ॉल्ट गुण हैं: "सभी आसानी 0";

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

 transition: all … ; 

एक स्पष्ट के बजाय

 transition: opacity … ; 

शायद यह आपको कुछ पात्रों को सहेजने में मदद करेगा, लेकिन अंत में आप एनिमेटेड ब्लॉक के कई मापदंडों को बदलते समय ब्राउज़र को अनावश्यक गणनाओं के साथ कई गुना अधिक लोड करेंगे।

इसके अलावा, उपसर्गों का पालन करना न भूलें, उदाहरण के लिए, -ms-एनीमेशन और -ms-संक्रमण गुण सभी में मौजूद नहीं हैं, क्योंकि इंटरनेट एक्सप्लोरर का 10 वां संस्करण पहले से छोड़े गए उपसर्गों के साथ आया था। CSS प्रीप्रोसेसर्स मिश्रण का उपयोग करके उपसर्गों के साथ काम करना बहुत आसान बनाते हैं।

मानकीकरण

ऑब्जेक्ट-उन्मुख सीएसएस दृष्टिकोण दोहराए जाने वाले गुणों पर बहुत बचत कर सकता है। हम अपनी शैली प्रबंधन प्रणाली में OOCSS दृष्टिकोण का सक्रिय रूप से उपयोग कर रहे हैं, जो एनिमेशन के मानकीकरण की भी चिंता करता है।

यहाँ पुन: उपयोग किए गए मॉड्यूल में से एक का एक उदाहरण है:

 .fade { transition: .3s opacity, visibility 0s .3s; visibility:hidden; opacity: 0; } .fade_in:hover .fade { transition-delay: 0s; visibility: visible; opacity: 1; } 

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

निष्कर्ष

सीएसएस एनिमेशन के साथ काम करते समय आपको कई कठिनाइयों का सामना करना पड़ता है, जिसे देखते हुए ऐसा लग सकता है कि प्रयास उचित नहीं हैं, लेकिन यह पूरी तरह से ऐसा नहीं है:

सबसे पहले, हमने उपयोगकर्ता इंटरफ़ेस इंटरैक्शन में सुधार के लिए एक शक्तिशाली उपकरण की खोज की, जो जावास्क्रिप्ट समकक्षों की तुलना में ग्राहक के प्रदर्शन को महत्वपूर्ण रूप से प्रभावित नहीं करता है। प्रौद्योगिकी की नकारात्मकता ब्राउज़रों को GPU की कंप्यूटिंग शक्ति के उपयोग के माध्यम से भी प्रतिपादन तत्वों की गति का बेहतर अनुकूलन करने की अनुमति देती है।

दूसरे, हम CSS एनिमेशन के लचीलेपन, मौजूदा और नए इंटरफेस में प्रौद्योगिकी को पेश करने की गति और सरलता से बहुत खुश हैं। सामान्य दृष्टिकोण विकसित करने और एक बार तकनीक की विशेषताओं को हल करने के बाद, हम इसे आसानी से कई आंतरिक परियोजनाओं पर लागू कर सकते हैं।

तीसरा, सीएसएस एनिमेशन के साथ काम करना दिलचस्प है! प्रौद्योगिकी अग्रणी होने और मार्ग प्रशस्त करने से अधिक प्रेरणादायक क्या हो सकता है? यदि एक नया इंटरफ़ेस बनाने के कार्य में कम से कम एक एनिमेटेड तत्व है, तो इसके साथ काम करना बहुत अधिक रोमांचक हो जाता है। फर्जी कोडर्स के साथ सर्वोत्तम प्रथाओं को साझा करना, मेधावी टिप्पणियों को सुनना विशेष रूप से अच्छा है।