انٹرفیس ڈویلپمنٹ اسکول: منسک کے لیے کاموں کا تجزیہ اور ماسکو میں ایک نیا سیٹ

آج ایک نیا اندراج شروع ہوا۔ یانڈیکس انٹرفیس ڈویلپمنٹ اسکول ماسکو میں ٹریننگ کا پہلا مرحلہ 7 ستمبر سے 25 اکتوبر تک ہوگا۔ دوسرے شہروں کے طلباء اس میں دور سے یا ذاتی طور پر حصہ لے سکیں گے - کمپنی ہاسٹل میں سفر اور رہائش کے لیے ادائیگی کرے گی۔ دوسرا، آخری مرحلہ بھی، 3 دسمبر تک جاری رہے گا، یہ صرف ذاتی طور پر مکمل ہو سکتا ہے۔

میرا نام یولیا سیریڈیچ ہے، ہم نے یہ پوسٹ سرگئی کازاکوف کے ساتھ مل کر لکھی ہے۔ ہم دونوں Yandex کے منسک آفس میں انٹرفیس ڈویلپر ہیں اور پچھلے سالوں سے SRI کے فارغ التحصیل ہیں۔

ماسکو میں رجسٹریشن کے آغاز کے موقع پر، ہم پچھلے اسکول کے تعارفی کاموں کا تجزیہ شائع کر رہے ہیں - یہاں منسک میں۔

اگر آپ SRI اسائنمنٹس کی تاریخ کا سراغ لگاتے ہیں، تو سال بہ سال ہم نے پروگرامر کے لیے تین اہم مہارتوں کا تجربہ کیا:

• ترتیب. ہر ڈویلپر کو ترتیب دینے کے قابل ہونا چاہئے۔ ایسا نہیں ہوتا کہ آپ کے انکل سیریوزہ ہوں جو پوری ٹیم کے لیے ڈیزائن کرتے ہیں، اور آپ صرف اسکرپٹ لکھتے ہیں۔ اس لیے ہر طالب علم کو یہ دکھانا چاہیے کہ وہ کس طرح ٹائپ سیٹ کرنا جانتا ہے۔
• جاوا اسکرپٹ۔ اگر معاملہ لے آؤٹ تک محدود ہوتا تو ہمارے پاس انٹرفیس ڈویلپمنٹ کا سکول نہیں ہوتا بلکہ لے آؤٹ ڈیزائنرز کا سکول ہوتا۔ خوبصورتی سے ڈیزائن کردہ انٹرفیس کو دوبارہ زندہ کرنے کی ضرورت ہے۔ لہذا، JS کے لیے ہمیشہ ایک کام ہوتا ہے، لیکن بعض اوقات یہ الگورتھم کے لیے بھی ایک کام ہوتا ہے - ہم ان سے بہت پیار کرتے ہیں۔
• مسئلہ حل کرنا شاید ایک ڈویلپر کی سب سے اہم مہارت ہے۔ جب بات انٹرفیس بنانے کی ہو تو چیزیں بہت تیزی سے بدل رہی ہیں۔ یہ لیوس کیرول کی طرح ہے: "آپ کو ایک ہی جگہ پر رہنے کے لیے جتنی تیزی سے دوڑنا ہو گا، اور دوسری جگہ پہنچنے کے لیے آپ کو دوگنا تیز دوڑنا پڑے گا۔" ہر روز ہم نئی ٹیکنالوجیز کا سامنا کرتے ہیں - ہمیں ان کو مدنظر رکھنے اور انہیں سمجھنے کے قابل ہونے کی ضرورت ہے۔ لہذا، تیسرے کام میں، ہم نے ان ٹیکنالوجیز کو سمجھنے کی تجویز پیش کی جن سے ایک نوآموز ڈویلپر عام طور پر واقف نہیں ہوتا ہے۔

ہر کام کے تجزیہ میں، ہم آپ کو نہ صرف صحیح طریقہ کار کے بارے میں بلکہ عام غلطیوں کے بارے میں بھی بتائیں گے۔

ٹاسک 1: پورٹ فولیو

پہلا کام Yandex.Collections کے ڈیزائنر Alexey Cherenkevich، جو کہ لے آؤٹ کرنا جانتا ہے، اور اس کے سروس کے ساتھی، انٹرفیس ڈویلپر Sergey Samsonov نے کیا تھا۔

حالت

ایک پورٹ فولیو ویب سائٹ بنائیں: ہمیں اپنے بارے میں، اپنے کام اور اسکول سے اپنی توقعات کے بارے میں بتائیں۔ سائٹ کو مجوزہ لے آؤٹ سے زیادہ سے زیادہ مطابقت رکھنی چاہیے (لے آؤٹ کے لنکس: 1000px, 600px, 320px, تصریح)۔ ہمیں صرف ترتیب میں دلچسپی ہے، لہذا براہ کرم جاوا اسکرپٹ استعمال نہ کریں۔

چیک کرتے وقت ہم اس بات کو مدنظر رکھیں گے:

• انڈینٹیشن سائز، رنگ درستگی، فونٹ اسٹائل، فونٹ سائز؛
• معنوی ترتیب؛
• عناصر کی مختلف حالتوں کی موجودگی: کرسر کو ہوور کرتے وقت بٹن اور لنکس دکھانا، فعال ان پٹ فیلڈز کو نمایاں کرنا، وغیرہ۔
• کراس براؤزر مطابقت (مقبول براؤزرز کے تازہ ترین ورژن میں آزمایا گیا)۔

فائدہ ہوگا:

• جدید سی ایس ایس حل کا استعمال: فلیکس باکس، گرڈ، وغیرہ؛
• انکولی ترتیب؛
• پری اور (یا) پوسٹ پروسیسرز کا استعمال، اسمبلی، منیفیکیشن، آؤٹ پٹ کوڈ کی اصلاح؛
• HTML فارم کی توثیق، اسٹائلائزڈ فائل اپ لوڈ بٹن۔

کام کافی بڑا ہے، لہذا آپ اسے چھوڑ سکتے ہیں جو کام نہیں کرے گا۔ اس سے آپ کا سکور قدرے کم ہو جائے گا، لیکن آپ پھر بھی اپنے علم کا مظاہرہ کر سکیں گے۔ جب آپ کام کر لیں تو ہمیں دو لنکس بھیجیں - اپنے پورٹ فولیو اور GitHub پر سورس کوڈ۔

اسائنمنٹ میں تجویز کردہ لے آؤٹ صرف موبائل ڈیوائسز، ٹیبلیٹ اور ڈیسک ٹاپس کے لیے اسکرینوں کے ساتھ نہیں تھے، بلکہ حقیقی خصوصیات کے ساتھ بھی تھے۔

پہلے کام کی جانچ پڑتال کے نتیجے میں زیادہ سے زیادہ معروضیت لانے کے لیے، اس چیک کے لیے بہت سے معیارات تھے۔

معیار

ڈیزائن کردہ ویب سائٹ. یہ واضح معلوم ہوتا ہے، لیکن کچھ لڑکوں نے کچھ بلاکس کو مکمل طور پر چھوڑ دیا - یا تو وہ وقت بچانا چاہتے تھے، یا وہ ایسا نہیں کر سکے۔ ترتیب کو تقریباً چار اہم سکرینوں میں تقسیم کیا جا سکتا ہے: اوتار کے ساتھ مرکزی سکرین، SRI سے توقعات کی فہرست کے ساتھ ایک بلاک، پورٹ فولیو کے ساتھ ایک بلاک اور رابطہ کی معلومات کے ساتھ ایک بلاک۔ وہ حصوں میں بنائے جا سکتے ہیں یا صرف divs کا استعمال کرتے ہوئے، اہم بات یہ ہے کہ چاروں بلاکس دستیاب تھے۔

ترتیب کے ساتھ ترتیب کی تعمیل. ڈیزائنر نے امیدواروں کے لیے آسان بنانے کے لیے ایک الگ تصریح (بشمول رنگ، نوع ٹائپ، بٹن اسٹیٹس وغیرہ) بنائی۔ نچلے حصے میں پہلی اسکرین کے انڈینٹ اور فیچرز پر ایک اشارہ تھا۔ میں ان لڑکوں سے بہت خوش تھا جنہوں نے ڈیزائنر کی تمام خواہشات کو مدنظر رکھا: مثال کے طور پر، پہلی اسکرین کو ویو پورٹ کی اونچائی سے کم نہیں ہونا چاہیے تھا۔

انکولی لے آؤٹ - یہ تب ہوتا ہے جب انٹرفیس کو صرف اس طرح ترتیب نہیں دیا جاتا ہے کہ تین ریزولوشنز پر سب کچھ پکسل ٹو پکسل لے آؤٹ میں ہو۔ درمیانی ریاستوں میں، ترتیب کو بھی الگ نہیں ہونا چاہئے۔ کچھ کنٹینر کی زیادہ سے زیادہ چوڑائی کو محدود کرنا بھول گئے اور ہر چیز کو 1920 پکسلز پر سیٹ کر دیا، کچھ نے پس منظر میں گڑبڑ کر دی، لیکن مجموعی طور پر امیدواروں نے اس کام کا بخوبی مقابلہ کیا۔

معنوی ترتیب. "انھوں نے دنیا کو کتنی بار بتایا ہے" کہ لنک کو اس طرح ڈیزائن کیا جانا چاہیے ، بٹن - جیسا کہ ۔ خوش قسمتی سے، زیادہ تر امیدواروں نے اس شرط کو بھی پورا کیا۔ ہر کسی نے SRI کی توقعات میں پوشیدہ فہرست کو تسلیم نہیں کیا، اسے div ٹیگز کا استعمال کرتے ہوئے بنایا، لیکن یہ اتنا برا نہیں ہے۔ ایک امیدوار تھا جس نے وہ تمام سیمینٹک ٹیگز ڈالے جن کو وہ جانتا تھا - کہاں یہ ضروری تھا اور کہاں ضروری نہیں تھا۔ مثال کے طور پر، فہرست کے بجائے - اور . سب کے بعد، سیمنٹکس - یہ آپ کے صفحہ کی ساخت اور ہر بلاک کے مقصد کو سمجھنے کے بارے میں ہے (اکثریت نے اسے یہاں منظم کیا)، ساتھ ہی پری اور/یا پوسٹ پروسیسرز کے استعمال (کچھ لوگوں نے اسے یہاں منظم کیا، حالانکہ یہ پوائنٹس میں بھی تھا - اکثر وہ کم استعمال کرتے تھے اور scss)۔

ورکنگ سلائیڈر. اسائنمنٹ میں ہم نے لکھا کہ JS استعمال نہیں کیا جا سکتا۔ یہاں مسائل کو حل کرنے کی صلاحیت کی جانچ کی گئی تھی - ایک گروپ کا استعمال کرتے ہوئے ایک سلائیڈر بنایا جا سکتا ہے۔ اور تمام جادو سلیکٹر کی سطح پر ہوتا ہے #button-N:checked ~ .slider-inner .slider-slides۔ جب ہم ان پٹ چیک باکس میں سے کسی ایک پر کلک کرتے ہیں تو یہ چیک شدہ حالت میں چلا جاتا ہے۔ ہم اس سے فائدہ اٹھا سکتے ہیں اور سلائیڈز: transform: translate(-33%) کے ساتھ کنٹینر میں مطلوبہ ترجمہ تفویض کر سکتے ہیں۔ آپ سلائیڈر کا نفاذ دیکھ سکتے ہیں۔ یہاں.

ڈراپ ڈاؤن فہرستیں۔. یہاں یہ سب بھی نیچے آگیا اور اسی طرح کا سلیکٹر: .accordion-item input:checked ~ .accordion-item__content۔ آپ عمل درآمد دیکھ سکتے ہیں۔ یہاں.

:hover، :active اور :focu* ریاستوں کی دستیابی. ایک بہت اہم نکتہ۔ انٹرفیس کے ساتھ تعامل کے دوران راحت اس پر منحصر ہے۔ صارف کو ہمیشہ ان کے اعمال پر رائے حاصل کرنی چاہیے۔ اس آئٹم کو سوالنامے کے ساتھ بات چیت کے دوران چیک کیا گیا۔ اگر میں نے "مجھے کال کریں" کے بٹن پر کلک کیا اور بصری طور پر کچھ نہیں ہوا (اگرچہ درخواست بھیجی گئی تھی)، یہ برا ہے، کیونکہ پھر میں اسے بار بار کلک کروں گا۔ نتیجے کے طور پر، دس درخواستیں بھیجی جائیں گی اور مجھے دس بار واپس بلایا جائے گا۔ ہمیں یہ نہیں بھولنا چاہیے کہ موبائل آلات میں ماؤس نہیں ہوتا، جس کا مطلب ہے کہ وہاں ہوور نہیں ہونا چاہیے۔ اور ایک اور نکتہ جس نے ان لوگوں کو متاثر نہیں کیا جنہوں نے سیمنٹکس کے بارے میں نکتہ پورا کیا۔ اگر آپ کا کنٹرول انٹرایکٹو عنصر نہیں ہے، تو جب آپ اس پر ہوور کریں گے، کرسر معیاری رہے گا۔ یہ بہت گندا لگتا ہے، یہاں تک کہ اگر آپ نے ہوور پر ردعمل لکھا ہے۔ کرسر کو کم نہ سمجھیں: پوائنٹر۔

متحرک تصاویر. یہ ضروری ہے کہ عناصر کے ساتھ ہونے والے تمام رد عمل ہموار ہوں۔ زندگی میں کوئی بھی چیز فوری نہیں ہوتی، اس لیے ہوور اور ایکٹو پر ٹرانزیشن ہونا انٹرفیس کو مزید خوشگوار بنانے کے لیے کافی تھا۔ ٹھیک ہے، وہ لوگ جنہوں نے سلائیڈر اور فہرستوں کو متحرک کیا وہ عام طور پر بہت اچھے ہوتے ہیں۔

جدید ترین ٹیکنالوجی کا استعمال. بہت سے لوگوں نے فلیکس کا استعمال کیا، لیکن کسی نے گرڈ کا استعمال کرتے ہوئے کام مکمل نہیں کیا۔ اگر فلیکس کا صحیح استعمال کیا گیا تو پوائنٹ کو شمار کیا گیا۔ اگر کہیں لے آؤٹ ان ہی فلیکسز کی وجہ سے الگ ہو گیا، افسوس، آپ کو کوئی اضافی پوائنٹس نہیں ملے۔

فارم کی توثیق. جس کی ضرورت تھی وہ فارم کے ہر ان پٹ میں مطلوبہ وصف شامل کرنا تھا۔ ہم نے ان لوگوں کے لیے پوائنٹس شامل کیے جنہوں نے ای میل فیلڈ کو بطور ای میل درست کیا۔

فائل اپ لوڈ بٹن کو اسٹائل کرنا. ہم نے ایک مجموعہ دیکھنے کی توقع کی تھی جیسے: اور فائل کو منتخب کریں ۔ اگلا ہمیں ان پٹ کو چھپانے اور لیبل کو اسٹائل کرنے کی ضرورت ہے۔ ایک اور عام طریقہ ہے - ایک شفاف ان پٹ بنانا اور اسے بٹن کے اوپر رکھنا۔ لیکن تمام براؤزر اسٹائلنگ کی اجازت نہیں دیتے ہیں۔ ، اور اس طرح کے حل کو مکمل طور پر کراس براؤزر نہیں کہا جا سکتا۔ اور لیبل بنانا معنوی طور پر زیادہ درست ہے۔

کراس براؤزر مطابقت. ہم نے چیک کیا کہ جدید براؤزرز کے دو تازہ ترین ورژنز (آئی ای کے بغیر - شرکاء خوش قسمت تھے) کے ساتھ ساتھ آئی فونز پر سفاری اور اینڈرائیڈ پر کروم میں سب کچھ ٹھیک ہے۔

اس کے برعکس، اگر کوئی جے ایس یا بوٹسٹریپ استعمال کرتا ہے تو ہم نے پوائنٹس کاٹ دیے: یہ دونوں پورے کام کے مقصد کو ختم کر دیں گے۔ مزید برآں، بوٹسٹریپ والے شرکاء نے نہ صرف مائنس حاصل کیا، بلکہ سیمنٹکس اور نافذ کردہ عناصر کے لیے بہت سے پوائنٹس بھی کھوئے۔

جن لوگوں نے انٹرنیٹ پر کہیں اپنی سائٹ کی میزبانی کی انہیں کوئی خاص فائدہ نہیں ملا - لیکن جائزہ لینے والے بہت خوش ہوئے جب انہیں اپنے کمپیوٹر پر ریپوزٹریز ڈاؤن لوڈ کرنے اور انہیں مقامی طور پر چلانے کی ضرورت نہیں تھی۔ تو اس نے کرما کے لیے ایک پلس کے طور پر کام کیا۔

پہلا کام بنیادی طور پر طالب علم کے لیے بہت مفید تھا۔ جن لوگوں کو ہم نے قبول نہیں کیا اب ان کے پاس ایک تیار شدہ ریزیومے ہے - آپ اسے فخر کے ساتھ تمام جوابات کے ساتھ منسلک کر سکتے ہیں یا اپنے gh-pages پر پوسٹ کر سکتے ہیں۔

ٹاسک 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

تیسرا کام جانچنے کے لیے سب سے زیادہ دلچسپ تھا، کیونکہ بہت سے ممکنہ حل موجود تھے، ہر ایک کا اپنا۔ ہم نے جانچا کہ امیدوار غیر مانوس ٹیکنالوجیز کو کیسے ہینڈل کرتا ہے - چاہے وہ تحقیق کرنا جانتا ہے، چاہے وہ اپنے حل کی جانچ کرتا ہے۔

معیار

تہہ شدہ کیلنڈر. جی ہاں، اسے ابھی بھی باہر نکالنے کی ضرورت ہے. ایسے لوگ بھی تھے جنہوں نے شرط کو لفظی طور پر لیا اور سی ایس ایس کوڈ کی ایک لائن بھی نہیں ڈالی۔ یہ بہت پرکشش نہیں لگ رہا تھا، لیکن اگر سب کچھ کام کرتا ہے، پوائنٹس میں کمی نہیں آئی.

کسی ذریعہ سے واقعات کی فہرست حاصل کرنا. یہ ترتیب کا کام نہیں ہے، اس لیے اس میں شامل واقعات کی فہرست کو شمار نہیں کیا گیا۔ آپ ہمیشہ کسی کانفرنس کو منسوخ کر سکتے ہیں، اسے دوبارہ ترتیب دے سکتے ہیں، یا ایک نئی شامل کر سکتے ہیں۔ لہذا یہ ضروری تھا کہ باہر سے ڈیٹا وصول کیا جائے اور موصولہ JSON کی بنیاد پر ترتیب کو پیش کیا جائے۔ کسی بھی طرح سے ڈیٹا حاصل کرنا ضروری تھا (فچ طریقہ استعمال کرتے ہوئے یا XMLHttpRequest کا استعمال کرتے ہوئے)۔ اگر کسی شخص نے بازیافت کے لیے پولی فل کا اضافہ کیا اور ریڈمی میں اپنی پسند کو نشان زد کیا، تو اسے پلس کے طور پر شمار کیا جائے گا۔

بغیر کسی غلطی کے سروس ورکر کی رجسٹریشن اور پہلی ڈاؤن لوڈ کے بعد آف لائن کام کریں۔ یہاں ایک مثال ہے پہلے بوٹ پر شیڈول کیشنگ کے ساتھ خدمت کارکن۔ سروس ورکرز، ان کی صلاحیتوں اور ان کے ساتھ کام کرنے کے طریقے (کیچز کے ساتھ کام کرنے، آف لائن کام کرنے کی حکمت عملی) کے بارے میں تفصیلات یہاں مل سکتی ہیں۔

یاد دہانی ترتیب دینے کی صلاحیتتاکہ یہ اصل میں 3، 7، 14 دنوں کے بعد کام کرے۔ نوٹیفیکیشن API کو سمجھنا ضروری تھا، جس کا لنک کام پر صحیح تھا. ہم کسی خاص عمل درآمد کی توقع نہیں کر رہے تھے کہ آیا یہ جانچنے کا وقت آگیا ہے۔ کام کرنے کا کوئی بھی آپشن قبول کر لیا گیا تھا: لوکل سٹوریج میں اسٹوریج، انڈیکس ڈی بی یا سروس ورکر کے ذریعہ وقفہ وقفہ سے پولنگ۔ یہاں تک کہ پش سرور بنانا بھی ممکن تھا (یہاں مثال کے طور پر)، لیکن یہ آف لائن کام نہیں کرے گا۔ صفحہ بند ہونے کے بعد - اور کچھ وقت کے بعد کھولنے کے بعد ایک دھکا وصول کرنا بھی اتنا ہی ضروری تھا۔ اگر صفحہ بند ہونے کے ساتھ ہی یاد دہانی مر گئی تو حل شمار نہیں کیا گیا۔ یہ بہت اچھا ہے جب لڑکوں نے جائزہ لینے والوں کے بارے میں سوچا اور اسے ابھی دھکا دینا ممکن بنایا - تاکہ 3 دن انتظار نہ کرنا پڑے۔

ڈیسک ٹاپ پر آئیکن رکھنے کی اہلیت (PWA)۔ ہم نے فائل کی موجودگی کی جانچ کی۔ manifest.json صحیح شبیہیں کے ساتھ۔ کچھ لڑکوں نے یہ فائل بنائی (یا اسے CreateReactApp میں تیار کیا ہوا چھوڑ دیا) - لیکن درست شبیہیں شامل نہیں کیں۔ پھر، انسٹال کرنے کی کوشش کرتے وقت، "ایک مختلف آئیکن کی ضرورت ہے" جیسی خرابی پیش آگئی۔

کوڈ اسٹائل اور پروجیکٹ کا ڈھانچہ. جیسا کہ دوسرے کام میں، ہم نے ایک ہی کوڈ اسٹائل کو دیکھا (چاہے یہ ہمارے ساتھ موافق نہ ہو)۔ کچھ لڑکوں نے لنٹر پر پیچ کیا - یہ بہت اچھا ہے۔

کنسول کی خرابیاں. اگر کنسول میں کوئی انڈیکیٹر تھا کہ کچھ غلط ہے، اور شریک نے اس پر توجہ نہیں دی، تو ہم نے پوائنٹس کاٹ لیے۔

کے نتائج

شرکاء کے فیصلوں کے بارے میں کیا مضحکہ خیز ہے:

• ایک سوالنامے میں درج ذیل متن شامل تھا: "ایک پروگرامر دوست نے ایک React ایپلیکیشن جمع کرنے میں میری مدد کی۔ میں نے اس پر سوالات کی بوچھاڑ کی کہ کیسے اور کیوں، اور اس نے مجھے بتایا۔ مجھے واقعی یہ پسند آیا، میں اس کے بارے میں مزید جاننا چاہتا ہوں۔ ہم دل و جان سے اس ایپلی کیشن کے لیے کوششیں کر رہے تھے، لیکن بدقسمتی سے امیدوار کا دوست اس ایپلی کیشن کو کام کرنے میں زیادہ مددگار نہیں تھا۔
• ایک امیدوار نے GitHub کو ایک لنک بھیجا، جہاں RAR آرکائیو واقع تھا - اس پر تبصرہ کرنا مشکل ہے۔ 🙂
• ایک اور امیدوار نے، solution.js فائل کی پہلی سطر پر تبصرے میں، ایمانداری سے اعتراف کیا کہ اس نے الگورتھم کو کاپی کیا ہے۔

ہم نے 76 امیدواروں سے درخواستیں وصول کیں اور 23 لوگوں کو منتخب کیا۔ ہمیں نہ صرف منسک سے بلکہ ماسکو، سینٹ پیٹرزبرگ اور تاتارستان سے بھی سوالنامے بھیجے گئے۔ کچھ لڑکوں نے اپنے موجودہ پیشوں سے ہمیں حیران کر دیا: ان میں سے ایک فرانزک ماہر ہے، اور دوسرا میڈیکل کا طالب علم ہے۔

نتیجہ کاموں کو مکمل کرنے میں کامیابی کی شرح کی ایک دلچسپ تقسیم تھا۔ شرکاء نے پہلا ٹاسک اوسطاً 60%، دوسرا 50%، اور تیسرا مشکل ترین نکلا اور اوسطاً 40% مکمل ہوا۔

پہلی نظر میں، کام پیچیدہ اور وقت طلب نظر آتے ہیں۔ وجہ یہ نہیں ہے کہ ہم زیادہ سے زیادہ امیدواروں کو باہر کرنا چاہتے ہیں۔ اپنی تعلیم کے دوران، طلباء کو حقیقی زندگی کے کاموں کا سامنا کرنا پڑتا ہے - چیٹ کرنا، بچوں کے لیے Yandex.Music یا موسم پر منحصر لوگوں کے لیے Yandex.Weather۔ اس کے لیے آپ کو ایک ابتدائی بنیاد کی ضرورت ہے۔

مجھے یاد ہے کہ میں نے دو سال پہلے اپنا SRI داخلی کام دیکھا تھا اور سوچا تھا کہ میں اسے کبھی حل نہیں کروں گا۔ اس وقت سب سے اہم بات یہ ہے کہ بیٹھ جائیں، حالات کو احتیاط سے پڑھیں اور اسے کرنا شروع کریں۔ یہ پتہ چلتا ہے کہ حالات تقریبا 80٪ حل پر مشتمل ہیں. مثال کے طور پر، تیسرے کام کی حالت میں (سب سے مشکل)، ہم نے MDN پر سروس ورکرز اور نوٹیفیکیشن API کے لنکس شامل کیے ہیں۔ جن طلباء نے لنکس کے مواد کا مطالعہ کیا انہوں نے اسے بغیر کسی مشکل کے مکمل کیا۔

میں واقعی میں چاہوں گا کہ یہ مضمون ان امیدواروں کے ذریعہ پڑھا جائے جو مستقبل میں SRI میں داخل ہونے کا منصوبہ بنا رہے ہیں، جو منسک اسکول میں داخلے سے قاصر تھے، یا جو کوئی اور امتحانی کام کرنا شروع کر رہے ہیں۔ جیسا کہ آپ دیکھ سکتے ہیں، ایسا کرنا کافی ممکن ہے۔ آپ کو صرف اپنے آپ پر یقین کرنے کی ضرورت ہے اور مصنفین کے تمام نکات سننے کی ضرورت ہے۔

ماخذ: www.habr.com