ফ্রন্ট-এন্ড ডেভেলপার গাইড - পর্ব ২ - যা কিছু আয়ত্বে থাকা চাই

আগের লেখাটিতে একজন frontend developer (FE Dev) এর দায়িত্বের প্রতি আলোকপাত করা হয়েছিল। ওই দায়িত্বগুলো সুষ্ঠুভাবে পালন করার জন্য যে দক্ষতাগুলো আয়ত্বে রাখতে হবে সেগুলি নিয়েই এই পোষ্ট।

যেহেতু দায়িত্ব অনেক সেহেতু জানার তালিকাও বেশ বড়। সব বিষয়েই যে বিশেষজ্ঞ হতে হবে এমন নয়। হওয়া সম্ভবও নয়। তবে কিছু বিষয়ে হতে হবে। তাহলে শুরু করা যাক-

ওয়্যারফ্রেমিং:

নতুন কোনো কনসেপ্ট বা ধারণা সহকর্মীদের সাথে আলোচনা বা তাদের থেকে ফিডব্যাক নেওয়ার জন্য দ্রুত wireframing করা জানা থাকতে হবে। এটি করার জন্য অনেক টুল/সার্ভিস আছে। কনসেপ্টের গ্রহণযোগ্যতা বাড়ানোর জন্য বেসিক UX নিয়ে জানাশোনা থাকতে হবে।

বাস্তবায়ন পরিকল্পনা বা Implementation Planning:

নতুন ডিজাইন আসার পরে প্রথমে কি ভাবে html ও CSS লিখলে বেশী reuse করা যাবে, ক্লাসের মধে্য conflict এড়ানো যাবে প্রভৃতি নিয়ে পরিকল্পনা করতে হবে। প্রজেক্টের শুরুতে এই প্ল্যানিং ফেইজকে অহেতুক সময় নষ্ট মনে হলেও, প্রজেক্ট লাইফ সাইকেলে এটি অনেকগুণ সময় বাঁচিয়ে দিবে। শুরু থেকেই পরিকল্পনা করার প্র্যাকটিস করতে থাকলে এই দক্ষতা অভিজ্ঞতা বৃদ্ধির সাথে সাথে শাণিত হতে থাকবে। এই ফেইজটিই একজন এক্সপার্টকে গড়পড়তা ডেভেলাপার থেকে পৃথক করে।

Photoshop/Illustrator/Sketch:

প্রজেক্ট লাইফ সাইকেলে ডিজাইনে বেশ কিছু পরিবর্তন হয়। কিছু যোগ হয়, কিছু হয় বিয়োগ। ডিজাইনারকে সবসময় হাতের কাছে নাও পাওয়া যেতে পারে। তখন FE Dev কেই এই দায়িত্ব নিতে হবে। ফটোশপের বেসিক অপারেশনগুলি দখলে থাকতে হবে। Psd থেকে HTML করতে গেলে অবশ্যই ফটোশপে দক্ষতা লাগবে। ইলাস্ট্রেটর নিয়ে বেসিক ধারণা থাকলে উত্তম। উদাহরণস্বরূপ, আমার বর্তমান প্রজেক্টের ডিজাইন ক্লায়েন্ট Illustrator এ দিয়েছে। Mac এ কাজ করলে স্কেচ এর বেসিক knowledge খুবই উপকারে দিবে।

HTML ও CSS:

এটি হয়ত না উল্লেখ করলেও হতো। কিন্তু কিছু বিষয় আমরা অনেকেই উপেক্ষা করে যাই। উদাহরণস্বরূপ, position:absolute অথবা display:inline-block রুল আপাতদৃষ্টিতে ব্রাউজারে কী পরিবর্তন আনে জানলেও পেছনের লজিক বুঝি না। ফলে কমপ্লেক্স ডিজাইন মার্কআপ করতে গেলে নানামুখী সংকটে পড়তে হয়। একই কথা বলা যেতে পারে html এর ক্ষেত্রেও। পেছনের লজিকগুলো জানতে হবে। css ডিসপ্লে, পজিশন, ফ্লোট, অ্যানিমেশন নখদর্পণে থাকতে হবে। CSS আর্কিটেক্ট হতে গেলে ব্রাউজার কীভাবে কাজ করে তা নিয়ে ধারণা থাকতে হবে।

CSS Processor:

Bootstrap এ কাজ করার সুবাদে অনেকেই Less এর সাথে পরিচিত। কিন্তু মার্কেট Sass এর দখলে। অধিকাংশ জব পোস্টে এটি requirement। তাই সাসের গুরুত্ব নিয়ে আর শব্দ খরচ না করলেও চলছে। Sass এর ভেরিয়েবল, মিক্সিন, প্লেসহোল্ডার সম্পর্কে জানতে হবে। ইদানিং PostCSS এর কদর বাড়ছে তবে এটি সম্পর্কে জানা এ মুহূর্তে আবশ্যিক না।

রেসপনসিভনেস এবং ক্রস-ব্রাউজার কম্পেটিবলিটি:

Responsive এবং cross browser compatible করা জানতেই হবে। CSS ফ্রেমওয়ার্ক, বিশেষ করে বুটস্ট্র্যাপ সম্পর্কে স্বচ্ছ ধারণা থাকতে হবে। নিখুঁত টেস্টিং প্রক্রিয়া অনুসরণ করলে ক্রস-ব্রাউজার কম্পেটিবিলিটি স্কিল অভিজ্ঞতার সাথে বাড়তে থাকবে।

জাভাস্ক্রিপ্ট:

JavaScript (JS) ছাড়া ফ্রন্ট-এন্ড অসম্পূর্ণ। এখানে বেশ কিছু প্রশ্ন আছে। কতটুকু জানতে হবে? কোর ল্যাংগুয়েজ নাকি ফ্রেমওয়ার্ক? কোন ফ্রেমওয়ার্ক? ফাংশনাল প্রোগ্রামিং নাকি অবজেক্ট ওরিয়েন্টেড? ইত্যাদি..ইত্যাদি…।

FE ডেভেলাপারদেরকে প্রধানত দুইভাগে ভাগ করা যায়। CSS সেন্ট্রিক এবং JS সেন্ট্রিক। প্রথম দলের ডেভরা সিএসএস এক্সপার্ট এবং যতটুকু জাভাস্ক্রিপ্ট জানলে কাজ চালানো যায় ততটুকু বা তার থেকে একটু বেশী জানেন। দেশীয় বাজারে এদের কদর তুলনামূলক কম। দ্বিতীয় দলের ডেভদের দক্ষতা এবং দেশের বাজারে চাহিদা ঠিক প্রথম দলের উল্টো।

প্লেইন JavaScript এবং কোনো একটি ফ্রেমওয়ার্ক দুটোই শিখতে হবে। React নিয়ে কমিনিউটিতে অনেক কথা হলেও দেশে এখনও AngularJS এর জয়জয়কার। Angular2 নিয়ে বাহ্যত সমালোচনা থাকলেও ২০১৭ সালে যদি এটি stable থাকে তাহলে ২০১৮ থেকে ক্রমবর্ধমান হারে ব্যবহার হতে থাকবে।

টাস্ক রানার/ মডিউল বান্ডলার:

Grunt/Gulp/Webpack এর যেকোনো একটি সম্পর্কে ধারণা থাকলেই হবে। সোর্স ফাইল concat ও মিনিফাই করা পর্যন্ত শিখতে হবে।

যোগাযোগ দক্ষতা:

FE Dev এর জন্য কমিউনিকেশন স্কিল অপরিহার্য কারণ সে ডিজাইন ও ব্যাক-এন্ডের মধে্য সংযোগ সেতু স্বরূপ। এই দক্ষতা অনেক stress থেকে ডেভেলাপারকে রক্ষা করবে। টেকনিক্যাল যোগ্যতা যত বেশীই থাকুক না কেন, যোগাযোগে ঘাটতি থাকলে সফল ক্যারিয়ার গড়া খুবই কঠিন হয়ে যাবে।

উল্লিখিত বিষয়গুলোর উপর ভালো দখল থাকার পাশাপাশি প্রজেক্টের উপর নির্ভর করে তালিকাটি আরও বড় হতে পারে। নতুন কিছু শেখার প্রতি তীব্র আসক্তি থাকতে হবে। বই পড়তে হবে। Youtube এ কনফারেন্স টক দেখতে হবে।

অনুৎসাহিত হওয়ার কিছু নেই। লেগে থাকলে সময়ের ব্যাপার মাত্র। কিন্তু শেখা শুরু করব কোথা থেকে? কোন পথ ধরে এগোব? রোডম্যাপ কী? Roadmap — এটিই হবে পরবর্তী পোস্টের আলোচ্য বিষয়।

লেখাটি নিয়ে আপনার মতামত বা প্রশ্ন থাকলে কমেন্ট করুন। ভালো লাগলে শেয়ার করুন।

সিরিজ: ফ্রন্ট-এন্ড ডেভেলপার গাইড

সর্বশেষ আপডেট: মে ১৪, ২০২০ খ্রিস্টাব্দ

লেখাটি সম্পাদনা করুন এখানে