Responsive Tester Lite - Open Source - আমাদের টিমের নতুন টুল

আসসালামু আলাইকুম,
অনেক দিন পর আবার আপনাদের জন্য, বলতে গেলে ডেভেলপারদের জন্য একটা টুল নিয়ে এলাম।

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


আইফ্রেমের,
Width বাড়াতে W এবং + একসাথে চাপুন বা চেপে ধরে রাখুন।
আবার কমাতে - চাপুন।
একইভাবে,
Height বাড়াতে H এবং + একসাথে চাপুন বা চেপে ধরে রাখুন। আবার কমাতে - চাপুন।

ব্যাবহার করে দেখতে, 

app.grplusbd.net/responsive-test

সোর্স কোড পাবেন, এখানে গিটহাব

• Current Verson: 1.0.0
• Platform: Xross Browser
• Developer: Tawsif Torabi
• Release: 31 August, 2016
• Source: Open

ফিচারঃ

1. Responsive Design
2. Lite and Clean Design
3. Easy Proggramming
4. Native Javascript and CSS
5. Open Source
6. Keyboard Shortcuts!
7. Device Presets
8. Bottom Notificator
9. Floating Tools
10. Toggle Show and Hide Side Tools

Keyboard Shortcuts:

Keys	What They Does
W + Plus(+)	Increases Width
W + Minus(-)	Decreases Width
H + Plus(+)	Increases Height
H + Minus(-)	Decreases Height

বিভাগঃ আমার বানানো ওয়েবঅ্যাপ ওয়েব অ্যাপ ওয়েব ডিজাইন সফটওয়্যার জাভাস্ক্রিপ্ট

আরও পড়ুন

কফিকাপ এইচটিএমএল এডিটর

আমরা অনেকেই HTML বা ওয়েবপেজ ডিজাইনইং করতে চাই।
এর জন্য একটি ওয়েব ডেভেলপার টুল দরকার হয়।
আমি একটি ওয়েব ডেভেলপারের খোজ দিচ্ছি তোমাদের।

CoffeeCup HTML editor

এটিকে ক্র্যাক সহ একটি জীপ ফাইল করে দিলাম।
সফটওয়্যারটি ডিফল্ট ভাবে নিচের অ্যাড্রেসে থাকবে।
এই লিঙ্কটি স্টার্ট বাটন ক্লিক করে সার্চ বক্সে পেস্ট করে এন্টার চাপো,তাহলে ফোল্ডারটি পেয়ে যাবে।

file:\\C:\Users\%USERNAME%\AppData\Roaming\CoffeeCup Software

যেভাবে সেটআপ ও প্যাচ করবে,

১ম ধাপঃ

সেটআপ ফাইল ওপেন করো।

২য় ধাপঃ

নেক্সট ক্লিক করো।

৩য় ধাপঃ

নেক্সট ক্লিক করো।কোন চেঞ্জ করো না।

চতুর্থ ধাপঃ

টিক দিয়ে নেক্সট ক্লিক করো।

৫ম ধাপঃ

নেক্সট দাও।

ষষ্ঠ ধাপঃ

উপরে ও নিচের,এই দুটি ক্লিক আনচেক করে দাও।

৭ম ধাপঃ

প্যাচারটি ওপেন করো।

৮ম ধাপঃ

প্যাচারের মাঝের লেখাটিতে ক্লিক করো।

৯ম ধাপঃ

"Yes" ক্লিক করো।

১০ম ধাপঃ

১১তম ধাপঃ

file:\\C:\Users\%USERNAME%\AppData\Roaming\CoffeeCup Software এটা স্টার্ট বাটনের সার্চে পেস্ট করলেই ফোল্ডারটি দেখা যাবে। উপরের হার্ডড্রাইভ লিঙ্ক থেকে "coffee.exe" বের করো।

ব্যাস! এইবার এই এডিটর তৈরি!

বিভাগঃ ওয়েব ডিজাইন সফটওয়্যার

আরও পড়ুন

কিভাবে HTML পেজে লাইক অথবা ফলো বাটন অ্যাড করবেন ?

ব্লগিং সম্পর্কে আমি খুব বেশি জানি না।
খ্যাত ডিজাইনারদের থেকে আমি শেখার চেষ্টা করি।

আজ আমি আপনাদের জন্য একটি অসাধারন ব্লগার ট্রিক নিয়ে এসেছি।

সেটা হল HTML পেজে কিভাবে লাইক অথবা ফলো বাটন অ্যাড করবেন।

প্রথমে,

• post অথবা page এর HTML অপশনে যান।
• যেখানে লাইক অথবা ফলো বাটন দিবেন সেখানে এভাবে Code লিখবেন।

    

Code and Tags : কোডস এবং ট্যাগ

Result : ফলাফল

</br> <script> <div id="fb-root"></div> <script>(function(d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0];   if (d.getElementById(id)) return;   js = d.createElement(s); js.id = id;   js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.3";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-follow" data-href="https://www.facebook.com/tawsif.torabi" data-colorscheme="light" data-layout="box_count" data-show-faces="true"></div> </script>

যেহেতু লাইক ও ফলো বাটন একটি জাভাস্ক্রিপ্ট কোড,তাই আমরা <script> এবং </script> Tag ব্যবহার করেছি।
অর্থাৎ <script> ও </script> ট্যাগ দুটির মাঝে লাইক বাটন অথবা ফলো বাটন কোড লিখতে হবে।

লাইক বাটন কোড যেখানে পাবেন 

ফলো বাটন কোড যেখানে পাবেন  

Example:

Tawsif Torabi

বিভাগঃ ওয়েব ডিজাইন ওয়েব ডিজাইন সফটওয়্যার টুকটাক টিপস

আরও পড়ুন

কফিকাপ ডিএইচটিএমএল মেনু বিল্ডার

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

কেমন আছেন?

এবার দেবো ড্রপ ডাউন মেনু বিল্ডার।

অবাক হয়ার কিছু নেই, তা জানি...

এটা করতে কোনো সিএসএস লাগবে না। কেবল জাভা স্ক্রিপ্ট দিয়েই হবে।

এর নাম কফিকাপ ফ্রি ডিএইচটিএমএল মেনু বিল্ডার।

খুব সহজ ব্যাবহার। কেবল কোড অনেক বড়।

সার্চ ট্যাগঃ Coffecup, Coffecup DHTML Menu Maker, Coffecup DHTML Menu Builder, Dropdown Menu Builder, Web Developer Applications

সার্চ ট্যাগঃ Coffecup, Coffecup DHTML Menu Maker, Coffecup DHTML Menu Builder, Dropdown Menu Builder, Web Developer Applications, CoffeeCup HTML Editior

বিভাগঃ ওয়েব ডিজাইন সফটওয়্যার

আরও পড়ুন