Viðmótsþróunarskóli: greining á verkefnum fyrir Minsk og nýtt sett í Moskvu

Í dag opnaði ný skráning Yandex Interface Development School í Moskvu. Fyrsti áfangi þjálfunar fer fram dagana 7. september til 25. október. Nemendur frá öðrum borgum munu geta tekið þátt í því í fjarskiptum eða í eigin persónu - fyrirtækið greiðir ferðir og gistingu á farfuglaheimili. Annar, einnig lokaáfanginn, mun standa til 3. desember, það er aðeins hægt að klára það í eigin persónu.

Ég heiti Yulia Seredich, við skrifuðum þessa færslu ásamt Sergei Kazakov. Við erum bæði viðmótshönnuðir á Minsk skrifstofu Yandex og útskrifaðir frá SRI frá fyrri árum.

Í tilefni af opnun skráningar í Moskvu birtum við greiningu á kynningarverkefnum í fyrri skóla - hér í Minsk.

Ef þú rekur sögu SRI verkefna, frá ári til árs prófuðum við þrjá mikilvæga færni fyrir forritara:

• Skipulag. Sérhver verktaki ætti að geta gert skipulag. Það gerist ekki að þú hafir Seryozha frænda sem hannar fyrir allt liðið og þú skrifar bara handrit. Þess vegna verður hver nemandi að sýna hvernig hann kunni að setja upp.
• JavaScript. Ef málið væri takmarkað við skipulag, þá værum við ekki með skóla fyrir viðmótsþróun, heldur skóla fyrir útlitshönnuðir. Það þarf að endurvekja fallega hannað viðmótið. Þess vegna er alltaf verkefni fyrir JS, en stundum er það líka verkefni fyrir reiknirit - við elskum þau svo mikið.
• Vandamálalausn er ef til vill mikilvægasta færni þróunaraðila. Þegar kemur að því að búa til viðmót eru hlutirnir að breytast mjög hratt. Þetta er eins og Lewis Carroll: "Þú þarft að hlaupa eins hratt og þú getur bara til að vera á sama stað og til að komast á annan stað þarftu að hlaupa tvöfalt hraðar." Á hverjum degi rekumst við á nýja tækni - við þurfum að taka tillit til hennar og geta skilið hana. Þess vegna, í þriðja verkefninu, lögðum við til að skilja tækni sem nýliði verktaki er venjulega ekki kunnugur.

Við greiningu á hverju verkefni munum við segja þér ekki aðeins um rétta málsmeðferð heldur einnig um algeng mistök.

Verkefni 1: Portfolio

Fyrsta verkefnið var unnið af Yandex.Collections hönnuðinum Alexey Cherenkevich, sem kann hvernig á að gera skipulag, og þjónustufélaga hans, viðmótshönnuðurinn Sergey Samsonov.

Ástand

Búðu til möppuvefsíðu: segðu okkur frá sjálfum þér, starfi þínu og væntingum þínum til skólans. Þessi síða ætti að samsvara eins mikið og mögulegt er fyrirhuguðu skipulagi (tenglar á útlit: 1000px, 600px, 320px, forskrift). Við höfum aðeins áhuga á útlitinu, svo vinsamlegast ekki nota JavaScript.

Við athugun munum við taka tillit til:

• inndráttarstærðir, réttleiki lita, leturstíll, leturstærð;
• merkingarfræðilegt skipulag;
• tilvist mismunandi ástands þátta: sýna hnappa og tengla þegar bendilinn er sveima, auðkenna virka innsláttarreit osfrv.;
• samhæfni milli vafra (prófað í nýjustu útgáfum af vinsælum vöfrum).

Kosturinn verður:

• notkun nútíma CSS lausna: flexbox, rist o.s.frv.;
• Aðlagandi skipulag;
• notkun for- og (eða) eftirvinnsluvéla, samsetningu, minnkun, hagræðingu á úttakskóða;
• Staðfesting HTML forms, stílfærður hnappur fyrir upphleðslu skráa.

Verkefnið er töluvert fyrirferðarmikið, svo þú getur sleppt því sem mun ekki virka. Þetta mun lækka stigið þitt aðeins, en þú munt samt geta sýnt fram á þekkingu þína. Þegar þú ert búinn, sendu okkur tvo tengla - á eignasafnið þitt og frumkóðann á GitHub.

Útlitið sem lagt var upp með í verkefninu var ekki bara með skjám fyrir fartæki, spjaldtölvur og borðtölvur, heldur einnig með raunverulegum forskriftum.

Til þess að færa sem mesta hlutlægni inn í niðurstöðu athugana á fyrsta verkefninu voru fullt af viðmiðum fyrir þessa athugun.

viðmið

Hönnuð vefsíða. Þetta virðist augljóst, en sumir krakkar slepptu nokkrum blokkum alveg - annað hvort vildu þeir spara tíma eða gátu ekki gert það. Skipulaginu má gróflega skipta í fjóra aðalskjái: Aðalskjáinn með avatar, blokk með væntingalista frá SRI, blokk með eignasafni og blokk með tengiliðaupplýsingum. Þeir gætu verið gerðir í köflum eða einfaldlega með því að nota divs, aðalatriðið er að allir fjórir kubbarnir voru tiltækir.

Samræmi skipulags við skipulag. Hönnuður gerði sérstaka forskrift (þar á meðal liti, leturfræði, hnappastöðu osfrv.) til að auðvelda umsækjendum. Neðst var vísbending um inndrátt og eiginleika fyrsta skjásins. Ég var mjög ánægður með strákana sem tóku tillit til allra óska ​​hönnuðarins: til dæmis hefði fyrsti skjárinn ekki átt að vera minni en hæð útsýnisins.

Aðlögunarhæft skipulag - þetta er þegar viðmótið er ekki bara sett þannig að í þremur upplausnum er allt pixla til pixla í útliti. Í millistigum ætti skipulagið heldur ekki að falla í sundur. Sumir gleymdu að takmarka hámarksbreidd ílátsins og stilltu allt á 1920 pixla, sumir klúðruðu bakgrunninum, en í heildina tókst umsækjendur þetta verkefni vel.

Merkingarfræðileg uppsetning. „Hversu oft hafa þeir sagt heiminum“ að hlekkurinn ætti að vera hannaður sem , hnappurinn – sem . Sem betur fer uppfylltu flestir umsækjendur þessa kröfu líka. Ekki allir þekktu falinn lista í væntingum SRI, sem gerir það að verkum að hann notar div merki, en það er ekki svo slæmt. Það var frambjóðandi sem setti inn öll merkingarmerki sem hann þekkti - þar sem það var nauðsynlegt og þar sem það var ekki nauðsynlegt. Til dæmis, í stað lista - og . Þegar öllu er á botninn hvolft, merkingarfræði - það snýst um að skilja samsetningu síðunnar þinnar og tilgang hvers blokkar (meirihlutinn stjórnaði því hér), sem og notkun for- og/eða eftirvinnslu (nokkrir stjórnuðu því hér, þó þetta var líka í stigunum - oftast notuðu þeir minna og scss) .

Vinnandi renna. Í verkefninu skrifuðum við að JS sé ekki hægt að nota. Hér var hæfileikinn til að leysa vandamál prófuð - hægt var að búa til rennibraut með því að nota fullt og . Allur galdurinn gerist á valstigi #button-N:checked ~ .slider-inner .slider-slides. Þegar við smellum á einn af inntaksgátreitunum fer hann í merkt ástand. Við getum nýtt okkur þetta og úthlutað þýðingunni sem við þurfum á ílátið með glærunum: transform: translate(-33%). Þú getur séð útfærslu sleðans hér.

Fellilistar. Hér kom þetta líka allt saman og svipað val: .accordion-item input:checked ~ .accordion-item__content. Þú getur séð útfærsluna hér.

Framboð :hover, :active og :focu* ástand. Mjög mikilvægt atriði. Þægindi í samskiptum við viðmótið voru háð því. Notandinn ætti alltaf að fá endurgjöf um gjörðir sínar. Þetta atriði var athugað í gegnum samskiptin við spurningalistann. Ef ég smellti á „Hringdu í mig“ hnappinn og sjónrænt gerðist ekkert (þó að beiðnin hafi verið send) er þetta slæmt, því þá mun ég smella á það aftur og aftur. Í kjölfarið verða sendar tíu beiðnir og hringt í mig tíu sinnum. Við megum ekki gleyma því að farsímatæki eru ekki með mús, sem þýðir að það ætti ekki að vera sveima. Og enn eitt atriðið sem hafði ekki áhrif á þá sem uppfylltu punktinn um merkingarfræði. Ef stjórnin þín er ekki gagnvirkur þáttur, þá verður bendillinn staðall þegar þú svífur yfir það. Það lítur mjög ósnortið út, jafnvel þótt þú hafir skrifað viðbrögð við sveima. Ekki vanmeta bendilinn: bendilinn.

Hreyfimyndir. Mikilvægt er að öll viðbrögð sem eiga sér stað við frumefnin séu slétt. Ekkert í lífinu er samstundis, svo að hafa umbreytingar á sveimi og virkar var nóg til að gera viðmótið skemmtilegra. Jæja, þeir sem hreyfðu sleðann og listana eru almennt frábærir.

Að nota nýjustu tækni. Margir notuðu flex, en enginn kláraði verkefnið með því að nota grid. Stigið var talið ef flex var notað rétt. Ef einhvers staðar fór útlitið í sundur vegna þessara mjög sveigjana, því miður, þá fékkstu ekki neina viðbótarstig.

Löggilding eyðublaða. Allt sem þurfti var að bæta tilskildum eiginleikum við hvert inntak eyðublaðsins. Við bættum stigum við þá sem staðfestu tölvupóstreitinn sem tölvupóst.

Stíll skráarupphleðsluhnappinn. Við bjuggumst við að sjá samsetningu eins og: og Veldu skrá . Næst þurftum við að fela inntakið og stíla merkimiðann. Það er önnur algeng leið - að gera gagnsæ inntak og setja það ofan á hnappinn. En ekki allir vafrar leyfa stíl , og slík lausn er ekki hægt að kalla fullkomlega kross-vafra. Og það er merkingarlega réttara að búa til merkimiða.

Samhæfni í gegnum vafra. Við athuguðum hvort allt væri í lagi í tveimur nýjustu útgáfum nútímavafra (án IE - þátttakendur voru heppnir), sem og í Safari á iPhone og Chrome á Android.

Þvert á móti drógum við frá okkur stig ef einhver notaði JS eða Bootstrap: báðir myndu vinna bug á tilgangi alls verkefnisins. Þar að auki fengu þátttakendur með Bootstrap ekki aðeins mínus heldur misstu einnig mörg stig fyrir merkingarfræði og útfærða þætti.

Þeir sem hýstu síðuna sína einhvers staðar á netinu fengu ekki sérstaka yfirburði - en gagnrýnendur voru mjög ánægðir þegar þeir þurftu ekki að hlaða niður geymslum og keyra þær á staðnum á tölvunni sinni. Svo þetta þjónaði sem plús fyrir karma.

Fyrsta verkefnið var mjög gagnlegt fyrst og fremst fyrir nemandann. Þeir sem við samþykktum ekki núna eru með útbúna ferilskrá - þú getur stoltur hengt hana við öll svör eða sett hana á gh-síðurnar þínar.

Verkefni 2: Flutningaleið

Höfundur verkefnisins er yfirmaður leitarviðmótshópsins Denis Balyko.

Ástand

Áttu stjörnukort? Það sýnir nafn hverrar stjörnu, sem og fjarlægðina frá henni til annarra stjarna á ljóssekúndum. Útfærðu lausnarfallið, sem ætti að taka þrjú rök: hlutur þar sem lyklarnir eru nöfn stjarnanna og gildin eru fjarlægðir til stjarnanna (umferð í geimnum aðra leið), sem og nöfn á upphafs- og endapunktur stígsins - upphaf og endir, í sömu röð. Fallið ætti að skila stystu vegalengdinni frá upphafsstjörnunni til lokastjörnunnar og leiðarinnar sem á að fylgja.

Virka undirskrift:

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

Dæmi um inntaksgögn:

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

Dæmi úttak:

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

Athugið: Beinagrind lausnarinnar er í src/ möppunni, settu lausnina þína í solution.js.

Sannprófunin á öðru verkefninu var sjálfvirkasta og hlutlægasta. Flestir krakkar giskuðu á að nauðsynlegt væri að innleiða reiknirit Dijkstra. Þeir sem fundu lýsingu þess og innleiddu reikniritið í JS eru vel gerðir. Við athugun á verkefninu rákumst við hins vegar á mörg blöð með sömu villunum. Við leituðum á netinu að kóðabrotum og fundum grein þar sem þátttakendur afrituðu reikniritið. Það er fyndið að margir afrituðu kóðann úr greininni ásamt athugasemdum höfundar. Slík verk fengu lága einkunn. Við bönnum ekki notkun á neinum heimildum, en við viljum að einstaklingur kafi ofan í það sem hann skrifar.

viðmið

Helstu stig voru veitt fyrir próf. Stundum var ljóst að strákarnir voru að rugla í geymslunni, endurnefna möppur og próf myndu mistakast einfaldlega vegna þess að þeir gátu ekki fundið nauðsynlegar skrár. Í ár reyndum við að hjálpa svona strákum og skiluðum öllu á sinn stað fyrir þá. En á næsta ári ætlum við að skipta yfir í keppniskerfi og það verður ekki lengur fyrirgefið.

Það voru líka „mannleg“, handvirk viðmið. Til dæmis, tilvist eins kóðastíls. Enginn dró stig fyrir að nota flipa í stað bils eða öfugt. Það er svo annað mál ef þú skiptir á stöku gæsalöppum með tvöföldum gæsalöppum samkvæmt einni reglu sem þú þekkir og setur semíkommu af handahófi.

Tekið var sérstaklega tillit til skýrleika og læsileika lausnarinnar. Á öllum ráðstefnum í heiminum segja þeir að 80% af starfi forritara felist í því að lesa kóða annarra. Jafnvel skólabörn gangast undir kóðadóma - frá sýningarstjórum sínum og frá hvort öðru. Þannig að þessi viðmiðun hafði verulegt vægi. Það hafa verið verk þar sem engar breytur voru lengri en einn stafur - vinsamlegast ekki gera það. Ummæli þátttakenda voru mjög uppörvandi - að undanskildum þeim sem voru eins og ummæli Stellu Chang.

Síðasta viðmiðið er tilvist sjálfvirkra prófana. Aðeins fáir bættu þeim við, en fyrir alla varð það mikill plús í karma þeirra.

Rétt ákvörðun:

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

Verkefni 3: Viðburðadagatal

Það var undirbúið af viðmótshönnuðum Sergey Kazakov og Alexander Podskrebkin.

Ástand

Skrifaðu smádagatal til að sýna dagskrána þína. Þú getur tekið hvaða tímaáætlun sem þú vilt. Til dæmis áætlun framendaráðstefnu árið 2019.

Dagatalið ætti að líta út eins og listi. Það eru engar aðrar kröfur um hönnun. Gerðu það mögulegt að stilla viðburðaáminningar með 3, 7 og 14 daga fyrirvara. Eftir fyrsta niðurhalið af internetinu ætti dagatalið að opnast og virka án nettengingar.

Gagnlegar auðlindir

Framhlið ráðstefnuáætlun:
confs.tech/javascript?topics=javascript%2Bcss%2Bux

Þjónustustarfsmenn:
developer.mozilla.org/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers
developers.google.com/web/fundamentals/primers/service-workers

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

Þriðja verkefnið var áhugaverðast að prófa, því það voru svo margar mögulegar lausnir, hver með sína. Við athuguðum hvernig umsækjandinn meðhöndlar ókunna tækni - hvort hann kunni að rannsaka, hvort hann prófi lausnir sínar.

viðmið

Brotið dagatal. Já, það þurfti samt að leggja það út. Það voru líka þeir sem tóku ástandið of bókstaflega og settu ekki inn eina línu af CSS kóða. Það leit ekki mjög aðlaðandi út en ef allt virkaði fækkaði stigunum ekki.

Að fá lista yfir atburði frá heimildarmanni. Þetta er ekki skipulagsverkefni, þannig að listi yfir atburði sem innifalinn var í því var ekki talinn. Þú getur alltaf aflýst ráðstefnu, breytt tímasetningu hans eða bætt við nýjum. Svo það var nauðsynlegt að taka á móti gögnum að utan og gera útlitið byggt á mótteknu JSON. Það var mikilvægt að fá gögnin á einhvern hátt (með því að nota niðurhalsaðferðina eða með því að nota XMLHttpRequest). Ef einstaklingur bætti við fjölfyllingu til að sækja og merkti val sitt í readme þá var það talið sem plús.

Skráning þjónustufulltrúa án villna og vinna án nettengingar eftir fyrsta niðurhalið. Hér er dæmi þjónustustarfsmaður með skyndiminni áætlunar við fyrstu ræsingu. Upplýsingar um þjónustustarfsmenn, getu þeirra og leiðir til að vinna með þeim (aðferðir til að vinna með skyndiminni, vinna offline) er að finna hér.

Geta til að stilla áminninguþannig að það virki í raun eftir 3, 7, 14 daga. Það var nauðsynlegt að skilja notifications API, tengill á hvaða var rétt að verki. Við áttum ekki von á neinni sérstakri útfærslu til að athuga hvort það sé kominn tími til að ýta á. Allir vinnumöguleikar voru samþykktir: geymsla í localStorage, IndexDB eða reglubundin skoðanakönnun af þjónustuaðili. Það var meira að segja hægt að búa til push server (hér Dæmi), en það myndi ekki virka án nettengingar. Það var ekki síður mikilvægt að fá ýtt eftir að síðunni var lokað - og opnað eftir nokkurn tíma. Ef áminningin dó á sama tíma og síðunni var lokað var lausnin ekki talin. Það er flott þegar strákarnir hugsuðu um gagnrýnendurna og gerðu það mögulegt að fá ýtt núna - til að bíða ekki í 3 daga.

Geta til að setja tákn á skjáborðið (PWA). Við athuguðum hvort skráin væri til staðar manifest.json með réttum táknum. Sumir krakkar gerðu þessa skrá (eða létu hana búa til í CreateReactApp) - en bættu ekki við réttum táknum. Síðan, þegar reynt var að setja upp, kom upp villa eins og „þarf að nota annað tákn“.

Kóðastíll og uppbygging verkefnis. Eins og í öðru verkefninu skoðuðum við einn kóðastíl (jafnvel þótt hann félli ekki saman við okkar). Sumir krakkar skrúfuðu á linters - það er frábært.

Console villur. Ef það var vísbending rétt í stjórnborðinu um að eitthvað væri að og þátttakandinn tók ekki eftir því, þá drógum við stig.

Niðurstöður

Það sem er fyndið við ákvarðanir þátttakenda:

• Einn spurningalisti innihélt eftirfarandi texta: „Vinur forritara hjálpaði mér að setja saman React forrit. Ég sprengdi hann með spurningum um hvernig og hvers vegna, og hann sagði mér. Mér líkaði það mjög vel, mig langar að vita meira um það." Við vorum að róta í þessari umsókn af öllu hjarta, en því miður var vinur frambjóðandans ekki mjög hjálpsamur við að láta umsóknina ganga upp.
• Einn frambjóðandi sendi hlekk á GitHub, þar sem RAR skjalasafnið var staðsett - það er erfitt að tjá sig um þetta. 🙂
• Annar frambjóðandi, í athugasemdinni á fyrstu línu lausn.js skráarinnar, viðurkenndi heiðarlega að hafa afritað reikniritið.

Við fengum umsóknir frá 76 umsækjendum og völdum 23 manns. Okkur voru sendir spurningalistar ekki bara frá Minsk, heldur einnig frá Moskvu, Sankti Pétursborg og jafnvel Tatarstan. Sumir strákanna komu okkur á óvart með núverandi starfsgreinum sínum: annar þeirra er réttarfræðingur og hinn er læknanemi.

Niðurstaðan var áhugaverð dreifing á árangri við að klára verkefni. Þátttakendur kláruðu fyrsta verkefnið að meðaltali um 60%, annað um 50% og það þriðja reyndist erfiðast og lauk með 40% að meðaltali.

Við fyrstu sýn virðast verkefnin flókin og tímafrek. Ástæðan er ekki sú að við viljum eyða sem flestum frambjóðendum. Meðan á námi stendur standa nemendur frammi fyrir raunverulegum verkefnum - að búa til spjall, Yandex.Music fyrir börn eða Yandex.Weather fyrir fólk sem er háð veðri. Fyrir þetta þarftu byrjunarstöð.

Ég man að ég sá SRI inngangsverkefnið mitt fyrir tveimur árum og hugsaði að ég myndi aldrei leysa það. Aðalatriðið á þessari stundu er að setjast niður, lesa vandlega skilyrðin og byrja að gera það. Það kemur í ljós að skilyrðin innihalda næstum 80% af lausninni. Til dæmis, í ástandi þriðja verkefnisins (það erfiðasta), bættum við við tenglum á þjónustustarfsmenn og tilkynningaforritaskil á MDN. Nemendur sem kynntu sér innihald tenglanna luku því án erfiðleika.

Ég myndi virkilega vilja að þessi grein væri lesin af umsækjendum sem ætla að fara inn í SRI í framtíðinni, sem gátu ekki farið inn í Minsk skólann eða sem eru að byrja að gera önnur prófverkefni. Eins og þú sérð er alveg hægt að gera það. Þú þarft bara að trúa á sjálfan þig og hlusta á öll ráð höfundanna.

Heimild: www.habr.com