ইন্টারফেস ডেভেলপমেন্ট স্কুল: মিনস্কের জন্য কাজগুলির বিশ্লেষণ এবং মস্কোতে একটি নতুন সেট

আজ একটি নতুন তালিকা খোলা হয়েছে ইয়ানডেক্স ইন্টারফেস ডেভেলপমেন্ট স্কুল মস্কো তে. প্রশিক্ষণের প্রথম ধাপ 7 সেপ্টেম্বর থেকে 25 অক্টোবর পর্যন্ত অনুষ্ঠিত হবে। অন্যান্য শহরের শিক্ষার্থীরা দূরবর্তীভাবে বা ব্যক্তিগতভাবে এতে অংশগ্রহণ করতে সক্ষম হবে - কোম্পানি একটি হোস্টেলে ভ্রমণ এবং বাসস্থানের জন্য অর্থ প্রদান করবে। দ্বিতীয়, চূড়ান্ত পর্যায়, 3 ডিসেম্বর পর্যন্ত স্থায়ী হবে, এটি শুধুমাত্র ব্যক্তিগতভাবে সম্পন্ন করা যেতে পারে।

আমার নাম ইউলিয়া সেরেডিচ, আমরা সের্গেই কাজাকভের সাথে একসাথে এই পোস্টটি লিখেছি। আমরা দুজনেই ইয়ানডেক্সের মিনস্ক অফিসে ইন্টারফেস ডেভেলপার এবং আগের বছর থেকে SRI-এর স্নাতক।

মস্কোতে রেজিস্ট্রেশন খোলার উপলক্ষ্যে, আমরা পূর্ববর্তী স্কুলের পরিচায়ক কাজগুলির একটি বিশ্লেষণ প্রকাশ করছি - এখানে মিনস্কে।

আপনি যদি এসআরআই অ্যাসাইনমেন্টের ইতিহাস খুঁজে পান, বছরের পর বছর আমরা একজন প্রোগ্রামারের জন্য তিনটি গুরুত্বপূর্ণ দক্ষতা পরীক্ষা করেছি:

• লেআউট। প্রতিটি বিকাশকারী লেআউট করতে সক্ষম হওয়া উচিত। এমনটা হয় না যে আপনার আঙ্কেল সেরিওজা আছেন যিনি পুরো দলের জন্য ডিজাইন করেন এবং আপনি শুধুমাত্র স্ক্রিপ্ট লেখেন। তাই প্রত্যেক শিক্ষার্থীকে অবশ্যই দেখাতে হবে যে সে কিভাবে টাইপসেট করতে জানে।
• জাভাস্ক্রিপ্ট। ব্যাপারটা যদি লেআউটের মধ্যে সীমাবদ্ধ থাকত, তাহলে আমাদের ইন্টারফেস ডেভেলপমেন্টের স্কুল থাকত না, লেআউট ডিজাইনারদের স্কুল থাকত। সুন্দরভাবে ডিজাইন করা ইন্টারফেসটিকে পুনরুজ্জীবিত করা দরকার। অতএব, JS-এর জন্য সর্বদা একটি টাস্ক থাকে, তবে কখনও কখনও এটি অ্যালগরিদমের জন্যও একটি কাজ - আমরা তাদের অনেক ভালোবাসি।
• সমস্যা সমাধান করা সম্ভবত একজন বিকাশকারীর সবচেয়ে গুরুত্বপূর্ণ দক্ষতা। ইন্টারফেস তৈরি করার ক্ষেত্রে, জিনিসগুলি খুব দ্রুত পরিবর্তন হচ্ছে। এটি লুইস ক্যারলের মতো: "একই জায়গায় থাকার জন্য আপনাকে যতটা দ্রুত দৌড়াতে হবে, এবং অন্য জায়গায় যেতে আপনাকে দ্বিগুণ দ্রুত দৌড়াতে হবে।" প্রতিদিন আমরা নতুন নতুন প্রযুক্তির সম্মুখীন হই - আমাদের সেগুলিকে বিবেচনায় নিতে হবে এবং সেগুলি বুঝতে সক্ষম হতে হবে৷ অতএব, তৃতীয় টাস্কে, আমরা এমন প্রযুক্তিগুলি বোঝার প্রস্তাব করেছি যেগুলির সাথে একজন নবীন বিকাশকারী সাধারণত পরিচিত হয় না।

প্রতিটি কাজের বিশ্লেষণে, আমরা আপনাকে কেবল সঠিক পদ্ধতি সম্পর্কেই নয়, সাধারণ ভুলগুলি সম্পর্কেও বলব।

টাস্ক 1: পোর্টফোলিও

প্রথম কাজটি Yandex.Collections এর ডিজাইনার আলেক্সি Cherenkevich, যিনি লেআউট করতে জানেন এবং তার পরিষেবা সহকর্মী, ইন্টারফেস ডেভেলপার সের্গেই স্যামসোনভ দ্বারা কাজ করেছিলেন।

শর্ত

একটি পোর্টফোলিও ওয়েবসাইট তৈরি করুন: আপনার, আপনার কাজ এবং স্কুল থেকে আপনার প্রত্যাশা সম্পর্কে আমাদের বলুন। সাইটটি যতটা সম্ভব প্রস্তাবিত লেআউটের সাথে মিলিত হওয়া উচিত (লেআউটগুলির লিঙ্ক: 1000px, 600px, 320px, স্পেসিফিকেশন) আমরা শুধুমাত্র লেআউটে আগ্রহী, তাই দয়া করে জাভাস্ক্রিপ্ট ব্যবহার করবেন না।

চেক করার সময় আমরা বিবেচনা করব:

• ইন্ডেন্টেশন মাপ, রঙ সঠিকতা, ফন্ট শৈলী, ফন্ট আকার;
• শব্দার্থিক বিন্যাস;
• উপাদানগুলির বিভিন্ন অবস্থার উপস্থিতি: কার্সার ঘোরানোর সময় বোতাম এবং লিঙ্কগুলি প্রদর্শন করা, সক্রিয় ইনপুট ক্ষেত্রগুলিকে হাইলাইট করা ইত্যাদি;
• ক্রস-ব্রাউজার সামঞ্জস্য (জনপ্রিয় ব্রাউজারগুলির সর্বশেষ সংস্করণে পরীক্ষিত)।

সুবিধা হবে:

• আধুনিক CSS সমাধান ব্যবহার: flexbox, grid, ইত্যাদি;
• অভিযোজিত বিন্যাস;
• প্রাক- এবং (বা) পোস্ট-প্রসেসরের ব্যবহার, সমাবেশ, ক্ষুদ্রকরণ, আউটপুট কোডের অপ্টিমাইজেশন;
• এইচটিএমএল ফর্ম যাচাইকরণ, স্টাইলাইজড ফাইল আপলোড বোতাম।

কাজটি বেশ বিশাল, তাই আপনি যা কাজ করবে না তা এড়িয়ে যেতে পারেন। এটি আপনার স্কোরকে কিছুটা কমিয়ে দেবে, তবে আপনি এখনও আপনার জ্ঞান প্রদর্শন করতে সক্ষম হবেন। আপনার হয়ে গেলে, আমাদের দুটি লিঙ্ক পাঠান - আপনার পোর্টফোলিওতে এবং গিটহাবের সোর্স কোড।

অ্যাসাইনমেন্টে প্রস্তাবিত লেআউটগুলি কেবল মোবাইল ডিভাইস, ট্যাবলেট এবং ডেস্কটপের স্ক্রিনগুলির সাথে নয়, বাস্তব বৈশিষ্ট্যগুলির সাথেও ছিল৷

প্রথম কাজটি পরীক্ষা করার ফলাফলে যতটা সম্ভব বস্তুনিষ্ঠতা আনার জন্য, এই চেকের জন্য অনেকগুলি মানদণ্ড ছিল।

মানদণ্ড

ডিজাইন করা ওয়েবসাইট. এটি সুস্পষ্ট বলে মনে হচ্ছে, কিন্তু কিছু লোক কিছু ব্লক সম্পূর্ণভাবে এড়িয়ে গেছে - হয় তারা সময় বাঁচাতে চেয়েছিল, অথবা তারা সেগুলি করতে পারেনি। বিন্যাসটিকে মোটামুটিভাবে চারটি প্রধান পর্দায় ভাগ করা যেতে পারে: একটি অবতার সহ প্রধান স্ক্রীন, SRI থেকে প্রত্যাশার তালিকা সহ একটি ব্লক, একটি পোর্টফোলিও সহ একটি ব্লক এবং যোগাযোগের তথ্য সহ একটি ব্লক৷ এগুলি বিভাগে তৈরি করা যেতে পারে বা কেবল ডিভ ব্যবহার করে, মূল জিনিসটি হ'ল চারটি ব্লক উপলব্ধ ছিল।

লেআউটের সাথে লেআউটের সম্মতি. ডিজাইনার প্রার্থীদের জন্য সহজ করার জন্য একটি পৃথক স্পেসিফিকেশন (রং, টাইপোগ্রাফি, বোতামের অবস্থা ইত্যাদি সহ) তৈরি করেছেন। নীচে প্রথম স্ক্রিনের ইন্ডেন্ট এবং বৈশিষ্ট্যগুলিতে একটি ইঙ্গিত ছিল। আমি সেই ছেলেদের সাথে খুব সন্তুষ্ট ছিলাম যারা ডিজাইনারের সমস্ত ইচ্ছাকে বিবেচনায় নিয়েছিল: উদাহরণস্বরূপ, প্রথম পর্দাটি ভিউপোর্টের উচ্চতার চেয়ে কম হওয়া উচিত ছিল না।

অভিযোজিত বিন্যাস - এটি তখন যখন ইন্টারফেসটি কেবল বিন্যস্ত করা হয় না যাতে তিনটি রেজোলিউশনে সবকিছুই পিক্সেল থেকে পিক্সেল বিন্যাসে থাকে। মধ্যবর্তী রাজ্যগুলিতে, বিন্যাসটিও আলাদা হওয়া উচিত নয়। কেউ কেউ কন্টেইনারের সর্বোচ্চ প্রস্থ সীমিত করতে ভুলে গেছে এবং সবকিছু 1920 পিক্সেলে সেট করেছে, কেউ কেউ ব্যাকগ্রাউন্ডে গোলমাল করেছে, কিন্তু সামগ্রিকভাবে প্রার্থীরা এই কাজটি ভালভাবে মোকাবেলা করেছে।

শব্দার্থিক বিন্যাস. "কতবার তারা বিশ্বকে বলেছে" যে লিঙ্কটি এইভাবে ডিজাইন করা উচিত , বোতামটি - হিসাবে । সৌভাগ্যবশত, বেশিরভাগ প্রার্থী এই প্রয়োজনীয়তাও পূরণ করেছেন। সবাই এসআরআই-এর প্রত্যাশায় লুকানো তালিকাটি চিনতে পারেনি, এটি ডিভ ট্যাগ ব্যবহার করে তৈরি করে, তবে এটি খারাপ নয়। একজন প্রার্থী ছিলেন যিনি সমস্ত শব্দার্থিক ট্যাগগুলি সন্নিবেশ করেছিলেন যা তিনি জানতেন - কোথায় এটি প্রয়োজনীয় এবং কোথায় এটি প্রয়োজনীয় নয়। উদাহরণস্বরূপ, একটি তালিকার পরিবর্তে - এবং . সর্বোপরি, শব্দার্থবিদ্যা - এটি আপনার পৃষ্ঠার রচনা এবং প্রতিটি ব্লকের উদ্দেশ্য বোঝার বিষয়ে (অধিকাংশ এখানে এটি পরিচালনা করেছে), পাশাপাশি প্রি- এবং / অথবা পোস্ট-প্রসেসরের ব্যবহার (কয়েকজন এখানে এটি পরিচালনা করেছেন, যদিও এটি পয়েন্টগুলিতেও ছিল - বেশিরভাগ ক্ষেত্রে তারা কম এবং scss ব্যবহার করত)।

ওয়ার্কিং স্লাইডার. অ্যাসাইনমেন্টে আমরা লিখেছিলাম যে JS ব্যবহার করা যাবে না। এখানে সমস্যা সমাধানের ক্ষমতা পরীক্ষা করা হয়েছিল - একটি গুচ্ছ ব্যবহার করে একটি স্লাইডার তৈরি করা যেতে পারে এবং সমস্ত জাদু নির্বাচক স্তরে ঘটে #button-N:চেক করা ~ .slider-inner .slider-slides. যখন আমরা একটি ইনপুট চেকবক্সে ক্লিক করি, এটি চেক করা অবস্থায় চলে যায়। আমরা এর সুবিধা নিতে পারি এবং স্লাইডগুলি সহ কন্টেইনারে আমাদের প্রয়োজনীয় অনুবাদ বরাদ্দ করতে পারি: transform: translate(-33%)। আপনি স্লাইডার বাস্তবায়ন দেখতে পারেন এখানে.

ড্রপডাউন তালিকা. এখানেও সব নিচে নেমে এসেছে এবং একটি অনুরূপ নির্বাচক: .accordion-item input:checked ~ .accordion-item__content. আপনি বাস্তবায়ন দেখতে পারেন এখানে.

:hover, :active এবং :focu* স্টেটের উপলব্ধতা. একটি খুব গুরুত্বপূর্ণ পয়েন্ট. ইন্টারফেসের সাথে মিথস্ক্রিয়া চলাকালীন আরাম এটির উপর নির্ভর করে। ব্যবহারকারীর সর্বদা তাদের কর্মের প্রতিক্রিয়া পাওয়া উচিত। এই আইটেমটি প্রশ্নাবলীর সাথে মিথস্ক্রিয়া জুড়ে চেক করা হয়েছিল। যদি আমি "আমাকে কল করুন" বোতামটি ক্লিক করি এবং দৃশ্যত কিছুই ঘটেনি (যদিও অনুরোধটি পাঠানো হয়েছিল), এটি খারাপ, কারণ আমি বারবার এটিতে ক্লিক করব। ফলস্বরূপ, দশটি অনুরোধ পাঠানো হবে এবং আমাকে দশবার ডাকা হবে। আমাদের অবশ্যই ভুলে যাওয়া উচিত নয় যে মোবাইল ডিভাইসে মাউস নেই, যার মানে একটি হোভার থাকা উচিত নয়। এবং আরও একটি পয়েন্ট যা শব্দার্থবিদ্যা সম্পর্কে যারা বিন্দু পূরণ করেছে তাদের প্রভাবিত করেনি। যদি আপনার নিয়ন্ত্রণ একটি ইন্টারেক্টিভ উপাদান না হয়, তাহলে আপনি যখন এটির উপর হোভার করেন, তখন কার্সারটি স্ট্যান্ডার্ড থাকবে। এটা খুব অপরিচ্ছন্ন দেখায়, এমনকি যদি আপনি হোভার একটি প্রতিক্রিয়া লিখেছেন. কার্সারকে অবমূল্যায়ন করবেন না: পয়েন্টার।

অ্যানিমেশন. এটা গুরুত্বপূর্ণ যে উপাদানগুলির সাথে ঘটমান সমস্ত প্রতিক্রিয়া মসৃণ হয়। জীবনের কোন কিছুই তাৎক্ষণিক নয়, তাই ইন্টারফেসটিকে আরও মনোরম করার জন্য হোভার এবং সক্রিয় ট্রানজিশন থাকা যথেষ্ট ছিল। ওয়েল, যারা স্লাইডার এবং তালিকা অ্যানিমেটেড তারা সাধারণত মহান.

সর্বাধুনিক প্রযুক্তি ব্যবহার করে. অনেকে ফ্লেক্স ব্যবহার করে, কিন্তু কেউ গ্রিড ব্যবহার করে কাজটি সম্পন্ন করেনি। ফ্লেক্স সঠিকভাবে ব্যবহার করা হলে পয়েন্টটি গণনা করা হয়েছিল। যদি কোথাও এই ফ্লেক্সগুলির কারণে লেআউটটি আলাদা হয়ে যায়, হায়, আপনি কোনও অতিরিক্ত পয়েন্ট পাননি৷

ফর্ম বৈধতা. যা প্রয়োজন ছিল তা হল ফর্মের প্রতিটি ইনপুটে প্রয়োজনীয় বৈশিষ্ট্য যোগ করা। যারা ইমেল ক্ষেত্রটিকে ইমেল হিসাবে যাচাই করেছে আমরা তাদের পয়েন্ট যোগ করেছি।

ফাইল আপলোড বোতাম স্টাইল করা. আমরা একটি সমন্বয় দেখতে আশা করি: এবং ফাইল নির্বাচন করুন । পরবর্তীতে আমাদের ইনপুট লুকাতে হবে এবং লেবেল স্টাইল করতে হবে। আরেকটি সাধারণ উপায় আছে - একটি স্বচ্ছ ইনপুট তৈরি করুন এবং এটি বোতামের উপরে রাখুন। কিন্তু সব ব্রাউজার স্টাইল করার অনুমতি দেয় না , এবং এই জাতীয় সমাধানকে সম্পূর্ণ ক্রস-ব্রাউজার বলা যাবে না। এবং এটি একটি লেবেল করা শব্দার্থগতভাবে আরও সঠিক।

ক্রস ব্রাউজার সামঞ্জস্য. আমরা পরীক্ষা করেছি যে আধুনিক ব্রাউজারগুলির দুটি সর্বশেষ সংস্করণে (IE ব্যতীত - অংশগ্রহণকারীরা ভাগ্যবান ছিল), পাশাপাশি iPhones-এ Safari এবং Androids-এ Chrome-এ সবকিছু ঠিক আছে৷

বিপরীতে, কেউ যদি 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/ ফোল্ডারে রয়েছে, আপনার সমাধানটি সমাধান.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

তৃতীয় কাজটি পরীক্ষা করার জন্য সবচেয়ে আকর্ষণীয় ছিল, কারণ সেখানে অনেকগুলি সম্ভাব্য সমাধান ছিল, প্রতিটি তাদের নিজস্ব। আমরা পরীক্ষা করেছি কিভাবে প্রার্থী অপরিচিত প্রযুক্তিগুলি পরিচালনা করে - সে কীভাবে গবেষণা করতে জানে, সে তার সমাধানগুলি পরীক্ষা করে কিনা।

মানদণ্ড

ভাঁজ করা ক্যালেন্ডার. হ্যাঁ, এটা এখনও রাখা প্রয়োজন. এমনও ছিলেন যারা শর্তটিকে খুব আক্ষরিক অর্থে নিয়েছেন এবং সিএসএস কোডের একটি লাইনও সন্নিবেশ করেননি। এটি খুব আকর্ষণীয় দেখায়নি, তবে সবকিছু কাজ করলে পয়েন্ট কমেনি।

একটি উৎস থেকে ইভেন্টের একটি তালিকা পাওয়া. এটি একটি লেআউট কাজ নয়, তাই এতে অন্তর্ভুক্ত ইভেন্টের তালিকা গণনা করা হয়নি। আপনি সর্বদা একটি সম্মেলন বাতিল করতে পারেন, এটি পুনরায় নির্ধারণ করতে পারেন বা একটি নতুন যোগ করতে পারেন৷ সুতরাং বাইরে থেকে ডেটা গ্রহণ করা এবং প্রাপ্ত JSON এর উপর ভিত্তি করে লেআউট রেন্ডার করা প্রয়োজন ছিল। যে কোনো উপায়ে ডেটা প্রাপ্ত করা গুরুত্বপূর্ণ ছিল (ফেচ পদ্ধতি ব্যবহার করে বা XMLHttpRequest ব্যবহার করে)। যদি কোনো ব্যক্তি আনার জন্য একটি পলিফিল যোগ করেন এবং রিডমিতে তার পছন্দ চিহ্নিত করেন, তাহলে এটি একটি প্লাস হিসেবে গণ্য হবে।

ত্রুটি ছাড়াই পরিষেবা কর্মী নিবন্ধন এবং প্রথম ডাউনলোডের পর অফলাইনে কাজ করুন। এখানে একটি উদাহরণ। প্রথম বুটে সময়সূচী ক্যাশিং সহ পরিষেবা কর্মী। পরিষেবা কর্মীদের সম্পর্কে বিশদ বিবরণ, তাদের ক্ষমতা এবং তাদের সাথে কাজ করার উপায় (ক্যাশের সাথে কাজ করার কৌশল, অফলাইনে কাজ করা) এখানে পাওয়া যাবে।

একটি অনুস্মারক সেট করার ক্ষমতাযাতে এটি আসলে 3, 7, 14 দিন পরে কাজ করে। নোটিফিকেশন এপিআই বোঝার প্রয়োজন ছিল, যার লিঙ্ক কাজ ঠিক ছিল. আমরা কোন সুনির্দিষ্ট বাস্তবায়ন আশা করছি না যে এটি চাপ দেওয়ার সময় কিনা তা পরীক্ষা করবে। যেকোন কাজের বিকল্প গ্রহণ করা হয়েছিল: লোকাল স্টোরেজ, ইনডেক্সডিবি বা পরিষেবা কর্মী দ্বারা পর্যায়ক্রমিক পোলিং-এ স্টোরেজ। এমনকি একটি পুশ সার্ভার তৈরি করাও সম্ভব ছিল (এখানে উদাহরণ), কিন্তু এটি অফলাইনে কাজ করবে না। পৃষ্ঠাটি বন্ধ হওয়ার পরে একটি ধাক্কা গ্রহণ করা সমান গুরুত্বপূর্ণ ছিল - এবং কিছু সময় পরে খোলা হয়েছিল। যদি অনুস্মারক একই সময়ে পৃষ্ঠাটি বন্ধ হয়ে যায় তবে সমাধানটি গণনা করা হয়নি। ছেলেরা যখন পর্যালোচকদের কথা ভেবেছিল এবং এখনই একটি ধাক্কা পাওয়া সম্ভব করে তোলে - তাই 3 দিন অপেক্ষা না করার জন্য এটি দুর্দান্ত।

ডেস্কটপে একটি আইকন স্থাপন করার ক্ষমতা (PWA)। আমরা ফাইল উপস্থিতি চেক manifest.json টি সঠিক আইকন সহ। কিছু লোক এই ফাইলটি তৈরি করেছে (বা এটি CreateReactApp-এ জেনারেট হয়েছে) - কিন্তু সঠিক আইকন যোগ করেনি। তারপরে, ইনস্টল করার চেষ্টা করার সময়, "একটি ভিন্ন আইকন প্রয়োজন" এর মতো একটি ত্রুটি ঘটেছে৷

কোডস্টাইল এবং প্রকল্পের কাঠামো. দ্বিতীয় টাস্কের মতো, আমরা একটি একক কোডস্টাইল দেখেছি (যদিও এটি আমাদের সাথে মিলে না)। কিছু লোক লিন্টারে স্ক্রু করেছে - এটি দুর্দান্ত।

কনসোল ত্রুটি. যদি কনসোলে একটি সূচক থাকে যে কিছু ভুল ছিল, এবং অংশগ্রহণকারী এটিতে মনোযোগ না দেয়, তাহলে আমরা পয়েন্টগুলি কেটে নিয়েছি।

ফলাফল

অংশগ্রহণকারীদের সিদ্ধান্ত সম্পর্কে কি মজার:

• একটি প্রশ্নপত্রে নিম্নলিখিত পাঠ্য ছিল: “একজন প্রোগ্রামার বন্ধু আমাকে একটি প্রতিক্রিয়া অ্যাপ্লিকেশন একত্রিত করতে সাহায্য করেছিল। আমি কিভাবে এবং কেন প্রশ্ন সঙ্গে তাকে বোমা, এবং তিনি আমাকে বলেন. আমি সত্যিই এটি পছন্দ করেছি, আমি এটি সম্পর্কে আরও জানতে চাই।" আমরা আমাদের সমস্ত হৃদয় দিয়ে এই অ্যাপ্লিকেশনটির জন্য রুট করছিলাম, কিন্তু দুর্ভাগ্যবশত, প্রার্থীর বন্ধু আবেদনটি কার্যকর করতে খুব বেশি সহায়ক ছিল না।
• একজন প্রার্থী GitHub-এ একটি লিঙ্ক পাঠিয়েছেন, যেখানে RAR সংরক্ষণাগারটি অবস্থিত ছিল - এই বিষয়ে মন্তব্য করা কঠিন। 🙂
• অন্য একজন প্রার্থী, solution.js ফাইলের প্রথম লাইনের মন্তব্যে, সততার সাথে স্বীকার করেছেন যে তিনি অ্যালগরিদমটি অনুলিপি করেছেন।

আমরা 76 জন প্রার্থীর কাছ থেকে আবেদন পেয়েছি এবং 23 জনকে বেছে নিয়েছি। আমাদের শুধুমাত্র মিনস্ক থেকে নয়, মস্কো, সেন্ট পিটার্সবার্গ এবং এমনকি তাতারস্তান থেকেও প্রশ্নাবলী পাঠানো হয়েছিল। কিছু ছেলে তাদের বর্তমান পেশা নিয়ে আমাদের অবাক করেছে: তাদের মধ্যে একজন ফরেনসিক বিশেষজ্ঞ, এবং অন্যজন একজন মেডিকেল ছাত্র।

ফলাফলটি কাজগুলি সম্পূর্ণ করার ক্ষেত্রে সাফল্যের হারের একটি আকর্ষণীয় বিতরণ ছিল। অংশগ্রহণকারীরা গড়ে 60% দ্বারা প্রথম কাজটি সম্পন্ন করে, দ্বিতীয়টি 50% দ্বারা এবং তৃতীয়টি সবচেয়ে কঠিন হিসাবে পরিণত হয়েছিল এবং গড়ে 40% দ্বারা সম্পন্ন হয়েছিল।

প্রথম নজরে, কাজগুলি জটিল এবং সময়সাপেক্ষ বলে মনে হচ্ছে। কারণটি এই নয় যে আমরা যতটা সম্ভব প্রার্থীকে আউট করতে চাই। তাদের অধ্যয়নের সময়, শিক্ষার্থীরা বাস্তব জীবনের কাজগুলির মুখোমুখি হয় - একটি চ্যাট তৈরি করা, শিশুদের জন্য Yandex.Music বা Yandex.Weather আবহাওয়া নির্ভর মানুষের জন্য৷ এই জন্য আপনি একটি শুরু বেস প্রয়োজন.

আমার মনে আছে দুই বছর আগে আমার SRI এন্ট্রান্স টাস্ক দেখেছিলাম এবং ভেবেছিলাম যে আমি কখনই এটি সমাধান করব না। এই মুহুর্তে প্রধান জিনিসটি বসে থাকা, সাবধানে শর্তগুলি পড়া এবং এটি করা শুরু করা। দেখা যাচ্ছে যে শর্তগুলির প্রায় 80% সমাধান রয়েছে। উদাহরণস্বরূপ, তৃতীয় টাস্ক (সবচেয়ে কঠিন) অবস্থায়, আমরা MDN-এ পরিষেবা কর্মীদের এবং বিজ্ঞপ্তি API-এর লিঙ্ক যুক্ত করেছি। লিঙ্কের বিষয়বস্তু অধ্যয়নরত শিক্ষার্থীরা অসুবিধা ছাড়াই এটি সম্পন্ন করেছে।

আমি সত্যিই চাই যে এই নিবন্ধটি সেই প্রার্থীরা পড়ুক যারা ভবিষ্যতে এসআরআইতে প্রবেশের পরিকল্পনা করছেন, যারা মিনস্ক স্কুলে প্রবেশ করতে পারেনি, বা যারা অন্য কোনো পরীক্ষামূলক কাজ করতে শুরু করেছে। আপনি দেখতে পাচ্ছেন, এটি করা বেশ সম্ভব। আপনাকে কেবল নিজের উপর বিশ্বাস রাখতে হবে এবং লেখকদের কাছ থেকে সমস্ত টিপস শুনতে হবে।

উত্স: www.habr.com