ఇంటర్‌ఫేస్ డెవలప్‌మెంట్ స్కూల్: మిన్స్క్ కోసం టాస్క్‌ల విశ్లేషణ మరియు మాస్కోలో కొత్త సెట్

ఈరోజు కొత్త నమోదు ప్రారంభించబడింది Yandex ఇంటర్ఫేస్ డెవలప్మెంట్ స్కూల్ మాస్కోలో. మొదటి దశ శిక్షణ సెప్టెంబర్ 7 నుంచి అక్టోబర్ 25 వరకు జరుగుతుంది. ఇతర నగరాల నుండి విద్యార్థులు రిమోట్‌గా లేదా వ్యక్తిగతంగా ఇందులో పాల్గొనగలరు - హాస్టల్‌లో ప్రయాణ మరియు వసతి కోసం కంపెనీ చెల్లిస్తుంది. రెండవది, చివరి దశ కూడా డిసెంబర్ 3 వరకు ఉంటుంది, ఇది వ్యక్తిగతంగా మాత్రమే పూర్తి చేయబడుతుంది.

నా పేరు యులియా సెరెడిచ్, మేము సెర్గీ కజకోవ్‌తో కలిసి ఈ పోస్ట్‌ను వ్రాసాము. మేము Yandex యొక్క మిన్స్క్ కార్యాలయంలో ఇంటర్ఫేస్ డెవలపర్లు మరియు మునుపటి సంవత్సరాల నుండి SRI గ్రాడ్యుయేట్లు.

ఇంటర్‌ఫేస్ డెవలప్‌మెంట్ స్కూల్: మిన్స్క్ కోసం టాస్క్‌ల విశ్లేషణ మరియు మాస్కోలో కొత్త సెట్

మాస్కోలో రిజిస్ట్రేషన్ ప్రారంభోత్సవం సందర్భంగా, మేము మునుపటి పాఠశాలకు పరిచయ పనుల విశ్లేషణను ప్రచురిస్తున్నాము - ఇక్కడ మిన్స్క్లో.

మీరు SRI అసైన్‌మెంట్‌ల చరిత్రను గుర్తించినట్లయితే, సంవత్సరానికి మేము ప్రోగ్రామర్ కోసం మూడు ముఖ్యమైన నైపుణ్యాలను పరీక్షించాము:

  • లేఅవుట్. ప్రతి డెవలపర్ లేఅవుట్ చేయగలగాలి. మీరు మొత్తం జట్టు కోసం డిజైన్ చేసే అంకుల్ సెరియోజాను కలిగి ఉండటం జరగదు మరియు మీరు స్క్రిప్ట్‌లను మాత్రమే వ్రాస్తారు. అందువల్ల, ప్రతి విద్యార్థి తనకు ఎలా టైప్‌సెట్ చేయాలో ఎలా తెలుసో చూపించాలి.
  • జావాస్క్రిప్ట్. విషయం లేఅవుట్‌కే పరిమితమైతే, మాకు స్కూల్ ఆఫ్ ఇంటర్‌ఫేస్ డెవలప్‌మెంట్ ఉండదు, కానీ లేఅవుట్ డిజైనర్ల స్కూల్ ఉంటుంది. అందంగా రూపొందించిన ఇంటర్‌ఫేస్‌ను పునరుద్ధరించాలి. అందువల్ల, JS కోసం ఎల్లప్పుడూ ఒక పని ఉంటుంది, కానీ కొన్నిసార్లు ఇది అల్గారిథమ్‌ల కోసం ఒక పనిగా ఉంటుంది - మేము వాటిని చాలా ప్రేమిస్తాము.
  • సమస్య పరిష్కారం బహుశా డెవలపర్ యొక్క అత్యంత ముఖ్యమైన నైపుణ్యం. ఇంటర్‌ఫేస్‌లను సృష్టించే విషయానికి వస్తే, విషయాలు చాలా త్వరగా మారుతున్నాయి. ఇది లూయిస్ కారోల్ లాగా ఉంటుంది: "మీరు ఒకే స్థలంలో ఉండటానికి వీలైనంత వేగంగా పరుగెత్తాలి మరియు మరొక ప్రదేశానికి వెళ్లడానికి మీరు రెండు రెట్లు వేగంగా పరుగెత్తాలి." ప్రతిరోజూ మనం కొత్త సాంకేతికతలను చూస్తాము - మనం వాటిని పరిగణనలోకి తీసుకోవాలి మరియు వాటిని అర్థం చేసుకోగలగాలి. అందువల్ల, మూడవ పనిలో, అనుభవం లేని డెవలపర్‌కు సాధారణంగా తెలియని సాంకేతికతలను అర్థం చేసుకోవడానికి మేము ప్రతిపాదించాము.

ప్రతి పని యొక్క విశ్లేషణలో, సరైన విధానం గురించి మాత్రమే కాకుండా, సాధారణ తప్పుల గురించి కూడా మేము మీకు చెప్తాము.

టాస్క్ 1: పోర్ట్‌ఫోలియో

మొదటి పనిని Yandex.Collections డిజైనర్ అలెక్సీ చెరెన్కేవిచ్, లేఅవుట్ ఎలా చేయాలో తెలుసు, మరియు అతని సేవా సహచరుడు, ఇంటర్ఫేస్ డెవలపర్ సెర్గీ సామ్సోనోవ్.

కండిషన్

పోర్ట్‌ఫోలియో వెబ్‌సైట్‌ను సృష్టించండి: మీ గురించి, మీ పని గురించి మరియు పాఠశాల నుండి మీ అంచనాల గురించి మాకు చెప్పండి. సైట్ ప్రతిపాదిత లేఅవుట్‌కు వీలైనంత వరకు అనుగుణంగా ఉండాలి (లేఅవుట్‌లకు లింక్‌లు: 1000px, 600px, 320px, వివరణ) మేము లేఅవుట్‌పై మాత్రమే ఆసక్తి కలిగి ఉన్నాము, కాబట్టి దయచేసి జావాస్క్రిప్ట్‌ని ఉపయోగించవద్దు.

తనిఖీ చేస్తున్నప్పుడు మేము పరిగణనలోకి తీసుకుంటాము:

  • ఇండెంటేషన్ పరిమాణాలు, రంగు సరైనది, ఫాంట్ శైలి, ఫాంట్ పరిమాణం;
  • సెమాంటిక్ లేఅవుట్;
  • మూలకాల యొక్క వివిధ స్థితుల ఉనికి: కర్సర్‌ను ఉంచేటప్పుడు బటన్లు మరియు లింక్‌లను ప్రదర్శించడం, క్రియాశీల ఇన్‌పుట్ ఫీల్డ్‌లను హైలైట్ చేయడం మొదలైనవి;
  • క్రాస్-బ్రౌజర్ అనుకూలత (జనాదరణ పొందిన బ్రౌజర్‌ల యొక్క తాజా వెర్షన్‌లలో పరీక్షించబడింది).

ప్రయోజనం ఉంటుంది:

  • ఆధునిక CSS పరిష్కారాల ఉపయోగం: ఫ్లెక్స్‌బాక్స్, గ్రిడ్ మొదలైనవి;
  • అనుకూల లేఅవుట్;
  • ముందు మరియు (లేదా) పోస్ట్-ప్రాసెసర్ల ఉపయోగం, అసెంబ్లీ, మినిఫికేషన్, అవుట్పుట్ కోడ్ యొక్క ఆప్టిమైజేషన్;
  • HTML ఫారమ్ ధ్రువీకరణ, శైలీకృత ఫైల్ అప్‌లోడ్ బటన్.

పని చాలా పెద్దది, కాబట్టి మీరు పని చేయని వాటిని దాటవేయవచ్చు. ఇది మీ స్కోర్‌ను కొద్దిగా తగ్గిస్తుంది, కానీ మీరు ఇప్పటికీ మీ జ్ఞానాన్ని ప్రదర్శించగలుగుతారు. మీరు పూర్తి చేసిన తర్వాత, మాకు రెండు లింక్‌లను పంపండి - మీ పోర్ట్‌ఫోలియోకు మరియు GitHubలోని సోర్స్ కోడ్‌కు.

అసైన్‌మెంట్‌లో ప్రతిపాదించబడిన లేఅవుట్‌లు కేవలం మొబైల్ పరికరాలు, టాబ్లెట్‌లు మరియు డెస్క్‌టాప్‌ల కోసం స్క్రీన్‌లతో మాత్రమే కాకుండా నిజమైన స్పెసిఫికేషన్‌లతో కూడా ఉన్నాయి.

మొదటి పనిని తనిఖీ చేయడం ద్వారా సాధ్యమైనంత ఎక్కువ నిష్పాక్షికతను తీసుకురావడానికి, ఈ తనిఖీకి చాలా ప్రమాణాలు ఉన్నాయి.

ప్రమాణం

రూపొందించిన వెబ్‌సైట్. ఇది స్పష్టంగా కనిపిస్తోంది, కానీ కొంతమంది వ్యక్తులు కొన్ని బ్లాక్‌లను పూర్తిగా దాటవేసారు - వారు సమయాన్ని ఆదా చేసుకోవాలనుకున్నారు లేదా వారు వాటిని చేయలేరు. లేఅవుట్‌ను సుమారుగా నాలుగు ప్రధాన స్క్రీన్‌లుగా విభజించవచ్చు: అవతార్‌తో ప్రధాన స్క్రీన్, SRI నుండి అంచనాల జాబితాతో కూడిన బ్లాక్, పోర్ట్‌ఫోలియోతో బ్లాక్ మరియు సంప్రదింపు సమాచారంతో బ్లాక్. వాటిని విభాగాలలో తయారు చేయవచ్చు లేదా divsని ఉపయోగించి తయారు చేయవచ్చు, ప్రధాన విషయం ఏమిటంటే నాలుగు బ్లాక్‌లు అందుబాటులో ఉన్నాయి.

లేఅవుట్తో లేఅవుట్ యొక్క వర్తింపు. అభ్యర్థులకు సులభతరం చేయడానికి డిజైనర్ ప్రత్యేక వివరణను (రంగులు, టైపోగ్రఫీ, బటన్ స్టేట్‌లు మొదలైన వాటితో సహా) రూపొందించారు. దిగువన మొదటి స్క్రీన్ యొక్క ఇండెంట్‌లు మరియు లక్షణాలపై సూచన ఉంది. డిజైనర్ యొక్క అన్ని కోరికలను పరిగణనలోకి తీసుకున్న అబ్బాయిలతో నేను చాలా సంతోషించాను: ఉదాహరణకు, మొదటి స్క్రీన్ వ్యూపోర్ట్ యొక్క ఎత్తు కంటే తక్కువగా ఉండకూడదు.

అనుకూల లేఅవుట్ - ఇది ఇంటర్‌ఫేస్ కేవలం లేఅవుట్‌లో లేఅవుట్‌లో మూడు రిజల్యూషన్‌ల వద్ద పిక్సెల్‌కు పిక్సెల్‌గా ఉండేలా ఏర్పాటు చేయబడలేదు. ఇంటర్మీడియట్ రాష్ట్రాల్లో, లేఅవుట్ కూడా విడిపోకూడదు. కొందరు కంటైనర్ యొక్క గరిష్ట వెడల్పును పరిమితం చేయడం మరియు ప్రతిదీ 1920 పిక్సెల్‌లకు సెట్ చేయడం మర్చిపోయారు, కొందరు నేపథ్యాలను గందరగోళపరిచారు, అయితే మొత్తంగా అభ్యర్థులు ఈ పనిని బాగా ఎదుర్కొన్నారు.

సెమాంటిక్ లేఅవుట్. "వారు ప్రపంచానికి ఎన్నిసార్లు చెప్పారు" లింక్‌ను , బటన్ - ఇలా రూపొందించాలి . అదృష్టవశాత్తూ, చాలా మంది అభ్యర్థులు ఈ అవసరాన్ని కూడా నెరవేర్చారు. ప్రతి ఒక్కరూ SRI యొక్క అంచనాలలో దాచిన జాబితాను గుర్తించలేదు, ఇది div ట్యాగ్‌లను ఉపయోగించి తయారు చేయబడింది, కానీ అది అంత చెడ్డది కాదు. అక్కడ ఒక అభ్యర్థి తనకు తెలిసిన సెమాంటిక్ ట్యాగ్‌లన్నింటినీ - అవసరమైన చోట, అవసరం లేని చోట చొప్పించాడు. ఉదాహరణకు, జాబితాకు బదులుగా - మరియు . అన్నింటికంటే, సెమాంటిక్స్ - ఇది మీ పేజీ యొక్క కూర్పు మరియు ప్రతి బ్లాక్ యొక్క ఉద్దేశ్యాన్ని అర్థం చేసుకోవడం (మెజారిటీ దీన్ని ఇక్కడ నిర్వహించింది), అలాగే ముందు మరియు / లేదా పోస్ట్-ప్రాసెసర్‌ల ఉపయోగం (కొంతమంది దీన్ని ఇక్కడ నిర్వహించారు, అయితే ఇది పాయింట్లలో కూడా ఉంది - చాలా తరచుగా వారు తక్కువగా ఉపయోగించారు మరియు scss) .

వర్కింగ్ స్లయిడర్. అసైన్‌మెంట్‌లో JS ఉపయోగించబడదని మేము వ్రాసాము. ఇక్కడ సమస్యలను పరిష్కరించే సామర్థ్యం పరీక్షించబడింది - బంచ్ ఉపయోగించి స్లయిడర్ తయారు చేయవచ్చు మరియు . అన్ని మ్యాజిక్‌లు సెలెక్టర్ స్థాయిలో జరుగుతాయి #బటన్-N: తనిఖీ చేయబడింది ~ .స్లయిడర్-లోపలి .స్లయిడర్-స్లయిడ్‌లు. మేము ఇన్‌పుట్ చెక్‌బాక్స్‌లలో ఒకదానిపై క్లిక్ చేసినప్పుడు, అది తనిఖీ చేయబడిన స్థితికి వెళుతుంది. మేము దీని ప్రయోజనాన్ని పొందవచ్చు మరియు మనకు అవసరమైన అనువాదాన్ని స్లయిడ్‌లతో కంటైనర్‌కు కేటాయించవచ్చు: రూపాంతరం: అనువాదం(-33%). మీరు స్లయిడర్ యొక్క అమలును చూడవచ్చు ఇక్కడ.

డ్రాప్‌డౌన్ జాబితాలు. ఇక్కడ అన్నీ కూడా వచ్చాయి మరియు ఇదే ఎంపిక సాధనం: .accordion-item input:checked ~ .accordion-item__content. మీరు అమలును చూడవచ్చు ఇక్కడ.

లభ్యత :హోవర్, :యాక్టివ్ మరియు :ఫోక్యూ* స్టేట్స్. చాలా ముఖ్యమైన అంశం. ఇంటర్‌ఫేస్‌తో పరస్పర చర్య సమయంలో సౌలభ్యం దానిపై ఆధారపడి ఉంటుంది. వినియోగదారు వారి చర్యలపై ఎల్లప్పుడూ అభిప్రాయాన్ని స్వీకరించాలి. ఈ అంశం ప్రశ్నాపత్రంతో పరస్పర చర్య అంతటా తనిఖీ చేయబడింది. నేను "నాకు కాల్ చేయి" బటన్‌ను క్లిక్ చేసి, దృశ్యమానంగా ఏమీ జరగలేదు (అభ్యర్థన పంపబడినప్పటికీ), ఇది చెడ్డది, ఎందుకంటే నేను దాన్ని మళ్లీ మళ్లీ క్లిక్ చేస్తాను. ఫలితంగా, పది అభ్యర్థనలు పంపబడతాయి మరియు నేను పదిసార్లు తిరిగి కాల్ చేయబడతాను. మొబైల్ పరికరాలకు మౌస్ లేదని మనం మర్చిపోకూడదు, అంటే హోవర్ ఉండకూడదు. మరియు సెమాంటిక్స్ గురించి పాయింట్‌ను నెరవేర్చిన వారిని ప్రభావితం చేయని మరో పాయింట్. మీ నియంత్రణ ఇంటరాక్టివ్ ఎలిమెంట్ కానట్లయితే, మీరు దానిపై హోవర్ చేసినప్పుడు, కర్సర్ ప్రామాణికంగా ఉంటుంది. మీరు హోవర్ చేయడానికి ప్రతిచర్యను వ్రాసినప్పటికీ, ఇది చాలా అసహ్యంగా కనిపిస్తుంది. కర్సర్‌ను తక్కువ అంచనా వేయవద్దు: పాయింటర్.

యానిమేషన్లు. మూలకాలతో సంభవించే అన్ని ప్రతిచర్యలు మృదువైనవిగా ఉండటం ముఖ్యం. జీవితంలో ఏదీ తక్షణమే జరగదు, కాబట్టి ఇంటర్‌ఫేస్‌ను మరింత ఆహ్లాదకరంగా మార్చడానికి హోవర్ మరియు యాక్టివ్‌లో పరివర్తనాలు ఉంటే సరిపోతుంది. బాగా, స్లయిడర్ మరియు జాబితాలను యానిమేట్ చేసిన వారు సాధారణంగా గొప్పవారు.

లేటెస్ట్ టెక్నాలజీని ఉపయోగిస్తున్నారు. చాలా మంది వ్యక్తులు ఫ్లెక్స్‌ను ఉపయోగించారు, కానీ ఎవరూ గ్రిడ్‌ని ఉపయోగించి పనిని పూర్తి చేయలేదు. ఫ్లెక్స్ సరిగ్గా ఉపయోగించినట్లయితే పాయింట్ లెక్కించబడుతుంది. ఈ ఫ్లెక్సీల కారణంగా ఎక్కడైనా లేఅవుట్ విడిపోయి ఉంటే, అయ్యో, మీరు అదనపు పాయింట్‌లు ఏవీ అందుకోలేదు.

ఫారమ్ ధ్రువీకరణ. ఫారమ్ యొక్క ప్రతి ఇన్‌పుట్‌కు అవసరమైన లక్షణాన్ని జోడించడం మాత్రమే అవసరం. ఇమెయిల్ ఫీల్డ్‌ని ఇమెయిల్‌గా ధృవీకరించిన వారికి మేము పాయింట్‌లను జోడించాము.

ఫైల్ అప్‌లోడ్ బటన్‌ను స్టైలింగ్ చేస్తోంది. మేము ఇలాంటి కలయికను చూడాలని ఆశించాము: మరియు ఫైల్‌ని ఎంచుకోండి . తర్వాత మనం ఇన్‌పుట్‌ను దాచి, లేబుల్‌ని స్టైల్ చేయాలి. మరొక సాధారణ మార్గం ఉంది - పారదర్శక ఇన్‌పుట్ చేయడానికి మరియు బటన్ పైన ఉంచండి. కానీ అన్ని బ్రౌజర్‌లు స్టైలింగ్‌ను అనుమతించవు , మరియు అటువంటి పరిష్కారం పూర్తిగా క్రాస్ బ్రౌజర్ అని పిలవబడదు. మరియు ఒక లేబుల్ చేయడానికి అర్థపరంగా మరింత సరైనది.

క్రాస్ బ్రౌజర్ అనుకూలత. ఆధునిక బ్రౌజర్‌ల యొక్క రెండు తాజా వెర్షన్‌లలో (IE లేకుండా - పాల్గొనేవారు అదృష్టవంతులు), అలాగే iPhoneలలోని Safari మరియు Androidsలోని Chromeలో ప్రతిదీ సరిగ్గా ఉందని మేము తనిఖీ చేసాము.

దీనికి విరుద్ధంగా, ఎవరైనా JS లేదా బూట్‌స్ట్రాప్‌ని ఉపయోగిస్తే మేము పాయింట్‌లను తీసివేస్తాము: రెండూ మొత్తం టాస్క్ యొక్క ప్రయోజనాన్ని ఓడిస్తాయి. అంతేకాకుండా, బూట్‌స్ట్రాప్‌తో పాల్గొనేవారు మైనస్‌ను పొందడమే కాకుండా, సెమాంటిక్స్ మరియు అమలు చేసిన అంశాల కోసం అనేక పాయింట్లను కోల్పోయారు.

ఇంటర్నెట్‌లో ఎక్కడో తమ సైట్‌ని హోస్ట్ చేసిన వారికి నిర్దిష్ట ప్రయోజనం ఏదీ లభించలేదు - అయితే రిపోజిటరీలను డౌన్‌లోడ్ చేసి స్థానికంగా తమ కంప్యూటర్‌లో వాటిని అమలు చేయనవసరం లేనప్పుడు సమీక్షకులు చాలా సంతోషించారు. కాబట్టి ఇది కర్మకు ప్లస్‌గా పనిచేసింది.

మొదటి పని ప్రధానంగా విద్యార్థికి చాలా ఉపయోగకరంగా ఉంది. మేము ఇప్పుడు అంగీకరించని వారి వద్ద సిద్ధంగా ఉన్న రెజ్యూమ్ ఉంది - మీరు దానిని అన్ని ప్రతిస్పందనలకు గర్వంగా జోడించవచ్చు లేదా మీ 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లో ఉంచండి.

రెండవ పని యొక్క ధృవీకరణ అత్యంత ఆటోమేటెడ్ మరియు లక్ష్యం. చాలా మంది అబ్బాయిలు Dijkstra యొక్క అల్గోరిథంను అమలు చేయాల్సిన అవసరం ఉందని ఊహించారు. 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 రోజుల ముందుగానే సెట్ చేయడాన్ని సాధ్యం చేయండి. ఇంటర్నెట్ నుండి మొదటి డౌన్‌లోడ్ తర్వాత, క్యాలెండర్ ఆఫ్‌లైన్‌లో తెరవబడి పని చేయాలి.

ఉపయోగకరమైన వనరులు

ఫ్రంటెండ్ కాన్ఫరెన్స్ షెడ్యూల్:
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 ఉపయోగించడం). ఒక వ్యక్తి పొందడం కోసం పాలీఫిల్‌ని జోడించి, రీడ్‌మీలో అతని ఎంపికను గుర్తు పెట్టినట్లయితే, ఇది ప్లస్‌గా పరిగణించబడుతుంది.

లోపాలు లేకుండా సేవా కార్యకర్త నమోదు మరియు మొదటి డౌన్‌లోడ్ తర్వాత ఆఫ్‌లైన్‌లో పని చేయండి. ఇక్కడ ఒక ఉదాహరణ మొదటి బూట్‌లో షెడ్యూల్ కాషింగ్‌తో సేవా కార్యకర్త. సేవా కార్మికులు, వారి సామర్థ్యాలు మరియు వారితో పని చేసే మార్గాలు (కాష్‌లతో పని చేసే వ్యూహాలు, ఆఫ్‌లైన్‌లో పని చేయడం) గురించిన వివరాలను ఇక్కడ చూడవచ్చు.

రిమైండర్‌ను సెట్ చేయగల సామర్థ్యంకాబట్టి ఇది వాస్తవానికి 3, 7, 14 రోజుల తర్వాత పని చేస్తుంది. నోటిఫికేషన్‌ల APIని అర్థం చేసుకోవడం అవసరం, దానికి లింక్ పని మీద సరైనది. ఇది పుష్ చేయడానికి సమయం ఆసన్నమైందో లేదో తనిఖీ చేయడానికి మేము నిర్దిష్ట అమలును ఆశించలేదు. ఏదైనా పని ఎంపిక ఆమోదించబడింది: స్థానిక నిల్వ, ఇండెక్స్‌డిబిలో నిల్వ లేదా సేవా కార్యకర్త ద్వారా కాలానుగుణ పోలింగ్. పుష్ సర్వర్‌ను తయారు చేయడం కూడా సాధ్యమే (ఇక్కడ ఒక ఉదాహరణ), కానీ ఇది ఆఫ్‌లైన్‌లో పని చేయదు. పేజీని మూసివేసిన తర్వాత పుష్‌ను స్వీకరించడం కూడా అంతే ముఖ్యం - మరియు కొంత సమయం తర్వాత తెరవబడింది. పేజీ మూసివేయబడిన అదే సమయంలో రిమైండర్ చనిపోయినట్లయితే, పరిష్కారం లెక్కించబడదు. అబ్బాయిలు రివ్యూయర్‌ల గురించి ఆలోచించి, ఇప్పుడే పుష్ పొందడం సాధ్యమైనప్పుడు చాలా బాగుంది - కాబట్టి 3 రోజులు వేచి ఉండకూడదు.

డెస్క్‌టాప్‌లో చిహ్నాన్ని ఉంచే సామర్థ్యం (PWA). మేము ఫైల్ ఉనికిని తనిఖీ చేసాము మానిఫెస్ట్.జోన్ సరైన చిహ్నాలతో. కొంతమంది అబ్బాయిలు ఈ ఫైల్‌ను తయారు చేసారు (లేదా CreateReactAppలో రూపొందించబడింది) - కానీ సరైన చిహ్నాలను జోడించలేదు. అప్పుడు, ఇన్‌స్టాల్ చేయడానికి ప్రయత్నిస్తున్నప్పుడు, "వేరే చిహ్నం అవసరం" వంటి లోపం సంభవించింది.

కోడ్‌స్టైల్ మరియు ప్రాజెక్ట్ నిర్మాణం. రెండవ పనిలో వలె, మేము ఒకే కోడ్‌స్టైల్‌ను చూశాము (అది మాతో ఏకీభవించకపోయినా). కొంతమంది కుర్రాళ్ళు లిన్టర్లపై ఇరుక్కొనిపోయారు - అది చాలా బాగుంది.

కన్సోల్ లోపాలు. కన్సోల్‌లో ఏదో తప్పు జరిగిందని సూచిక ఉంటే, మరియు పాల్గొనేవారు దానిపై శ్రద్ధ చూపకపోతే, మేము పాయింట్లను తీసివేస్తాము.

ఫలితాలు

పాల్గొనేవారి నిర్ణయాలలో తమాషా ఏమిటి:

  • ఒక ప్రశ్నాపత్రం కింది వచనాన్ని కలిగి ఉంది: “ఒక ప్రోగ్రామర్ స్నేహితుడు నాకు రియాక్ట్ అప్లికేషన్‌ను రూపొందించడంలో సహాయం చేశాడు. ఎలా మరియు ఎందుకు అనే ప్రశ్నలతో నేను అతనిని పేల్చివేసాను మరియు అతను నాకు చెప్పాడు. నేను దీన్ని నిజంగా ఇష్టపడ్డాను, నేను దాని గురించి మరింత తెలుసుకోవాలనుకుంటున్నాను. మేము ఈ అప్లికేషన్ కోసం మా హృదయపూర్వకంగా రూట్ చేస్తున్నాము, కానీ దురదృష్టవశాత్తు, అభ్యర్థి స్నేహితుడు అప్లికేషన్ పని చేయడంలో పెద్దగా సహాయం చేయలేదు.
  • ఒక అభ్యర్థి RAR ఆర్కైవ్ ఉన్న GitHubకి లింక్‌ను పంపారు - దీనిపై వ్యాఖ్యానించడం కష్టం. 🙂
  • మరొక అభ్యర్థి, solution.js ఫైల్ యొక్క మొదటి లైన్‌పై వ్యాఖ్యలో, అతను అల్గారిథమ్‌ను కాపీ చేసినట్లు నిజాయితీగా అంగీకరించాడు.

76 మంది అభ్యర్థుల నుంచి దరఖాస్తులు స్వీకరించి 23 మందిని ఎంపిక చేశాం. మేము మిన్స్క్ నుండి మాత్రమే కాకుండా, మాస్కో, సెయింట్ పీటర్స్బర్గ్ మరియు టాటర్స్తాన్ నుండి కూడా ప్రశ్నాపత్రాలను పంపాము. కొంతమంది అబ్బాయిలు వారి ప్రస్తుత వృత్తులతో మమ్మల్ని ఆశ్చర్యపరిచారు: వారిలో ఒకరు ఫోరెన్సిక్ నిపుణుడు మరియు మరొకరు వైద్య విద్యార్థి.

ఫలితంగా టాస్క్‌లను పూర్తి చేయడంలో సక్సెస్ రేట్ల ఆసక్తికరమైన పంపిణీ. పాల్గొనేవారు మొదటి పనిని సగటున 60%, రెండవది 50% పూర్తి చేసారు మరియు మూడవది అత్యంత కష్టతరమైనది మరియు సగటున 40% పూర్తి చేయబడింది.

మొదటి చూపులో, పనులు సంక్లిష్టంగా మరియు సమయం తీసుకుంటాయి. కారణం వీలైనన్ని ఎక్కువ మంది అభ్యర్థులను కలుపుకుపోవాలని కాదు. విద్యార్ధులు తమ చదువుల సమయంలో నిజ జీవిత విధులను ఎదుర్కొంటారు - చాట్ చేయడం, పిల్లల కోసం Yandex.Music లేదా వాతావరణం-ఆధారిత వ్యక్తుల కోసం Yandex.Weather. దీని కోసం మీకు ప్రారంభ బేస్ అవసరం.

రెండేళ్ళ క్రితం నా శ్రీ ఎంట్రన్స్ టాస్క్ చూసి ఎప్పటికీ పరిష్కరించలేనని అనుకున్నాను. ఈ సమయంలో ప్రధాన విషయం ఏమిటంటే, కూర్చోవడం, పరిస్థితులను జాగ్రత్తగా చదవడం మరియు దీన్ని చేయడం ప్రారంభించడం. పరిస్థితులు దాదాపు 80% పరిష్కారాన్ని కలిగి ఉన్నాయని ఇది మారుతుంది. ఉదాహరణకు, మూడవ టాస్క్‌లో (అత్యంత కష్టమైనది), మేము MDNలో సర్వీస్ వర్కర్లు మరియు నోటిఫికేషన్‌ల APIకి లింక్‌లను జోడించాము. లింక్‌లలోని విషయాలను అధ్యయనం చేసిన విద్యార్థులు ఇబ్బంది లేకుండా పూర్తి చేసారు.

భవిష్యత్తులో SRIలో ప్రవేశించాలనుకుంటున్న అభ్యర్థులు, మిన్స్క్ స్కూల్‌లో ప్రవేశించలేకపోయిన లేదా ఏదైనా ఇతర పరీక్షా పనిని ప్రారంభించే అభ్యర్థులు ఈ కథనాన్ని చదవాలని నేను నిజంగా కోరుకుంటున్నాను. మీరు గమనిస్తే, అలా చేయడం చాలా సాధ్యమే. మీరు మీపై నమ్మకం ఉంచాలి మరియు రచయితల నుండి అన్ని చిట్కాలను వినండి.

మూలం: www.habr.com

ఒక వ్యాఖ్యను జోడించండి