इन्टरफेस विकास विद्यालय: मिन्स्क र मास्को मा एक नयाँ सेट को लागि कार्यहरु को विश्लेषण

आज नयाँ भर्ना खुल्यो Yandex इन्टरफेस विकास स्कूल मास्को मा। प्रशिक्षणको पहिलो चरण सेप्टेम्बर ७ देखि अक्टोबर २५ सम्म हुनेछ। अन्य शहरका विद्यार्थीहरूले यसलाई टाढाबाट वा व्यक्तिगत रूपमा भाग लिन सक्षम हुनेछन् - कम्पनीले होस्टेलमा यात्रा र आवासको लागि भुक्तानी गर्नेछ। दोस्रो, अन्तिम चरण पनि, डिसेम्बर 7 सम्म रहनेछ, यो व्यक्तिगत रूपमा मात्र पूरा गर्न सकिन्छ।

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

मस्कोमा दर्ताको उद्घाटनको अवसरमा, हामी अघिल्लो विद्यालयको परिचयात्मक कार्यहरूको विश्लेषण प्रकाशित गर्दैछौं - यहाँ मिन्स्कमा।

यदि तपाईंले SRI असाइनमेन्टको इतिहास ट्रेस गर्नुभयो भने, वर्ष-वर्ष हामीले प्रोग्रामरका लागि तीनवटा महत्त्वपूर्ण सीपहरू परीक्षण गर्यौं:

• लेआउट। प्रत्येक विकासकर्ता लेआउट गर्न सक्षम हुनुपर्छ। यस्तो हुँदैन कि तपाईंसँग अंकल सेरियोजा हुनुहुन्छ जसले सम्पूर्ण टोलीको लागि डिजाइन गर्नुहुन्छ, र तपाईंले स्क्रिप्ट मात्र लेख्नुहुन्छ। त्यसकारण, प्रत्येक विद्यार्थीले कसरी टाइपसेट गर्न जान्दछन् भनेर देखाउनुपर्दछ।
• जाभास्क्रिप्ट। यदि कुरा लेआउटमा मात्र सीमित थियो भने, हामीसँग इन्टरफेस विकासको विद्यालय छैन, तर लेआउट डिजाइनरहरूको विद्यालय हुनेछ। सुन्दर ढंगले डिजाइन गरिएको इन्टरफेसलाई पुनर्जीवित गर्न आवश्यक छ। त्यसकारण, JS को लागी सधैं एउटा कार्य हुन्छ, तर कहिलेकाहीँ यो एल्गोरिदमको लागि पनि कार्य हो - हामी तिनीहरूलाई धेरै माया गर्छौं।
• समस्या समाधान सम्भवतः विकासकर्ताको सबैभन्दा महत्त्वपूर्ण कौशल हो। जब यो इन्टरफेसहरू सिर्जना गर्न आउँछ, चीजहरू धेरै चाँडै परिवर्तन हुँदैछन्। यो लुइस क्यारोल जस्तै हो: "तपाईले एकै ठाउँमा बस्नको लागि जति छिटो दौडनु पर्छ, र अर्को ठाउँमा पुग्नको लागि तपाईले दोब्बर छिटो दौड्नु पर्छ।" हरेक दिन हामी नयाँ प्रविधिहरू भेट्छौं - हामीले तिनीहरूलाई ध्यानमा राख्न र तिनीहरूलाई बुझ्न सक्षम हुन आवश्यक छ। त्यसकारण, तेस्रो कार्यमा, हामीले प्राविधिकहरू बुझ्न प्रस्ताव गरेका थियौं जुन एक नौसिखिया विकासकर्ता सामान्यतया परिचित हुँदैन।

प्रत्येक कार्यको विश्लेषणमा, हामी तपाईंलाई सही प्रक्रियाको बारेमा मात्र होइन, तर सामान्य गल्तीहरूको बारेमा पनि बताउनेछौं।

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

पहिलो कार्य Yandex.Collections डिजाइनर Alexey Cherenkevich, जसले लेआउट कसरी गर्ने भनेर जान्दछन्, र उनको सेवा सहयोगी, इन्टरफेस विकासकर्ता Sergey Samsonov द्वारा काम गरिएको थियो।

सर्त

एउटा पोर्टफोलियो वेबसाइट बनाउनुहोस्: हामीलाई आफ्नो, आफ्नो काम र विद्यालयबाट आफ्ना अपेक्षाहरू बारे बताउनुहोस्। साइटले प्रस्तावित रूपरेखासँग सकेसम्म मिल्दोजुल्दो हुनुपर्छ (लेआउटहरूको लिङ्क: 1000px, 600px, 320px, विशिष्टता)। हामी लेआउटमा मात्र रुचि राख्छौं, त्यसैले कृपया JavaScript प्रयोग नगर्नुहोस्।

जाँच गर्दा हामी खातामा लिनेछौं:

• इन्डेन्टेशन आकार, रंग शुद्धता, फन्ट शैली, फन्ट आकार;
• अर्थ लेआउट;
• तत्वहरूको विभिन्न अवस्थाहरूको उपस्थिति: कर्सर होभर गर्दा बटनहरू र लिङ्कहरू प्रदर्शन गर्दै, सक्रिय इनपुट क्षेत्रहरू हाइलाइट गर्दै, आदि।
• क्रस-ब्राउजर अनुकूलता (लोकप्रिय ब्राउजरहरूको नवीनतम संस्करणहरूमा परीक्षण गरिएको)।

फाइदा हुनेछ:

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

कार्य एकदम ठूलो छ, त्यसैले तपाईले काम नगर्ने कुरा छोड्न सक्नुहुन्छ। यसले तपाइँको स्कोर अलि कम गर्नेछ, तर तपाइँ अझै पनि तपाइँको ज्ञान प्रदर्शन गर्न सक्षम हुनुहुनेछ। तपाईंले सकिसकेपछि, हामीलाई दुई लिङ्कहरू पठाउनुहोस् - तपाईंको पोर्टफोलियो र GitHub मा स्रोत कोड।

असाइनमेन्टमा प्रस्तावित लेआउटहरू मोबाइल उपकरणहरू, ट्याब्लेटहरू र डेस्कटपहरूका लागि स्क्रिनहरू मात्र होइन, तर वास्तविक विशिष्टताहरूसँग पनि थिए।

पहिलो कार्य जाँचको परिणाममा सकेसम्म धेरै वस्तुनिष्ठता ल्याउन, यस जाँचको लागि धेरै मापदण्डहरू थिए।

मापदण्ड

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

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

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

सिमेन्टिक लेआउट। "उनीहरूले संसारलाई कति पटक भनेका छन्" कि लिङ्कको रूपमा डिजाइन गरिएको हुनुपर्छ , बटन - रूपमा । सौभाग्य देखि, धेरै उम्मेद्वारहरूले यो आवश्यकता पनि पूरा गरे। सबैले एसआरआईको अपेक्षाहरूमा लुकेको सूची पहिचान गरेनन्, यसलाई div ट्यागहरू प्रयोग गरेर बनाउँदै, तर यो त्यति खराब छैन। त्यहाँ एक उम्मेद्वार थियो जसले सबै सिमान्टिक ट्यागहरू सम्मिलित गर्यो उसलाई थाहा थियो - जहाँ यो आवश्यक थियो र जहाँ यो आवश्यक थिएन। उदाहरणका लागि, सूचीको सट्टा - र । आखिर, सिमान्टिक्स - यो तपाइँको पृष्ठको संरचना र प्रत्येक ब्लकको उद्देश्य (बहुसंख्यकले यसलाई यहाँ व्यवस्थित गरेका छन्), साथै पूर्व- र / वा पोस्ट-प्रोसेसरहरूको प्रयोग (केहीले यसलाई यहाँ व्यवस्थित गरेका छन्, यद्यपि यो बिन्दुहरूमा पनि थियो - प्रायः तिनीहरूले कम र scss प्रयोग गरे)।

काम गर्ने स्लाइडर। असाइनमेन्टमा हामीले JS प्रयोग गर्न सकिँदैन भनेर लेख्यौं। यहाँ समस्याहरू समाधान गर्ने क्षमता परीक्षण गरिएको थियो - एक गुच्छा प्रयोग गरेर स्लाइडर बनाउन सकिन्छ र । सबै जादू चयनकर्ता स्तर #button-N:चेक गरिएको ~ .slider-inner .slider-slides मा हुन्छ। जब हामी कुनै एक इनपुट चेकबक्समा क्लिक गर्छौं, यो चेक गरिएको अवस्थामा जान्छ। हामी यसको फाइदा लिन सक्छौं र कन्टेनरमा आवश्यक पर्ने अनुवादलाई स्लाइडहरू: रूपान्तरण: अनुवाद(-33%) को साथमा नियुक्त गर्न सक्छौं। तपाईले स्लाइडरको कार्यान्वयन देख्न सक्नुहुन्छ यहाँ.

ड्रपडाउन सूचीहरू। यहाँ पनि यो सबै तल आयो र समान चयनकर्ता: .accordion-item input:checked ~ .accordion-item__content। तपाईं कार्यान्वयन देख्न सक्नुहुन्छ यहाँ.

: hover, :active र :focu* अवस्थाहरूको उपलब्धता। एक धेरै महत्त्वपूर्ण बिन्दु। इन्टरफेस संग अन्तरक्रिया को समयमा आराम यो निर्भर गर्दछ। प्रयोगकर्ताले सधैं आफ्नो कार्यहरूमा प्रतिक्रिया प्राप्त गर्नुपर्छ। यो वस्तु प्रश्नावली संग अन्तरक्रिया भर जाँच गरियो। यदि मैले "मलाई कल गर्नुहोस्" बटन क्लिक गरें र नेत्रहीन रूपमा केहि भएन (अनुरोध पठाइएको भए तापनि), यो नराम्रो छ, किनकि त्यसपछि म यसलाई बारम्बार क्लिक गर्नेछु। नतिजाको रूपमा, दस अनुरोधहरू पठाइनेछ र मलाई दस पटक फिर्ता बोलाइनेछ। हामीले बिर्सनु हुँदैन कि मोबाइल उपकरणहरूमा माउस छैन, जसको मतलब त्यहाँ होभर हुनु हुँदैन। र अर्को एउटा बिन्दु जसले अर्थशास्त्रको बारेमा बिन्दु पूरा गर्नेहरूलाई असर गर्दैन। यदि तपाइँको नियन्त्रण अन्तरक्रियात्मक तत्व होइन भने, तपाइँ यसलाई होभर गर्दा, कर्सर मानक रहनेछ। तपाईंले होभरमा प्रतिक्रिया लेख्नुभएको भए तापनि यो धेरै अव्यवस्थित देखिन्छ। कर्सरलाई कम नठान्नुहोस्: सूचक।

एनिमेसनहरू। यो महत्त्वपूर्ण छ कि तत्वहरूसँग हुने सबै प्रतिक्रियाहरू सहज छन्। जीवनमा कुनै पनि कुरा तात्कालिक हुँदैन, त्यसैले होभरमा ट्रान्जिसन हुनु र सक्रिय हुनु इन्टरफेसलाई अझ रमाइलो बनाउन पर्याप्त थियो। खैर, स्लाइडर र सूचीहरू एनिमेटेड गर्नेहरू सामान्यतया उत्कृष्ट हुन्छन्।

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

फारम प्रमाणीकरण। फारमको प्रत्येक इनपुटमा आवश्यक विशेषता थप्न आवश्यक थियो। हामीले इमेल फिल्डलाई इमेलको रूपमा मान्य गर्नेहरूलाई अंक थप्यौं।

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

क्रस-ब्राउजर अनुकूलता। हामीले जाँच गर्यौं कि आधुनिक ब्राउजरहरूका दुई नयाँ संस्करणहरूमा (IE बिना - सहभागीहरू भाग्यशाली थिए), साथै iPhones मा Safari र Androids मा Chrome मा सबै कुरा ठीक छ।

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

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

पहिलो कार्य मुख्य रूपमा विद्यार्थीको लागि धेरै उपयोगी थियो। जसलाई हामीले स्वीकार गरेनौं तिनीहरूसँग अहिले तयार गरिएको बायोडाटा छ - तपाईं गर्वका साथ सबै प्रतिक्रियाहरूमा संलग्न गर्न सक्नुहुन्छ वा तपाईंको gh-पृष्ठहरूमा पोस्ट गर्न सक्नुहुन्छ।

कार्य २: यातायात मार्ग

कार्य को लेखक खोज इन्टरफेस समूह डेनिस Balyko को प्रमुख हो।

सर्त

के तपाईंसँग ताराको नक्सा छ? यसले प्रत्येक ताराको नाम, साथै प्रकाश सेकेन्डमा अन्य ताराहरूको दूरी देखाउँछ। समाधान प्रकार्य लागू गर्नुहोस्, जसले तीन तर्कहरू लिनुपर्दछ: एउटा वस्तु जसमा कुञ्जीहरू ताराहरूको नामहरू हुन्, र मानहरू ताराहरूको दूरीहरू हुन् (अन्तरिक्षमा एकतर्फी यातायात), साथै नामहरू मार्गको सुरु र अन्त्य बिन्दुहरू - क्रमशः सुरु र समाप्त। प्रकार्यले सुरु ताराबाट अन्तिम तारा र पछ्याउने मार्गमा सबैभन्दा छोटो दूरी फर्काउनु पर्छ।

कार्य हस्ताक्षर:

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/ फोल्डरमा छ, समाधान.js मा आफ्नो समाधान राख्नुहोस्।

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

मापदण्ड

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

त्यहाँ "मानव", म्यानुअल मापदण्ड पनि थिए। उदाहरण को लागी, एकल कोड शैली को उपस्थिति। खाली ठाउँको सट्टा ट्याबहरू प्रयोग गर्न वा यसको विपरित प्रयोगको लागि कसैले अंकहरू कटौती गरेन। यो अर्को कुरा हो यदि तपाइँ तपाइँलाई थाहा भएको एक नियम अनुसार डबल उद्धरण संग वैकल्पिक एकल उद्धरण, र अनियमित मा अर्धविराम राख्नुहोस्।

समाधानको स्पष्टता र पठनीयता अलग-अलग खातामा लिइएको थियो। संसारका सबै सम्मेलनहरूमा तिनीहरू भन्छन् कि प्रोग्रामरको कामको 80% अन्य व्यक्तिको कोड पढ्नु हो। स्कूलका बच्चाहरूले पनि कोड समीक्षाहरू पार गर्छन् - तिनीहरूका क्युरेटरहरू र एकअर्काबाट। त्यसैले यो मापदण्डले महत्त्वपूर्ण वजन बोकेको छ। त्यहाँ कामहरू थिए जसमा एक वर्ण भन्दा लामो चरहरू थिएनन् - कृपया त्यसो नगर्नुहोस्। सहभागीहरूका टिप्पणीहरू धेरै उत्साहजनक थिए - स्टेला चाङका टिप्पणीहरूसँग मिल्दोजुल्दो बाहेक।

अन्तिम मापदण्ड autotests को उपस्थिति हो। केवल केहि मानिसहरूले तिनीहरूलाई थपे, तर सबैको लागि यो तिनीहरूको कर्ममा ठूलो प्लस भयो।

सही समाधान:

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);
    };
};

कार्य ३: घटनाक्रम क्यालेन्डर

यो इन्टरफेस विकासकर्ता Sergey Kazakov र अलेक्जेंडर Podskrebkin द्वारा तयार गरिएको थियो।

सर्त

आफ्नो तालिका प्रदर्शन गर्न एक मिनी क्यालेन्डर लेख्नुहोस्। तपाइँ तपाइँलाई मनपर्ने कुनै पनि तालिका लिन सक्नुहुन्छ। उदाहरण को लागी, 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 बुझ्न आवश्यक थियो, जसको लिङ्क काममा सही थियो। हामीले कुनै विशेष कार्यान्वयनको अपेक्षा गरेका थिएनौं कि यो धकेल्ने समय हो कि छैन। कुनै पनि काम गर्ने विकल्प स्वीकार गरियो: स्थानीय भण्डारणमा भण्डारण, IndexDB वा सेवा कार्यकर्ताद्वारा आवधिक मतदान। यो एक पुश सर्भर बनाउन पनि सम्भव थियो (यहाँ एक उदाहरण), तर यसले अफलाइन काम गर्दैन। पृष्ठ बन्द भएपछि - र केहि समय पछि खोलिए पछि धक्का प्राप्त गर्न समान रूपमा महत्त्वपूर्ण थियो। यदि रिमाइन्डर एकै समयमा पृष्ठ बन्द भएको थियो भने, समाधान गणना गरिएको थिएन। यो राम्रो छ जब केटाहरूले समीक्षकहरूको बारेमा सोचेका थिए र यसलाई अहिले नै धक्का प्राप्त गर्न सम्भव बनाउनुभयो - ताकि 3 दिन पर्खनु पर्दैन।

डेस्कटपमा प्रतिमा राख्ने क्षमता (PWA)। हामीले फाइलको उपस्थिति जाँच गर्यौं manifest.json सही आइकनहरूको साथ। केही केटाहरूले यो फाइल बनाएका छन् (वा यसलाई CreateReactApp मा उत्पन्न गरिएको छोडे) - तर सही आइकनहरू थपेका छैनन्। त्यसपछि, स्थापना गर्ने प्रयास गर्दा, "एउटा फरक आइकन आवश्यक छ" जस्तो त्रुटि देखा पर्‍यो।

कोडस्टाइल र परियोजना संरचना। दोस्रो कार्यमा जस्तै, हामीले एकल कोडस्टाइलमा हेर्‍यौं (यद्यपि यो हाम्रोसँग मेल खाँदैन)। केही केटाहरूले linters मा पेच - त्यो राम्रो छ।

कन्सोल त्रुटिहरू। यदि कन्सोलमा सही संकेतक थियो कि केहि गलत थियो, र सहभागीले ध्यान दिएनन्, त्यसपछि हामीले अंकहरू कटौती गर्यौं।

परिणामहरू

सहभागीहरूको निर्णयको बारेमा के हास्यास्पद छ:

• एउटा प्रश्नावलीमा निम्न पाठ समावेश थियो: “एक प्रोग्रामर साथीले मलाई प्रतिक्रिया एप्लिकेसन सँगै राख्न मद्दत गर्नुभयो। मैले उसलाई कसरी र किन भन्ने प्रश्नहरूको साथ बमबारी गरे, र उसले मलाई भन्यो। मलाई यो साँच्चै मन पर्यो, म यसको बारेमा थप जान्न चाहन्छु। हामी हाम्रो सबै हृदयले यो अनुप्रयोगको लागि रुट गर्दै थियौं, तर दुर्भाग्यवश, उम्मेदवारको साथीले अनुप्रयोगलाई काम गर्न धेरै सहयोगी भएन।
• एक उम्मेद्वारले GitHub मा लिङ्क पठाए, जहाँ RAR अभिलेख अवस्थित थियो - यसमा टिप्पणी गर्न गाह्रो छ। 🙂
• अर्को उम्मेद्वार, solution.js फाइलको पहिलो लाइनमा टिप्पणीमा, इमानदारीपूर्वक स्वीकार गरे कि उसले एल्गोरिथ्म प्रतिलिपि गरेको छ।

हामीले ७६ जना उम्मेदवारहरूबाट आवेदन प्राप्त गरेका छौं र २३ जनालाई छनोट गरेका छौं। हामीलाई मिन्स्कबाट मात्र होइन, मस्को, सेन्ट पिटर्सबर्ग र टाटारस्तानबाट पनि प्रश्नावली पठाइयो। केही केटाहरूले हामीलाई उनीहरूको हालको पेशाहरूबाट आश्चर्यचकित पारे: तिनीहरूमध्ये एक फोरेंसिक विशेषज्ञ हो, र अर्को एक मेडिकल विद्यार्थी हो।

परिणाम कार्यहरू पूरा गर्न सफलता दरहरूको एक रोचक वितरण थियो। सहभागीहरूले पहिलो कार्य औसत 60%, दोस्रो 50%, र तेस्रो सबैभन्दा गाह्रो भयो र 40% को औसत द्वारा पूरा भयो।

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

मलाई दुई वर्षअघि मेरो एसआरआई प्रवेश कार्य देखेको र म यसलाई कहिल्यै समाधान गर्ने छैन भन्ने सोचिरहेको छु। यस क्षणमा मुख्य कुरा भनेको बस्नु हो, ध्यानपूर्वक सर्तहरू पढ्नुहोस् र यो गर्न सुरु गर्नुहोस्। यो बाहिर जान्छ कि सर्तहरूले समाधान को लगभग 80% समावेश गर्दछ। उदाहरणका लागि, तेस्रो कार्य (सबैभन्दा गाह्रो) को अवस्थामा, हामीले MDN मा सेवाकर्मी र सूचना API मा लिङ्कहरू थपेका छौं। लिङ्कहरूको सामग्रीहरू अध्ययन गर्ने विद्यार्थीहरूले यसलाई बिना कठिनाई पूरा गरे।

म यो लेख भविष्यमा SRI मा प्रवेश गर्ने योजनामा ​​रहेका, मिन्स्क स्कूलमा प्रवेश गर्न असमर्थ भएका वा अन्य कुनै परीक्षण कार्य गर्न थालेका उम्मेद्वारहरूले पढून् भन्ने चाहन्छु। तपाईं देख्न सक्नुहुन्छ, यो गर्न धेरै सम्भव छ। तपाईंले भर्खरै आफैमा विश्वास गर्न र लेखकहरूबाट सबै सुझावहरू सुन्न आवश्यक छ।

स्रोत: www.habr.com