SVG for Web Design

What is SVG

SVG stands for Scaleable Vector Graphics. If you work with graphics or have some idea about it you know what’s the advantage of working with vector graphics. We know about some vector format like eps, ai etc. svg is yet another format specially built for web to make two dimensional graphics.. The SVG specification is an open standard developed by the World Wide Web Consortium(W3C) since 1999. SVG is written by XML language which is pretty semantic but it’s very hard to write with hand though. All modern browsers support SVG. Checkout full support details here. Continue reading SVG for Web Design

How to change bootstrap collapse nav menu appearing time

I was trying to change the appearing time for bootstrap navigation for touch device. Many jQuery and less css based solution I found in web but I found a convenient solution in Stack Overflow. Here is it Continue reading How to change bootstrap collapse nav menu appearing time

transition not working while resizing image

I was making a navigation which will be fixed and be smaller after scrolling a little bit. I set transition for smooth resizing content. I got a problem that the logo image wasn’t resizing smoothly i mean with transition.

The image don’t support (as far as I know) transition on resizing if the size isn’t defined. You have to write the normal size of the image and also the size of the image after the event (hover, click etc.)

wrong code,

#logo img:hover {width: 150px;}

Correct code,

 

#logo img {width: 100px;}

#logo img:hover {width: 150px;}

থিমফরেস্টে ওয়ার্ডপ্রেস থিম পাবলিশ করার আগে একটা প্রয়োজনীয় চেকলিস্ট

আগেই বলে নিচ্ছি পোষ্টটি লিখেছেন হাসিন ভাইয়া, তার অনুমতিতে এখানে হুবহু কোট করা হল। মূল ডকটি এখানে

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

১. ভ্যালিড মার্কআপ লিখুন। মার্কআপ যদি ব্রোকেন হয় তাহলে সেটা রিজেক্ট খাওয়ার সম্ভাবনা শতকরা ৯৯ ভাগ ২. ডিজাইনে বৈচিত্র আনতে হবে এমন কোন কথা নেই, জাস্ট আপনার কাজ যেন সব ব্রাউজারে ঠিক মত চলে সেদিকে লক্ষ্য রাখুন। ৩. টাইপোগ্রাফি এবং কনটেন্টের বিন্যাস খুবই প্রয়োজনীয় একটা বিষয়। এই বিষয়ে অভিজ্ঞ হবার জন্য নতুন বা অ্যাপ্রুভ হওয়া থিমগুলো বেশী করে দেখুন। খুব বেশী এলিমেন্ট দেয়ার চেয়ে বরং আকর্ষনীয় ভাবে উপস্থাপন করাটা বেশী জরুরী ৪. অবশ্যই কোন স্টাইলশীট বা জাভাস্ক্রিপ্ট ফাইল ইনক্লুড করতে হলে সেটা ওয়ার্ডপ্রেসের wp_enque_script(), wp_enqueue_style() ব্যবহার করতে হবে, এবং wp_enqueue_scripts এবং admin_enqueue_scripts অ্যাকশন হুক ব্যবহার করতে হবে। এর কোন বাত্যয় হলে রিজেকশন একদম নিশ্চিত। ৫. </head> এর ঠিক আগের লাইনে wp_head() এবং </body> এর ঠিক আগের লাইনে wp_footer() কল করুন। ৬. সকল প্রকার ইনলাইন স্টাইল ব্যবহার থেকে বিরত থাকুন ৭. সকল প্রকারের পিএইচপি নোটিশ, ওয়ার্নিং এবং এরর ফিক্স করে ফেলুন। কোন নোটিশ বা ওয়ার্নিং থেকে গেলে রিজেকশন একরকম নিশ্চিত। এবং এক্ষেত্রে আপনি error_reporting(0) ব্যবহার করতে পারবেন না। বরং সরাসরি ফিক্স করুন ৮. ব্লগ দেয়াটা আবশ্যক। ওয়ান পেজ বা মাল্টিপারপাস টেমপ্লেট করলেও ব্লগ সাথে রাখতেই হবে এবং ব্লগের নেভিগেশন মেনু অবশ্যই ওয়ার্ডপ্রেসের মেনু বিল্ডারের সাথে কম্প্যাটিবল হতে হবে। সাথে অবশ্যই সেকেন্ড লেভেল বা থার্ড লেভেল মেনু যাতে ঠিকমত দেখা যায় সেটা খেয়াল রাখা লাগবে। ৯. ওয়ার্ডপ্রেস থিমটি (বিশেষ করে ব্লগ সাইডবার) অবশ্যই উইজেট এনাবলড হতে হবে। ১০. single.php পেজে wp_link_pages() এর ব্যবহার না থাকলে রিজেকশন অবশ্যম্ভাবী ১১. ওয়ার্ডপ্রেসের ট্যাগ, ক্যাটেগরী, আর্কাইভ, পোস্ট, পেজ, পেজিনেশন যেন ঠিকমত দেখায় সেটা খেয়াল রাখতে হবে ১২. কোন আবশ্যক প্লাগইন ব্যবহার করলে সেটা থিমের সাথে এমবেড না করে বরং TGM Plugin Activation ক্লাস ব্যবহার করে সেগুলো এনাবল করুন। ১৩. ফাইলে কোন অযথা কমেন্ট করা কোড থাকলে সেগুলো মুছে ফেলুন ১৪. থিম ফোল্ডার থেকে সকল প্রকারের হিডেন ফাইল ডিলেট করে দিন ১৫. নিজস্ব কোন গ্লোবাল ভ্যারিয়েবল ব্যবহার করলে অবশ্যই অবশ্যই ভ্যারিয়েবলের নামে একটা প্রিফিক্স (যেমন আপনার থিমের নাম) ব্যবহার করবেন। ১৬. আপনার থিমে অবশ্যই যেন কনটেন্টের অ্যালাইনমেন্ট এবং স্পেসিং ঠিক থাকে ১৭. কোন ধরনের ডিপ্রিকেটেড ট্যাগ ব্যবহার করা থেকে বিরত থাকুন।

থিমটি সাবমিট করার আগে অবশ্যই ডেভেলপার প্লাগইন (http://wordpress.org/plugins/developer

, ডিবাগ বার, থিম চেক) দিয়ে চেক করে নিন যেন অজান্তে কোন এরর না থেকে যায়। আর অবশ্যই wptest.io থেকে টেস্ট ডাটা ডাউনলোড করে আপনার থিমে ইমপোর্ট করে দেখবেন ফরম্যাটিং এবং সবকিছু ঠিক মত দেখায় কিনা – এটা কিন্তু খুবই প্রয়োজনীয় একটা বিষয়।

সবশেষে আপনার জন্য শুভকামনা রইল অনেক 🙂

Tiles Gallery with HTML5 and CSS3

Was working to build a theme and created a small gallery. Its so easy to make this type of gallery or this type of gallery is enough in the web. So if you are expert one please leave the page asap 😛

Add the CSS file

[html]<link rel="stylesheet" type="text/css" href="assets/css/style.css">[/html]

This is HTML Markup 

[html]<div class="gallery gallery-col-4"> <div class="item"> <img src="assets/img/01.jpg" alt=""> <a href="#"> <div class="overlay"> <h4>Heading</h4> <p>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum</p> </div> </a> </div> <!– ——————— more item can be here ————————— –> </div>[/html]

There are 3 column style available for the gallery, to get 2 or 3 column style change the class “gallery-col-4” to “gallery-col-2” or “gallery-col-3“.

DEMO Image copyright reserved by MaK’s PhotoGraphy

Gallery DEMO Here

Also gallery demo has added below.

DOWNLOAD AND GITHUB LINK

License: Free to use and abuse 😉

Keep Using it 🙂

জেকুয়েরী প্লাগিন কি কি কারনে কনফিক্ট করে এবং বিরত রাখার উপায়

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

সাধারনতো জেকুয়েরী প্লাগিনগুলোর কোডে পাচটা জিনিস থাকে যেগুলো গুরুত্বপূর্ন, CSS, jQuery Library, Plugin jQuery Library, Trigger/Initialization আর Source Image and others..

ইমপ্লিমেন্টের সাধারন নিয়ম,

1) প্রথমে জেকুয়েরী লাইব্রেরী ফাইলটাকে HTML পেজে ইনসার্ট করে ফেলুন, <script> ট্যাগ দিয়ে এটা কিভাবে করতে হবে তা নিশ্চই পাঠকগন জানেন tongue

2) এবার প্লাগিনের লাইব্রেরীটা জেকুয়েরী লাইব্রেরীর পরে যেকোন যায়গায় ইনসার্ট করুন।

3) একটা ছোট ইনিশিয়ালাইজেশন বা ট্রিগার যাই বলি না কেন এটা জেকুয়েরী লাইব্রেরীর পরে ইনসার্ট করুন, যদি

$(document).ready(function() {
  // Handler for .ready() called.
});

এই ফাংশন ইউজ করেন তাহলে অবশ্য এই পার্টে সিরিয়াল মেইন্টেন করার দরকার নেই, কারন এই ফাংশন/মেথডের কাজই হল ডকুমেন্ট পূর্ন লোড হবার পর ভেতরের পার্টটাকে এক্সিকিউট করা।

4) সিএসএস ফাইলটাকে লোড দিন, এটা সাধারনতো কনফ্লিক্ট করে না তাই ঝামেলা কম, তারপরও করলে বুঝতে পারবেন এবং ক্লাসগুলো চেঞ্জ করে দিলেই সমস্যা ক্লিয়ার।

5) এবার ডকুমেন্টেশন দেখুন এবং সেই মোতাবেক HTML মার্কআপ করুন, ডেমো পেজ থেকে ডিরেক্ট কপি করতে পারেন।

6) এক্সারনাল ইমেজ এবং অন্যান্য জিনিসগুলো ঠিকমত লিংক হয়েছে কিনা চেক করে দেখুন এবং ঠিক করে দিন।

ব্যাস এইতো, কিন্তু সমস্যা হল যখন সারা ঘর লেপে দেখা যায় ঠিকঠাক নাই বা আরেকটা প্লাগিনের সাথে কনফ্লিক্ট করছে।

 

এখন এব্যাপারেই কিছু টিপস।

  • ব্যাতিক্রম আছে কিনা জানি না বাট আমার জানামতে প্লাগিনের জন্য যে স্পেসিফিক লাইব্রেরী থাকে সেটা সবসময় জেকুয়েরী লাইব্রেরীর পরে লোড নিশ্চিত করতে হবে অথবা কনফ্লিক্ট হবে নিশ্চিত থাকেন (উদাহারন হিসেবে বুটস্ট্রাপের লাইব্রেরীর নাম বলা যেতে পারে)
  • ধরুন নেভিগেশন ড্রপডাউন ইউজ করেছেন আর তার নীচে স্লাইডার, z-index এ যদি স্লাইডারের ভেলু বেশি থাকে অর্থাৎ স্লাইডার উপরে শো হয় তাহলে আপনার ড্রপডাউনের ভবিষৎ ঘুটঘুটে অন্ধকার, তাই Z-index চেক করে দেখবেন ভাল করে আসলেই যার উপরে থাকার কথা সেটা উপরে স্টে করছে কিনা। জিনিসটা একটু আগে বাবর ভাই শিখাইলো
  • অনেক সময় একটি প্লাগিন অনেকগুলো লাইব্রেরী ইউজ করে এবং ইমপ্লিমেন্ট করার পর ঝামেলা সৃষ্টি করে, প্লাগিনগুলোর ডেমো পেজের কোডগুলো দেখুন যে তারা ঠিক কোন লাইব্রেরীর পর কোনটা লোড দিয়েছে, আপনিও ঠিক সেই সিরিয়াল মেইন্টেন করুন।
  • এরপরও সমস্যা পরিলক্ষিত হয় সেক্ষেত্রে প্লাগিনগুলোর লাইব্রেরী উল্টাপাল্টা করে দিয়ে দেখুন।
  • কনসোলে চোখ রাখুন, ক্রোমে f12 চাপলে ডেভলপার অপশন আসবে, ওখানে কসসোলে জাভাস্ক্রিপ্ট এররগুলো দেখায় যা আপনাকে একটা গাইডলাইন দিতে পারবে।

 

এবার বড় ভাইয়েরা শুরু করেন আমি আপডেট দিতে থাকি  big_smile

Reduce Sever Request by converting image to Base64 string

What is base 64?

Wiki says,

Base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. The term Base64 originates from a specific MIME content transfer encoding.

 

Why we will use base 64?

In a website we use many image small images, those images are not heavy weight but browser make one HTTP request per file while its loading. Its very bad, We should try always to make less HTML request.

 

No need to tell more just go here  and submit your image and you will see the code with two format, one for HTML and one for CSS.

Copy and paste then Cheers (y)