इंटरफेस डेव्हलपमेंट स्कूल: मिन्स्कसाठी कार्यांचे विश्लेषण आणि मॉस्कोमधील नवीन सेट

आज नवीन नावनोंदणी सुरू झाली यांडेक्स इंटरफेस डेव्हलपमेंट स्कूल मॉस्को मध्ये. प्रशिक्षणाचा पहिला टप्पा 7 सप्टेंबर ते 25 ऑक्टोबर या कालावधीत होणार आहे. इतर शहरांतील विद्यार्थी यामध्ये दूरस्थपणे किंवा वैयक्तिकरित्या सहभागी होऊ शकतील - कंपनी वसतिगृहातील प्रवास आणि निवास यासाठी पैसे देईल. दुसरा, अंतिम टप्पा 3 डिसेंबरपर्यंत चालेल, तो केवळ वैयक्तिकरित्या पूर्ण केला जाऊ शकतो.

माझे नाव युलिया सेरेडिच आहे, आम्ही सर्गेई काझाकोव्हसह हे पोस्ट लिहिले. आम्ही दोघेही यांडेक्सच्या मिन्स्क कार्यालयातील इंटरफेस डेव्हलपर आणि मागील वर्षातील SRI चे पदवीधर आहोत.

मॉस्कोमध्ये नोंदणी सुरू झाल्याच्या निमित्ताने, आम्ही मागील शाळेच्या परिचयात्मक कार्यांचे विश्लेषण प्रकाशित करत आहोत - येथे मिन्स्कमध्ये.

जर तुम्ही एसआरआय असाइनमेंटचा इतिहास शोधलात, तर वर्षानुवर्षे आम्ही प्रोग्रामरसाठी तीन महत्त्वाच्या कौशल्यांची चाचणी घेतली:

• मांडणी. प्रत्येक विकासकाला मांडणी करता आली पाहिजे. असे होत नाही की तुमच्याकडे अंकल सेरियोझा ​​आहेत जे संपूर्ण टीमसाठी डिझाइन करतात आणि तुम्ही फक्त स्क्रिप्ट लिहिता. त्यामुळे प्रत्येक विद्यार्थ्याने टाइपसेट कसे करावे हे त्याला कसे कळते हे दाखवले पाहिजे.
• JavaScript. जर हे प्रकरण मांडणीपुरते मर्यादित असेल तर आमच्याकडे इंटरफेस डेव्हलपमेंटची शाळा नसून लेआउट डिझाइनर्सची शाळा आहे. सुंदर डिझाइन केलेले इंटरफेस पुनरुज्जीवित करणे आवश्यक आहे. म्हणून, जेएससाठी नेहमीच एक कार्य असते, परंतु कधीकधी ते अल्गोरिदमसाठी देखील एक कार्य असते - आम्हाला ते खूप आवडतात.
• समस्या सोडवणे हे कदाचित विकसकाचे सर्वात महत्त्वाचे कौशल्य आहे. जेव्हा इंटरफेस तयार करण्याची वेळ येते तेव्हा गोष्टी खूप लवकर बदलत असतात. हे लुईस कॅरोलसारखे आहे: "तुम्हाला त्याच ठिकाणी राहण्यासाठी शक्य तितक्या वेगाने धावावे लागेल आणि दुसर्‍या ठिकाणी जाण्यासाठी तुम्हाला दुप्पट वेगाने धावावे लागेल." दररोज आम्ही नवीन तंत्रज्ञानाचा सामना करतो - आम्हाला ते विचारात घेणे आवश्यक आहे आणि ते समजून घेण्यास सक्षम असणे आवश्यक आहे. म्हणून, तिसऱ्या कार्यामध्ये, आम्ही अशा तंत्रज्ञानास समजून घेण्याचा प्रस्ताव दिला आहे ज्याशी नवशिक्या विकसक सहसा परिचित नसतात.

प्रत्येक कार्याच्या विश्लेषणामध्ये, आम्ही तुम्हाला केवळ योग्य प्रक्रियेबद्दलच नाही तर सामान्य चुकांबद्दल देखील सांगू.

कार्य 1: पोर्टफोलिओ

पहिले काम Yandex.Collections चे डिझायनर Alexey Cherenkevich द्वारे केले गेले होते, ज्याला लेआउट कसे करावे हे माहित आहे आणि त्यांचे सेवा सहकारी, इंटरफेस डेव्हलपर सेर्गेई सॅमसोनोव्ह.

अट

पोर्टफोलिओ वेबसाइट तयार करा: आम्हाला तुमच्याबद्दल, तुमच्या कामाबद्दल आणि शाळेकडून तुमच्या अपेक्षांबद्दल सांगा. साइटने प्रस्तावित लेआउटशी शक्य तितके अनुरूप असावे (लेआउटचे दुवे: 1000px, 600px, 320px, तपशील). आम्हाला फक्त लेआउटमध्ये रस आहे, म्हणून कृपया JavaScript वापरू नका.

तपासताना आम्ही विचारात घेऊ:

• इंडेंटेशन आकार, रंग अचूकता, फॉन्ट शैली, फॉन्ट आकार;
• सिमेंटिक लेआउट;
• घटकांच्या विविध अवस्थांची उपस्थिती: कर्सर फिरवत असताना बटणे आणि दुवे प्रदर्शित करणे, सक्रिय इनपुट फील्ड हायलाइट करणे इ.;
• क्रॉस-ब्राउझर सुसंगतता (लोकप्रिय ब्राउझरच्या नवीनतम आवृत्त्यांमध्ये चाचणी केली).

फायदा होईल:

• आधुनिक सीएसएस सोल्यूशन्सचा वापर: फ्लेक्सबॉक्स, ग्रिड इ.;
• अनुकूली मांडणी;
• प्री- आणि (किंवा) पोस्ट-प्रोसेसरचा वापर, असेंब्ली, मिनिफिकेशन, आउटपुट कोडचे ऑप्टिमायझेशन;
• HTML फॉर्म प्रमाणीकरण, शैलीकृत फाइल अपलोड बटण.

कार्य खूप मोठे आहे, म्हणून आपण जे कार्य करणार नाही ते वगळू शकता. यामुळे तुमचा स्कोअर किंचित कमी होईल, परंतु तरीही तुम्ही तुमचे ज्ञान प्रदर्शित करू शकाल. तुम्ही पूर्ण केल्यावर, आम्हाला दोन लिंक पाठवा - तुमच्या पोर्टफोलिओवर आणि GitHub वरील स्त्रोत कोड.

असाइनमेंटमध्ये प्रस्तावित मांडणी केवळ मोबाइल डिव्हाइस, टॅब्लेट आणि डेस्कटॉपसाठी स्क्रीनसह नव्हती तर वास्तविक वैशिष्ट्यांसह देखील होती.

पहिल्या कार्याच्या तपासणीच्या निकालात शक्य तितकी वस्तुनिष्ठता आणण्यासाठी, या तपासणीसाठी बरेच निकष होते.

निकष

डिझाइन केलेली वेबसाइट. हे स्पष्ट दिसते, परंतु काही लोकांनी काही ब्लॉक्स पूर्णपणे वगळले - एकतर त्यांना वेळ वाचवायचा होता किंवा ते ते करू शकले नाहीत. मांडणी साधारणपणे चार मुख्य स्क्रीनमध्ये विभागली जाऊ शकते: अवतार असलेली मुख्य स्क्रीन, SRI कडून अपेक्षांची यादी असलेला ब्लॉक, पोर्टफोलिओसह ब्लॉक आणि संपर्क माहितीसह ब्लॉक. ते विभागांमध्ये किंवा फक्त divs वापरून केले जाऊ शकतात, मुख्य गोष्ट म्हणजे सर्व चार ब्लॉक्स उपलब्ध होते.

लेआउटसह लेआउटचे अनुपालन. डिझायनरने उमेदवारांना सोपे जावे म्हणून वेगळे तपशील (रंग, टायपोग्राफी, बटन स्टेटस इ.) बनवले. तळाशी पहिल्या स्क्रीनच्या इंडेंट्स आणि वैशिष्ट्यांवर एक इशारा होता. मला त्या मुलांबद्दल खूप आनंद झाला ज्यांनी डिझाइनरच्या सर्व इच्छा विचारात घेतल्या: उदाहरणार्थ, पहिली स्क्रीन व्ह्यूपोर्टच्या उंचीपेक्षा कमी नसावी.

अनुकूली मांडणी - हे असे आहे जेव्हा इंटरफेस फक्त मांडला जात नाही जेणेकरून तीन रिझोल्यूशनवर सर्वकाही पिक्सेल ते पिक्सेल लेआउटमध्ये असेल. मध्यवर्ती राज्यांमध्ये, लेआउट देखील वेगळे होऊ नये. काही कंटेनरची कमाल रुंदी मर्यादित करण्यास विसरले आणि सर्वकाही 1920 पिक्सेलवर सेट केले, काहींनी पार्श्वभूमी गोंधळली, परंतु एकूणच उमेदवारांनी या कार्याचा चांगला सामना केला.

अर्थपूर्ण मांडणी. “त्यांनी जगाला किती वेळा सांगितले आहे” की लिंक अशी डिझाइन केलेली असावी , बटण – म्हणून . सुदैवाने, बहुतेक उमेदवारांनी ही आवश्यकता देखील पूर्ण केली. प्रत्येकाने एसआरआयच्या अपेक्षांमध्ये लपवलेली यादी ओळखली नाही, ती div टॅग वापरून बनवली आहे, परंतु ती इतकी वाईट नाही. एक उमेदवार होता ज्याने त्याला माहित असलेले सर्व सिमेंटिक टॅग घातले - कुठे ते आवश्यक होते आणि कुठे आवश्यक नव्हते. उदाहरणार्थ, सूचीऐवजी - आणि . शेवटी, शब्दार्थ - हे आपल्या पृष्ठाची रचना आणि प्रत्येक ब्लॉकचा हेतू समजून घेण्याबद्दल आहे (बहुसंख्य लोकांनी ते येथे व्यवस्थापित केले आहे), तसेच प्री- आणि / किंवा पोस्ट-प्रोसेसरचा वापर (काहींनी ते येथे व्यवस्थापित केले आहे, जरी हे पॉइंट्समध्ये देखील होते - बहुतेकदा ते कमी आणि scss वापरले).

कार्यरत स्लाइडर. असाइनमेंटमध्ये आम्ही लिहिले की JS वापरता येणार नाही. येथे समस्या सोडविण्याच्या क्षमतेची चाचणी घेण्यात आली - गुच्छ वापरून स्लाइडर तयार केला जाऊ शकतो आणि . सर्व जादू निवडक स्तरावर घडते #button-N:चेक केलेले ~ .slider-inner .slider-slides. जेव्हा आपण एका इनपुट चेकबॉक्सवर क्लिक करतो तेव्हा तो चेक केलेल्या स्थितीत जातो. आम्‍ही याचा फायदा घेऊ शकतो आणि स्‍लाइडसह कंटेनरला आवश्‍यक असलेले भाषांतर असाइन करू शकतो: transform: translate(-33%). तुम्ही स्लाइडरची अंमलबजावणी पाहू शकता येथे.

ड्रॉपडाउन सूची. येथे हे सर्व खाली आले आणि तत्सम निवडक: .accordion-item input:checked ~ .accordion-item__content. आपण अंमलबजावणी पाहू शकता येथे.

:hover, :active आणि :focu* स्थितींची उपलब्धता. एक अतिशय महत्त्वाचा मुद्दा. इंटरफेससह परस्परसंवाद दरम्यान आराम यावर अवलंबून असते. वापरकर्त्याला त्यांच्या कृतींबद्दल नेहमीच अभिप्राय प्राप्त झाला पाहिजे. प्रश्नावलीसह संपूर्ण संवादामध्ये हा आयटम तपासला गेला. जर मी “मला कॉल करा” बटणावर क्लिक केले आणि दृष्यदृष्ट्या काहीही झाले नाही (जरी विनंती पाठविली गेली होती तरीही), हे वाईट आहे, कारण नंतर मी त्यावर पुन्हा पुन्हा क्लिक करेन. परिणामी, दहा विनंत्या पाठवल्या जातील आणि मला दहा वेळा परत बोलावले जाईल. आपण हे विसरू नये की मोबाईल डिव्हाइसेसमध्ये माऊस नाही, याचा अर्थ असा होव्हर नसावा. आणि आणखी एक मुद्दा ज्याने शब्दार्थाविषयीचा मुद्दा पूर्ण केला त्यांच्यावर परिणाम झाला नाही. तुमचे नियंत्रण परस्परसंवादी घटक नसल्यास, तुम्ही त्यावर फिरता तेव्हा कर्सर मानक राहील. जरी आपण होवरवर प्रतिक्रिया लिहिली असली तरीही ते खूप अस्वच्छ दिसते. कर्सरला कमी लेखू नका: पॉइंटर.

अॅनिमेशन. घटकांसह होणार्‍या सर्व प्रतिक्रिया गुळगुळीत असणे महत्वाचे आहे. जीवनात कोणतीही गोष्ट तात्कालिक नसते, त्यामुळे इंटरफेस अधिक आनंददायी बनवण्यासाठी हॉवर आणि सक्रिय वर संक्रमणे असणे पुरेसे होते. बरं, ज्यांनी स्लायडर आणि याद्या अॅनिमेटेड केल्या आहेत ते साधारणपणे उत्तम असतात.

अत्याधुनिक तंत्रज्ञानाचा वापर. अनेकांनी फ्लेक्स वापरले, पण कोणीही ग्रिड वापरून काम पूर्ण केले नाही. फ्लेक्सचा योग्य वापर केल्यास पॉइंट मोजला जातो. या फ्लेक्समुळे कुठेतरी लेआउट वेगळे झाले असल्यास, अरेरे, तुम्हाला कोणतेही अतिरिक्त गुण मिळाले नाहीत.

फॉर्म प्रमाणीकरण. फॉर्मच्या प्रत्येक इनपुटमध्ये आवश्यक गुणधर्म जोडणे आवश्यक होते. ज्यांनी ईमेल फील्ड ईमेल म्हणून प्रमाणित केले त्यांना आम्ही गुण जोडले.

फाइल अपलोड बटणाची शैली करणे. आम्ही असे संयोजन पाहण्याची अपेक्षा केली आहे: आणि फाइल निवडा . पुढे आम्हाला इनपुट लपविण्याची आणि लेबलची शैली करणे आवश्यक आहे. आणखी एक सामान्य मार्ग आहे - पारदर्शक इनपुट बनवणे आणि ते बटणाच्या शीर्षस्थानी ठेवणे. परंतु सर्व ब्राउझर स्टाइलिंगला परवानगी देत ​​​​नाहीत , आणि अशा समाधानास पूर्णपणे क्रॉस-ब्राउझर म्हटले जाऊ शकत नाही. आणि शब्दार्थाने लेबल बनवणे अधिक योग्य आहे.

क्रॉस-ब्राउझर सुसंगतता. आम्ही तपासले की आधुनिक ब्राउझरच्या दोन नवीनतम आवृत्त्यांमध्ये (IE शिवाय - सहभागी भाग्यवान होते), तसेच iPhones वरील Safari आणि Androids वरील Chrome मध्ये सर्वकाही ठीक आहे.

याउलट, जर एखाद्याने जेएस किंवा बूटस्ट्रॅप वापरला असेल तर आम्ही गुण वजा केले: ते दोन्ही संपूर्ण कार्याचा उद्देश नष्ट करतील. शिवाय, बूटस्ट्रॅपसह सहभागींना केवळ उणेच मिळाले नाही, तर शब्दार्थ आणि अंमलात आणलेल्या घटकांसाठी अनेक गुण गमावले.

ज्यांनी त्यांची साइट इंटरनेटवर कुठेतरी होस्ट केली त्यांना कोणताही विशेष फायदा मिळाला नाही - परंतु पुनरावलोकनकर्त्यांना खूप आनंद झाला जेव्हा त्यांना रेपॉजिटरीज डाउनलोड करण्याची आणि त्यांच्या संगणकावर स्थानिक पातळीवर चालवण्याची गरज नव्हती. म्हणून हे कर्मासाठी एक प्लस म्हणून काम केले.

प्रथम कार्य प्रामुख्याने विद्यार्थ्यासाठी खूप उपयुक्त होते. ज्यांना आम्ही स्वीकारले नाही त्यांच्याकडे एक तयार बायोडाटा आहे - तुम्ही अभिमानाने ते सर्व प्रतिसादांना संलग्न करू शकता किंवा तुमच्या gh-पृष्ठांवर पोस्ट करू शकता.

कार्य 2: वाहतूक मार्ग

टास्कचे लेखक डेनिस बालिको या शोध इंटरफेस ग्रुपचे प्रमुख आहेत.

अट

तुमच्याकडे तारेचा नकाशा आहे का? हे प्रत्येक तार्‍याचे नाव तसेच इतर तार्‍यांचे अंतर प्रकाश सेकंदात दाखवते. सोल्यूशन फंक्शन लागू करा, ज्यामध्ये तीन युक्तिवाद असावेत: एक ऑब्जेक्ट ज्यामध्ये की तार्‍यांची नावे आहेत आणि मूल्ये म्हणजे तार्‍यांचे अंतर (अंतराळातील एकमार्गी वाहतूक), तसेच त्यांची नावे मार्गाचे प्रारंभ आणि शेवटचे बिंदू - अनुक्रमे प्रारंभ आणि समाप्त. फंक्शनने स्टार्ट स्टारपासून फिनिश स्टारपर्यंतचे सर्वात कमी अंतर आणि अनुसरण करण्याचा मार्ग परत केला पाहिजे.

कार्य स्वाक्षरी:

const solution = function(graph, start, finish)  {
    // Ваше решение
} 

उदाहरण इनपुट डेटा:

const graph = {
  start: { A: 50, B: 20 },
  A: { C: 40, D: 20 },
  B: { A: 90, D: 90 },
  C: { D: 160, finish: 50 },
  D: { finish: 20 },
  finish: {}
};
const start = 'start';
const finish = 'finish'; 

उदाहरण आउटपुट:

{
    distance: 90,
    path: ['start', 'A', 'D', 'finish']
} 

टीप: सोल्यूशन स्केलेटन src/ फोल्डरमध्ये आहे, तुमचे सोल्यूशन solution.js मध्ये टाका.

दुसऱ्या कार्याची पडताळणी सर्वात स्वयंचलित आणि वस्तुनिष्ठ होती. बहुतेक मुलांनी असा अंदाज लावला की Dijkstra च्या अल्गोरिदमची अंमलबजावणी करणे आवश्यक आहे. ज्यांना त्याचे वर्णन सापडले आणि JS मध्ये अल्गोरिदम लागू केले त्यांनी चांगले केले आहे. तथापि, असाइनमेंट तपासताना, आम्हाला समान त्रुटी असलेले अनेक पेपर आढळले. आम्ही कोडच्या तुकड्यांसाठी इंटरनेट शोधले आणि एक लेख सापडला ज्यामधून सहभागींनी अल्गोरिदम कॉपी केला. हे मजेदार आहे की बर्याच लोकांनी लेखातील कोड लेखकाच्या टिप्पण्यांसह कॉपी केला आहे. अशा कामांना कमी गुण मिळाले. आम्ही कोणत्याही स्त्रोतांचा वापर करण्यास मनाई करत नाही, परंतु एखाद्या व्यक्तीने तो काय लिहितो याचा अभ्यास करावा अशी आमची इच्छा आहे.

निकष

चाचणीसाठी मुख्य गुण देण्यात आले. कधीकधी हे स्पष्ट होते की मुले भांडारात गोंधळ घालत आहेत, फोल्डरचे नाव बदलत आहेत आणि आवश्यक फाइल्स न सापडल्यामुळे चाचण्या अयशस्वी होतील. या वर्षी आम्ही अशा लोकांना मदत करण्याचा प्रयत्न केला आणि त्यांच्यासाठी सर्वकाही त्याच्या जागी परत केले. परंतु पुढील वर्षी आम्ही स्पर्धा प्रणालीवर स्विच करण्याची योजना आखत आहोत आणि यापुढे यापुढे माफ केले जाणार नाही.

"मानवी", मॅन्युअल निकष देखील होते. उदाहरणार्थ, एकल कोड शैलीची उपस्थिती. रिक्त स्थानांऐवजी टॅब वापरण्यासाठी किंवा त्याउलट कोणीही गुण वजा केले नाहीत. तुम्हाला माहीत असलेल्या एका नियमानुसार तुम्ही दुहेरी अवतरणांसह पर्यायी एकल अवतरण आणि अर्धविराम यादृच्छिक ठेवल्यास ही आणखी एक बाब आहे.

समाधानाची स्पष्टता आणि वाचनीयता स्वतंत्रपणे विचारात घेतली गेली. जगातील सर्व परिषदांमध्ये ते म्हणतात की प्रोग्रामरच्या 80% कामात इतर लोकांचे कोड वाचणे असते. शाळकरी मुले देखील कोड पुनरावलोकने घेतात - त्यांच्या क्युरेटर्सकडून आणि एकमेकांकडून. त्यामुळे या निकषावर महत्त्वपूर्ण वजन आहे. अशी कामे होती ज्यामध्ये एक वर्णापेक्षा जास्त व्हेरिएबल्स नव्हते - कृपया असे करू नका. सहभागींच्या टिप्पण्या खूप उत्साहवर्धक होत्या - अपवाद वगळता त्या स्टेला चांगच्या टिप्पण्यांसारख्याच होत्या.

शेवटचा निकष ऑटोटेस्ट्सची उपस्थिती आहे. फक्त काही लोकांनी त्यांना जोडले, परंतु प्रत्येकासाठी ते त्यांच्या कर्मामध्ये एक मोठे प्लस बनले.

योग्य उपाय:

const solution = function(graph, START, FINISH)  {
    // Всё не бесплатно в этом мире
    const costs = Object.assign({[FINISH]: Infinity}, graph[START]);

    // Первая волна родительских нод
    const parents = { [FINISH]: null };
    Object.keys(graph[START]).reduce((acc, child) => (acc[child] = START) && acc, parents)

    const visited = [];
    let node;

    // Ищем «дешёвого» родителя, отмечаем пройденные
    do {
        node = lowestCostNode(costs, visited);
        let children = graph[node];
        for (let n in children) {
            let newCost = costs[node] + children[n];

            // Ещё не оценена или нашёлся более дешёвый переход
            if (!costs[n] || costs[n] > newCost) {
                costs[n] = newCost;
                parents[n] = node;
            }
        }
        visited.push(node);
    } while (node)

    return {
        distance: costs[FINISH],
        path: optimalPath(parents)
    };

    // Возврат назад по самым «дешёвым» родителям
    function optimalPath(parents) {
        let optimalPath = [FINISH];
        let parent = parents[FINISH];
        while (parent && parent !== START) {
            optimalPath.push(parent);
            parent = parents[parent];
        }
        optimalPath.push(START);
        return optimalPath.reverse();
    }

    // Минимальная стоимость из текущей ноды среди непросмотренных
    function lowestCostNode(costs, visited) {
        return Object.keys(costs).reduce((lowest, node) => {
            if (lowest === null || costs[node] < costs[lowest]) {
                if (!visited.includes(node)) {
                    lowest = node;
                }
            }

            return lowest;
        }, null);
    };
};

कार्य 3: इव्हेंट कॅलेंडर

हे इंटरफेस डेव्हलपर सेर्गेई काझाकोव्ह आणि अलेक्झांडर पॉडस्क्रेबकिन यांनी तयार केले होते.

अट

तुमचे वेळापत्रक प्रदर्शित करण्यासाठी एक मिनी-कॅलेंडर लिहा. तुम्हाला आवडणारे कोणतेही वेळापत्रक तुम्ही घेऊ शकता. उदाहरणार्थ, 2019 मधील फ्रंटएंड कॉन्फरन्सचे वेळापत्रक.

कॅलेंडर सूचीसारखे दिसले पाहिजे. इतर कोणत्याही डिझाइन आवश्यकता नाहीत. इव्हेंट स्मरणपत्रे 3, 7 आणि 14 दिवस अगोदर सेट करणे शक्य करा. इंटरनेटवरून प्रथम डाउनलोड केल्यानंतर, कॅलेंडर उघडले पाहिजे आणि ऑफलाइन कार्य केले पाहिजे.

उपयुक्त संसाधने

फ्रंटएंड कॉन्फरन्स शेड्यूल:
confs.tech/javascript?topics=javascript%2Bcss%2Bux

सेवा कर्मचारी:
developer.mozilla.org/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers
developers.google.com/web/fundamentals/primers/service-workers

सूचना API:
developer.mozilla.org/ru/docs/Web/API/Notifications_API

तिसरे कार्य चाचणीसाठी सर्वात मनोरंजक होते, कारण तेथे बरेच संभाव्य उपाय होते, प्रत्येकाचे स्वतःचे. उमेदवार अपरिचित तंत्रज्ञान कसे हाताळतो - त्याला संशोधन कसे करावे हे माहित आहे का, तो त्याच्या उपायांची चाचणी करतो का हे आम्ही तपासले.

निकष

दुमडलेले कॅलेंडर. होय, ते अद्याप मांडणे आवश्यक आहे. असे देखील होते ज्यांनी अट अगदी अक्षरशः घेतली आणि CSS कोडची एक ओळही टाकली नाही. ते फारसे आकर्षक दिसत नव्हते, परंतु सर्वकाही कार्य केल्यास, गुण कमी झाले नाहीत.

स्त्रोताकडून इव्हेंटची सूची मिळवणे. हे लेआउट कार्य नाही, म्हणून त्यात समाविष्ट केलेल्या कार्यक्रमांची यादी मोजली गेली नाही. तुम्ही नेहमी परिषद रद्द करू शकता, ते पुन्हा शेड्युल करू शकता किंवा नवीन जोडू शकता. त्यामुळे बाहेरून डेटा प्राप्त करणे आणि प्राप्त JSON च्या आधारे लेआउट प्रस्तुत करणे आवश्यक होते. कोणत्याही प्रकारे डेटा मिळवणे महत्त्वाचे होते (फेच पद्धत वापरून किंवा XMLHttpRequest वापरून). जर एखाद्या व्यक्तीने आणण्यासाठी पॉलीफिल जोडले असेल आणि रीडमीमध्ये त्याची निवड चिन्हांकित केली असेल, तर हे प्लस म्हणून गणले जाईल.

त्रुटींशिवाय सेवा कामगार नोंदणी आणि प्रथम डाउनलोड केल्यानंतर ऑफलाइन कार्य करा. येथे एक उदाहरण आहे पहिल्या बूटवर शेड्यूल कॅशिंगसह सेवा कर्मचारी. सेवा कर्मचार्‍यांचे तपशील, त्यांच्या क्षमता आणि त्यांच्यासोबत काम करण्याच्या पद्धती (कॅशेसह काम करण्यासाठी, ऑफलाइन काम करण्यासाठी धोरणे) येथे आढळू शकतात.

स्मरणपत्र सेट करण्याची क्षमताजेणेकरून ते 3, 7, 14 दिवसांनंतर प्रत्यक्षात काम करेल. सूचना API समजून घेणे आवश्यक होते, ज्याची लिंक कामावर योग्य होते. धक्का देण्याची वेळ आली आहे की नाही हे तपासण्यासाठी आम्ही कोणत्याही विशिष्ट अंमलबजावणीची अपेक्षा करत नव्हतो. कोणताही कार्यरत पर्याय स्वीकारला गेला: लोकल स्टोरेज, इंडेक्सडीबी मधील स्टोरेज किंवा सेवा कर्मचाऱ्याद्वारे नियतकालिक मतदान. पुश सर्व्हर बनवणे देखील शक्य होते (येथे उदाहरण), परंतु ते ऑफलाइन कार्य करणार नाही. पृष्ठ बंद केल्यानंतर - आणि काही वेळाने उघडल्यानंतर पुश प्राप्त करणे तितकेच महत्वाचे होते. जर पृष्ठ बंद केले त्याच वेळी स्मरणपत्र मरण पावले, तर उपाय मोजला जात नाही. जेव्हा मुलांनी पुनरावलोकनकर्त्यांबद्दल विचार केला आणि आत्ताच पुश मिळवणे शक्य केले तेव्हा ते छान आहे - जेणेकरून 3 दिवस प्रतीक्षा करू नये.

डेस्कटॉपवर चिन्ह ठेवण्याची क्षमता (पीडब्ल्यूए). आम्ही फाईलची उपस्थिती तपासली मॅनिफेस्ट.जेसन योग्य चिन्हांसह. काही लोकांनी ही फाईल बनवली (किंवा ती CreateReactApp मध्ये जनरेट केलेली सोडली) - परंतु योग्य चिन्ह जोडले नाहीत. नंतर, स्थापित करण्याचा प्रयत्न करताना, "वेगळा चिन्ह आवश्यक आहे" सारखी त्रुटी आली.

कोडस्टाइल आणि प्रोजेक्ट स्ट्रक्चर. दुस-या कार्याप्रमाणे, आम्ही एकाच कोडस्टाईलकडे पाहिले (जरी ते आमच्याशी जुळत नसले तरीही). काही मुलांनी लिंटरवर स्क्रू केले - ते छान आहे.

कन्सोल त्रुटी. जर कन्सोलमध्ये काहीतरी चुकीचे असल्याचे सूचक असेल आणि सहभागीने त्याकडे लक्ष दिले नाही तर आम्ही गुण वजा केले.

परिणाम

सहभागींच्या निर्णयांबद्दल काय मजेदार आहे:

• एका प्रश्नावलीमध्ये खालील मजकूर होता: “एका प्रोग्रामर मित्राने मला प्रतिक्रिया अनुप्रयोग एकत्र करण्यास मदत केली. मी त्याला कसे आणि का अशा प्रश्नांचा भडिमार केला आणि त्याने मला सांगितले. मला ते खूप आवडले, मला त्याबद्दल अधिक जाणून घ्यायचे आहे.” आम्ही मनापासून या अर्जासाठी रुजत होतो, परंतु दुर्दैवाने, उमेदवाराचा मित्र अर्ज कार्यात फारसा उपयोगी पडला नाही.
• एका उमेदवाराने GitHub वर एक लिंक पाठवली, जिथे RAR संग्रहण आहे - यावर टिप्पणी करणे कठीण आहे. 🙂
• दुसर्‍या उमेदवाराने, solution.js फाइलच्या पहिल्या ओळीवरील टिप्पणीमध्ये, प्रामाणिकपणे कबूल केले की त्याने अल्गोरिदम कॉपी केला आहे.

आम्हाला 76 उमेदवारांकडून अर्ज प्राप्त झाले आणि 23 जणांची निवड केली. आम्हाला केवळ मिन्स्कमधूनच नव्हे तर मॉस्को, सेंट पीटर्सबर्ग आणि अगदी तातारस्तानमधूनही प्रश्नावली पाठवण्यात आली. काही मुलांनी त्यांच्या सध्याच्या व्यवसायांमुळे आम्हाला आश्चर्यचकित केले: त्यापैकी एक फॉरेन्सिक तज्ञ आहे आणि दुसरा वैद्यकीय विद्यार्थी आहे.

परिणाम कार्ये पूर्ण करण्यात यश दरांचे मनोरंजक वितरण होते. सहभागींनी पहिले कार्य सरासरी 60%, दुसरे 50% ने पूर्ण केले आणि तिसरे सर्वात कठीण ठरले आणि ते सरासरी 40% ने पूर्ण केले.

पहिल्या दृष्टीक्षेपात, कार्ये जटिल आणि वेळ घेणारी दिसतात. याचे कारण असे नाही की आम्हाला शक्य तितक्या उमेदवारांना बाहेर काढायचे आहे. त्यांच्या अभ्यासादरम्यान, विद्यार्थ्यांना वास्तविक जीवनातील कार्यांचा सामना करावा लागतो - चॅट करणे, मुलांसाठी Yandex.Music किंवा हवामानावर अवलंबून असलेल्या लोकांसाठी Yandex.Weather. यासाठी तुम्हाला प्रारंभिक आधार आवश्यक आहे.

मला आठवते की दोन वर्षांपूर्वी माझे एसआरआय प्रवेशाचे कार्य पाहिले होते आणि मी ते कधीच सोडवणार नाही असा विचार केला होता. या क्षणी मुख्य गोष्ट म्हणजे खाली बसणे, काळजीपूर्वक अटी वाचा आणि ते करणे सुरू करा. असे दिसून आले की परिस्थितीमध्ये जवळजवळ 80% द्रावण असते. उदाहरणार्थ, तिसऱ्या कार्याच्या स्थितीत (सर्वात कठीण), आम्ही MDN वर सेवा कामगार आणि सूचना API च्या लिंक जोडल्या. ज्या विद्यार्थ्यांनी लिंक्सच्या सामग्रीचा अभ्यास केला त्यांनी ते कोणत्याही अडचणीशिवाय पूर्ण केले.

मला खरोखर हा लेख अशा उमेदवारांनी वाचायला आवडेल जे भविष्यात एसआरआयमध्ये प्रवेश करण्याची योजना आखत आहेत, जे मिन्स्क शाळेत प्रवेश करू शकले नाहीत किंवा जे इतर कोणतेही चाचणी कार्य करू लागले आहेत. जसे आपण पाहू शकता, तसे करणे अगदी शक्य आहे. आपल्याला फक्त स्वतःवर विश्वास ठेवण्याची आणि लेखकांच्या सर्व टिप्स ऐकण्याची आवश्यकता आहे.

स्त्रोत: www.habr.com