Lekòl devlopman koòdone: analiz de travay pou Minsk ak yon seri nouvo nan Moskou

Jodi a yon nouvo enskripsyon louvri nan Yandex Entèfas Devlopman Lekòl nan Moskou. Premye etap fòmasyon an ap fèt soti 7 septanm pou rive 25 oktòb. Elèv ki soti nan lòt vil yo pral kapab patisipe nan li adistans oswa an pèsòn - konpayi an pral peye pou vwayaj ak aranjman nan yon fwaye. Dezyèm lan, tou dènye etap la, pral dire jiska 3 desanm, li ka sèlman ranpli an pèsòn.

Non mwen se Yulia Seredich, nou te ekri pòs sa a ansanm ak Sergei Kazakov. Nou se tou de devlopè koòdone nan biwo Minsk Yandex ak gradye SRI nan ane anvan yo.

Nan okazyon ouvèti enskripsyon an nan Moskou, nou ap pibliye yon analiz de travay entwodiksyon nan lekòl anvan an - isit la nan Minsk.

Si w trase istwa devwa SRI yo, de ane a ane nou teste twa konpetans enpòtan pou yon pwogramè:

• Layout. Chak pwomotè ta dwe kapab fè layout. Li pa rive ke ou gen Tonton Seryozha ki desine pou tout ekip la, epi ou sèlman ekri scripts. Se poutèt sa, chak elèv dwe montre ki jan li konnen ki jan yo konpoze.
• JavaScript. Si pwoblèm nan te limite nan layout, Lè sa a, nou pa ta gen yon Lekòl nan Devlopman Entèfas, men yon Lekòl nan Designers Layout. Koòdone nan trè byen fèt bezwen fè reviv. Se poutèt sa, toujou gen yon travay pou JS, men pafwa li se tou yon travay pou algoritm - nou renmen yo anpil.
• Rezoud pwoblèm se petèt konpetans ki pi enpòtan nan yon pwomotè. Lè li rive kreye interfaces, bagay yo ap chanje trè vit. Se tankou Lewis Carroll: "Ou dwe kouri osi vit ke ou kapab jis pou rete nan menm kote a, epi pou ale nan yon lòt kote ou dwe kouri de fwa pi vit." Chak jou nou rankontre nouvo teknoloji - nou bezwen pran yo an kont epi kapab konprann yo. Se poutèt sa, nan twazyèm travay la, nou pwopoze yo konprann teknoloji ke yon pwomotè inisyasyon anjeneral pa abitye avèk yo.

Nan analiz chak travay, nou pral di w pa sèlman sou pwosedi ki kòrèk la, men tou sou erè komen yo.

Travay 1: Portfolio

Premye travay la te travay sou Yandex.Collections designer Alexey Cherenkevich, ki moun ki konnen ki jan fè layout, ak kòlèg sèvis li a, pwomotè koòdone Sergey Samsonov.

Kondisyon

Kreye yon sit entènèt pòtfolyo: di nou sou tèt ou, travay ou ak atant ou soti nan Lekòl la. Sit la ta dwe koresponn otank posib ak layout yo pwopoze a (lyen ki mennen nan layouts: 1000px, 600px, 320px, spesifikasyon). Nou enterese sèlman nan layout la, kidonk tanpri pa sèvi ak JavaScript.

Lè tcheke nou pral pran an kont:

• gwosè endentasyon, koulè kòrèk, style font, gwosè font;
• layout semantik;
• prezans nan diferan eta nan eleman: montre bouton ak lyen lè plane kurseur a, mete aksan sou jaden antre aktif, elatriye;
• konpatibilite kwa-navigatè (teste nan dènye vèsyon navigatè popilè yo).

Avantaj la pral:

• itilizasyon solisyon CSS modèn: flexbox, grid, elatriye;
• Layout adaptasyon;
• itilizasyon pre- ak (oswa) pòs-prosesè, asanble, minifikasyon, optimize kòd pwodiksyon;
• Validasyon fòm HTML, stilize bouton Upload dosye.

Travay la se byen volumineuz, kidonk, ou ka sote sa ki pa pral travay. Sa a pral bese nòt ou yon ti kras, men w ap toujou kapab demontre konesans ou. Lè w fini, voye nou de lyen - nan pòtfolyo ou ak kòd sous la sou GitHub.

Layout yo pwopoze nan plasman an pa t sèlman ak ekran pou aparèy mobil, tablèt ak Desktop, men tou, ak espesifikasyon reyèl.

Yo nan lòd yo pote otan objektivite ke posib nan rezilta a nan tcheke premye travay la, te gen yon anpil nan kritè pou chèk sa a.

Kritè

Sit entènèt ki fèt. Sa a sanble evidan, men kèk mesye sote kèk blòk antyèman - swa yo te vle ekonomize tan, oswa yo pa t 'kapab fè yo. Layout la ka apeprè divize an kat ekran prensipal: ekran prensipal la ak yon avatar, yon blòk ak yon lis atant soti nan SRI, yon blòk ak yon dosye ak yon blòk ak enfòmasyon kontak. Yo ta ka fèt nan seksyon oswa tou senpleman lè l sèvi avèk div, bagay prensipal la se ke tout kat blòk yo te disponib.

Konfòmite layout ak layout. Designer a te fè yon spesifikasyon separe (ki gen ladan koulè, tipografi, eta bouton, elatriye) pou rann li pi fasil pou kandida yo. Nan pati anba a te gen yon allusion sou entirè yo ak karakteristik nan ekran an premye. Mwen te trè kontan ak mesye yo ki te pran an kont tout volonte designer a: pou egzanp, ekran an premye ta dwe pa mwens pase wotè nan Viewport la.

Layout adaptab - sa a se lè koòdone a pa jis mete deyò pou ke nan twa rezolisyon tout bagay se pixel nan pixel nan layout. Nan eta entèmedyè, Layout la pa ta dwe tonbe apa tou. Gen kèk ki bliye limite lajè maksimòm veso a epi mete tout bagay sou 1920 piksèl, gen kèk ki te mele orijin yo, men an jeneral kandida yo te byen fè fas ak travay sa a.

Layout semantik. "Konbyen fwa yo te di mond lan" ke lyen an ta dwe fèt kòm , bouton an - kòm . Erezman, pifò kandida yo te ranpli kondisyon sa a tou. Se pa tout moun rekonèt lis la kache nan atant yo nan SRI a, fè li lè l sèvi avèk tags div, men li pa sa ki mal. Te gen yon kandida ki mete tout tag semantik li te konnen - kote li te nesesè ak kote li pa t nesesè. Pou egzanp, olye pou yo yon lis - ak . Apre yo tout, semantik - li se sou konprann konpozisyon an nan paj ou a ak objektif chak blòk (majorite a jere li isit la), osi byen ke itilizasyon pre- ak / oswa pòs-prosesè (yon kèk jere li isit la, byenke sa a. te tou nan pwen yo - pi souvan yo te itilize mwens ak scss).

K ap travay kurseur. Nan devwa a nou te ekri ke JS pa ka itilize. Isit la yo te teste kapasite pou rezoud pwoblèm - yon kurseur ka fèt lè l sèvi avèk yon pakèt moun Epi . Tout maji yo rive nan nivo seleksyon #bouton-N:checked ~ .slider-inner .slider-slides. Lè nou klike sou youn nan antre kaz yo, li ale nan eta a tcheke. Nou ka pwofite sa a epi bay tradiksyon nou bezwen an nan veso ki gen glisad yo: transform: translate(-33%). Ou ka wè aplikasyon kurseur la isit la.

Lis dropdown. Isit la li tou te desann nan ak yon seleksyon ki sanble: .accordion-item input:tcheke ~ .accordion-item__content. Ou ka wè aplikasyon an isit la.

Disponibilite nan eta :hover, :active ak :focu*. Yon pwen trè enpòtan. Konfò pandan entèraksyon ak koòdone a depann sou li. Itilizatè a ta dwe toujou resevwa fidbak sou aksyon yo. Atik sa a te tcheke pandan tout entèraksyon an ak kesyonè a. Si mwen klike sou "Rele m" bouton an epi vizyèlman anyen pa rive (menm si demann lan te voye), sa a se move, paske Lè sa a, mwen pral klike sou li ankò e ankò. Kòm rezilta, yo pral voye dis demann epi yo pral rele m tounen dis fwa. Nou pa dwe bliye ke aparèy mobil pa gen yon sourit, ki vle di pa ta dwe gen yon hover. Ak yon lòt pwen ki pa t afekte moun ki te akonpli pwen sou semantik. Si kontwòl ou a se pa yon eleman entèaktif, Lè sa a, lè ou hover sou li, kurseur a ap rete estanda. Li sanble trè dezord, menm si ou te ekri yon reyaksyon sou hover. Pa souzèstime kurseur: pointer.

Animasyon. Li enpòtan pou tout reyaksyon ki fèt ak eleman yo lis. Pa gen anyen nan lavi ki enstantane, kidonk gen tranzisyon sou hover ak aktif te ase fè koòdone a pi bèl. Oke, moun ki anime kurseur a ak lis yo jeneralman gwo.

Sèvi ak dènye teknoloji a. Anpil moun te itilize flex, men pèsonn pa te konplete travay la lè l sèvi avèk griy. Pwen an te konte si yo te itilize flex kòrèkteman. Si yon kote layout a te vin apa paske nan sa yo trè flechi, Ay, ou pa t 'resevwa okenn pwen adisyonèl.

Validasyon fòm. Tout sa ki te mande se te ajoute atribi obligatwa a nan chak opinyon nan fòm nan. Nou te ajoute pwen pou moun ki valide jaden imel la kòm imel.

Styling bouton telechaje dosye a. Nou espere wè yon konbinezon tankou: epi Chwazi fichye a . Apre sa, nou te bezwen kache opinyon an ak style etikèt la. Gen yon lòt fason komen - fè yon opinyon transparan epi mete l sou tèt bouton an. Men, se pa tout navigatè pèmèt manier , ak solisyon sa yo pa ka rele konplètman kwa-navigatè. Epi li semantikman pi kòrèk pou fè yon etikèt.

Konpatibilite kwa-navigatè. Nou tcheke ke tout bagay te byen nan de vèsyon yo nan dènye navigatè modèn (san IE - patisipan yo te gen chans), osi byen ke nan Safari sou iPhones ak Chrome sou Androids.

Okontrè, nou dedui pwen si yon moun te itilize JS oswa Bootstrap: tou de nan yo ta defèt objektif la nan tout travay la. Anplis, patisipan yo ak Bootstrap pa sèlman te resevwa yon mwens, men tou, pèdi anpil pwen pou semantik ak eleman aplike.

Moun ki te òganize sit yo yon kote sou Entènèt la pa t resevwa okenn avantaj patikilye - men evalyatè yo te kontan anpil lè yo pa t oblije telechaje depo yo epi kouri yo lokalman sou òdinatè yo. Se konsa, sa a te sèvi kòm yon plis pou karma.

Premye travay la te trè itil sitou pou elèv la. Moun nou pa aksepte kounye a gen yon rezime prepare - ou ka fyète tache li nan tout repons yo oswa poste li sou gh-paj ou yo.

Travay 2: wout transpò

Otè a nan travay la se tèt la nan rechèch la interfaces gwoup Denis Balyko.

Kondisyon

Èske w gen yon kat zetwal? Li montre non chak etwal, ansanm ak distans ant li ak lòt zetwal an segonn limyè. Aplike fonksyon solisyon an, ki ta dwe pran twa agiman: yon objè kote kle yo se non zetwal yo, ak valè yo se distans ak zetwal yo (trafik yon sèl nan espas), osi byen ke non yo. pwen yo kòmanse ak fini nan chemen an - kòmanse ak fini, respektivman. Fonksyon an ta dwe retounen distans ki pi kout la soti nan zetwal la kòmanse rive nan zetwal la fini ak chemen pou swiv la.

Fonksyon siyati:

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

Egzanp done antre:

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'; 

Egzanp pwodiksyon:

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

Remak: skelèt solisyon an se nan src/ folder, mete solisyon ou a nan solution.js.

Verifikasyon an nan dezyèm travay la te pi otomatik ak objektif. Pifò nan mesye yo devine ke li te nesesè yo aplike algorithm Dijkstra a. Moun ki jwenn deskripsyon li yo ak aplike algorithm nan JS yo byen fè. Sepandan, lè nou tcheke devwa a, nou te rankontre anpil papye ki gen menm erè yo. Nou fè rechèch sou entènèt la pou fragman kòd epi nou jwenn yon atik kote patisipan yo kopye algorithm la. Li komik ke anpil moun kopye kòd la nan atik la ansanm ak kòmantè otè a. Travay sa yo te resevwa yon nòt ki ba. Nou pa entèdi itilize okenn sous, men nou vle yon moun fouye nan sa li ekri.

Kritè

Pwen prensipal yo te bay pou tès yo. Pafwa li te klè ke mesye yo te dezòd ak depo a, chanje non dosye yo, ak tès yo ta echwe tou senpleman paske yo pa t 'kapab jwenn dosye ki nesesè yo. Ane sa a nou te eseye ede mesye sa yo epi retounen tout bagay nan plas li pou yo. Men, ane pwochèn nou planifye pou chanje nan yon sistèm konkou, e sa p ap padonnen ankò.

Te gen tou "moun", kritè manyèl. Pou egzanp, prezans nan yon sèl style kòd. Pèsonn pa dedwi pwen pou itilize onglè olye pou yo espas oswa vis vèrsa. Li se yon lòt pwoblèm si ou altène quotes sèl ak sitasyon doub dapre yon règ ou konnen, epi mete pwen virgul o aza.

Klè a ak lizibilite nan solisyon an te pran an kont separeman. Nan tout konferans nan mond lan yo di ke 80% nan travay yon pwogramè konsiste de li kòd lòt moun. Menm timoun lekòl yo sibi revizyon kòd - nan men konsèvatè yo ak youn ak lòt. Se konsa, kritè sa a te pote pwa enpòtan. Te gen travay nan ki pa te gen okenn varyab ki pi long pase yon karaktè - tanpri pa fè sa. Kòmantè patisipan yo te trè ankourajan - eksepte sa yo ki te idantik ak kòmantè Stella Chang yo.

Dènye kritè a se prezans autotests. Se sèlman kèk moun te ajoute yo, men pou tout moun li te vin yon gwo plis nan karma yo.

Solisyon kòrèk:

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

Travay 3: Kalandriye evènman yo

Li te prepare pa devlopè koòdone Sergey Kazakov ak Alexander Podskrebkin.

Kondisyon

Ekri yon mini-kalandriye pou montre orè ou. Ou ka pran nenpòt orè ou renmen. Pou egzanp, orè a nan konferans frontend nan 2019.

Kalandriye a ta dwe sanble ak yon lis. Pa gen okenn lòt kondisyon konsepsyon. Fè li posib pou mete rapèl evènman 3, 7 ak 14 jou davans. Apre premye telechaje sou entènèt la, kalandriye a ta dwe louvri epi fonksyone offline.

Resous itil

Orè konferans frontend:
confs.tech/javascript?topics=javascript%2Bcss%2Bux

Travayè sèvis yo:
developer.mozilla.org/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers
developers.google.com/web/fundamentals/primers/service-workers

Notifikasyon API:
developer.mozilla.org/ru/docs/Web/API/Notifications_API

Twazyèm travay la te pi enteresan pou teste, paske te gen anpil solisyon posib, chak ak pwòp pa yo. Nou tcheke ki jan kandida a okipe teknoloji ki pa abitye - si li konnen ki jan fè rechèch, si li teste solisyon li yo.

Kritè

Kalandriye ki plwaye. Wi, li toujou bezwen mete deyò. Te gen tou moun ki te pran kondisyon an twò literalman epi yo pa mete yon sèl liy nan kòd CSS. Li pa t 'gade trè atire, men si tout bagay te travay, pwen yo pa t' diminye.

Jwenn yon lis evènman nan yon sous. Sa a se pa yon travay layout, kidonk lis la nan evènman ki enkli nan li pa te konte. Ou ka toujou anile yon konferans, repwograme li, oswa ajoute yon nouvo. Se konsa, li te nesesè yo resevwa done ki soti nan deyò a epi rann Layout la ki baze sou JSON la resevwa. Li te enpòtan pou jwenn done yo nan nenpòt fason (itilize metòd la chache oswa lè l sèvi avèk XMLHttpRequest). Si yon moun te ajoute yon polyfill pou chache epi li te make chwa li nan readme a, sa a te konte kòm yon plis.

Enskripsyon travayè sèvis san erè epi travay offline apre premye download la. Isit la se yon egzanp travayè sèvis ak kachèt orè sou premye bòt. Ou ka jwenn detay sou travayè sèvis yo, kapasite yo ak fason pou travay avèk yo (estrateji pou travay ak kachèt, travay offline) isit la.

Kapasite pou mete yon rapèlpou ke li aktyèlman ap travay apre 3, 7, 14 jou. Li te nesesè yo konprann API Notifikasyon yo, lyen nan ki te dwat sou travay. Nou pa t ap tann okenn aplikasyon espesifik pou tcheke si li lè pou pouse. Nenpòt opsyon travay yo te aksepte: depo nan localStorage, IndexDB oswa sondaj peryodik pa yon travayè sèvis. Li te menm posib fè yon sèvè pouse (isit la egzanp), men li pa ta travay offline. Li te egalman enpòtan pou resevwa yon pouse apre paj la te fèmen - ak louvri apre kèk tan. Si rapèl la te mouri an menm tan paj la te fèmen, solisyon an pa te konte. Li fre lè mesye yo te panse sou revizyon yo e li te fè li posib pou jwenn yon pouse kounye a - pou yo pa tann 3 jou.

Kapasite yo mete yon icon sou Desktop la (PWA). Nou tcheke prezans dosye a manifest.json ak ikon yo kòrèk. Gen kèk mesye ki te fè fichye sa a (oswa kite li te pwodwi nan CreateReactApp) - men yo pa t ajoute ikon ki kòrèk yo. Lè sa a, lè w ap eseye enstale, yon erè tankou "yon ikòn diferan nesesè" te fèt.

Codestyle ak estrikti pwojè. Kòm nan dezyèm travay la, nou te gade yon sèl codestyle (menm si li pa kowenside ak nou an). Gen kèk nèg vise sou linters - sa a gwo.

Erè konsole. Si te gen yon endikatè dwat nan konsole a ke yon bagay te mal, epi patisipan an pa t 'peye atansyon sou li, Lè sa a, nou dedwi pwen.

Rezilta

Ki sa ki komik sou desizyon patisipan yo:

• Yon kesyonè te genyen tèks sa a: “Yon zanmi pwogramè te ede m prepare yon aplikasyon React. Mwen te bonbade l ak kesyon sou kijan ak poukisa, epi li te di m. Mwen vrèman renmen li, mwen vle konnen plis sou li. ” Nou t ap anrasinen aplikasyon sa a ak tout kè nou, men malerezman, zanmi kandida a pa t itil anpil pou fè aplikasyon an mache.
• Yon kandida voye yon lyen nan GitHub, kote achiv RAR la te lokalize - li difisil pou fè kòmantè sou sa. 🙂
• Yon lòt kandida, nan kòmantè a sou premye liy nan fichye solution.js la, onètman admèt ke li kopye algorithm la.

Nou te resevwa aplikasyon nan men 76 kandida epi nou te chwazi 23 moun. Nou te voye kesyonè pa sèlman soti nan Minsk, men tou, soti nan Moskou, Saint Petersburg e menm Tatarstan. Kèk nan mesye yo sezi nou ak pwofesyon aktyèl yo: youn nan yo se yon ekspè legal, ak lòt la se yon etidyan medikal.

Rezilta a se te yon distribisyon enteresan nan pousantaj siksè nan ranpli travay yo. Patisipan yo te konplete premye travay la pa yon mwayèn de 60%, dezyèm lan pa 50%, ak twazyèm lan te vin pi difisil la epi li te konplete pa yon mwayèn de 40%.

Nan premye gade, travay yo sanble konplèks ak pran tan. Rezon ki fè la se pa ke nou vle raje otan kandida ke posib. Pandan fòmasyon yo, elèv yo ap fè fas ak travay lavi reyèl - fè yon chat, Yandex.Music pou timoun oswa Yandex.Weather pou moun ki depann de move tan. Pou sa ou bezwen yon baz kòmanse.

Mwen sonje mwen te wè travay antre SRI mwen an de ane de sa e mwen te panse ke mwen pa t ap janm rezoud li. Bagay pwensipal lan nan moman sa a se chita, ak anpil atansyon li kondisyon yo epi kòmanse fè li. Li sanble ke kondisyon yo gen prèske 80% nan solisyon an. Pou egzanp, nan kondisyon twazyèm travay la (pi difisil la), nou te ajoute lyen ki mennen nan travayè sèvis yo ak API Notifikasyon sou MDN. Elèv ki te etidye sa ki nan lyen yo te konplete li san difikilte.

Mon vreman anvi ki sa lartik i ganny li par bann kandida ki pe fer plan antre SRI alavenir, ki pa kapab antre Lekol Minsk, oubyen ki pe komans fer okenn lot travay teste. Kòm ou ka wè, li se byen posib fè sa. Ou jis bezwen kwè nan tèt ou epi koute tout konsèy ki soti nan otè yo.

Sous: www.habr.com