ინტერფეისის განვითარების სკოლა: ამოცანების ანალიზი მინსკისთვის და ახალი ნაკრები მოსკოვში

დღეს გაიხსნა ახალი რეგისტრაცია Yandex ინტერფეისის განვითარების სკოლა მოსკოვში. ტრენინგის პირველი ეტაპი ჩატარდება 7 სექტემბრიდან 25 ოქტომბრის ჩათვლით. მასში მონაწილეობა დისტანციურად ან პირადად შეძლებენ სხვა ქალაქების სტუდენტებს - კომპანია გადაიხდის მგზავრობასა და ჰოსტელში განთავსებას. მეორე, ასევე დასკვნითი ეტაპი 3 დეკემბრამდე გაგრძელდება, მისი დასრულება მხოლოდ პირადადაა შესაძლებელი.

მე მქვია იულია სერედიჩი, ეს პოსტი სერგეი კაზაკოვთან ერთად დავწერეთ. ჩვენ ორივე ინტერფეისის დეველოპერები ვართ Yandex-ის მინსკის ოფისში და SRI-ის კურსდამთავრებულები წინა წლებში.

მოსკოვში რეგისტრაციის გახსნასთან დაკავშირებით, ვაქვეყნებთ წინა სკოლის შესავალი ამოცანების ანალიზს - აქ, მინსკში.

თუ თვალყურს ადევნებთ SRI დავალებების ისტორიას, წლიდან წლამდე ვამოწმებდით პროგრამისტებისთვის სამ მნიშვნელოვან უნარს:

• განლაგება. ყველა დეველოპერს უნდა შეეძლოს განლაგების გაკეთება. ისე არ ხდება, რომ გყავს ძია სეროჟა, რომელიც მთელი გუნდისთვის აწყობს დიზაინს და შენ მხოლოდ სკრიპტებს წერ. ამიტომ, თითოეულმა მოსწავლემ უნდა აჩვენოს, როგორ იცის აკრეფა.
• JavaScript. თუ საქმე მხოლოდ განლაგებით შემოიფარგლებოდა, მაშინ ჩვენ გვექნებოდა არა ინტერფეისის განვითარების სკოლა, არამედ განლაგების დიზაინერების სკოლა. ლამაზად შექმნილი ინტერფეისი უნდა აღორძინდეს. ამიტომ, JS-ისთვის ყოველთვის არის დავალება, მაგრამ ზოგჯერ ის ასევე არის ამოცანა ალგორითმებისთვის - ჩვენ ისინი ძალიან გვიყვარს.
• პრობლემის გადაჭრა დეველოპერის ალბათ ყველაზე მნიშვნელოვანი უნარია. რაც შეეხება ინტერფეისების შექმნას, ყველაფერი ძალიან სწრაფად იცვლება. ეს ჰგავს ლუის კეროლს: „უნდა ირბინო რაც შეიძლება სწრაფად, რომ დარჩე ერთსა და იმავე ადგილას, ხოლო სხვა ადგილზე მისასვლელად ორჯერ უფრო სწრაფად უნდა ირბინო“. ყოველდღიურად ვხვდებით ახალ ტექნოლოგიებს – უნდა გავითვალისწინოთ ისინი და შეგვეძლოს მათი გაგება. ამიტომ, მესამე დავალებაში შევთავაზეთ ტექნოლოგიების გაგება, რომლებსაც დამწყები დეველოპერი ჩვეულებრივ არ იცნობს.

თითოეული დავალების ანალიზისას მოგიყვებით არა მხოლოდ სწორი პროცედურის, არამედ გავრცელებული შეცდომების შესახებ.

ამოცანა 1: პორტფოლიო

პირველ ამოცანაზე მუშაობდნენ Yandex.Collections-ის დიზაინერი ალექსეი ჩერენკევიჩი, რომელმაც იცის როგორ გააკეთოს განლაგება და მისმა კოლეგამ, ინტერფეისის დეველოპერმა სერგეი სამსონოვმა.

მდგომარეობა

შექმენით პორტფელის ვებსაიტი: გვითხარით თქვენს შესახებ, თქვენს საქმიანობაზე და თქვენს მოლოდინებზე სკოლისგან. საიტი მაქსიმალურად უნდა შეესაბამებოდეს შემოთავაზებულ განლაგებას (ბმულები განლაგებაზე: 1000px, 600px, 320px, სპეციფიკაცია). ჩვენ მხოლოდ განლაგება გვაინტერესებს, ამიტომ გთხოვთ არ გამოიყენოთ JavaScript.

შემოწმებისას გავითვალისწინებთ:

• ჩაღრმავების ზომები, ფერის სისწორე, შრიფტის სტილი, შრიფტის ზომა;
• სემანტიკური განლაგება;
• ელემენტების სხვადასხვა მდგომარეობების არსებობა: ღილაკებისა და ბმულების ჩვენება კურსორის ატარებისას, აქტიური შეყვანის ველების ხაზგასმა და ა.შ.;
• ჯვარედინი ბრაუზერის თავსებადობა (შემოწმებულია პოპულარული ბრაუზერების უახლეს ვერსიებში).

უპირატესობა იქნება:

• თანამედროვე CSS გადაწყვეტილებების გამოყენება: flexbox, grid და ა.შ.;
• ადაპტური განლაგება;
• წინასწარ და (ან) პოსტპროცესორების გამოყენება, აწყობა, მინიფიკაცია, გამომავალი კოდის ოპტიმიზაცია;
• HTML ფორმის ვალიდაცია, სტილიზებული ფაილის ატვირთვის ღილაკი.

ამოცანა საკმაოდ მოცულობითია, ასე რომ თქვენ შეგიძლიათ გამოტოვოთ ის, რაც არ იმუშავებს. ეს ოდნავ შეამცირებს თქვენს ქულას, მაგრამ მაინც შეძლებთ თქვენი ცოდნის დემონსტრირებას. როდესაც დაასრულებთ, გამოგვიგზავნეთ ორი ბმული - თქვენს პორტფოლიოში და წყაროს კოდი GitHub-ზე.

დავალებაში შემოთავაზებული განლაგება იყო არა მხოლოდ მობილური მოწყობილობების, პლანშეტებისა და დესკტოპის ეკრანებით, არამედ რეალური სპეციფიკაციებით.

პირველი დავალების შემოწმების შედეგში რაც შეიძლება მეტი ობიექტურობა შემოტანილიყო, ამ შემოწმების უამრავი კრიტერიუმი იყო.

კრიტერიუმები

შექმნილია საიტი. ეს აშკარად ჩანს, მაგრამ ზოგიერთმა ბიჭმა მთლიანად გამოტოვა რამდენიმე ბლოკი - ან სურდათ დროის დაზოგვა, ან ვერ შეძლეს. განლაგება შეიძლება უხეშად დაიყოს ოთხ მთავარ ეკრანად: მთავარი ეკრანი ავატარით, ბლოკი SRI-ს მოლოდინების სიით, ბლოკი პორტფოლიოთი და ბლოკი საკონტაქტო ინფორმაციათ. მათი დამზადება შეიძლებოდა სექციებად ან უბრალოდ div-ების გამოყენებით, მთავარია, რომ ოთხივე ბლოკი იყო ხელმისაწვდომი.

განლაგების განლაგებასთან შესაბამისობა. დიზაინერმა შექმნა ცალკე სპეციფიკაცია (მათ შორის ფერები, ტიპოგრაფია, ღილაკების მდგომარეობები და ა.შ.) კანდიდატებისთვის გასაადვილებლად. ბოლოში იყო მინიშნება პირველი ეკრანის ჭრილებსა და მახასიათებლებზე. ძალიან კმაყოფილი ვიყავი ბიჭებით, რომლებმაც გაითვალისწინეს დიზაინერის ყველა სურვილი: მაგალითად, პირველი ეკრანი არანაკლებ უნდა ყოფილიყო ხედის სიმაღლეზე.

ადაპტური განლაგება - ეს არის მაშინ, როდესაც ინტერფეისი უბრალოდ არ არის განლაგებული ისე, რომ სამი რეზოლუციით ყველაფერი პიქსელიდან პიქსელამდე იყოს განლაგებით. შუალედურ მდგომარეობებში განლაგებაც არ უნდა იშლება. ზოგს დაავიწყდა კონტეინერის მაქსიმალური სიგანის შეზღუდვა და ყველაფერი 1920 პიქსელზე დააყენა, ზოგმა გააფუჭა ფონი, მაგრამ მთლიანობაში კანდიდატებმა კარგად გაართვეს თავი ამ ამოცანას.

სემანტიკური განლაგება. "რამდენჯერ უთხრეს მათ მსოფლიოს" რომ ბმული უნდა იყოს შექმნილი როგორც , ღილაკი - როგორც . საბედნიეროდ, კანდიდატების უმეტესობამ შეასრულა ეს მოთხოვნაც. ყველამ არ აღიარა ფარული სია SRI-ს მოლოდინებში, რაც მას div ტეგების გამოყენებით აქცევს, მაგრამ ეს არც ისე ცუდია. იყო კანდიდატი, რომელმაც ჩადო ყველა ის სემანტიკური ტეგი, რომელიც იცოდა - სად იყო საჭირო და სად არა. მაგალითად, სიის ნაცვლად - და . ყოველივე ამის შემდეგ, სემანტიკა - ეს არის თქვენი გვერდის შემადგენლობისა და თითოეული ბლოკის მიზნის გაგება (უმრავლესობამ მოახერხა ეს აქ), ასევე წინასწარ და/ან პოსტპროცესორების გამოყენებას (რამდენიმემ მოახერხა აქ, თუმცა ეს ასევე იყო პუნქტებში - ყველაზე ხშირად იყენებდნენ ნაკლებს და სსსს) .

სამუშაო სლაიდერი. დავალებაში დავწერეთ, რომ JS-ის გამოყენება შეუძლებელია. აქ გამოსცადეს პრობლემების გადაჭრის უნარი - სლაიდერის დამზადება შეიძლებოდა მტევნის გამოყენებით და . ყველა მაგია ხდება სელექტორის დონეზე #ღილაკი-N:შემოწმებული ~ .slider-inner .slider-slides. როდესაც ჩვენ ვაწკაპუნებთ ერთ-ერთ შეყვანის ველზე, ის გადადის შემოწმებულ მდგომარეობაში. ჩვენ შეგვიძლია ვისარგებლოთ ამით და მივაკუთვნოთ ჩვენთვის საჭირო თარგმანი კონტეინერს სლაიდებით: transform: translate(-33%). თქვენ შეგიძლიათ ნახოთ სლაიდერის განხორციელება აქ.

ჩამოსაშლელი სიები. აქაც ჩამოვიდა ეს ყველაფერი და მსგავსი ამომრჩევი: .აკორდეონი-პუნქტის შეყვანა:შემოწმებული ~ .აკორდეონი-საქონელი__შიგთავსი. თქვენ შეგიძლიათ ნახოთ განხორციელება აქ.

:hover, :active და :focu* მდგომარეობების ხელმისაწვდომობა. ძალიან მნიშვნელოვანი წერტილი. მასზე იყო დამოკიდებული კომფორტი ინტერფეისთან ურთიერთობისას. მომხმარებელმა ყოველთვის უნდა მიიღოს გამოხმაურება მის ქმედებებზე. ეს პუნქტი შემოწმდა კითხვართან ურთიერთქმედების განმავლობაში. თუ დავაჭირე ღილაკს „დამირეკე“ და ვიზუალურად არაფერი მომხდარა (მიუხედავად იმისა, რომ მოთხოვნა გაიგზავნა), ეს ცუდია, რადგან მერე ისევ და ისევ დავაწკაპუნებ. შედეგად, ათი მოთხოვნა გაიგზავნება და ათჯერ დამირეკავენ. არ უნდა დაგვავიწყდეს, რომ მობილურ მოწყობილობებს არ აქვთ მაუსი, რაც ნიშნავს, რომ არ უნდა იყოს მაუსი. და კიდევ ერთი პუნქტი, რომელიც არ შეეხო მათ, ვინც შეასრულა პუნქტი სემანტიკის შესახებ. თუ თქვენი კონტროლი არ არის ინტერაქტიული ელემენტი, მაშინ მასზე გადასვლისას კურსორი სტანდარტული დარჩება. ძალიან მოუწესრიგებელი ჩანს, მაშინაც კი, თუ თქვენ დაწერეთ რეაქცია hover-ზე. ნუ შეაფასებთ კურსორს: მაჩვენებელი.

ანიმაციები. მნიშვნელოვანია, რომ ყველა რეაქცია, რომელიც ხდება ელემენტებთან, გლუვი იყოს. ცხოვრებაში არაფერია მყისიერი, ამიტომ გადასვლები ჰოვერზე და აქტიურზე საკმარისი იყო იმისათვის, რომ ინტერფეისი უფრო სასიამოვნო ყოფილიყო. კარგად, ისინი, ვინც ანიმაციური სლაიდერი და სიები, ზოგადად, შესანიშნავია.

უახლესი ტექნოლოგიების გამოყენებით. ბევრმა გამოიყენა ფლექსი, მაგრამ ვერავინ შეასრულა დავალება ბადის გამოყენებით. ქულა დაითვლებოდა, თუ ფლექსი სწორად იქნა გამოყენებული. თუ სადმე განლაგება დაიშალა სწორედ ამ მოქნილობის გამო, სამწუხაროდ, თქვენ არ მიგიღიათ დამატებითი ქულები.

ფორმის დადასტურება. საჭირო იყო მხოლოდ ფორმის თითოეულ შეყვანისთვის საჭირო ატრიბუტის დამატება. ჩვენ დავამატეთ ქულები მათ, ვინც დაადასტურა ელფოსტის ველი, როგორც ელფოსტა.

ფაილის ატვირთვის ღილაკის სტილიზაცია. ჩვენ ველოდით, რომ ვიხილოთ ისეთი კომბინაცია, როგორიცაა: და აირჩიეთ ფაილი . შემდეგ დაგვჭირდა შეყვანის დამალვა და ეტიკეტის სტილი. არსებობს კიდევ ერთი გავრცელებული გზა - გამჭვირვალე შეყვანის გაკეთება და ღილაკის თავზე დაყენება. მაგრამ ყველა ბრაუზერი არ იძლევა სტილის საშუალებას , და ასეთ გადაწყვეტას არ შეიძლება ეწოდოს სრულად ჯვარედინი ბრაუზერი. და სემანტიკურად უფრო სწორია ეტიკეტის გაკეთება.

ჯვარედინი ბრაუზერის თავსებადობა. ჩვენ შევამოწმეთ, რომ ყველაფერი კარგად იყო თანამედროვე ბრაუზერების ორ უახლეს ვერსიაში (IE-ს გარეშე - მონაწილეებს გაუმართლათ), ასევე Safari-ში iPhone-ებზე და Chrome-ში Android-ებზე.

პირიქით, ჩვენ ვაკლებთ ქულებს, თუ ვინმე იყენებდა JS ან Bootstrap: ორივე მათგანი დაამარცხებდა მთელი დავალების მიზანს. უფრო მეტიც, Bootstrap-ის მქონე მონაწილეებმა არა მხოლოდ მიიღეს მინუსი, არამედ დაკარგეს მრავალი ქულა სემანტიკისა და განხორციელებული ელემენტებისთვის.

მათ, ვინც საკუთარ საიტს სადმე ინტერნეტში უმასპინძლა, არ მიიღეს რაიმე განსაკუთრებული უპირატესობა - მაგრამ მიმომხილველები ძალიან ბედნიერები იყვნენ, როდესაც მათ არ მოუწიათ საცავების ჩამოტვირთვა და ადგილობრივად გაშვება კომპიუტერზე. ასე რომ, ეს იყო კარმას პლუსი.

პირველი დავალება ძალიან სასარგებლო იყო პირველ რიგში მოსწავლისთვის. მათ, ვინც ჩვენ არ მივიღეთ, ახლა აქვთ მომზადებული რეზიუმე - შეგიძლიათ ამაყად დაურთოთ ყველა პასუხს ან განათავსოთ იგი თქვენს 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-ში.

მეორე დავალების გადამოწმება ყველაზე ავტომატიზირებული და ობიექტური იყო. ბიჭების უმეტესობამ გამოიცნო, რომ აუცილებელი იყო დიკსტრას ალგორითმის განხორციელება. ისინი, ვინც იპოვეს მისი აღწერა და დანერგეს ალგორითმი 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 დღით ადრე. ინტერნეტიდან პირველი ჩამოტვირთვის შემდეგ, კალენდარი უნდა გაიხსნას და ოფლაინ ფუნქციონირებს.

სასარგებლო რესურსები

Frontend კონფერენციის განრიგი:
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-ის საფუძველზე განლაგების გაფორმება. მნიშვნელოვანი იყო მონაცემების მიღება ნებისმიერი გზით (Fetch მეთოდის გამოყენებით ან XMLHttpRequest-ის გამოყენებით). თუ ადამიანმა დაამატა პოლიფილი Fetch-ისთვის და მონიშნა მისი არჩევანი readme-ში, ეს ჩაითვლებოდა პლუსად.

სერვისის თანამშრომლის რეგისტრაცია შეცდომების გარეშე და იმუშავეთ ოფლაინში პირველი ჩამოტვირთვის შემდეგ. აი მაგალითად სერვისის მუშაკი გრაფიკის ქეშირებით პირველი ჩატვირთვისას. სერვისის მუშაკების, მათი შესაძლებლობებისა და მათთან მუშაობის გზების შესახებ დეტალები (ქეშებთან მუშაობის სტრატეგიები, ოფლაინ მუშაობა) შეგიძლიათ იხილოთ აქ.

შეხსენების დაყენების შესაძლებლობაისე, რომ ის რეალურად მუშაობს 3, 7, 14 დღის შემდეგ. საჭირო იყო შეტყობინებების API-ს გაგება, ბმული, რომლის სწორად შეასრულა დავალება. ჩვენ არ ველოდით რაიმე კონკრეტულ განხორციელებას იმის შესამოწმებლად, დადგა თუ არა მოქმედების დრო. მიღებული იყო ნებისმიერი სამუშაო ვარიანტი: შენახვა localStorage-ში, IndexDB-ში ან პერიოდული გამოკითხვა სერვისის მუშაკის მიერ. პუშ სერვერის გაკეთებაც კი იყო შესაძლებელი (აქ მაგალითად), მაგრამ ის არ იმუშავებს ხაზგარეშე. თანაბრად მნიშვნელოვანი იყო ბიძგის მიღება გვერდის დახურვის შემდეგ - და გარკვეული დროის შემდეგ გახსნის შემდეგ. თუ შეხსენება მოკვდა გვერდის დახურვის დროს, გამოსავალი არ ჩაითვლებოდა. მაგარია, როცა ბიჭები ფიქრობდნენ რეცენზენტებზე და შეძლეს ახლავე მიგვეღო ბიძგი - ისე, რომ 3 დღე არ დაელოდო.

დესკტოპზე ხატის განთავსების შესაძლებლობა (PWA). ჩვენ შევამოწმეთ ფაილის არსებობა მანიფესტი.json სწორი ხატებით. ზოგიერთმა ბიჭმა შექმნა ეს ფაილი (ან დატოვა ის გენერირებული CreateReactApp-ში) - მაგრამ არ დაუმატა სწორი ხატები. შემდეგ, ინსტალაციის მცდელობისას, მოხდა შეცდომა, როგორიცაა "საჭიროა სხვა ხატი".

Codestyle და პროექტის სტრუქტურა. როგორც მეორე ამოცანაში, ჩვენ შევხედეთ ერთი კოდის სტილს (თუნდაც ის არ ემთხვეოდეს ჩვენსას). ზოგიერთი ბიჭი ხრახნიანი ლიტრი - ეს შესანიშნავია.

კონსოლის შეცდომები. თუ კონსოლში იყო ინდიკატორი, რომ რაღაც არასწორი იყო და მონაწილემ ამას ყურადღება არ მიაქცია, მაშინ ჩვენ ვაკლებთ ქულებს.

შედეგები

რა არის სასაცილო მონაწილეთა გადაწყვეტილებებში:

• ერთი კითხვარი შეიცავდა შემდეგ ტექსტს: „პროგრამის მეგობარი დამეხმარა React აპლიკაციის შედგენაში. დავბომბე მას კითხვებით როგორ და რატომ და მითხრა. ძალიან მომეწონა, მსურს მეტი ვიცოდე მის შესახებ. ” ამ აპლიკაციას მთელი გულით ვაპროტესტებდით, მაგრამ სამწუხაროდ, კანდიდატის მეგობარი დიდად არ დაგვეხმარა განაცხადის ამოქმედებაში.
• ერთმა კანდიდატმა გაუგზავნა ბმული GitHub-ს, სადაც RAR არქივი იყო განთავსებული - ამაზე კომენტარის გაკეთება რთულია. 🙂
• სხვა კანდიდატმა, solution.js ფაილის პირველ სტრიქონზე კომენტარში, გულწრფელად აღიარა, რომ მან დააკოპირა ალგორითმი.

ჩვენ მივიღეთ განაცხადი 76 კანდიდატისგან და შევარჩიეთ 23 ადამიანი. გამოგვიგზავნეს კითხვარები არა მხოლოდ მინსკიდან, არამედ მოსკოვიდან, პეტერბურგიდან და თათარსტანიდანაც კი. ზოგიერთმა ბიჭმა დღევანდელი პროფესიით გაგვაოცა: ერთი სასამართლო ექსპერტია, მეორე კი სამედიცინო სტუდენტი.

შედეგი იყო დავალებების შესრულებისას წარმატების მაჩვენებლების საინტერესო განაწილება. მონაწილეებმა პირველი დავალება შეასრულეს საშუალოდ 60%-ით, მეორეს 50%-ით, ხოლო მესამე ყველაზე რთული აღმოჩნდა და საშუალოდ 40%-ით შეასრულეს.

ერთი შეხედვით, ამოცანები გამოიყურება რთული და შრომატევადი. მიზეზი არ არის ის, რომ ჩვენ გვინდა რაც შეიძლება მეტი კანდიდატის გამოდევნა. სწავლის დროს სტუდენტებს რეალური ამოცანების წინაშე დგანან - ჩატის გაკეთება, Yandex.Music ბავშვებისთვის ან Yandex.Weather ამინდზე დამოკიდებული ადამიანებისთვის. ამისათვის საჭიროა საწყისი ბაზა.

მახსოვს, ორი წლის წინ ვნახე ჩემი SRI-ის შესასვლელი დავალება და ვფიქრობდი, რომ მას ვერასოდეს მოვაგვარებდი. ამ მომენტში მთავარია დაჯდე, ყურადღებით წაიკითხო პირობები და დაიწყო ამის გაკეთება. გამოდის, რომ პირობები შეიცავს ხსნარის თითქმის 80%-ს. მაგალითად, მესამე დავალების (ყველაზე რთული) პირობებში დავამატეთ სერვისის მუშაკების ბმულები და შეტყობინებების API MDN-ზე. მოსწავლეებმა, რომლებიც სწავლობდნენ ბმულების შინაარსს, უპრობლემოდ დაასრულეს იგი.

ძალიან მინდა, რომ ეს სტატია წაიკითხონ კანდიდატებმა, რომლებიც გეგმავენ სამომავლოდ SRI-ში შესვლას, რომლებმაც ვერ შეძლეს მინსკის სკოლაში შესვლა, ან რომლებიც იწყებენ რაიმე სხვა სატესტო დავალების შესრულებას. როგორც ხედავთ, ამის გაკეთება სავსებით შესაძლებელია. თქვენ უბრალოდ უნდა გჯეროდეთ საკუთარი თავის და მოუსმინოთ ყველა რჩევას ავტორებისგან.

წყარო: www.habr.com