ઇન્ટરફેસ ડેવલપમેન્ટ સ્કૂલ: મિન્સ્ક માટેના કાર્યોનું વિશ્લેષણ અને મોસ્કોમાં નવો સેટ

આજે નવી નોંધણી શરૂ થઈ યાન્ડેક્ષ ઈન્ટરફેસ ડેવલપમેન્ટ સ્કૂલ મોસ્કોમાં. તાલીમનો પ્રથમ તબક્કો 7 સપ્ટેમ્બરથી 25 ઓક્ટોબર સુધી ચાલશે. અન્ય શહેરોના વિદ્યાર્થીઓ તેમાં દૂરથી અથવા રૂબરૂમાં ભાગ લઈ શકશે - કંપની હોસ્ટેલમાં મુસાફરી અને રહેવા માટે ચૂકવણી કરશે. બીજો, અંતિમ તબક્કો, 3 ડિસેમ્બર સુધી ચાલશે, તે ફક્ત રૂબરૂમાં જ પૂર્ણ થઈ શકે છે.

મારું નામ યુલિયા સેરેડિચ છે, અમે આ પોસ્ટ સેરગેઈ કાઝાકોવ સાથે મળીને લખી છે. અમે બંને યાન્ડેક્સની મિન્સ્ક ઓફિસમાં ઇન્ટરફેસ ડેવલપર છીએ અને પાછલા વર્ષોના SRI ના સ્નાતક છીએ.

મોસ્કોમાં નોંધણીની શરૂઆતના પ્રસંગે, અમે અગાઉની શાળાના પ્રારંભિક કાર્યોનું વિશ્લેષણ પ્રકાશિત કરી રહ્યા છીએ - અહીં મિન્સ્કમાં.

જો તમે SRI અસાઇનમેન્ટના ઇતિહાસને ટ્રેસ કરો છો, તો દર વર્ષે અમે પ્રોગ્રામર માટે ત્રણ મહત્વપૂર્ણ કૌશલ્યોનું પરીક્ષણ કર્યું છે:

• લેઆઉટ. દરેક વિકાસકર્તા લેઆઉટ કરવા સક્ષમ હોવા જોઈએ. એવું બનતું નથી કે તમારી પાસે અંકલ સેરિઓઝા છે જે આખી ટીમ માટે ડિઝાઇન કરે છે, અને તમે ફક્ત સ્ક્રિપ્ટો લખો છો. તેથી, દરેક વિદ્યાર્થીએ બતાવવું જોઈએ કે તે કેવી રીતે ટાઇપસેટ કરવું જાણે છે.
• જાવાસ્ક્રિપ્ટ. જો મામલો લેઆઉટ પૂરતો સીમિત હોત, તો અમારી પાસે ઇન્ટરફેસ ડેવલપમેન્ટની શાળા નહીં, પરંતુ લેઆઉટ ડિઝાઇનર્સની શાળા હશે. સુંદર ડિઝાઇન કરેલ ઇન્ટરફેસને પુનર્જીવિત કરવાની જરૂર છે. તેથી, JS માટે હંમેશા એક કાર્ય હોય છે, પરંતુ કેટલીકવાર તે અલ્ગોરિધમ્સ માટે પણ કાર્ય હોય છે - અમે તેમને ખૂબ પ્રેમ કરીએ છીએ.
• સમસ્યાનું નિરાકરણ એ કદાચ વિકાસકર્તાની સૌથી મહત્વપૂર્ણ કુશળતા છે. જ્યારે ઇન્ટરફેસ બનાવવાની વાત આવે છે, ત્યારે વસ્તુઓ ખૂબ જ ઝડપથી બદલાતી રહે છે. તે લેવિસ કેરોલ જેવું છે: "એ જ જગ્યાએ રહેવા માટે તમારે જેટલી ઝડપથી દોડવું પડશે, અને બીજી જગ્યાએ જવા માટે તમારે બમણી ઝડપે દોડવું પડશે." દરરોજ આપણે નવી ટેક્નોલોજીનો સામનો કરીએ છીએ - આપણે તેને ધ્યાનમાં લેવાની અને તેને સમજવામાં સક્ષમ બનવાની જરૂર છે. તેથી, ત્રીજા કાર્યમાં, અમે એવી તકનીકોને સમજવાનો પ્રસ્તાવ મૂક્યો છે કે જેનાથી શિખાઉ વિકાસકર્તા સામાન્ય રીતે પરિચિત નથી.

દરેક કાર્યના વિશ્લેષણમાં, અમે તમને માત્ર યોગ્ય પ્રક્રિયા વિશે જ નહીં, પણ સામાન્ય ભૂલો વિશે પણ જણાવીશું.

કાર્ય 1: પોર્ટફોલિયો

પ્રથમ કાર્ય Yandex.Collections ડિઝાઇનર એલેક્સી ચેરેનકેવિચ દ્વારા કરવામાં આવ્યું હતું, જે લેઆઉટ કેવી રીતે કરવું તે જાણે છે, અને તેના સેવા સાથી, ઇન્ટરફેસ ડેવલપર સેર્ગેઈ સેમસોનોવ.

શરત

પોર્ટફોલિયો વેબસાઇટ બનાવો: અમને તમારા વિશે, તમારા કાર્ય વિશે અને શાળા તરફથી તમારી અપેક્ષાઓ વિશે જણાવો. સાઇટ સૂચિત લેઆઉટ સાથે શક્ય તેટલી અનુરૂપ હોવી જોઈએ (લેઆઉટની લિંક્સ: 1000px, 600px, 320px, સ્પષ્ટીકરણ). અમને ફક્ત લેઆઉટમાં જ રસ છે, તેથી કૃપા કરીને JavaScript નો ઉપયોગ કરશો નહીં.

તપાસ કરતી વખતે અમે ધ્યાનમાં લઈશું:

• ઇન્ડેન્ટેશન કદ, રંગ શુદ્ધતા, ફોન્ટ શૈલી, ફોન્ટ કદ;
• સિમેન્ટીક લેઆઉટ;
• તત્વોની વિવિધ સ્થિતિઓની હાજરી: કર્સરને હોવર કરતી વખતે બટનો અને લિંક્સ પ્રદર્શિત કરવી, સક્રિય ઇનપુટ ફીલ્ડ્સને હાઇલાઇટ કરવું, વગેરે;
• ક્રોસ-બ્રાઉઝર સુસંગતતા (લોકપ્રિય બ્રાઉઝર્સના નવીનતમ સંસ્કરણોમાં પરીક્ષણ કરાયેલ).

ફાયદો થશે:

• આધુનિક CSS સોલ્યુશન્સનો ઉપયોગ: ફ્લેક્સબોક્સ, ગ્રીડ, વગેરે;
• અનુકૂલનશીલ લેઆઉટ;
• પૂર્વ- અને (અથવા) પોસ્ટ-પ્રોસેસરનો ઉપયોગ, એસેમ્બલી, મિનિફિકેશન, આઉટપુટ કોડનું ઑપ્ટિમાઇઝેશન;
• HTML ફોર્મ માન્યતા, શૈલીયુક્ત ફાઇલ અપલોડ બટન.

કાર્ય એકદમ પ્રચંડ છે, તેથી તમે તેને છોડી શકો છો જે કામ કરશે નહીં. આનાથી તમારો સ્કોર થોડો ઓછો થશે, પરંતુ તમે હજુ પણ તમારા જ્ઞાનનું પ્રદર્શન કરી શકશો. જ્યારે તમે પૂર્ણ કરી લો, ત્યારે અમને બે લિંક્સ મોકલો - તમારા પોર્ટફોલિયો અને GitHub પરનો સ્રોત કોડ.

અસાઇનમેન્ટમાં પ્રસ્તાવિત લેઆઉટ માત્ર મોબાઇલ ઉપકરણો, ટેબ્લેટ અને ડેસ્કટોપ માટે સ્ક્રીન સાથે જ નહીં, પણ વાસ્તવિક વિશિષ્ટતાઓ સાથે પણ હતા.

પ્રથમ કાર્યની ચકાસણીના પરિણામમાં શક્ય તેટલી નિરપેક્ષતા લાવવા માટે, આ તપાસ માટે ઘણા માપદંડો હતા.

માપદંડ

ડિઝાઇન કરેલી વેબસાઇટ. આ સ્પષ્ટ લાગે છે, પરંતુ કેટલાક લોકોએ કેટલાક બ્લોક્સને સંપૂર્ણપણે છોડી દીધા - કાં તો તેઓ સમય બચાવવા માંગતા હતા, અથવા તેઓ તે કરી શક્યા નહીં. લેઆઉટને આશરે ચાર મુખ્ય સ્ક્રીનોમાં વિભાજિત કરી શકાય છે: અવતાર સાથેની મુખ્ય સ્ક્રીન, SRI પાસેથી અપેક્ષાઓની સૂચિ સાથેનો બ્લોક, પોર્ટફોલિયો સાથેનો બ્લોક અને સંપર્ક માહિતી સાથેનો બ્લોક. તેઓ વિભાગોમાં અથવા ફક્ત ડિવ્સનો ઉપયોગ કરીને બનાવી શકાય છે, મુખ્ય વસ્તુ એ છે કે તમામ ચાર બ્લોક્સ ઉપલબ્ધ હતા.

લેઆઉટ સાથે લેઆઉટનું પાલન. ઉમેદવારો માટે સરળ બનાવવા માટે ડિઝાઇનરે એક અલગ સ્પષ્ટીકરણ (રંગ, ટાઇપોગ્રાફી, બટન સ્ટેટ્સ વગેરે સહિત) બનાવ્યું. તળિયે પ્રથમ સ્ક્રીનના ઇન્ડેન્ટ્સ અને લક્ષણો પર એક સંકેત હતો. હું તે લોકોથી ખૂબ જ ખુશ હતો જેણે ડિઝાઇનરની બધી ઇચ્છાઓને ધ્યાનમાં લીધી: ઉદાહરણ તરીકે, પ્રથમ સ્ક્રીન વ્યુપોર્ટની ઊંચાઈ કરતા ઓછી હોવી જોઈએ નહીં.

અનુકૂલનશીલ લેઆઉટ - આ તે છે જ્યારે ઈન્ટરફેસ ફક્ત ગોઠવાયેલ નથી જેથી ત્રણ રીઝોલ્યુશન પર બધું લેઆઉટમાં પિક્સેલથી પિક્સેલ હોય. મધ્યવર્તી રાજ્યોમાં, લેઆઉટ પણ અલગ પડવું જોઈએ નહીં. કેટલાક કન્ટેનરની મહત્તમ પહોળાઈને મર્યાદિત કરવાનું ભૂલી ગયા અને બધું 1920 પિક્સેલ્સ પર સેટ કર્યું, કેટલાક બેકગ્રાઉન્ડમાં ગડબડ કરી, પરંતુ એકંદરે ઉમેદવારોએ આ કાર્યનો સારી રીતે સામનો કર્યો.

સિમેન્ટીક લેઆઉટ. "તેઓએ વિશ્વને કેટલી વાર કહ્યું છે" કે લિંકને આ રીતે ડિઝાઇન કરવી જોઈએ , બટન – તરીકે . સદભાગ્યે, મોટાભાગના ઉમેદવારોએ આ જરૂરિયાત પણ પૂરી કરી. દરેક વ્યક્તિએ SRI ની અપેક્ષાઓમાં છુપાયેલી સૂચિને ઓળખી નથી, તેને div ટૅગ્સનો ઉપયોગ કરીને બનાવી છે, પરંતુ તે એટલું ખરાબ નથી. ત્યાં એક ઉમેદવાર હતો જેણે તે જાણતા તમામ સિમેન્ટીક ટૅગ્સ દાખલ કર્યા - જ્યાં તે જરૂરી હતું અને ક્યાં તે જરૂરી ન હતું. ઉદાહરણ તરીકે, સૂચિને બદલે - અને . છેવટે, સિમેન્ટિક્સ - તે તમારા પૃષ્ઠની રચના અને દરેક બ્લોકના હેતુને સમજવા વિશે છે (મોટાભાગે તેને અહીં મેનેજ કર્યું છે), તેમજ પૂર્વ- અને / અથવા પોસ્ટ-પ્રોસેસરનો ઉપયોગ (થોડા લોકોએ તેને અહીં સંચાલિત કર્યું છે, જોકે આ પોઈન્ટ્સમાં પણ હતા - મોટાભાગે તેઓ ઓછા અને એસસીએસએસનો ઉપયોગ કરતા હતા).

વર્કિંગ સ્લાઇડર. અસાઇનમેન્ટમાં અમે લખ્યું છે કે JS નો ઉપયોગ કરી શકાતો નથી. અહીં સમસ્યાઓ હલ કરવાની ક્ષમતા ચકાસવામાં આવી હતી - સમૂહનો ઉપયોગ કરીને સ્લાઇડર બનાવી શકાય છે અને બધો જાદુ સિલેક્ટર લેવલ પર થાય છે #button-N:ચેક કરેલ ~ .slider-inner .slider-slides. જ્યારે આપણે ઇનપુટ ચેકબોક્સમાંથી એક પર ક્લિક કરીએ છીએ, ત્યારે તે ચેક કરેલ સ્થિતિમાં જાય છે. અમે આનો લાભ લઈ શકીએ છીએ અને સ્લાઇડ્સ: ટ્રાન્સફોર્મ: ટ્રાન્સલેટ(-33%) સાથે કન્ટેનરમાં અમને જરૂરી અનુવાદ સોંપી શકીએ છીએ. તમે સ્લાઇડરનું અમલીકરણ જોઈ શકો છો અહીં.

ડ્રોપડાઉન સૂચિઓ. અહીં તે બધું પણ નીચે આવ્યું અને સમાન પસંદગીકાર: .accordion-item input:checked ~ .accordion-item__content. તમે અમલીકરણ જોઈ શકો છો અહીં.

:hover, :active અને :focu* સ્ટેટ્સની ઉપલબ્ધતા. એક ખૂબ જ મહત્વપૂર્ણ મુદ્દો. ઇન્ટરફેસ સાથે ક્રિયાપ્રતિક્રિયા દરમિયાન આરામ તેના પર આધાર રાખે છે. વપરાશકર્તાએ હંમેશા તેમની ક્રિયાઓ પર પ્રતિસાદ મેળવવો જોઈએ. આ આઇટમ પ્રશ્નાવલી સાથેની ક્રિયાપ્રતિક્રિયા દરમિયાન તપાસવામાં આવી હતી. જો મેં "મને કૉલ કરો" બટનને ક્લિક કર્યું અને દૃષ્ટિની રીતે કંઈ થયું નહીં (વિનંતી મોકલવામાં આવી હોવા છતાં), તો આ ખરાબ છે, કારણ કે પછી હું તેને ફરીથી અને ફરીથી ક્લિક કરીશ. પરિણામે, દસ વિનંતીઓ મોકલવામાં આવશે અને મને દસ વખત પાછા બોલાવવામાં આવશે. આપણે ભૂલવું જોઈએ નહીં કે મોબાઇલ ઉપકરણોમાં માઉસ નથી, જેનો અર્થ છે કે ત્યાં હોવર હોવું જોઈએ નહીં. અને એક વધુ મુદ્દો જેણે સિમેન્ટિક્સ વિશેના મુદ્દાને પરિપૂર્ણ કરનારાઓને અસર કરી નથી. જો તમારું નિયંત્રણ ઇન્ટરેક્ટિવ એલિમેન્ટ નથી, તો જ્યારે તમે તેના પર હોવર કરો છો, ત્યારે કર્સર પ્રમાણભૂત રહેશે. જો તમે હોવર પર પ્રતિક્રિયા લખી હોય તો પણ તે ખૂબ જ અસ્વસ્થ લાગે છે. કર્સરને ઓછો અંદાજ ન આપો: નિર્દેશક.

એનિમેશન. તે મહત્વનું છે કે તત્વો સાથે થતી તમામ પ્રતિક્રિયાઓ સરળ હોય. જીવનમાં કંઈપણ ત્વરિત નથી, તેથી હોવર અને સક્રિય પર સંક્રમણો હોવું ઇન્ટરફેસને વધુ સુખદ બનાવવા માટે પૂરતું હતું. ઠીક છે, જેઓ સ્લાઇડર અને સૂચિઓને એનિમેટ કરે છે તે સામાન્ય રીતે મહાન છે.

નવીનતમ તકનીકનો ઉપયોગ. ઘણા લોકોએ ફ્લેક્સનો ઉપયોગ કર્યો, પરંતુ કોઈએ ગ્રીડનો ઉપયોગ કરીને કાર્ય પૂર્ણ કર્યું નહીં. જો ફ્લેક્સનો યોગ્ય રીતે ઉપયોગ કરવામાં આવ્યો હોય તો બિંદુની ગણતરી કરવામાં આવી હતી. જો ક્યાંક આ ખૂબ જ ફ્લેક્સને કારણે લેઆઉટ અલગ થઈ ગયું હોય, તો અરે, તમને કોઈ વધારાના પોઈન્ટ મળ્યા નથી.

ફોર્મ માન્યતા. ફોર્મના દરેક ઇનપુટમાં જરૂરી વિશેષતા ઉમેરવાની જરૂર હતી. અમે ઈમેઈલ ફીલ્ડને ઈમેઈલ તરીકે માન્ય કરનારા લોકો માટે પોઈન્ટ ઉમેર્યા છે.

ફાઇલ અપલોડ બટનને સ્ટાઇલ કરવું. અમે આના જેવું સંયોજન જોવાની અપેક્ષા રાખીએ છીએ: અને ફાઇલ પસંદ કરો . આગળ આપણે ઇનપુટને છુપાવવાની અને લેબલને સ્ટાઇલ કરવાની જરૂર છે. બીજી સામાન્ય રીત છે - પારદર્શક ઇનપુટ બનાવવા અને તેને બટનની ટોચ પર મૂકવા. પરંતુ બધા બ્રાઉઝર્સ સ્ટાઇલની મંજૂરી આપતા નથી , અને આવા ઉકેલને સંપૂર્ણપણે ક્રોસ-બ્રાઉઝર કહી શકાય નહીં. અને લેબલ બનાવવું તે સિમેન્ટીકલી વધુ યોગ્ય છે.

ક્રોસ બ્રાઉઝર સુસંગતતા. અમે તપાસ્યું કે આધુનિક બ્રાઉઝર્સના બે નવીનતમ સંસ્કરણો (IE વિના - સહભાગીઓ નસીબદાર હતા), તેમજ iPhones પર 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 માં મૂકો.

બીજા કાર્યની ચકાસણી સૌથી સ્વચાલિત અને ઉદ્દેશ્ય હતી. મોટાભાગના લોકોએ અનુમાન લગાવ્યું હતું કે ડિજક્સ્ટ્રાના અલ્ગોરિધમનો અમલ કરવો જરૂરી છે. જેમણે તેનું વર્ણન શોધી કાઢ્યું અને 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). અમે ફાઇલની હાજરી તપાસી manifest.json યોગ્ય ચિહ્નો સાથે. કેટલાક લોકોએ આ ફાઇલ બનાવી છે (અથવા તેને CreateReactAppમાં જનરેટ કરેલી છોડી દીધી છે) - પરંતુ સાચા ચિહ્નો ઉમેર્યા નથી. પછી, ઇન્સ્ટોલ કરવાનો પ્રયાસ કરતી વખતે, "એક અલગ ચિહ્નની જરૂર છે" જેવી ભૂલ આવી.

કોડસ્ટાઇલ અને પ્રોજેક્ટ માળખું. બીજા કાર્યની જેમ, અમે એક કોડસ્ટાઇલ તરફ જોયું (ભલે તે અમારી સાથે સુસંગત ન હોય). કેટલાક લોકોએ લિંટર પર સ્ક્રૂ કર્યું - તે સરસ છે.

કન્સોલ ભૂલો. જો કન્સોલમાં કોઈ સૂચક હતું કે કંઈક ખોટું છે, અને સહભાગીએ તેના પર ધ્યાન આપ્યું નથી, તો અમે પોઈન્ટ કાપ્યા.

પરિણામો

સહભાગીઓના નિર્ણયો વિશે શું રમુજી છે:

• એક પ્રશ્નાવલીમાં નીચેનું લખાણ હતું: “એક પ્રોગ્રામર મિત્રે મને પ્રતિક્રિયા એપ્લિકેશનને એકસાથે મૂકવામાં મદદ કરી. મેં તેને કેવી રીતે અને શા માટે સવાલો કર્યા અને તેણે મને કહ્યું. મને તે ખરેખર ગમ્યું, હું તેના વિશે વધુ જાણવા માંગુ છું. અમે અમારા બધા હૃદયથી આ એપ્લિકેશન માટે રૂટ કરી રહ્યા હતા, પરંતુ કમનસીબે, ઉમેદવારના મિત્ર એપ્લિકેશનને કાર્ય કરવામાં ખૂબ મદદરૂપ ન હતા.
• એક ઉમેદવારે GitHub પર એક લિંક મોકલી, જ્યાં RAR આર્કાઇવ સ્થિત હતું - આના પર ટિપ્પણી કરવી મુશ્કેલ છે. 🙂
• અન્ય ઉમેદવારે, solution.js ફાઇલની પ્રથમ લાઇન પરની ટિપ્પણીમાં, પ્રમાણિકપણે સ્વીકાર્યું કે તેણે અલ્ગોરિધમની નકલ કરી છે.

અમને 76 ઉમેદવારો પાસેથી અરજીઓ મળી અને 23 લોકોને પસંદ કર્યા. અમને માત્ર મિન્સ્કથી જ નહીં, પણ મોસ્કો, સેન્ટ પીટર્સબર્ગ અને તતારસ્તાનથી પણ પ્રશ્નાવલિ મોકલવામાં આવી હતી. કેટલાક લોકોએ તેમના વર્તમાન વ્યવસાયોથી અમને આશ્ચર્યચકિત કર્યા: તેમાંથી એક ફોરેન્સિક નિષ્ણાત છે, અને બીજો તબીબી વિદ્યાર્થી છે.

પરિણામ એ કાર્યોને પૂર્ણ કરવામાં સફળતા દરનું રસપ્રદ વિતરણ હતું. સહભાગીઓએ પ્રથમ કાર્ય સરેરાશ 60% દ્વારા પૂર્ણ કર્યું, બીજું 50% દ્વારા, અને ત્રીજું સૌથી મુશ્કેલ બન્યું અને સરેરાશ 40% દ્વારા પૂર્ણ થયું.

પ્રથમ નજરમાં, કાર્યો જટિલ અને સમય માંગી લે છે. તેનું કારણ એ નથી કે અમે શક્ય તેટલા ઉમેદવારોને બહાર કાઢવા માગીએ છીએ. તેમના અભ્યાસ દરમિયાન, વિદ્યાર્થીઓને વાસ્તવિક જીવનના કાર્યોનો સામનો કરવો પડે છે - ચેટ કરવી, બાળકો માટે Yandex.Music અથવા હવામાન આધારિત લોકો માટે Yandex.Weather. આ માટે તમારે પ્રારંભિક આધારની જરૂર છે.

મને યાદ છે કે બે વર્ષ પહેલાં મારું SRI એન્ટ્રન્સ ટાસ્ક જોયું હતું અને વિચાર્યું હતું કે હું તેને ક્યારેય હલ કરીશ નહીં. આ ક્ષણે મુખ્ય વસ્તુ એ છે કે બેસો, કાળજીપૂર્વક શરતો વાંચો અને તે કરવાનું શરૂ કરો. તે તારણ આપે છે કે પરિસ્થિતિઓમાં લગભગ 80% સોલ્યુશન હોય છે. ઉદાહરણ તરીકે, ત્રીજા કાર્ય (સૌથી મુશ્કેલ) ની સ્થિતિમાં, અમે MDN પર સેવા કાર્યકરો અને સૂચના API ની લિંક્સ ઉમેરી. લિંક્સની સામગ્રીનો અભ્યાસ કરનારા વિદ્યાર્થીઓએ તેને મુશ્કેલી વિના પૂર્ણ કર્યું.

હું ખરેખર ઈચ્છું છું કે આ લેખ એવા ઉમેદવારો દ્વારા વાંચવામાં આવે કે જેઓ ભવિષ્યમાં SRI માં પ્રવેશવાનું આયોજન કરી રહ્યા છે, જેઓ મિન્સ્ક શાળામાં દાખલ થવામાં અસમર્થ હતા, અથવા જેઓ કોઈ અન્ય પરીક્ષણ કાર્ય કરવાનું શરૂ કરી રહ્યા છે. જેમ તમે જોઈ શકો છો, આમ કરવું તદ્દન શક્ય છે. તમારે ફક્ત તમારામાં વિશ્વાસ રાખવાની અને લેખકોની બધી ટીપ્સ સાંભળવાની જરૂર છે.

સોર્સ: www.habr.com