আমাদের কথা খুঁজে নিন

   

ওয়েব ডিজাইনার এবং ডেভেলপারদের জন্য নতুন চমক ! এবার সিএসএস-৩ কোডিংয়ে সময় কমিয়ে আনুন ৮০ ভাগ । এটা না দেখলে আমার সবকিছুই বৃথা ।

সুপ্রিয় টেকটিউনস কমিউনিটি সবাইকে আমার সালাম এবং শুভেচ্ছা জানিয়ে শুরু করছি আমার আজকের টিউন ।
একজন ওয়েব ডেভেলপার হিসেবে আমরা সবসময় এমন কিছু টুলস খুঁজি যা আমাদের কর্ম প্রবাহকে করবে গতিশীল । আজকের টিউনটি তাদেরই জন্যেই যারা সিএসএস-৩ নিয়ে কাজ করেন এবং কাজ গুলো স্বতঃস্ফূর্ত এবং দ্রুত গতিতে করতে ভালোবাসেন । আমি আজ আপনাদের যে বিষয়টি সম্পর্কে বলবো সেটা হলো (Prefixr Plugin).
আমরা যারা সিএসএস-৩ নিয়ে কাজ করি তারা প্রত্যেকেই জানি যে সিএসএস-৩ সব ব্রাউজারে অটোম্যাটিক সাপোর্ট করে না । তাই আমাদের Manually Browser কে সিএসএস-৩ এর জন্য Compatible করে নিতে হয় ।

আর এর জন্য আমাদের মূল কোডিং এর চেয়ে প্রায় ৪ গুন বেশি কোডিং করতে হয় । যেটা আপনাদের কাছে কেমন লাগে জানিনা কিন্তু আমার কাছে চরম বিরক্তিকর মনে হয় ।
কথায় আছে “প্রয়োজন উদ্ভাবনের জনক” । আমিও প্রয়োজন থেকেই খুঁজতে ছিলাম এরকম একটা প্লাগিন যেটা আমার Browser Compatibility'র জন্য অতিরিক্ত কোডিং এর ঝামেলা থেকে রক্ষা করবে । অবশেষে পেয়ে গেলাম Prefixr প্লাগিন ।

কিন্তু আপনাদের সাথে শেয়ার করতে দেরী হয়ে গেল অনেকদিন । কারন একবারে তো আর সব দিতে পারি না । তাই ধারাবাহীকতা বজায় রাখছি আর কি ।
অপ্রয়োজনে অনেক কথায় বলে ফেললাম ! এবার কাজের কথায় আসি । আমি শুধুমাত্র Notepad++ এবং Sublime Text এডিটরে Prefixr ব্যবহার করতে জানি ।

কিন্তু আমার Computer দিয়ে আমি Notepad++ এ Prefixr ব্যবহার করতে পারি নাই । Error! দেখায় । আপনারা চেষ্টা করে দেখতে পারেন । Notepad++ এ Prefixr প্লাগিন এখান থেকে ডাউনলোড করুন । Notepad++ এ কিভাবে প্লাগিন সংযুক্ত করবেন এটা জানতে আমার পূর্বের টিউনটি এখান থেকে দেখে নিন ।

তারপর Prefixr ব্যবহার করতে CSS3 Code লিখে Ctrl + Alt + P চাপুন । আশা করি আপনাদের কম্পিউটারে কাজ হবে । আর আপনারা কেউ বিকল্প জানলে আমাকে জানাতে ভুলবেন না ।
আজ আমি মুলত আপনাদের Sublime Text এডিটরে Prefixr কিভাবে ব্যবহার করতে হয় সেটা দেখাবো । আপনাদের কাছে যদি Sublime Text না থাকে তাহলে এখান থেকে Sublime Text 2 ফুল ভার্সন ডাউনলোড করে নিন ।

ডাউনলোড শেষে একটা Zip File পাবেন । তার মাঝে সিরিয়াল কি এবং কিজেন দুইটাই দেওয়া আছে । আশা করছি Install করতে কোন সমস্যা হবেনা ।

Prefixr Install করতে চাইলে প্রথমে আপনি সাবলাইমটি ওপেন করে কিবোর্ড সর্টকাট 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 অপশনটি নির্বাচন করুন।

নিচের মত একটা উইন্ডো পাবেন।

সেখানে সার্চ বক্সে Prefixr লিখে প্রথম অংশটি নির্বাচন করুন (আমি দুঃখিত! আমার কম্পিউটারে আগে থেকেই Prefixr Install করা আছে তাই এখানে দেখাচ্ছে না । আশা করি আপনাদের কোন সমস্যা হবেনা । তারপরেও যদি না হয় তাহলে জানাবেন । আমি Uninstall করে আবার Install করে আপনাদের স্ক্রিন শট দিয়ে দিবো )। কিছু সময় অপেক্ষা করুন ।

এরপর সাবলাইম সয়ংক্রিয় ভাবে Prefixr আপনার ব্যবহারের উপযোগী করে তুলবে। আপনার Prefixr প্লাগিন এখন ব্যবহার উপযোগী।

আমি নিজে সফলভাবে Installation সম্পূর্ণ করেছি। আশা করছি আপনারাও পারবেন।
প্রথমে একটি CSS File Open করুন ।

তারপর একটি CSS3 Code লিখুন । ধরুন নিচের মতো করে একটি Code ।

এখন আপনার কম্পিউটারের কিবোর্ড থেকে Ctrl + Alt + X চাপুন । তারপর আপনি আপনার নিজের চোখকেই বিশ্বাস করতে পারবেন না । দেখবেন নিচের মতো একটি Browser Compatible Code চলে আসছে ।



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

আপনাদের প্রতিটি টিউমেন্ট আমাকে অনুপ্রেরণা দিবে আরও সামনের দিকে অগ্রসর হতে। আর টিউনটি কেমন হয়েছে তা শেয়ার করতে ভুলবেন না যেন । আপনাদের সবার মঙ্গল কামনা করে এখানেই শেষ করছি ।
Happy Coding...........
ফেসবুকে আমি এখানে

সোর্স: http://www.techtunes.com.bd/     দেখা হয়েছে বার     বুকমার্ক হয়েছে বার

এর পর.....

অনলাইনে ছড়িয়ে ছিটিয়ে থাকা কথা গুলোকেই সহজে জানবার সুবিধার জন্য একত্রিত করে আমাদের কথা । এখানে সংগৃহিত কথা গুলোর সত্ব (copyright) সম্পূর্ণভাবে সোর্স সাইটের লেখকের এবং আমাদের কথাতে প্রতিটা কথাতেই সোর্স সাইটের রেফারেন্স লিংক উধৃত আছে ।

প্রাসঙ্গিক আরো কথা
Related contents feature is in beta version.