এবার কোডিং করুন রকেট গতিতে…!!! ৮০-৯০%সময় বাচবে নিশ্চিত।

3
519

আসসালামু আলাইকুম ।

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

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

 নাম কি?

প্লাগিন টির নাম  EMMET (পুর্বে  এটি ‘জেন কোডিং’ নামে পরিচিত ছিল )।

এখান থেকে  আপনার পছন্দের এডিটর অনুযায়ী ডাউনলোড করুন। এবং সংস্লিষ্ট নির্দেশনা অনুযায়ী  ইন্সটল করুন।

এত প্লাগিন থাকতে EMMET কেন?

হ্যা প্রশ্নটি আপনার মনে জাগতেই পারে ,আংশিক উত্তর মনে হয়  ইতোমধ্যে আপনি পেয়ে গেছেন। আগেও এরকম অনেক প্লাগিন ছিল কিন্তু সেগুলোর কোনটি এতগুলো এডিটরএ ব্যাবহার করা যেত না। বলতে গেলে এই প্লাগিনটি উইন্ডোজ ,ম্যাক এবং লিনাক্স প্লাটফর্ম এর  সবগুলো কোড এডিটর দ্বারা সাপোর্টেড। আর সবচেয়ে বড় দিক হলো এর বিশাল snippet কালেকশন যা সত্যি অবাক করার মত।Believe It Or Not!! কয়েকদিন ব্যাবহার করলে আপনি নিশ্চিত এটির প্রেমে পরে যাবেন!

কিভাবে এটি কাজ করে ?

কোড লেখা সহজ করতে সাধারণ  কিছু কিবোর্ড শর্টকাট কমান্ড ব্যবহার করে। আপনি অতি অল্প সময় এ অতি সহজে প্রফেশনাল কোডারদের মত কোডিং করতে পারবেন। এটা যে শুধু আপনার সময় ই বাচাবে না, এটি কোড লেখাকে মজাদার করে তোলে। আপনি শুধু কয়েকটি অক্ষর টাইপ  করবেন আর ইমেট আপনাকে দিবে পুরো কমান্ড ।ব্যাপারটা একটি উদাহরন দিয়ে ব্যাখ্যা করি, ধরুন আপনি একটি ওয়েবপেজ এর কোডিং করবেন  শুধু html  লিখে কিবোর্ড থেকে Tab কি প্রেস করুন আর দেখুন ইমেট এর ম্যাজিক!!…ইমেট আপনার সামনে পুরো এইচটিএমএল পেজ একটা বেসিক স্ট্র্যাকচার হাজির করবে।আবার কিছু কোড আছে যেগুলো মনে  রাখা খুবই কষ্টসাধ্য।কিন্তু ইমেট এর মাধ্যমে আপনার নিমিষেই সেসব কোড মুখস্ত রাখার  ঝামেলা থেকে মুক্তি মিলবে। যেমন ধরুন, HTML এর ডকটাইপ ডিক্লারেশন।যারা নিয়মিত কোডিং করেন তারা ভাল করেই জানেন কতটা বিরক্তিকর জিনিস এটা!! কিন্তু ইমেটে  একটিমাত্র ওয়ার্ড এর ছোট্ট কমান্ড আপনাকে দিবে  ৮-১০ লাইনের পুরো ডকটাইপ ডিক্লারেশন।

এতক্ষন তো শুধু HTML দিয়েই উদাহরন দিলাম,তাই বলে আবার ভাববেন না এটি শুধু এইচটিএমএল কোড লিখতে ব্যাবহার করা হয়। বরং আমার কাছে মনে হয়েছে এইচটিএমএল এর তুলনায়  CSS কোড লিখতে ইমেট বেশি পারদর্শী। সিএসএস কোড লেখাকে ইমেট পুরোই মাখন বানিয়ে ফেলেছে। ইমেট এর মাধ্যমে আপনি অতি সহজেই ভ্যালু সহ সিএসএস কোড লিখতে পারবেন। মনে করুন আপনি text-align:justify;এই কোডটি লিখবেন,ইমেট এ শুধু "taj" লিখুন আর কিবোর্ড থেকে Tab কি প্রেস করুন ব্যাস আর কিচ্ছু করতে হবে না।

HTML ও ইমেট  : আমি HTML-5 এ একটি পেজ ডিজাইন করব । ইমেট রান করে এডিটর এ লিখলাম html;5 আর ফলাফলটা নিজের চোখেই দেখুন html-5 doctype with emmet এবার কোডিং করুন রকেট গতিতে...!!!  ৮০-৯০%সময় বাচবে নিশ্চিত।

 

CSS ও ইমেটঃ আমরা জানি সিএসএস কোডিং এর মূল অংশ সাধারনত দুটি Properties এবং Value. বেসিক গঠনটা  এরকম,

css-best-property-value এবার কোডিং করুন রকেট গতিতে...!!!  ৮০-৯০%সময় বাচবে নিশ্চিত।

ইমেট আপনাকে খুব সহজেই এরকম অসংখ্য PROPERTY  লিখতে সহায়তা করবে। নিচের ইমেজটি দেখুনঃ

emmet-css-property এবার কোডিং করুন রকেট গতিতে...!!!  ৮০-৯০%সময় বাচবে নিশ্চিত।

শুধু প্রপার্টি ই নয় আপনি একই সাথে প্রপার্টি এর VALUE নির্ধারন করে দিতে পারবেন-emmet-css-value এবার কোডিং করুন রকেট গতিতে...!!!  ৮০-৯০%সময় বাচবে নিশ্চিত।

আপনি চাইলে UNIT ও ঠিক করে দিতে পারবেন, ডিফল্টভাবে ইউনিট px থাকে। আপনি ইচ্ছে করলে em, rem, %, ex কিংবা  px যেকোনো একটি নির্ধারন করে দিতে পারেন

emmet-css-unit এবার কোডিং করুন রকেট গতিতে...!!!  ৮০-৯০%সময় বাচবে নিশ্চিত।

একাধিক ইউনিট ও একসঙ্গে লিখা যায়,-

emmet-css-multiple-units এবার কোডিং করুন রকেট গতিতে...!!!  ৮০-৯০%সময় বাচবে নিশ্চিত।

ইমেট এর মাধ্যমে COLOR কোডিং করা অনেক সহজ। c# এর পর আপনার পছন্দের রঙের হেক্সকোডটি লিখুন।ইচ্ছে করলে আরও সংক্ষেপে লিখা যায়, নিচে দেখুন

  • #1#111111
  • #e0#e0e0e0
  • #fc0#ffcc00

উদাহরন দেখুন-

emmet-css-colors এবার কোডিং করুন রকেট গতিতে...!!!  ৮০-৯০%সময় বাচবে নিশ্চিত।

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

Documentation: Here

অবশ্যই চিট শীটটি ডাউনলোড করতে ভুলবেন না :

Cheat Sheet: Download 

কোথাও কিছু বুঝতে সমস্যা হলে কমেন্ট করুন। অথবা FACEBOOK এ আমাকে নক করুন।

ফেসবুক এ আমি

নিম্নমানের টিউন এর জন্য সকলের কাছে ক্ষমাপ্রার্থী । সবাইকে আরেকবার শুভেচ্ছা জানিয়ে আমার টিউন শেষ করছি……HAPPY CODING……

3 মন্তব্য

একটি উত্তর ত্যাগ