ইমেটজেন কোডিং-আপনার কোডিং কে করুন আরও গতিশীল

একজন ওয়েব ডেভেলপার হিসেবে আমরা সবসময় এমন কিছু টুলস খুঁজি যা আমাদের কর্ম প্রবাহকে গতিশীল করে। আজকের টিউনটি তাঁদেরই জন্য যারা এইচটিএমএল ও সিএসএস এর কাজ গুলো স্বতঃস্ফূর্ত ভাবে করতে ভালোবাসে। সেই জন্যই আপনাদের কাজকে আরও দ্রতগতি করতে আমার আজকের টিউনটি করবো ইমেট(Emmet) কে নিয়ে।

পুরো টিউন জুড়ে যা যা থাকছে

১. ইমেট কি?

২. কিভাবে ইমেট ইন্সটল করতে হয়?

৩ এইচটিএমএল এ কিভাবে কাজ করে?

৪. সিএসএস এ কিভাবে কাজ করে?

৫. রিসোর্স

১. ইমেট কিঃ

Emmet হচ্ছে বর্তমানের সবচেয়ে জনপ্রিয় ও সময়-বাঁচানোর একটি দারুণ টেক্সট এডিটর প্লাগিন। এটার কাজটা হল মুহূর্তেই সাধারন কোন সংক্ষিপ্ত কোড থেকে কঠিন স্নিপেট কোডে রুপান্তর করা। এটার পূর্ব নাম ছিল জেন কোডিং। (Zen Coding) সুতরাং Zen Coding এর সম্পূর্ণ নতুন সংস্করণ ই হল Emmet

Emmet logo

২. কিভাবে ইমেট ইন্সটল করতে হয়ঃ

বর্তমানে প্রায় কমবেশি সব টেক্সট ইডিটরে ইমেট ইন্সটল করা যায়। আমি এখানে ইমেট ইন্সটল করার জন্য সাবলাইম কে বেছে নিয়েছি। সাবলাইম এর ভাইরাস ফ্রী উইন্ডোস ভার্সনটা নিচের লিঙ্ক ডাউনলোড করুন এবং ইন্সটল প্রক্রিয়া সারুন।

ডাউনলোড লিঙ্কঃ http://goo.gl/OvifuZ

প্রথমে exe ফাইলের সাথে দেয়া key.txt টি ব্যবহার করে দেখুন। যদি কাজ না হয় তাহলে ভিতরে keygan ফাইল আছে সেটি ব্যবহার করুন। এবার ইমেট ইন্সটল করার পালা।

  • প্রথমে আপনার সাবলাইমটি ওপেন করে কিবোর্ড সর্টকাট ctrl + `  অথবা  view > show console এ যান।

  • এবার নিচে দেয়া পুরো কোডটি কপি করে অথবা এখান থেকে কনসলে পেস্ট করে enter চাপুন। এবং কিছুক্ষণ অপেক্ষা করুন। কিছুক্ষণ পর আপনার ইডিটর টি রিস্টার্ট চাইলে তা রিস্টার্ট দিন।

» সাবলাইম টেক্সট ২ প্যাকেজ কন্ট্রোল কোডঃ

 import urllib2, os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler())); open( os.path.join( ipp, pf), 'wb').write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ', '%20')).read()); print( 'Please restart Sublime Text to finish installation')

  • এখন সর্টকাট ctrl + shift + p অথবা Tools > Command palette এ যান। একটি সার্চ বক্স দেখতে পাবেন। সেখানে install package লিখে package control: Install package অপশানটি নির্বাচন করুন।

  • নিচের মত একটা উইন্ডো পাবেন। সেখানে সার্চ বক্সে emmet লিখে প্রথম অংশটি নির্বাচন করুন। কিছু সময় দেন। এরপর সাবলাইম সয়ংক্রিয় ভাবে ইমেট আপনার ব্যবহারের উপযোগী করে তুলবে। আপনার ইমেট প্লাগিন এখন ব্যবহার উপযোগী। 🙂

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

 ভিডিও লিঙ্কঃ  http://www.youtube.com/watch?v=XXfCQIlztuk

নিজে সামলাইম ব্যবহার করি তাই সম্পূর্ণ প্রক্রিয়া সাবলাইম এ করে দেখানো হয়েছে। আপনার ইচ্ছা করলেই অন্য যেকোনো ইডিটরে ইমেট ব্যবহার করতে পারেন। অন্য ইডিটরে ইমেট ইন্সটল প্রক্রিয়া তুলনামূলক সোজা। আমি আর সেগুলো এখানে দেখালাম না। যেসব ইডিটর ইমেট সমর্থন করে এবং কিভাবে ইন্সটল করতে হয় তা নিচের লিঙ্ক থেকে দেখে নিন।

লিঙ্কঃ http://emmet.io/download/

৩. এইচটিএমএল এ কিভাবে কাজ করেঃ

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

এইচটিএমএল ডকুমেন্ট ডিক্লেয়ার

এখন আপনি খুব সহজে একটি নতুন html ডকুমেন্ট চালু করতে পারেন। শুধু সাবলাইমে টাইপ করুন ! বা html:5 এবং হিট করুন Tab আর দেখুন মজা।

এছাড়াও xHTML transitional doctype এর জন্য html:xt এবং HTML4 strict doctype এর জন্য html:4s লিখে Tab হিট করলেই সেই ভাবে সব ডিক্লেয়ার হবে।

সহজেই যোগ করুন ক্লাস, আইডি, টেক্সট ও এট্ট্রিবিউট

আপনি একটি ইলিমেন্ট এর সাথে একসাথে ক্লাস ও আইডি অথবা আলাদাভাবে ক্লাস ও আইডি দিয়ে এইচটিএমএল ক্লাস বা আইডি নির্ধারণ করতে পারেন। যেমন, p  ইলিমেন্ট এর সাথে .class এবং #id যোগ করলে অথবা p.class#id একসাথে লিখে Tab হিট করলে ক্রমান্বয়ে <p class="class"></p>,  <p id="id"></p>,  <p id="id"></p> ফলাফলে লেখা আসবে।

আপনি কনটেন্ট ও এট্ট্রিবিউট কেও সহজে যোগ করতে পারেন। এখানে কারলি ব্রাকেট {} ব্যবহার করা হয় কনটেন্ট লেখার জন্য আর স্কয়ার ব্রাকেট [] ব্যবহার করা হয় এট্ট্রিবিউট লেখার জন্য। যেমন, h1{text text text} লিখলে ফলাফলে <h1>text text text</h1> এবং a[href=#] লিখলে ফলাফলে <a href="#"></a> আসবে।

চাইল্ড ইলিমেন্ট

Emmet এ সিএসএস এর মত সিনট্যাক্স ব্যবহার করা হয়। সিএসএস এ আমরা চাইল্ড সিলেক্টর হিসেবে যে " > " প্রতিক ব্যবহার করি ইমেট এ সে অপারেটর চাইল্ড ইলিমেন্ট যোগ করতে ব্যবহার করি। যেমন,  

সিব্লিং ইলিমেন্ট

সিএসএস এর মত ইমেট ও সিব্লিং ইলেমেন্ট ব্যবহার করা হয়েছে। এটা + চিহ্ন দ্বারা নির্ধারিত। যেমন,  

মালটিপ্লিকেশান

Emmet এর সাহায্যে (*) চিহ্নের মাধ্যমে অনেকগুলো ইলিমেন্ট একসাথে যোগ করা যায় যা কোডিং এর সময় কে অনেক কমে আনে। যেমন, একটি <selection> ইলিমেন্ট এর মধ্যে একটি h1  ও চারটি h3 কে নিচের চিত্রের মত করে লেখা যায়। 

লরেম ইমপুম

সবশেষে এই ইমেট টি আমার কাছে বেশ পছন্দের। ইমেট দিয়ে খুব সহজে আপনি অনেক বেশি টেক্সট লিখতে পারেন। যেমন,  

আমি এখানে নাম্বার ৩ দিয়ে দেখিয়েছি। আপনি চাইলে যে কোন নাম্বার দিয়ে টেস্ট করতে পারেন। যত নাম্বার দিবেন সেই পরিমান শব্দ আপনি পেয়ে যাবেন সহজে।

৪. সিএসএস এ কিভাবে কাজ করেঃ

আমরা শুধু এইচটিএমএল না সিএসএস ও ইমেট রয়েছে বড় ভূমিকায়। আপনি যদি কোন কিছুতে padding: 10px যোগ করতে চান তাহলে শুধু লিখুন p:10 দেখুন padding : 10px চলে এসেছে। 

এছাড়া d:n v দিয়ে Tab হিট করলে display: nonevisibility: hidden ফলাফলে আসবে। এছাড়াও কিছু অন্য অপারেটর যেমন,  @font-face, Vendor prefixes, gradient সহ আরও অনেক অপারেটরে ইমেট ব্যবহার করার অপশান রয়েছে।

যাই হোক, ইমেট এর কিছু সুবিধার পাশাপাশি সিএসএস এ অসুবিধাও রয়েছে। যেমন, ইমেট এ সিএসএস এর সর্টকোড গুলো মুখস্থ করা এইচটিএমএল এর থেকে তুলনামূলক কঠিন।

৫. রিসোর্সঃ

এখানে ইমেট এর কিছু রিসোর্স লিস্ট আকারে দেয়া হল।

  • Emmet Documentation - ইমেট নিয়ে বিস্তারিত জানার জন্য।

  • Cheat Sheet - ইমেট এর পুরা নিয়ন্ত্রণে আনার জন্য।

  • Abbreviations Syntax - এইচটিএমএল ও সিএসএস ইমেট সিনট্যাক্স কিভাবে ব্যবহার করা যায় তার বিস্তারিত পারেন এখানে।

শেষকথাঃ

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

ফেসবুকে

আমি

Level 0

আমি রনি সাটিয়ার। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 3 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 16 টি টিউন ও 573 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 3 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

অসাধারণ লিখেছেন রনি ভাই! আমি ভাবছিলাম এটা নিয়ে একটি টিউন করবো। অবশেষে আপনি করেই দিলেন 😀 আমি সামনে সাবলাইম টেক্সট নিয়ে একটি মেগা টিউন লিখছি। সেখানে ইমেট এর একটি পার্ট থাকবে। আমি ওইখানে আপনার টিউনটি রিকমেন্ড করে দিবো 🙂

Level 0

এক কথাই জটিল ওয়েব ডিজাইনার দের জন্য !! 😛

Level 0

অনেক ধন্যবাদ রনি ভাই। এরকম একটা কিছু খুজছিলাম অনেক দিন ধরে 🙂

ভাই এই লিঙ্ক টা কাজ করে না http://goo.gl/XPDPaF

nice….love it bro. i was looking for it.
Download link is not working try my link below…

http://www.mediafire.com/download/rdlf4wt7z226qs6/Sublime(2).7z

সব থেকে সহজ এবং সুন্দর মাধ্যম কোনটা কোডিং করার জন্য ? যেখানে html, java, c, php, css ইত্যাদি সব ধরনের কোডিং লিখা যাবে এবং অল্প লিখলেই সাজেশান শো করবে, যেমন করে ড্রিমওয়েভারে ?

    @এলিন: আমি সাবলাইমের সাথে কারো তুলনা করতে চায় না। স্ট্যান্ডার্ড কোডিং এর জন্য সাবলাইম কে সব সময় সমর্থন করি।

      @রনি সাটিয়ার: ধন্যবাদ। আমি ভেবেছিলাম এটা এক্সপার্টদের জন্য। ড্রিমওয়েভারে যেমন কিছুটা লিখলে সাজেশান আসে কি লিখতে চাই এমনটি কি সাবলাইনেও হয় ?

Level New

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

আপনার টিউনটি পেয়ে অনেক উপকার হয়েছে। একটি বিষয় বলবেন notpad++ এ html & css পাশা পাশি রেখে কাজ করার সুবিধা আছে । যেমন move to other view option এই option টা কি আমি sublime text 2 te ব্যাবহের করতে পারব?

sublime text 2 থেকে কিভাবে ব্রাউজারে ওপেন করব।যে টা নোটপ্যাড প্লাস এ পারা যায়।

Level 0

valo tobe ami DM use kori otirikto jamelaaaaaaaaaaaaa jete chi na

Level New

sublime 3 তে কি ব্রাউজার ওপেন করা যায়? ভাল পোস্ট। Thanks Brother

    হুম যায়। রাইট বাটনে Open in Browser অপশন থেকে আপনার এইচটিএমএল কে ব্রাউজার ওপেন করতে পারেন।
    স্ক্রিনশট টা দেখেন। http://prntscr.com/8oor0f

    ধন্যবাদ।

ভাই আমার sublimetext3 এর shortcut হচ্ছে clt+E । এটা আমি কিভাবে পরিবর্তন করে Tab রুপান্তর করব…?

প্রিয় রনি সাটিয়ার,

আমি টেকটিউনস কমিউনিটি ম্যানেজার, শোয়াইব,

টেকটিউনস থেকে আপনার সাথে অফিসিয়ালি যোগাযোগ করতে চাচ্ছি। টেকটিউনস থেকে আপনার সাথে অফিসিয়ালি যোগাযোগ করার জন্য http://techtun.es/2obSQxE লিংকটিতে ক্লিক করে আপনার সাথে যোগাযোগের প্রয়োজনীয় তথ্য সাবমিট করে আমাদের সাহায্য করবেন আশা করছি।

ছদ্ম ছবি, নাম, ইমেইল, ফোন, ঠিকানা ও সৌশল Contact পরিহার করে আপনার প্রকৃত/আসল ছবি, নাম, ইমেইল, ফোন, ঠিকানা ও সৌশল Contact দিন। যেহেতু টেকটিউনস থেকে আপনার সাথে অফিসিয়ালি যোগাযোগ করা হবে।

সাবমিট করার পর আমাদের এই ম্যাসেজের রিপ্লাই আপনার কাছ থেকে আশা করছি।

বিশেষ নোট: আপনি যদি পূর্বে আমাদের এই ম্যাসেজ পেয়ে ফর্মটি সাবমিট করে থাকেন তবে আর পুনরায় সাবমিট করার প্রয়োজন নেই। কিন্তু যদি আপনি এখনও আমাদের এই ফর্মটি পেয়ে সাবমিট করে না থাকেন তবে অবশ্যই এখনই সাবমিট করুন এবং সাবমিট করার পর অবশ্যই আমাদের এই ম্যাসেজের রিপ্লাই দিন।

ধন্যবাদ আপনাকে।