Interfaciei evolutionis scholae: analysis operum Minsk et nova Moscuae statuta

Hodie novus numerus aperitur Yandex Interface Development School apud Moscuam. Prima disciplinae statio fiet a VII Septembris ad XXV Octobris. Alumni ex aliis urbibus participare poterunt in ea remote vel in persona - societas peregrinationis et commoditatis in hospicio reddet. Secundus, etiam ultimus, qui usque ad diem 7 Decembris durabit, persona tantum perfici potest.

Meum nomen est Yulia Seredich, hanc epistulam una cum Sergei Kazakov scripsimus. Ambo tincidunt instrumenti sumus in officio Yandex Minsk et graduati SRI ab annis superioribus.

Interfaciei evolutionis scholae: analysis operum Minsk et nova Moscuae statuta

Occasione adnotatione in Moscuae aperiendae, analysim operum introductoriarum ad priorem Scholam - hic in Minsk editae sumus.

Si historiam SRI provinciarum indagare, ab anno in annum probavimus tres artes magni momenti pro programmatore:

  • Vestibulum at. Quisque sit amet elit at arcu efficitur efficitur. Non fit ut avunculus Seryozha te designet qui totum equos designat, et tu tantum scripta scribis. Unde quilibet discipulus debet ostendere qualiter sciat typothetarum.
  • JavaScript. Si res limitata ad propositum fuit, non haberemus scholam progressionis interfaciei, sed scholam excogitandi propositum. Pulchre interfacies designatae renovandae sunt. Ergo semper est munus pro JS, sed interdum etiam est opus algorithms - eos tantum amamus.
  • Problema solvendum fortasse potissima arte elit. Cum fit ut creando, res celerrime mutantur. Sicut Lewis Carroll: "currendum est quantum potes in eodem loco manere, et ad alium locum perveneris bis velocius currere." Quotidie pervenimus in novas technologias - eas in ratione considerare oportet easque comprehendere. In tertio igitur negotio proposuimus technologias intelligere quod novitius elaborare solet cum nota non esse.

In analysi uniuscuiusque operis, non solum de recta ratione, sed etiam de communibus erroribus, tibi dicemus.

Negotium I: Portfolio

Primum munus ab Yandex.Collections excogitatoris Alexey Cherenkevich, qui scit facere layout, et ministerium collegae, elit interface Sergey Samsonov.

Conditio

Portfolio website crea: dic nobis de te ipso, tuo labore et exspectatione tua ex Schola. Situs quam maxime respondere debet propositioni propositae (nexiones cum tensionibus; 1000px, 600px, 320px, specificatio). Tantum interest in layout, sic placere non JavaScript.

Cum reprehendo rationem habebimus:

  • incisum magnitudinum, color rectitudo, font style, font size;
  • semantic layout;
  • praesentiam diversorum statum elementorum: globuli et nexus ostendentes cursorem volitantes, quatenus activos agros inputant, etc.;
  • cross-browser compatibility (probata recentissimis versionibus navigatri popularis).

Praerogativa erit;

  • usus solutionum recentiorum CSS: flexbox, gridis, etc.;
  • Mauris nibh at arcu;
  • usus pre- et (vel) post-processores, conventus, minificationis, optimization of output code;
  • HTML convalidationis forma, deprimendo fasciculi onerati stylised.

Opus est admodum multiplex, ut omittere possis quod non operatur. Hoc minimum score demitte, sed scientiam tuam adhuc demonstrare poteris. Cum tu fecisti, duos nexus nobis mitte ad librarium tuum et ad fontem codicem in GitHub.

Propositae in assignatione proposita non solum cum pluteis ad mobiles machinas, tabulas et in scriniis, sed etiam cum realibus specificationibus.

Ut quam plurimum obiectivum in exitum primi operis reprimendo efficere possit, multae rationes huius perceptibilis fuerunt.

criteria

Designed website. Hoc evidens videtur, sed nonnullae caudices omnino perstrinxerunt guys - aut tempus servare voluerunt, aut ea facere non potuerunt. Propositum dure dividi potest in quattuor principalia tegumenta: principale velum cum avatar, truncus cum indice exspectationum SRI, truncum cum librario et trunco ​​cum notitia contactus. Possent fieri in sectionibus vel divs simpliciter utentes, summa est quod omnes quattuor caudices praesto erant.

Obsequium layout cum layout. Excogitator speciem separatim fecit (including coloribus, typography, globulis civitatibus, etc.) ut facilius pro candidatis faceret. In fundo erat admonitus in indentibus et lineamentis primi scrinii. Valde gavisus sum cum guys qui omnia vota excogitatoris considerabant: v. gr. primum tegumentum non minus quam altitudo speculationis debuit esse.

Adaptiva layout - Hoc interfacies non ita positum est, ut ad tres conclusiones omnia pixel in extensione fiat. In mediis civitatibus, attentatio ne discrepet. Nonnulli obliti sunt maximam latitudinem continentis circumscribere ac omnia ad 1920 elementa posuisse, quaedam curriculas viatores, sed candidati altiore hoc munere bene copulis.

Semantic layout. "Quoties mundum narraverunt" nexum designari ut , puga - ut . Feliciter plerique candidati hanc postulationem impleverunt. Non omnes album absconditum in exspectatione SRI agnoverunt, eo utens div tags, sed malum non est. Candidatus erat qui omnia textilia semantica sciebat - ubi necesse erat et ubi non erat necesse. Exempli gratia, pro indice - et . Post omnes, semantici - est de intelligenda compositione paginae tuae et ad finem cuiusque scandali (plerique hic tractavit), tum usus pre- et / vel post-processores (pauci hic tractarunt, licet hoc. erat etiam in punctis - plerumque minus et scss utebantur.

labor lapsus. In assignatione scripsimus JS adhiberi non posse. Facultas solvendi problemata hic probata est - lapsus fieri potest utendi compositione et = "#id">. Omnia magica fiunt in gradu selectoris #button-N: sedatus ~ .slider-interior labitur. Cum deprimimus unum e inputatio checks, in statum repressum intrat. His uti possumus et translationem assignare quae nobis opus est continenti cum schedulis: transform: translate(-33%). Potes videre labor lapsus exsequendam hic.

Dropdown lists. Hic etiam omnia ad descenderunt et simile lego: .accordion-item input: repressit ~ .accordion-item__content. Potes videre exsecutionem hic.

Disponibilitate: tabernus, activae et: focu * civitatibus. Gravis ipsum. Solatium in commercio cum instrumento pendebat. Usoris opiniones de suis actionibus semper recipere debet. This item repressa est per commercium cum Quaestionario. Si conjunctionem "voca me" et uisum nihil factum est (quamvis petitio missa est), hoc malum est, quod tunc iterum iterumque strepam. Unde mittentur decem petitiones et iterum revocabuntur decies. Non est obliviscendum mobiles machinas non habere murem, id quod minime oberrare non debet. Illud unum quod non afficit eos qui rem de semantics impleverunt. Si imperium tuum elementum interactivum non est, tum cum oberbis, cursor vexillum remanebit. Incultus valde spectat, etiamsi reactionem scripsisti ad volitandum. Non MINORIS cursorem: monstratorem.

Animationes. Gravis est ut omnes motus cum elementis occurrentes leves sunt. Nihil in vita momentaneum est, ut transitus in volitando et activo modo satis esset, ut interface jucundius esset. Bene, qui animavit lapsus et tabulas plerumque magnas.

Utens latest technology. Multi homines inflectere solebant, sed nemo craticulam usuram explevit. Punctum reputatum est si inflectere recte utendum est. Si alicubi tensione propter hos ipsos flexus discessit, heu, puncta addita non recepisti.

Forma Validation. Quod opus erat, singulis initus formae debitae attributum addere. Nos puncta addimus iis qui agrum electronicum ut inscriptionem convalidant.

Feras tabella upload button. Exspectavimus compositionem similem videre: et select fasciculum. Deinde opus est ut pittacium celare et stilum emittere. Alia via communis - ut diaphanum input et pone super ipsum. Sed non omnes navigatores "input type="file" dici permittunt, et haec solutio non potest plene transitoria dici. Et est semantically rectius facere pittacium.

Crucem pasco convenientiam. Compressimus omnia bene esse in duabus ultimis versionibus recentiorum navigantium (sine IE-participes fortunati), necnon in Safari in iPhones et Chrome in Androids.

Immo puncta deduximus si quis JS vel Bootstrap usus esset: uterque propositum totius operis superaret. Participes praeterea cum Bootstrap non solum minus acceperunt, sed etiam multa puncta pro semanticis et elementis effectis amiserunt.

Qui alicubi locum suum in Interrete exercuerunt, nullum peculiare commodum acceperunt - sed recognitores valde gavisi sunt cum repositoria emittere non debebant et localiter in computatro currunt. Hoc ergo plus pro karma servivit.

Primum munus studiosis imprimis perutile fuit. Quos non recepimus, nunc paratam aliquam habent rationem - omnes responsiones superbe affigere vel in paginas tuas collocare.

Negotium II: Transport iter

Auctor operis est caput inquisitionis interfaciendi coetus Denis Balyko.

Conditio

Habesne stellam map? Nomen cuiuslibet stellae demonstrat, itemque distantiam ab ea ad alias stellas in secunda luce. Exsequendi solutionem functionis, quae tria argumenta sumi debet: rei in qua clavium nomina sunt astrorum, ac valores sunt distantiae siderum (one- way traffic in space), as well as the names of. principia et puncta semitae β€” initium et finis respective. Munus debet reddere brevissimam distantiam ab initio stellae ad metam et viam sequi.

Munus subscriptio:

const solution = function(graph, start, finish)  {
    // Π’Π°ΡˆΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅
} 

Exemplum initus datae:

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

Exemplum output:

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

Nota: Solutio sceleti in src/ folder, solutionem tuam pone in solution.js.

Verificatio operis secundi maxime automated et obiectivus fuit. Plerique ex guys coniectabant necessarium esse algorithmum Dijkstra efficere. Qui descriptionem eius invenerunt et algorithmum in JS impleverunt, bene fiunt. Attamen, cum assignationem annotandam, plures chartas eisdem erroribus incidimus. Investigavimus interreti fragmenta codicis et invenimus articulum e quo participes algorithmum exscripserunt. Ridiculum est multos homines codicem ex articulo transtulisse cum auctoris commentis. Talia opera vili titulo accepit. Non prohibemus quibuslibet fontibus usum, sed volumus hominem ad id quod scripsit.

criteria

Praecipua sunt probata pro probat. Aliquando apparebat guys circa repositorium, renaming folders, et probationes deesse quia simpliciter non poterant invenire necessarias tabulas. Hoc anno talibus guys subvenire conati sumus et omnia in locum suum eis reversi sumus. Sed anno proximo cogitamus ut systema certaminis vertas, et hoc amplius non remittetur.

Erant etiam "humana", criteria manualia. Exempli gratia, praesente uno codice stilo. Nemo puncta deducta pro spatiis tabs utendi loco vel vice versa. Aliud est, si alternas singulas virgulis cum duplici virgulis iuxta unam regulam tibi notam et temere pone semicolon.

Claritas et promptitudo solutionis separatim habita sunt. In omnibus conferentias mundi dicunt LXXX% officium programmantis in aliis legere codicem. Recognitiones Codicis etiam pueri subeunt - ab eorum curatoribus et ab invicem. Haec igitur regula significativum pondus portavit. Opera facta sunt in quibus nullae variabiles notae longiores erant - illud ne feceris. Commentaria a participibus valde hortabantur - exceptis illis quae commentationes Stellae Chang erant identicae.

Postrema criterium praesentia autotestorum est. Pauci homines eis addiderunt, sed omnibus in karma eorum ingens factus est.

Recta solutio:

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

Negotium III: Events Calendar

Praeparata tincidunt interfaciendi Sergey Kazakov et Alexander Podskrebkin.

Conditio

Scribere mini fastos ut tuam cedulam ostendas. Nullam quis arcu velit. Exempli gratia, schedula collationum frontendarum in MMXIX.

Calendarium ut indicem spectare debet. Nulla alia elit ligula. Id efficere potest ut eventus commemorationes 3, 7 et 14 diebus antecedant. Post primam download interretialem, calendarium aperire debet ac munus offline.

utilis Resources

Colloquium frontispicium schedula:
confs.tech/javascript?tops=javascript%2Bcss%2Bux

Operariorum opera:
elit.mozilla.org/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers
developers.google.com/web/fundamentals/primers/service-workers

Acta Vicimediorum API:
elit.mozilla.org/ru/docs/Web/API/Notifications_API

Tertium opus erat maxime interesting experiendi, quia tam multae solutiones possibilium erant singulae cum suis. Sedatus est quomodo candidatus technologias ignotas tractat - num sciat investigationem facere an solutiones suas experiatur.

criteria

insertis calendarium. Etiam id ipsum ut ex. Fuerunt etiam qui condicionem nimis proprie acceperunt et unam lineam CSS codicis non inseruerunt. Non speciosissime spectavit, sed si omnia operata sunt, puncta non decreverunt.

Questus index rerum ex fonte. Hoc negotium propositum non est, ut in indice rerum inclusus non adnumeratus sit. Colloquium semper excutere potes, illud resedulare vel novum addere. Oportuit igitur notitias extrinsecus accipere et extensionem reddere in JSON receptae. Magni momenti erat notitias quoquo modo obtinere (utendo modum arcesse vel XMLHttpRequest utendi). Si quis polyfillum addiderit ut suam electionem in promptu arcessat et notaverit, hoc quasi plus deputatum est.

Operarius adnotatione sine erroribus and work online after the first download. Ecce exemplum servicium operarium cum schedula caching prima tabernus. Singula de servitiis operariis, eorum facultatibus et modis cum eis laborandi (insidias pro cella operandi cum offline operandi) hic inveniuntur.

Facultatem ad monumentumut actu operatur post III, VII, XIV dies. Notificaciones API intelligere oportuit; ad quod " rectum negotium fuit. Non expectavimus exsecutionem specificae sisto num tempus est impellere. Quaelibet optio operandi accepta est: reposita in localiStorage, IndexDB vel suffragium periodicum ab operario servicio. Etiam fieri potest ut servo impulsum (hic exempli gratia), sed non opus offline. Aeque momenti erat pulsationem recipere postquam pagina clausa est et post aliquod tempus aperiebatur. Si commemoratio simul mortua est, pagina clausa est, solutio non numerata est. Frigidum est cum guys de recognitoribus cogitaverunt et id fieri posse ut nunc ventilabis - ita ut III dies non exspectent.

Facultatem ponere icon in desktop (PWA). Nos coram tabella sedatus manifest.json cum iconibus emendatis. Nonnulli guys hunc fasciculum fecerunt (vel in CreateReactApp genitum reliquerunt) β€” sed rectas icones non addidit. Deinde, cum institutionem emittere conetur, error tamquam "alia icon opus" occurrit.

Codestyle and project structure. Ut in secundo munere inspeximus unum codicem (etiamsi cum nostro non congrueret). Some guys screwed on linters - that's great.

Consolamini errores. Si denotat ius in consolatorio esse aliquid iniustum, et particeps non attendit, tunc deductis punctis.

results

Quid est ridiculum de iudiciis participantium:

  • Una quaestionarium hunc textum continebat: "Amicus programmator adiuvavit me applicatio React. Interrogando quomodo et quare eum emittebam, et dixit mihi. Ego vere probaverunt eam, plura de eo scire cupio. Hanc applicationem totis cordibus everteremus, sed proh dolor, amicus candidati non multum prodest ad opus applicationis faciendi.
  • Unus candidatus nexum cum GitHub misit, ubi archivum RAR situm est - de hoc explanare difficile est. πŸ™‚
  • Alius candidatus, in commentarium primae fasciculi solution.js, honeste admisit quod algorithmum descripsit.

Applicationes accepimus a 76 candidatis et 23 homines delecti. Interrogationes missi sumus non solum a Minsk, sed etiam a Moscovia, Petropoli et etiam Tatarstano. Nonnulli ex latinas professiones hodiernas nos mirantur: una earum est peritus forensis, alter est discipulus medicinae.

Ex quo factum est an interesting distributio successus rates in perficiendis operibus. Participes primum munus perfecerunt mediocris per 60%, secundum per 50%, tertium evasit difficillimum et medium 40% complevit.

In primo aspectu, munera ecce multiplex et tempus consumens. Ratio non est quod quamplurimos candidatos runcare volumus. In studiis suis studentes versantur officiis realibus vitae - chat, Yandex.Music pro pueris vel Yandex. Tempestas pro populo dependens. Nam id turpis eget ante consequat tincidunt.

Memini me videre SRI introitus negotium meum ante duos annos ac cogitans me numquam solvere. Summa nunc est sedere, conditiones diligenter legere et facere incipias. Evenit ut condiciones 80% solutionis fere continent. Exempli causa, in conditione tertii operis (difficillime) nexus ad opificum opera et notificationes API in MDN addidimus. Alumni studuerunt contenta nexuum sine difficultate id perfecerunt.

Ego vere amo hunc articulum legendum a candidatis qui SRI in futurum meditantur ingredi, qui Minsk Scholam ingredi non poterant, vel qui aliud experimentum opus facere incipiebant. Id ut perspicis, id facere posse satis est. Vos iustus postulo ut in te credas et omnes apices ab auctoribus audias.

Source: www.habr.com