انٽرفيس ڊولپمينٽ اسڪول: منسک لاء ڪمن جو تجزيو ۽ ماسڪو ۾ هڪ نئون سيٽ

اڄ هڪ نئون داخلا داخل ٿيو Yandex انٽرفيس ڊولپمينٽ اسڪول ماسڪو ۾. ٽريننگ جو پهريون مرحلو 7 سيپٽمبر کان 25 آڪٽوبر تائين ٿيندو. ٻين شهرن جا شاگرد ان ۾ پري کان يا ذاتي طور تي حصو وٺي سگهندا - ڪمپني هڪ هاسٽل ۾ سفر ۽ رهائش لاءِ ادا ڪندي. ٻيو، آخري مرحلو پڻ، 3 ڊسمبر تائين آخري ٿيندو، اهو صرف ذاتي طور تي مڪمل ٿي سگهي ٿو.

منهنجو نالو يوليا سرديچ آهي، اسان هي پوسٽ سرگئي ڪازاڪوف سان گڏ لکيو آهي. اسان ٻئي Yandex جي منسک آفيس ۾ انٽرفيس ڊولپرز ۽ گذريل سالن کان SRI جا گريجوئيٽ آهيون.

ماسڪو ۾ رجسٽريشن جي افتتاح جي موقعي تي، اسان اڳوڻي اسڪول جي تعارفي ڪمن جو تجزيو شايع ڪري رهيا آهيون - هتي منسک ۾.

جيڪڏهن توهان SRI تفويض جي تاريخ کي ڳوليندا آهيو، سال کان سال تائين اسان هڪ پروگرامر لاء ٽن اهم صلاحيتن کي آزمايو:

• ترتيب. هر ڊولپر کي ترتيب ڏيڻ جي قابل هوندو. ائين نه ٿئي ته توهان وٽ چاچا سريوزا آهي، جيڪو سڄي ٽيم لاءِ ڊزائين ڪري ٿو، ۽ توهان صرف اسڪرپٽ لکندا آهيو. تنهن ڪري، هر شاگرد کي اهو ڏيکارڻ گهرجي ته هو ڪيئن ڄاڻي ٿو ته ڪيئن ٽائيپ سيٽ ڪرڻ.
• جاوا اسڪرپٽ. جيڪڏهن معاملو لي آئوٽ تائين محدود هجي ها ته پوءِ اسان وٽ اسڪول آف انٽرفيس ڊولپمينٽ نه پر لي آئوٽ ڊيزائنرز جو اسڪول هجي ها. خوبصورت طور تي ٺهيل انٽرفيس کي بحال ڪرڻ جي ضرورت آهي. تنهن ڪري، اتي هميشه JS لاء هڪ ڪم آهي، پر ڪڏهن ڪڏهن اهو پڻ الگورتھم لاء هڪ ڪم آهي - اسان انهن کي تمام گهڻو پيار ڪندا آهيون.
• مسئلو حل ڪرڻ شايد هڪ ڊولپر جي سڀ کان اهم مهارت آهي. جڏهن اهو انٽرفيس ٺاهڻ ۾ اچي ٿو، شيون تمام جلدي تبديل ٿي رهيا آهن. اهو ليوس ڪيرول وانگر آهي: "توهان کي جيترو تيز ڊوڙڻو آهي جيترو توهان ڪري سگهو ٿا صرف هڪ ئي جاءِ تي رهڻ لاءِ، ۽ ٻي جاءِ تي پهچڻ لاءِ توهان کي ٻه ڀيرا تيز ڊوڙڻو پوندو." هر روز اسان وٽ نئين ٽيڪنالاجيون اچن ٿيون - اسان کي انهن کي حساب ۾ رکڻ گهرجي ۽ انهن کي سمجهڻ جي قابل ٿي. تنهن ڪري، ٽئين ڪم ۾، اسان ٽيڪنالاجي کي سمجهڻ جي تجويز ڏني آهي ته هڪ نئين ڊولپر عام طور تي واقف نه آهي.

هر ڪم جي تجزيي ۾، اسان توهان کي نه رڳو صحيح طريقي جي باري ۾، پر عام غلطين جي باري ۾ پڻ ٻڌائينداسين.

ٽاسڪ 1: پورٽ فوليو

پهرين ڪم تي ڪم ڪيو ويو Yandex.Collections جي ڊيزائنر Alexey Cherenkevich، جيڪو ڄاڻي ٿو ته ترتيب ڪيئن ڪجي، ۽ سندس خدمت جي ساٿي، انٽرفيس ڊولپر سرجي سامسونوف.

حالت

هڪ پورٽ فوليو ويب سائيٽ ٺاهيو: اسان کي پنهنجي باري ۾، توهان جي ڪم ۽ اسڪول مان توهان جي اميدن بابت ٻڌايو. سائيٽ کي ممڪن حد تائين تجويز ڪيل ترتيب سان مطابقت رکڻ گهرجي (لي آئوٽ جون لنڪس: 1000px, 600px, 320px, وضاحت). اسان صرف لي آئوٽ ۾ دلچسپي رکون ٿا، تنهنڪري مهرباني ڪري JavaScript استعمال نه ڪريو.

جڏهن چڪاس ڪنداسين ته اسان حساب ۾ وٺنداسين:

• انگن اکرن جي ماپ، رنگ جي درستگي، فونٽ جو انداز، فونٽ سائيز؛
• معنوي ترتيب؛
• عناصر جي مختلف رياستن جي موجودگي: بٽڻ ۽ لنڪ ڏيکاريندي جڏهن ڪرسر کي هور ڪيو وڃي، فعال ان پٽ فيلڊ کي نمايان ڪرڻ، وغيره.
• ڪراس-براؤزر مطابقت (مشهور برائوزرن جي جديد ورزن ۾ آزمائشي).

فائدو ٿيندو:

• جديد CSS حل جو استعمال: flexbox، گرڊ، وغيره.
• موافقت واري ترتيب؛
• استعمال کان اڳ ۽ (يا) پوسٽ-پروسيسر، اسيمبلي، منفڪيشن، آئوٽ پٽ ڪوڊ جي اصلاح؛
• HTML فارم جي تصديق، اسٽائل ٿيل فائل اپلوڊ بٽڻ.

اهو ڪم تمام وڏو آهي، تنهنڪري توهان ڇڏي سگهو ٿا جيڪو ڪم نه ڪندو. اهو توهان جو سکور ٿورڙو گهٽ ڪندو، پر توهان اڃا تائين پنهنجي علم جو مظاهرو ڪري سگهندا. جڏهن توهان مڪمل ڪيو، اسان کي ٻه لنڪ موڪليو - توهان جي پورٽ فوليو ڏانهن ۽ GitHub تي سورس ڪوڊ.

تفويض ۾ تجويز ڪيل ترتيبون نه رڳو اسڪرين سان موبائل ڊوائيسز، ٽيبلٽس ۽ ڊيسڪ ٽاپ لاء، پر حقيقي وضاحتن سان پڻ.

پهرين ڪم جي چڪاس جي نتيجي ۾ جيترو ممڪن ٿي سگهي وڌيڪ اعتراض آڻڻ لاء، هن چيڪ لاء ڪيترائي معيار هئا.

معيار

ڊزائين ڪيل ويب سائيٽ. اهو ظاهر ٿئي ٿو، پر ڪجهه ماڻهو ڪجهه بلاڪ مڪمل طور تي ڇڏيا آهن - يا ته اهي وقت بچائڻ چاهيندا هئا، يا اهي اهي نه ڪري سگهيا. ترتيب تقريبن چار مکيه اسڪرينن ۾ ورهائي سگهجي ٿي: مکيه اسڪرين اوتار سان، هڪ بلاڪ SRI کان اميدن جي فهرست سان، هڪ بلاڪ پورٽ فوليو سان ۽ هڪ بلاڪ رابطي جي معلومات سان. اهي حصن ۾ ٺاهي سگھجن ٿيون يا صرف divs استعمال ڪندي، بنيادي شيء اها آهي ته سڀئي چار بلاڪ موجود هئا.

ترتيب سان ترتيب جي تعميل. ڊزائنر اميدوارن لاءِ آسان بڻائڻ لاءِ هڪ الڳ وضاحت (جنهن ۾ رنگ، ٽائپوگرافي، بٽڻ جون رياستون، وغيره) ٺاهيو. تري ۾ اتي هڪ اشارو هو indents ۽ پهرين اسڪرين جي خاصيتن تي. مان انهن ماڻهن سان ڏاڍي خوش ٿيس جن سڀني ڊزائنر جي خواهش کي حساب ۾ ورتو: مثال طور، پهرين اسڪرين کي ڏسڻ جي اوچائي کان گهٽ نه هجڻ گهرجي.

موافقت واري ترتيب - اهو آهي جڏهن انٽرفيس صرف ٺهيل نه آهي ته جيئن ٽن قراردادن تي هر شي پکسل کان پکسل ترتيب ۾ آهي. وچولي رياستن ۾، ترتيب به ڌار نه ٿيڻ گهرجي. ڪجھ ڪنٽينر جي وڌ ۾ وڌ ويڪر کي محدود ڪرڻ ۽ سڀڪنھن شيء کي 1920 پکسلز تي مقرر ڪرڻ وساريو، ڪجھ پس منظر کي خراب ڪيو، پر مجموعي طور تي اميدوارن ھن ڪم کي چڱي طرح سان مقابلو ڪيو.

لفظي ترتيب. "ڪيترا ڀيرا انهن دنيا کي ٻڌايو آهي" ته لنڪ کي ڊزائين ڪيو وڃي جيئن ، بٽڻ - جيئن . خوشقسمتيء سان، اڪثر اميدوارن هن گهرج کي پورو ڪيو. هرڪو نه سڃاڻي لڪيل لسٽ کي ايس آر آئي جي اميدن ۾، ان کي استعمال ڪندي ڊيو ٽيگ، پر اهو خراب ناهي. اتي ھڪڙو اميدوار ھو جنھن داخل ڪيو سڀ سيمينٽڪ ٽيگ اھو ڄاڻندو ھو - ڪٿي اھو ضروري ھو ۽ ڪٿي اھو ضروري نه ھو. مثال طور، فهرست جي بدران - ۽ . سڀ کان پوء، semantics - اهو توهان جي صفحي جي جوڙجڪ ۽ هر بلاڪ جي مقصد کي سمجهڻ بابت آهي (اڪثريت ان کي هتي منظم ڪيو)، انهي سان گڏ اڳ ۽ / يا پوسٽ پروسيسرز جو استعمال (ڪجهه هتي منظم ڪيو ويو، جيتوڻيڪ هي پوائنٽن ۾ پڻ هو - اڪثر ڪري اهي گهٽ استعمال ڪندا هئا ۽ scss).

ڪم ڪندڙ سلائڊر. تفويض ۾ اسان لکيو آهي ته JS استعمال نٿو ڪري سگهجي. هتي مسئلن کي حل ڪرڻ جي صلاحيت آزمائي وئي آهي - هڪ سلائڊر هڪ گچ استعمال ڪندي ٺاهي سگهجي ٿو ۽ . سڀ جادو سليڪٽر ليول تي ٿئي ٿو #button-N:checked ~ .slider-inner .slider-slides. جڏهن اسان چيڪ بڪس انپٽس مان هڪ تي ڪلڪ ڪندا آهيون، اهو چيڪ ٿيل حالت ۾ وڃي ٿو. اسان ان مان فائدو وٺي سگھون ٿا ۽ ترجمي کي تفويض ڪري سگھون ٿا جيڪو اسان کي سلائڊ سان ڪنٽينر ۾ گھربل آھي: transform: translate(-33%). توھان ڏسي سگھوٿا سلائڊر تي عمل درآمد هتي.

ڊراپ ڊائون فهرستون. هتي اهو سڀ ڪجهه هيٺ آيو ۽ هڪ جهڙو چونڊيندڙ: .accordion-item input:checked ~ .accordion-item__content. توهان عمل درآمد ڏسي سگهو ٿا هتي.

جي دستيابي :hover، :active ۽ :focu* رياستون. هڪ تمام اهم نقطو. انٽرفيس سان رابطي دوران آرام ان تي منحصر آهي. استعمال ڪندڙ کي هميشه انهن جي عملن تي موٽ حاصل ڪرڻ گهرجي. هي شيون سوالنامي سان رابطي جي دوران جانچيو ويو. جيڪڏهن مون ”ڪال مون“ بٽڻ تي ڪلڪ ڪيو ۽ بصري طور تي ڪجهه به نه ٿيو (جيتوڻيڪ درخواست موڪلي وئي هئي)، اهو خراب آهي، ڇاڪاڻ ته پوءِ آئون ان کي بار بار ڪلڪ ڪندس. نتيجي طور، ڏهه درخواستون موڪليون وينديون ۽ مون کي ڏهه ڀيرا واپس سڏيو ويندو. اسان کي اهو نه وسارڻ گهرجي ته موبائل ڊوائيسز وٽ مائوس نه آهي، جنهن جو مطلب آهي ته هور نه هجڻ گهرجي. ۽ هڪ وڌيڪ نقطو جيڪو متاثر نه ڪيو انهن تي جيڪي سيمينٽڪس بابت نقطي کي پورو ڪن ٿا. جيڪڏهن توهان جو ڪنٽرول هڪ انٽرويو عنصر نه آهي، پوء جڏهن توهان ان تي هور ڪندا، ڪرسر معياري رهندو. اهو تمام اڻڄاتل ڏسڻ ۾ اچي ٿو، جيتوڻيڪ جيڪڏهن توهان هور تي ردعمل لکيو آهي. ڪرسر کي گھٽ نه سمجھو: پوائنٽر.

متحرڪ. اهو ضروري آهي ته عناصر سان گڏ ٿيڻ وارا سڀئي ردعمل هموار آهن. زندگيءَ ۾ ڪا به شيءِ فوري نه آهي، تنهن ڪري هور ۽ فعال تي منتقلي ٿيڻ ڪافي هئي انٽرفيس کي وڌيڪ خوشگوار بڻائڻ لاءِ. خير، جن سلائڊر کي متحرڪ ڪيو ۽ فهرستون عام طور تي عظيم آهن.

جديد ٽيڪنالاجي استعمال ڪندي. گھڻن ماڻھن فلڪس استعمال ڪيو، پر ڪو به گرڊ استعمال ڪندي ڪم مڪمل نه ڪيو. پوائنٽ ڳڻيو ويو جيڪڏھن flex صحيح استعمال ڪيو ويو. جيڪڏهن ڪنهن جاءِ تي ترتيب الڳ ٿي وئي ڇاڪاڻ ته انهن تمام گهڻي لچڪ جي ڪري، افسوس، توهان کي ڪو به اضافي پوائنٽ حاصل نه ڪيو.

فارم جي تصديق. اهو سڀ ڪجهه گهربل هو فارم جي هر ان پٽ تي گهربل وصف شامل ڪرڻ. اسان انهن ڏانهن پوائنٽون شامل ڪيون جن اي ميل فيلڊ کي اي ميل طور تصديق ڪيو.

فائل اپلوڊ بٽڻ کي اسٽائل ڪرڻ. اسان کي هڪ ميلاپ ڏسڻ جي اميد هئي جهڙوڪ: ۽ فائل چونڊيو . اڳيون اسان کي ان پٽ کي لڪائڻ ۽ ليبل کي انداز ڪرڻ جي ضرورت آهي. هڪ ٻيو عام طريقو آهي - هڪ شفاف ان پٽ ٺاهڻ ۽ ان کي بٽڻ جي چوٽي تي رکڻ لاء. پر سڀئي برائوزر اسٽائلنگ جي اجازت نٿا ڏين ، ۽ اهڙي حل کي مڪمل طور تي ڪراس برائوزر نه ٿو سڏيو وڃي. ۽ اهو لفظي طور تي وڌيڪ صحيح آهي ليبل ٺاهڻ.

ڪراس برائوزر مطابقت. اسان چيڪ ڪيو ته جديد برائوزرن جي ٻن جديد ورزن ۾ سڀ ڪجھ ٺيڪ هو (بغير IE - شرڪت ڪندڙ خوش قسمت هئا)، انهي سان گڏ سفاري ۾ آئي فونز ۽ ڪروم تي Android تي.

ان جي برعڪس، اسان پوائنٽون ڪٽيون جيڪڏهن ڪو استعمال ڪيو JS يا بوٽ اسٽريپ: اهي ٻئي سڄي ڪم جي مقصد کي شڪست ڏيندا. ان کان علاوه، Bootstrap سان شرڪت ڪندڙن نه رڳو مائنس حاصل ڪيو، پر ڪيترن ئي پوائنٽن کي وڃائي ڇڏيون سيمينٽڪس ۽ لاڳو ٿيل عناصر لاء.

جن پنهنجي سائيٽ کي انٽرنيٽ تي ڪنهن جاءِ تي ميزباني ڪيو انهن کي ڪو خاص فائدو نه مليو - پر نظرثاني ڪندڙ ڏاڍا خوش ٿيا جڏهن انهن کي ذخيرو ڊائون لوڊ ڪرڻ ۽ انهن کي پنهنجي ڪمپيوٽر تي مقامي طور تي هلائڻ جي ضرورت نه هئي. تنهن ڪري هن ڪم لاء هڪ پلس طور ڪم ڪيو.

پهريون ڪم تمام گهڻو مفيد هو بنيادي طور تي شاگردن لاءِ. جن کي اسان قبول نه ڪيو هو انهن وٽ هاڻي هڪ تيار ڪيل ريزيومي آهي - توهان فخر سان ان کي سڀني جوابن سان ڳنڍي سگهو ٿا يا پنهنجي 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: واقعن جو ڪئلينڊر

اهو انٽرفيس ڊولپر سرجي Kazakov ۽ اليگزينڊر Podskrebkin پاران تيار ڪيو ويو.

حالت

پنھنجي شيڊول کي ڊسپلي ڪرڻ لاء ھڪڙو ننڍو ڪئلينڊر لکو. توهان ڪنهن به شيڊول توهان چاهيو ٿا وٺي سگهو ٿا. مثال طور، 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 آرڪائيو واقع هو - ان تي تبصرو ڪرڻ ڏکيو آهي. 🙂
• هڪ ٻيو اميدوار، حل.js فائل جي پهرين لائن تي تبصرو ۾، ايمانداري سان تسليم ڪيو ته هن الگورتھم کي نقل ڪيو.

اسان 76 اميدوارن کان درخواستون وصول ڪيون ۽ 23 ماڻهن کي چونڊيو. اسان کي نه رڳو منسک کان، پر ماسڪو، سينٽ پيٽرسبرگ ۽ تاتارستان کان به سوالنامي موڪليا ويا هئا. ڪجھ ماڻھن اسان کي پنھنجي موجوده پيشي سان حيران ڪيو: انھن مان ھڪڙو ھڪڙو فرانزڪ ماهر آھي، ۽ ٻيو ھڪڙو طبي شاگرد آھي.

نتيجو ڪاميابي جي شرح جي هڪ دلچسپ تقسيم هو مڪمل ڪرڻ ۾ ڪمن کي. شرڪت ڪندڙن پهريون ڪم 60 سيڪڙو، ٻيو 50 سيڪڙو، ۽ ٽيون تمام ڏکيو ثابت ٿيو ۽ سراسري طور 40 سيڪڙو مڪمل ڪيو ويو.

پهرين نظر ۾، ڪم پيچيده ۽ وقت سازي نظر اچن ٿا. ان جو سبب اهو ناهي ته اسان چاهيون ٿا ته جيترو ٿي سگهي اميدوارن کي ٻاهر ڪڍيو وڃي. انهن جي پڙهائي دوران، شاگردن کي حقيقي زندگي جي ڪمن سان منهن ڏيڻو پوي ٿو - هڪ چيٽ ٺاهڻ، ٻارن لاءِ Yandex.Music يا Yandex.Weather موسم تي منحصر ماڻهن لاءِ. ھن لاء توھان کي ھڪڙي شروعاتي بنياد جي ضرورت آھي.

مون کي ياد آهي ته ٻه سال اڳ منهنجي ايس آر آئي جي داخلا جو ڪم ڏٺو هو ۽ سوچيو ته مان ان کي ڪڏهن به حل نه ڪندس. هن وقت بنيادي شيء ويهڻ آهي، احتياط سان حالتن کي پڙهو ۽ اهو ڪرڻ شروع ڪيو. اهو ظاهر ٿئي ٿو ته حالتون تقريبن 80٪ حل تي مشتمل آهن. مثال طور، ٽئين ڪم جي حالت ۾ (سڀ کان وڌيڪ ڏکيو)، اسان MDN تي سروس ڪارڪنن ۽ نوٽيفڪيشن API لاء لنڪ شامل ڪيو. شاگردن جن لنڪن جي مواد جو اڀياس ڪيو ان کي بغير ڪنهن ڏکيائي جي مڪمل ڪيو.

مان واقعي چاهيان ٿو ته هي مضمون انهن اميدوارن طرفان پڙهيو وڃي جيڪي مستقبل ۾ ايس آر آئي ۾ داخل ٿيڻ جي منصوبابندي ڪري رهيا آهن، جيڪي منسک اسڪول ۾ داخل ٿيڻ جي قابل نه هئا، يا جيڪي ڪنهن ٻئي ٽيسٽ ڪم ڪرڻ شروع ڪري رهيا آهن. جئين توهان ڏسي سگهو ٿا، اهو ڪرڻ بلڪل ممڪن آهي. توهان کي صرف پنهنجو پاڻ تي يقين رکڻو پوندو ۽ ليکڪن جي سڀني صلاحن کي ٻڌڻ جي ضرورت آهي.

جو ذريعو: www.habr.com