Интерфейсийг хөгжүүлэх сургууль: Минскийн даалгаврын дүн шинжилгээ, Москва дахь шинэ багц

Өнөөдөр шинэ элсэлтээ авч эхэллээ Yandex интерфейс хөгжүүлэх сургууль Москвад. Сургалтын эхний шат 7-р сарын 25-ноос 3-р сарын XNUMX хүртэл явагдана. Бусад хотоос ирсэн оюутнууд үүнд алсаас болон биечлэн оролцох боломжтой - тус компани аялал, дотуур байранд байрлах зардлыг хариуцна. Хоёр дахь, мөн эцсийн шат нь XNUMX-р сарын XNUMX хүртэл үргэлжлэх бөгөөд үүнийг зөвхөн биечлэн хийх боломжтой.

Намайг Юлия Середич гэдэг, бид энэ бичлэгийг Сергей Казаковтой хамт бичсэн. Бид хоёулаа Yandex-ийн Минск дахь оффисын интерфейс хөгжүүлэгчид бөгөөд өмнөх жилүүдийн SRI-ийн төгсөгчид юм.

Интерфейсийг хөгжүүлэх сургууль: Минскийн даалгаврын дүн шинжилгээ, Москва дахь шинэ багц

Москвад бүртгэл нээгдэж байгаатай холбогдуулан бид өмнөх сургуулийн танилцуулга даалгаврын дүн шинжилгээг энд Минск хотод нийтэлж байна.

Хэрэв та SRI даалгаврын түүхийг ажиглавал бид жилээс жилд програмистын гурван чухал ур чадварыг шалгасан.

  • Зохион байгуулалт. Хөгжүүлэгч бүр layout хийх чадвартай байх ёстой. Та бүхэл бүтэн багийг зохион бүтээдэг Серёжа авга ахтай байдаггүй бөгөөд та зөвхөн скрипт бичдэг. Тиймээс оюутан бүр хэрхэн бичгийн хэвлэдгийг харуулах ёстой.
  • JavaScript. Хэрэв асуудал зөвхөн зохион байгуулалтаар хязгаарлагдах юм бол бид Интерфэйс хөгжүүлэх сургууль биш, Байршлын дизайнеруудын сургуультай болох байсан. Сайхан дизайнтай интерфэйсийг сэргээх хэрэгтэй. Тиймээс JS-д зориулсан даалгавар үргэлж байдаг, гэхдээ заримдаа энэ нь алгоритмын даалгавар байдаг - бид тэдэнд маш их хайртай.
  • Асуудлыг шийдвэрлэх нь магадгүй хөгжүүлэгчийн хамгийн чухал ур чадвар юм. Интерфейсийг бий болгоход бүх зүйл маш хурдан өөрчлөгдөж байна. Яг л Льюис Кэррол: "Нэг байрандаа үлдэхийн тулд аль болох хурдан гүйх хэрэгтэй, харин өөр газар очихын тулд хоёр дахин хурдан гүйх хэрэгтэй." Бид өдөр бүр шинэ технологиудтай тулгардаг - бид тэдгээрийг анхааралдаа авч, ойлгох чадвартай байх хэрэгтэй. Тиймээс, гурав дахь даалгаварт бид шинэхэн хөгжүүлэгч ихэвчлэн мэддэггүй технологийг ойлгохыг санал болгов.

Даалгавар бүрийн дүн шинжилгээ хийхдээ бид зөвхөн зөв процедурын талаар төдийгүй нийтлэг алдааны талаар танд хэлэх болно.

Даалгавар 1: Төсвийн ерөнхийлөн захирагч

Эхний ажлыг Yandex.Collections дизайнер Алексей Черенкевич, зохион байгуулалтыг хэрхэн яаж хийхийг мэддэг, түүний үйлчилгээний ажилтан, интерфейс хөгжүүлэгч Сергей Самсонов нар гүйцэтгэсэн.

Нөхцөл байдал

Багцын вэбсайт үүсгэх: өөрийнхөө тухай, ажил болон сургуулиас хүлээж буй зүйлсийнхээ талаар бидэнд хэлээрэй. Сайт нь санал болгож буй зохион байгуулалттай аль болох нийцэж байх ёстой (зохицуулалтын холбоосууд: 1000px, 600px, 320px, тодорхойлолт). Бид зөвхөн зохион байгуулалтыг сонирхож байгаа тул JavaScript бүү ашиглаарай.

Шалгахдаа бид дараахь зүйлийг анхаарч үзэх болно.

  • доголын хэмжээ, өнгөний зөв байдал, үсгийн хэв маяг, үсгийн хэмжээ;
  • семантик зохион байгуулалт;
  • янз бүрийн төлөвийн элементүүд байгаа эсэх: курсорыг зөөх үед товчлуурууд болон холбоосуудыг харуулах, идэвхтэй оруулах талбаруудыг тодруулах гэх мэт;
  • Хөтөч хоорондын нийцтэй байдал (алдартай хөтөчүүдийн хамгийн сүүлийн хувилбаруудад туршиж үзсэн).

Давуу тал нь:

  • орчин үеийн CSS шийдлүүдийг ашиглах: flexbox, grid гэх мэт;
  • Дасан зохицох зохион байгуулалт;
  • өмнөх болон (эсвэл) дараах процессоруудыг ашиглах, угсрах, багасгах, гаралтын кодыг оновчтой болгох;
  • HTML маягтын баталгаажуулалт, загварчилсан файл байршуулах товчлуур.

Даалгавар нь нэлээд том тул ажиллахгүй байгаа зүйлийг алгасаж болно. Энэ нь таны оноо бага зэрэг буурах боловч та мэдлэгээ харуулах боломжтой хэвээр байх болно. Та хийж дууссаныхаа дараа бидэнд хоёр холбоосыг илгээнэ үү - өөрийн портфолио болон GitHub дээрх эх код.

Даалгаварт санал болгож буй загварууд нь зөвхөн хөдөлгөөнт төхөөрөмж, таблет, ширээний компьютерт зориулсан дэлгэцтэй төдийгүй бодит үзүүлэлтүүдтэй байв.

Эхний даалгаврыг шалгах үр дүнд аль болох бодитой байдлыг бий болгохын тулд энэ шалгалтанд маш олон шалгуур тавьсан.

Шалгуур

Зохион бүтээсэн вэбсайт. Энэ нь ойлгомжтой мэт боловч зарим залуус зарим блокуудыг бүхэлд нь алгассан - эсвэл тэд цаг хэмнэхийг хүссэн эсвэл хийж чадаагүй. Зохион байгуулалтыг ойролцоогоор дөрвөн үндсэн дэлгэц болгон хувааж болно: аватар бүхий үндсэн дэлгэц, SRI-аас хүлээгдэж буй жагсаалт бүхий блок, портфолио бүхий блок, холбоо барих мэдээлэл бүхий блок. Тэдгээрийг хэсэг хэсгээр нь хийж болно, эсвэл зүгээр л div ашиглан хийж болно, хамгийн гол нь бүх дөрвөн блок бэлэн байсан.

Зохион байгуулалтыг зохион байгуулалттай нийцүүлэх. Загвар зохион бүтээгч нь нэр дэвшигчдэд илүү хялбар болгохын тулд тусдаа тодорхойлолт (өнгө, хэвлэх, товчлуурын төлөв гэх мэт) хийсэн. Доод талд нь эхний дэлгэцийн догол мөр, онцлог шинж чанаруудын талаархи зөвлөмж байсан. Дизайнерын бүх хүслийг харгалзан үзсэн залууст би маш их баяртай байсан: жишээлбэл, эхний дэлгэц нь харах цонхны өндрөөс багагүй байх ёстой.

Дасан зохицох зохион байгуулалт - энэ нь интерфэйсийг зүгээр л тавиагүй бөгөөд гурван нягтралтайгаар бүх зүйл пикселээс пикселийн байрлалтай байх үед юм. Завсрын мужуудад зохион байгуулалт нь нурж унах ёсгүй. Зарим нь савны хамгийн дээд өргөнийг хязгаарлаж, бүх зүйлийг 1920 пикселээр тохируулахаа мартсан бол зарим нь арын дэвсгэрийг будлиулсан боловч ерөнхийдөө нэр дэвшигчид энэ ажлыг сайн даван туулж чадсан.

Семантик зохион байгуулалт. Холбоосыг , товчлуурыг хэлбэрээр хийх ёстой гэж "Тэд дэлхий дахинд хэдэн удаа хэлсэн бэ". Аз болоход ихэнх нэр дэвшигчид энэ шаардлагыг биелүүлсэн. Хүн бүр SRI-ийн хүлээлт дэх нуугдмал жагсаалтыг хүлээн зөвшөөрөөгүй бөгөөд үүнийг div шошго ашиглан хийсэн, гэхдээ энэ нь тийм ч муу биш юм. Шаардлагатай, шаардлагагүй газарт өөрийн мэддэг бүх семантик шошгыг оруулсан нэр дэвшигч байсан. Жишээлбэл, жагсаалтын оронд - ба . Эцсийн эцэст, семантик - энэ нь таны хуудасны бүтэц, блок бүрийн зорилгыг ойлгох явдал юм (ихэнх нь үүнийг энд удирдаж байсан), мөн өмнөх болон / эсвэл дараах процессоруудыг ашиглах (цөөн хэдэн хүн үүнийг удирдаж байсан ч энд үүнийг удирдаж байсан. оноонд бас байсан - ихэнхдээ тэд бага ба scss ашигладаг байсан) .

Ажиллаж буй гулсагч. Даалгавар дээр бид JS-г ашиглах боломжгүй гэж бичсэн. Энд асуудал шийдвэрлэх чадварыг шалгасан - гулсагчийг болон -ийн хослолоор хийж болно. Бүх ид шид нь сонгогчийн түвшинд тохиолддог #button-N:checked ~ .slider-inner .slider-slides. Оруулсан нүднүүдийн аль нэг дээр дарахад энэ нь шалгагдсан төлөвт орно. Бид үүнийг ашиглаж, слайдтай саванд хэрэгтэй орчуулгаа оноож болно: transform: translate(-33%). Та гулсагчийн хэрэгжилтийг харж болно энд.

Унтраах жагсаалтууд. Энд бүх зүйл бас бууж ирсэн болон ижил төстэй сонгогч: .accordion-item input:checked ~ .accordion-item__content. Та хэрэгжилтийг харж болно энд.

:hover, :active болон :focu* төлөвүүдийн бэлэн байдал. Маш чухал цэг. Интерфейстэй харилцах үед тав тухтай байдал нь үүнээс хамаарна. Хэрэглэгч өөрийн үйлдлийнхээ талаар үргэлж санал хүсэлт хүлээн авах ёстой. Энэ зүйлийг асуулгатай харилцах явцад шалгасан. Хэрэв би "Над руу залгах" товчийг дарж, юу ч болоогүй (хүсэлт илгээсэн ч гэсэн) энэ нь муу, учир нь би үүнийг дахин дахин дарах болно. Үүний үр дүнд арван хүсэлт илгээгдэж, намайг арав дахин дуудах болно. Хөдөлгөөнт төхөөрөмжүүдэд хулгана байхгүй гэдгийг бид мартаж болохгүй, энэ нь хулганыг байрлуулах ёсгүй гэсэн үг юм. Мөн семантикийн талаархи санааг биелүүлсэн хүмүүст нөлөөлөөгүй өөр нэг зүйл. Хэрэв таны удирдлага интерактив элемент биш бол та түүн дээр гүйлгэх үед курсор стандарт хэвээр байх болно. Хөлдөөх хариу үйлдэл бичсэн ч гэсэн их замбараагүй харагдаж байна. Курсорыг дутуу үнэлж болохгүй: заагч.

Анимацууд. Элементүүдтэй тохиолддог бүх урвал жигд байх нь чухал юм. Амьдралд юу ч хоромхон зуур байдаггүй тул шилжилтийг хулганаар асааж, идэвхтэй байлгах нь интерфэйсийг илүү тааламжтай болгоход хангалттай байсан. За, гулсагч, жагсаалтын хөдөлгөөнийг хийсэн хүмүүс ерөнхийдөө гайхалтай.

Хамгийн сүүлийн үеийн технологи ашиглан. Олон хүмүүс flex ашигладаг байсан ч хэн ч grid ашиглан даалгавраа гүйцээгүй. Флексийг зөв ашигласан тохиолдолд оноог тооцсон. Хаа нэгтээ эдгээр маш уян хатан байдлаас болж байрлал нь эвдэрсэн бол харамсалтай нь та нэмэлт оноо аваагүй болно.

Маягтын баталгаажуулалт. Шаардлагатай бүх зүйл бол маягтын оролт бүрт шаардлагатай шинж чанарыг нэмэх явдал байв. Имэйл талбарыг имэйлээр баталгаажуулсан хүмүүст бид оноо нэмсэн.

Файл байршуулах товчийг загварчлах. Бид болон Файл сонгох гэх мэт хослолыг харна гэж найдаж байсан. Дараа нь бид оруулгыг нууж, шошгоны хэв маягийг оруулах шаардлагатай болсон. Өөр нэг нийтлэг арга байдаг - ил тод оруулга хийж, товчлуурын дээд талд байрлуулах. Гэхдээ бүх хөтчүүд -г загварчлахыг зөвшөөрдөггүй бөгөөд энэ шийдлийг бүрэн хөтчөөр хөтчөөр нэрлэж болохгүй. Мөн шошго хийх нь утга санааны хувьд илүү зөв юм.

Хөтөч хоорондын нийцтэй байдал. Орчин үеийн хөтчүүдийн хамгийн сүүлийн үеийн хоёр хувилбарт (IE-гүй - оролцогчид азтай байсан), мөн iPhone дээрх Safari болон Android дээрх Chrome-д бүх зүйл хэвийн байгааг бид шалгасан.

Үүний эсрэгээр, хэрэв хэн нэгэн JS эсвэл Bootstrap ашигласан бол бид оноо хассан: хоёулаа бүх ажлын зорилгыг даван туулах болно. Түүнээс гадна Bootstrap-тэй оролцогчид хасах оноо аваад зогсохгүй семантик болон хэрэгжсэн элементүүдийн хувьд олон оноо алдсан.

Интернэтийн хаа нэгтээ сайтаа байршуулсан хүмүүс ямар ч давуу талыг олж аваагүй ч репозиторыг татаж аваад компьютер дээрээ ажиллуулах шаардлагагүй болсонд шүүмжлэгчид маш их баяртай байсан. Тиймээс энэ нь үйлийн үрийн хувьд нэмэлт зүйл болсон.

Эхний даалгавар нь оюутанд маш хэрэгтэй байсан. Бидний хүлээж аваагүй хүмүүс одоо бэлтгэсэн анкеттай байна - та үүнийг бүх хариултанд бахархалтайгаар хавсаргах эсвэл өөрийн gh-page дээр нийтлэх боломжтой.

Даалгавар 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 дээр тулгуурлан байршлыг гаргах шаардлагатай болсон. Мэдээллийг ямар ч аргаар (татаж авах аргыг эсвэл XMLHttpRequest ашиглан) олж авах нь чухал байсан. Хэрэв хүн татаж авахын тулд полифилл нэмээд Readme дээр сонголтоо тэмдэглэсэн бол үүнийг нэмэх гэж тооцно.

Үйлчилгээний ажилтны бүртгэлийг алдаагүй Эхний татаж авсны дараа офлайнаар ажиллана. Жишээ нь энд байна. Эхний ачаалах үед хуваарийн кэштэй үйлчилгээний ажилтан. Үйлчилгээний ажилчдын талаарх дэлгэрэнгүй мэдээлэл, тэдний чадвар, тэдэнтэй ажиллах арга замууд (кэштэй ажиллах стратеги, офлайн ажиллах) эндээс олж болно.

Сануулагч тохируулах чадварИнгэснээр 3, 7, 14 хоногийн дараа ажиллана. Энэ нь мэдэгдлийн API-г ойлгох шаардлагатай байсан. аль холбоос ажил дээрээ зөв байсан. Бид түлхэх цаг болсон эсэхийг шалгахын тулд ямар нэгэн тодорхой хэрэгжилтийг хүлээж байсангүй. Ямар ч ажлын сонголтыг зөвшөөрсөн: localStorage, IndexDB-д хадгалах эсвэл үйлчилгээний ажилтны үе үе санал асуулга. Түлхэх сервер хийх боломжтой байсан (энд жишээ нь), гэхдээ энэ нь офлайнаар ажиллахгүй. Хуудсыг хааж, хэсэг хугацааны дараа нээгдсэний дараа түлхэлт хүлээн авах нь адил чухал байсан. Хуудсыг хаах үед санамж унтарсан бол шийдлийг тооцохгүй. Залуус шүүмжлэгчдийн талаар бодож, 3 хоног хүлээхгүйн тулд яг одоо түлхэц өгөх боломжтой болсон нь үнэхээр сайхан юм.

Ширээний компьютер дээр дүрс байрлуулах чадвар (PWA). Бид файл байгаа эсэхийг шалгасан манифест.жсон зөв дүрс бүхий. Зарим залуус энэ файлыг хийсэн (эсвэл CreateReactApp дээр үүсгэсэн) - гэхдээ зөв дүрс нэмээгүй. Дараа нь суулгах гэж оролдох үед "өөр дүрс хэрэгтэй байна" гэх мэт алдаа гарлаа.

Кодын хэв маяг ба төслийн бүтэц. Хоёрдахь даалгаврын нэгэн адил бид нэг кодын хэв маягийг (энэ нь биднийхтэй давхцаагүй байсан ч) харлаа. Зарим залуус линтер дээр боолт хийсэн - энэ бол гайхалтай.

Консолын алдаа. Хэрэв консол дээр ямар нэг зүйл буруу байсан гэсэн заалт байгаа бөгөөд оролцогч үүнийг анхаарч үзээгүй бол бид оноо хассан.

Үр дүн

Оролцогчдын шийдвэрийн инээдтэй зүйл юу вэ:

  • Нэг асуулгад дараах бичвэр байсан: “Надад нэг програмист найз React програм зохиоход тусалсан. Би түүнийг яаж, яагаад гэсэн асуултаар бөмбөгдсөн, тэр надад хэлсэн. Надад үнэхээр таалагдсан, би энэ талаар илүү ихийг мэдэхийг хүсч байна." Бид энэ аппликешныг бүх зүрх сэтгэлээрээ хайж байсан боловч харамсалтай нь нэр дэвшигчийн найз нь өргөдлийг ажиллуулахад төдийлөн тус болсонгүй.
  • Нэг нэр дэвшигч RAR архив байрладаг GitHub руу холбоос илгээсэн - энэ талаар тайлбар өгөхөд хэцүү байна. 🙂
  • Өөр нэг нэр дэвшигч, solution.js файлын эхний мөрөнд бичсэн тайлбартаа алгоритмыг хуулсан гэдгээ шударгаар хүлээн зөвшөөрсөн.

Бид 76 нэр дэвшигчийн материалыг хүлээн авч, 23 хүнийг сонгосон. Бидэнд зөвхөн Минск төдийгүй Москва, Санкт-Петербург, Татарстанаас ч санал асуулга явуулсан. Зарим залуус одоогийн мэргэжлээрээ биднийг гайхшруулсан: нэг нь шүүх эмнэлгийн шинжээч, нөгөө нь анагаахын оюутан.

Үр дүн нь даалгавруудыг гүйцэтгэх амжилтын хувь хэмжээний сонирхолтой хуваарилалт байв. Оролцогчид эхний даалгаврыг дунджаар 60%, хоёр дахь нь 50%, гурав дахь нь хамгийн хэцүү нь болж, дунджаар 40% -иар гүйцэтгэсэн байна.

Даалгаврууд нь эхлээд харахад төвөгтэй, цаг хугацаа их шаарддаг мэт санагддаг. Шалтгаан нь бид аль болох олон нэр дэвшигчийг хасъя гэсэндээ биш. Суралцах хугацаандаа оюутнууд чат хийх, хүүхдэд зориулсан Yandex.Music эсвэл цаг агаарын байдлаас хамааралтай хүмүүст зориулсан Yandex.Weather гэсэн бодит ажлуудтай тулгардаг. Үүний тулд танд эхлэлийн суурь хэрэгтэй.

Би хоёр жилийн өмнө SRI-д элсэх ажлаа хараад хэзээ ч шийдэхгүй гэж бодож байснаа санаж байна. Энэ мөчид гол зүйл бол сууж, нөхцөлийг сайтар уншиж, үүнийг хийж эхлэх явдал юм. Нөхцөл байдал нь уусмалын бараг 80% -ийг агуулдаг болох нь харагдаж байна. Жишээлбэл, гурав дахь даалгаврын нөхцөлд (хамгийн хэцүү) бид MDN дээрх үйлчилгээний ажилтнууд болон мэдэгдлийн API-ийн холбоосыг нэмсэн. Холбоосуудын агуулгыг судалж үзсэн оюутнууд хүндрэлгүйгээр дуусгасан.

Ирээдүйд SRI-д орохоор төлөвлөж байгаа, Минскийн сургуульд элсэх боломжгүй эсвэл өөр шалгалтын даалгавар хийж эхэлж байгаа нэр дэвшигчид энэ нийтлэлийг уншихыг үнэхээр хүсч байна. Таны харж байгаагаар үүнийг хийх бүрэн боломжтой. Та зүгээр л өөртөө итгэж, зохиогчдын бүх зөвлөмжийг сонсох хэрэгтэй.

Эх сурвалж: www.habr.com

сэтгэгдэл нэмэх