Nginx Config for WordPress – The Whole Nine Yards

Wordpress Nginx Config

I haven’t written anything in a while. A friend of mine shared his Nginx Config for WordPress. I thought, why not share mine. WordPress is very advanced in its own way. But you can achieve some remarkable things with Nginx config without even touching WordPress. And we are going to dive in deep to look at some of the cool things you can do with Nginx config that can supercharge your WordPress Site without sweating much. I am gonna go with a step by step guide with a complete config in the end. It might get boring at some point, but stay with me nonetheless. Might help you some day.

Basic WordPress Nginx Config

This is where we start. Just by this basic config, your WordPress site will be up and running. I will explain the config with commented lines.

 

Now, this is very basic. It can definitely run your WordPress site. But some major improvement needs to be done for a much more swift performance.

Let’s Handle a Few Errors

In the start, your site may not have a few elements for s standard site. You will probably add them later. But for the time being, we can’t have those missing things clogging our error log. So,

This is going to turn error log off for favicon and robots file. Some Developers tends to put them later on. And some browser/crawler often miss them.

Put A Few Security Wall

Let’s look at a few common WordPress problems. There are a lot of Script Kiddie Aka Noob hackers out there, who has a few scripts that tries to put or access executable file from your sites root directory. It’s sort of stupid, but effective nonetheless.

First, This is going to stop the user/whoever from accessing any file that starts with a ., for example .htaccess, .htpasswd, .DS_Store etc.

Second, It will stop anyone from accessing / executing any PHP file within WordPress upload Directory. If you are using WordPress for a while, you should know by now that there shouldn’t be any PHP file inside WordPress upload directory.

Third, we could’ve done this on the second step, but i like to keep things clean. This will stop anyone from accessing any Html, JS or Flash ( SWF ) file from Upload directory. Again, none of these should be there.

Forth, Even if you want to access the wp-config.php file via browser, it will show a blank page, since it’s a PHP file without anything to print. But we shouldn’t keep it open. You can always change the permission of the file or move it a directory up, but this rule should be in your Nginx config, just to the sake of redundancy.

Fifth, We are gonna make sure that we only serve these three types of request. GET, POST, HEAD.

 

You can also add a few more security steps like which IP should be allowed to see certain section of the site and what not. But i prefer to manage them dynamically. Use a Good WordPress Security Plugin for these cases.

Some Cache For The Server

Since WordPress has some really good cache plugin like W3 Total Cache or WP Super Cache, you can rely on them for caching your content and serving them to the user. But what if you are working on something complex and you don’t wanna use any of these? That case, here are a few things you can do

These are some basic cache for the visitors browser. We are telling the browser to cache Media files for 2 Months and CSS and JS files for one month. This is Extremely simple stuff in the wilderness of Cache.

I always recommend you use a Cache Plugin like W3 Total Cache or WP Super Cache and Let them handle the hard stuff.

Final Thoughts,

This is the final configuration file. All Comment removed for swift copy paste experience 😉 .

In Addition, you can also Cache WordPress Using FastCGI Cache, which is a bit more complex, but a lot fun to work with. Maybe some other day. In Conclusion, Enjoy WordPress.

Resources

https://codex.wordpress.org/Nginx

https://www.nginx.com/resources/wiki/start/topics/recipes/wordpress/

Urban Terror No Sound in MacOS Sierra ( 10.12 ) Fix

urban terror

After i upgrade to MacOS Sierra ( 10.12 ), there was a problem with the sound in Urban Terror. The game works fine, except no sound :@. I have been trying to fix this for a few hours and saw a few post popping up in URT forum and other gaming forums. After doing a bit research, i found a possible fix.

I can’t stretch the important of this statement enough, this is not an official fix. This may or may not Work. This won’t corrupt your game or permanently damage it, so you can revert back to current state at any point. 

Okey, before jumping into the fix, here is a bit more details about the error. This important because, if this isn’t the reason behind no sound in urban terror, this fix won’t work, obviously.

This is the console error popping up in Urban Terror. Here is a view from the OS Console,

The fix is easy. But you have to be extremely careful. Follow the instruction point to point,

The problem is with LibSDL. The current version inside the game isn’t compatible with MacOS Sierra, for some reason. So here is a alternative version,

https://raw.githubusercontent.com/jacius/rubygame-mac-pack/master/lib/libSDL-1.2.0.dylib

Download it, keep it somewhere easily accessible ( Probably in the desktop? ).

Next, go to the directory you URT installation is in. I keep Urban Terror inside the application folder.

urban Terror

Next stop, inside the URT folder, there should be an app Called Quake3-Urt.app. This is where we need to be. Right-click on it, select “Show Package Contents”.

urban terror

Okey, inside the app, you will see a folder called “Contents”. Move to “Contents>MacOS>”. You will find a libSDL-1.2.0.dylib file here. We need to change that one. First Rename that file using Get Info and copy paste the file we downloaded previously, in here.

Urban Terror

Now, Important things here, The name of file must be the same as it was before. So please check what it was named before and used the same name on the copy pasted file. You shouldn’t delete the original file, you may need it in future.

Note: The downloaded file already have the same name, so after changing the name of the already existing file, you should be just fine with copy paste.

Try running the game now, It should work just fine. In case this downloaded file doesn’t work, here is a alternative,

https://raw.githubusercontent.com/yusuketomoto/ofxUrgDevice/master/libs/SDL/1.2.15/lib/libSDL-1.2.0.dylib

Also, keep a track of the official issue about this on Urban Terror’s Github repo, here

https://github.com/FrozenSand/UrbanTerror4/issues/295

ডি এন এস ক্যাশ ( DNS Cache ) কি এবং কিভাবে কাজ করে

Oritro Ahmed

এর আগের আর্টিকেলে আমি এক্সপ্লেইন করেছিলাম ডি এন এস ( DNS ) কিভাবে কাজ করে। অনেকেই আর্টিকেল টা পড়েছেন এবং জানার ইচ্ছে প্রকাশ করেছেন কিভাবে ডি এন এস ক্যাশ ( DNS Cache ) কাজ করে । তবে ডি এন এস ক্যাশ আসলে খুব বিশাল কিছু নয়, তাই ভাবলাম লিখতে লিখতে হাতের ১২ টা যখন বাজাবো, তখন আর কিছু জিনিস নিয়ে আলোচনা করি।

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

Continue reading

ডি এন এস কিভাবে কাজ করে?

DNS Resolve

এই প্রশ্নটা আমাকে কয়েকজন করেছে। ডি এন এস কিভাবে কাজ করে? ডি এন এস কিভাবে কাজ করে এটা বোঝার জন্য আগে আমাদের কিছু বেসিক জিনিস সম্পর্কে ধারনা নিতে হবে।

ডি এন এস কি?

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

এই পর্যায়ে ধরে নিচ্ছি আই পি ( IP = Internet Protocol ) কি আপনি সেটা জানেন। না জানলে সংক্ষেপে বলে দেই, আইপি হলো এক ধরনের আইডেন্টিফিকেশন নম্বর। যে কোন ধরনের নেটওয়ার্কে কানেক্টেড ডিভাইস এর একটি করে আইপি থাকে। আইপির অসংখ্য ধরন আছে। সেদিকে না যাই। তাছাড়া, আইপির ডেফিনেশন এতোটা সহজ নয়। তবে এই পোষ্টে সে সম্পর্কে বিস্তারিত ব্যাখ্যা করার সুযোগ নেই। আইপি সাধারনত দুই ধরনের হয়। IPv4 এবং IPv6. প্রথমটি সাধারনত দেখতে এরকম, 192.168.1.1 এবং পরেরটি 2001:db8::ff00:42:8329 এরকম হয়। কেন হয় বা কিভাবে হয়, সে জন্য আপনাকে আরও বিস্তারিত পড়াশোনা করতে হবে। সেদিকে আপাতত না যাই।

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

এই সমস্যা সমাধান এর জন্য আছে ডোমেইন। এক্ষেত্রে ioritro.com । এই ডোমেইন এর কাজ হলো, যখন কেউ এই ডোমেইনে প্রবেশ করার চেষ্টা করবে, তখন তাকে নির্দিষ্ট একটি আইপির সাথে কানেক্ট করবে। এই পুরো প্রসেস যে প্রোটোকল হ্যান্ডেল করে, তাকেই ডি এন এস বা ডোমেইন নেম সিষ্টেম বলে। আসলে ডোমেইন নেম সিষ্টেম  একটা বিশাল প্রসেস। ডোমেইন এ প্রবেশ করলে নির্দিষ্ট আইপিতে নিয়ে আসাটা সেই বিশাল প্রসেসের একটা অংশ। সেটাকে বলা হয় ডোমেইন নেম রিসলভিং ( Domain Name Resolving ). আমাদের আজকের আলোচনা সেই রিসলভিং প্রসেস নিয়ে।

ডোমেইন রিসলভিং

পুরো প্রসেসটা আমি একটা গল্পের মতো করে ব্যাখ্যা করার চেষ্টা করবো। তাতে আপনার বুঝতে এবং মনে রাখতে সুবিধে হবে।

ধরুন, এই মূহুর্তে আপনি google.com এ ঢুকতে চাচ্ছেন। আপনি ব্রাউজারে টাইপ করলেন google.com এবং এন্টার চাপলেন। এবার একটা বেশ লম্বা প্রসেস চালু হবে।

আপনি খালি চোখে দেখছেন যে আপনি www.google.com টাইপ করেছেন। কিন্তু আসলে, আপনার ব্রাউজার সেটাকে রিড করবে, www.google.com. শেষে একটা (.) যোগ করে। এই ডট কিন্তু যেন তেন ডট নয়, এই ডট ইন্টারনেট ইনফোষ্ট্রাকচার এর সবচেয়ে গুরুত্বপূর্ন জিনিসগুলোর একটি। এইখান থেকে আরেকটি গুরুত্বপূর্ন জিনিস শিখলেন আপনি, পিচ্চি একটা ডটও গুরুত্বপূর্ন। এই ডট আসলে ইন্টারনেট নেটওয়ার্কিং এর রুট কে চিহ্নিত করে। কেডা এই রুট? সেদিকে পরে আসতেছি।

আপনি যখন ব্রাউজারে এই ডোমেইন প্রবেশ করালেন, আপনার ব্রাউজার তখন অপারেটিং সিষ্টেম কি জিজ্ঞেস করবে,

-> হেই ডুড, এই google.com আছে কই, জানো নাকি?

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

অপারেটিং সিষ্টেম জবাব দিলো,

-> নাহ ম্যান, আমি তো জানি না। খাড়াও, রিসলভার রে জিগাই !

রিসলভার

রিসলভার হলো এমন একটি সিষ্টেম, যে এদিক ওদিকে দৌড়াদৌড়ি করে আপনার অপারেটিং সিষ্টেম এর কাছে নির্দিষ্ট ডোমেইন এর আইপি অ্যাড্রেস খুঁজে এনে দেয়। আপনারা অনেকেই গুগল ডি এন এস ব্যবহার করেন ( 8.8.8.8, 8.8.4.4 ) বেশিরভাগ ক্ষেত্রেই এটা না জেনে যে এই রিসলভার আসলে কি কাজে লাগে ! ব্যাখ্যা করছি।

অপারেটিং সিষ্টেম এসে আপনার রিসলভারকে জিজ্ঞেস করবে,

-> বসে বসে ম্যাল্যা টাইম পাস করছো, আমারে তাড়াতাড়ি এই google.com কই আছে খুঁজে এনে দাও !

এবার রিসলভার ডোমেইন এর নাম নিয়ে প্রথমে যাবে রুট সার্ভার এর কাছে।

সবার বাপ, দ্যা রুট সার্ভার

আপনারা অনেকেই বিগ ব্যাং থিওরীর নাম জানে। না বিগ ব্যাং থিওরী সিরিজের কথা বলতেছি না, বৈজ্ঞানিক বিগ ব্যাং থিওরীর কথা বলতেছি। সেখানে সব কিছু শুরু হয় একটা বিন্দু থেকে। ইন্টারনেটেরও সব কিছু এই বিন্দু দিয়েই শুরু। একটু আগে আপনাকে বলেছিলাম যে আপনি যখন google.com এ ঢুকতে চাচ্ছেন, আপনি কিন্তু আসলে google.com. এ যাচ্ছেন। এই ডটটা আসলে রুট সার্ভারকে রিপ্রেজেন্ট করে।

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

রুট সার্ভারে লিষ্ট, আইপি এবং নিয়ন্ত্রনকারী প্রতিষ্টান এর নাম
রুট সার্ভারে লিষ্ট, আইপি এবং নিয়ন্ত্রনকারী প্রতিষ্টান এর নাম

আপনার রিসলভার রুট সার্ভার কে গিয়ে জিজ্ঞেস করে,

-> বস, আমারে একজন google.com কই আছে জিগাইলো, হেল্প করেন।

রুট সার্ভার এবার উত্তর দেয়,

-> আমি কেমনে কমু কই আছে? তবে যেহেতু এইটা .com ডোমেইন, এর টি এল ডি সার্ভার কই আছে আমি জানি। আমি তার আইপি অ্যাড্রেস তোমারে দিতেছি। ওরে গিয়া জিগাও।

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

টি এল ডি সার্ভার

টি এল ডি সার্ভার (TLD Server) মানে টপ লেভেল ডোমেইন সার্ভার ( Top Level Domain Server ). আপনি এরই মধ্যে বেশ কিছু ডোমেইন এক্সটেনশন দেখেছেন, যেমন .com, .net, .biz, .edu, .gov । এগুলোকে বলা হয় টপ লেভেল ডোমেইন। তবে টপ লেভেল ডোমেইন এর মধ্যে বেশ কিছু ভাগ রয়েছে। কান্টিকোড টপ লেভেল ডোমেইন (cTLD – যেমন, .com.bd বা .uk ), জেনেরিক টপ লেভেল ডোমেইন (gTLD – যেমন .com, .info, .net ), স্পনসরড টপ লেভেল ডোমেইন ( sTLD – যেমন .academy, .gift ইত্যাদি )। এই ধরনের প্রতিটি টপ লেভেল ডোমেইন যে কোন একটি অর্গানাইজেশন নিয়ন্ত্রন করে। যেমন .com নিয়ন্ত্রন করে Verisign. এই ধরনের প্রতিটি TLD কে ম্যানেজ করার জন্য একটি ( বা একাধিক ) সার্ভার রয়েছে। এদেরকে বলা হয় টপ লেভেল ডোমেইন নেম সার্ভার।

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

-> রুট সার্ভার বললো আপনি নাকি .com ম্যানেজ করে, তো এবার আমাকে একটু google.com কোথায় আছে খুঁজে দেন।

.com এর টি এল ডি সার্ভারের কাছে দুনিয়ার যাবতীয় .com ডোমেইন এর নেম সার্ভার ইনফরমেশন সংরক্ষিত আছে। সে এবার নিজের ডাটাবেজ ঘেঁটে দেখবে google.com এর নেম সার্ভার কোনটা। তবে তার কাছেও এক্সাক্ট ইনফরমেশন নেই। সে শুধু জানে গুগল ডট কম এর অথোরেটেটিভ নেম সার্ভার এর নাম কি এবং কোথায় আছে। সে উত্তর দেবে,

-> আমি অতো কিছু জানি না, এইযে চারটা অথোরেটেটিভ নেম সার্ভার এর নাম আমি জানি, এদেরকে গিয়া জিগাও।

google.com এর অথরেটেটিভ নেম সার্ভার সমূহ
google.com এর অথরেটেটিভ নেম সার্ভার সমূহ

অথোরেটেটিভ নেম সার্ভার

আপনারা যারা ওয়েব ডেভেলপমেন্ট এর সাথে জড়িত, তারা অবশ্যই ডোমেইন সার্ভারে পয়েন্ট করার সমঊ নেম সার্ভার ব্যবহার করেছেন। সেখানে আপনি ডোমেইন রেজিষ্টার করের পরে ডোমেইন এর কন্ট্রোল প্যানেল থেকে ns1.example.com, ns2.example.com এভাবে নেম সার্ভার যোগ করে। এই ধরনের নেম সার্ভারকে বলা হয় অথোরেটেটিভ নেম সার্ভার। আপনি যখন একটা ডোমেইন রেজিষ্টারে অথোরেটেটিভ নেম সার্ভার যোগ করেন বা আপডেট করে, আপনার ডোমেইন রেজিষ্টার কোম্পানী প্রায় সাথে সাথেই সেই TLD’র নিয়ন্ত্রনকারী সার্ভারকে জানিয়ে দেয় যে কোন অথোরেটেটিভ নেম সার্ভারে এই ডোমেইন কে পাওয়া যাবে। এবং রিসলভার যখন টি এল ডি সার্ভারকে জিজ্ঞেস করে, তখন টি এল ডি সার্ভার সেই ইনফরমেশন গুলোই ফরোয়ার্ড করে।

অথোরেটেটিভ নেম সার্ভার হলো এই ধাপের শেষ খেলোয়ার। আপনার রিসলভার তখন অথোরেটেটিভ নেম সার্ভারকে গিয়ে জিজ্ঞেস করে,

-> স্যার, অনেক দৌড়াদৌড়ি করছি, এবার দয়া করে বলেন google.com কই আছে?

অথোরেটেটিভ নেম সার্ভারের কাছে ঐ ডোমেইন এর সার্ভারের আইপি লিপিবদ্ধ থাকে। সে তখন বলে,

-> বৎস, তোমার সাধনা শেষ হইয়াছে, এই 74.125.131.105 তে রইয়াছে google.com। যাও, জানাইয়া দাও সবাইকে।

বহু দৌড়াদৌড়ির পরে গুগল ডট কম এর আইপি নিয়ে আপনার অপারেটিং সিষ্টেম এর কাছে ফেরত আসে রিসলভার।

-> এই নে, এইটা গুগল ডট কম এর আইপি। এইখানে গেলে পাবি।

এবার অপারেটিং সিষ্টেম আপনার ব্রাউজারকে আইপি টি হস্তান্তর করে। এরপর আপনার স্ক্রিনে ভেসে ওঠে গুগল ডট কম এর ওয়েবপেজ।

মজার ব্যাপার, এই বিশাল প্রসেস সম্পন্ন হতে সময় লাগে কয়েক মিলিসেকেন্ড। ( সেটা আপনার ইন্টারনেট কানেকশন এর লেটেন্সি এবং স্পিড এর ওপর নির্ভর করে অনেকটাই )।

ডি এন এস ক্যাশ

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

 

আশা করছি ডি এন এস কিভাবে কাজ করে সেটা ব্যাখ্যা করতে সক্ষম হলাম। যদি কিছু বুঝতে না পারেন কিংবা প্রশ্ন থাকে, কমেন্ট বক্স রয়েছে। 😉

A different approach to Bootstrap Alert

A Different approach to Bootstrap Notificaion

I was working on a project, where I had to design a login panel. It had two columns, one for Login and one for registration. Now the problem was, when I made the initial commit to git, I forgot to insert an alert notification. I have to show some error when someone use wrong username password or missed a field in the registration form, or the username he is trying to get is already registered. That sort of stuff.

Now as I was using bootstrap, I can simply use the bootstrap alert. All I needed to do is insert the HTML code. But that I thought, why not a different approach? Especially I loved the alert UI of WordPress admin panel. So I figured, let’s shake some code ( not booty ).

I was about to write the whole thing here, but a friend suggested that I should circulate it to a broad network. And my first choice was Bootsnip. Probably the largest collection of bootstrap snippets. Helping me in my work for more than a year. So i put it there.

 

Install utorrent server (WebUI) in Ubuntu 14.04

Utorrent server on Ubuntu 14.04

Well, there is no shame to admit that i love downloading tons of movies and tv series. And i was a “From Windows to Linux” user. So i used to download movies with utorrent in Windows. After i shifted to linux, I was a bit shocked to know that there isn’t a proper torrent utorrent client for Linux. They have a server and a webui, which you can call a work around.

I am not a big fan of WebUI, so i tried software like vuze or Deluge or Transmission or qBittorrent. And frankly speaking, i never had the feel of utorrent in any of them. Some people may argue that utorrent has ads all over it and other money based things, but i love it, what to do?

Then i tired to figure out, how to install this thing? its a server and a webui to control the server. So i searched with the help of mighty google. Found a lots of answers. But to a part, most of them were too geeky or less human friendly. So i thought, what the hell? lets write one by myself.

 

Step 1

Download the utorrent server from here: www.utorrent.com/downloads/linux . They haven’t released a official version for 14.04, but 13.04 version works here. So download it, don’t forget to choose between 32bit or 64bit, whichever you have.

It will download a zip file. As i am writing this for humans, so put that zip in Downloads folders of your Home directory. For the rest of the article, i will follow that directory.

 

Step 2

Open terminal. If you don’t know how to open terminal, just press Ctrl+Alt+T. And it will open the Terminal. Type and enter

Don’t worry if you are freaking out about how to do it, i will add a screenshot at the end of step. By this command, we moved into Downloads Directory. Now we need to extract the downloaded utorrent compressed file. We will extract it into /opt/ directory.

Some people may argue opt folder isn’t the best choice for it, but what the hell ! When you press enter after this, Terminal will ask for your Ubuntu password. Remember, when you type ubuntu password in terminal, it won’t show the letters, will be blank. Don’t think it as your password isn’t typed.

Now, the elements of that compressed folders are extracted into our operational location. Lets move on.

Command output

Step 3

Now we need to change the permission of the extracted folder. put in this command and enter.

Now the folder permission is set. Now we have to symlink it to make it executable with a command. Put in this command,

Now, the utorrent executable file from the extracted folder has a executable command. We are almost done.

Use this command to start the utorrent server. This command has no output and will stop there. Leave it as it is.

Command output

In the screenshot, there is en error, i did a mistake on while working, so ignore that. If you follow my instruction properly, there shouldn’t be any problem.

But if it shows any error like, libssl.so package missing, try this command. it will install the missing package. Then try the previous command again.

Now it should work nice and fine.

Step 4

We install the server, lets take a look at the WebUI. Try this url in your browser.

It will ask for username and password. The default username is admin and blank password. Put admin and enter. Then you should see a user interface like this,

Utorrent server WebUI

Well, i am using epiphanybrowser, Which comes with ubuntu 14.04 by default. I use this browser just for webUI like this one.

This webUI is extremely easy to use as its similar with the Windows version. If you faced any problem in the run, please put it in the comment below.

W3 Total Cache – Proper Configuration

Well, Everyday in everywhere, There is a Question, How to Configure W3 Total Cache? And I thought, Lets spend some time to write about it, So won’t have to answer the Same Question Again and Again.

Its Not Rocket Science

W3 Total Cache isn’t Rocket Science. Its just a Plugin, A very Very Useful Plugin. And If you know how to configure it, It will boost up your site loading speed quite a bit.

What we need?

A working wordpress Installation, And Some Proper Attention, Until this Article Ends. So buckle up, We are going to have a Ride inside W3 Total Cache.

W3 Total Cache - ioritro

Phase 1

As you have a Working WordPress Installation, I assume you have the knowledge to run and maintain wordpress. So Lets Just install W3 Total Cache. How to install a Plugin isn’t pretty much the area of this article, so You have to do / Figure out it by your own. I will start Right after you install and Activate W3 Total Cache. For the Sake of Writing, i will refer W3 Total Cache as W3TC now on.

Compatibility Check

First, Go to W3 Total Cache Dashboard. You can Find it from Performance -> Dashboard. You will see there is a Compatibility check Button on the upper side of the Page. Why are we doing this? W3TC have Support for a Lots of Module, Cache Method and Service. So First We need to know, Which of those are present / available / Usable in my Installation. So click on the Button, You will have a list in a while.

There are Basically three section on Compatibility check. The First one( Server Modules & Resources ) is the Most important. So you will know, What you have and what you don’t. Now lets Get to Work. First Chapter, General Settings.

General Settings

 

General Settings Basically have a short configuration of the whole W3TC plugin. This is the Basics, For the Brief configuration, You have to go through each configuration page separately. But we will get there, Eventually, Right now, Lets focus on General Settings.

There is One thing, You should know Before starting to Configure W3TC. If you are using a Shared hosting, and if its a good one, You will probably have most of the Service / module pre installed. But if not, Your options are probably limited there. In case of VPS and Dedicated Sever, You have your kingdom, Arrange it as you like Sir. I will Show you A Configuration that should work( Hopefully ) on every server.

First Comes the general Section. Which Can toggle All options on and off at once, and we don’t need it Right now. So moving on, Next one is Page Cache.

Enable Page Cache. It will Cache You page into Static Page and Server them Directly in case one of them are Requested to the Server. For Shared Hosting, Set the method to Disk: Enhanced. If you own a VPS, You can Try Opcache : Alternative PHP Cache.

Next is, Minify. Minify is a Very interesting thing, and Very Effective. But you need to careful with your minify settings. Mis-configuration Might lead your site to a Broken Styleless – Scriptless site. Enable Minify, Set the Mode to Auto. Then Minify Cache Method, Set it to Disk, In shared hosting, That might be your only choice. Now there are three Options there. For HTML, CSS and JS. Set the Configuration as Follow,

HTML minifier: HTML tidy ( if not available, Use Default )

JS minifier: JS min ( its default and Safe choice )

CSS minifier: Default ( Safe and Quite good )

Next is, Database Cache. Its a Very Important Part. W3TC will cache your DB Query and Results and in Further use, It will direct Server the Results from the Cache. It will reduce a Lots of pressure from your Database, While, It has a demerit, Some ads management plugin can’t work properly if the Query is Cached. But, That number is very small. 90% time, this Database cache will work just fine. Enable it and Set it to Disk.

Now, Object Cache. There are a lots of task wordpress performs every single page load. Getting thousands of Data From DB, Setting them into classes, objects, Options. Now thats a good amount of load for both PHP and Database. Object Cache have a bit similarity with Database Cache, but it works on a Different Level. But thats not important Right now, May be We will Discuss about Object Cache in future. Enable it, and Set it to Disk.

Then, browser Cache, We Will Discuss it later. Just enable it.

CDN, is a Very lovely topic, At least for me. But For now, I am assuming you didn’t purchased a CDN, So we will leave it alone and in peace.

Reverse Proxy, The Mighty Varnish. But As I am writing this for New Users, So leave it alone for now.

Then, Cloudflare, Network and Security. If you use cloudflare, Feel Free to fill up the form. Otherwise, Leave it alone.

Moving on, Next One is New Relic. Awesome monitoring tool. But not now.

Licensing, Which apply only if you purchased a W3TC license. Which probably most of us don’t have. So, next.

At last, Miscellaneous, You can enable Google Page Speed API if you know What you are doing. But there isn’t much scope in this article to Cover it. So nothing to do. Now Save All Settings At once.

Now Sir, You have A  Basic Installation of W3TC. There are Basically a Lots of Options on W3 Total Cache. And That will comes in part by part. So this is For now. If you have Questions Related to W3 Total Cache, Please Mention them in the Comment Section, If its under my capability, I will try to Answer.

 

Next Part: W3 Total Cache – Page Cache Configuration

 

 

Youtube Responsive Video এমবেড শর্টকোড

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

ব্যবহার বিধিটা খুবই সহজ। উপরের কোড স্নিপেটেই লেখা আছে। বেহুদা এই ব্লগ পোষ্টটা লিখলাম যাতে কাজের সময় খুঁজে পাওয়া যায়, নিজের সাইট তো আর হারিয়ে যাবে না !

Big Screen Code

ব্যবহারবিধী

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

এখন ভিডিও আইডি কই পাবেন? মনে করেন, আপনি পায়ের ওপর পা তুলে দিয়ে http://www.youtube.com/watch?v=a8ZeqZrLxpw এই ভিডিওটা দেখছেন। এখানে a8ZeqZrLxpw ই হলো আপনার ভিডিও আইডি। এখন অবস্থা দাঁড়ালো,

বাকি থাকলো রেজুলেশন। এখানে আমি চারটা রেজুলেশন এবং একটা ফলব্যাক রেখেছি। 240p, 360p, 480p, 720p এবং ফলব্যাক হিসাবে আছে 240p । যদি আপনি ওপরের চারটার কোনটা ব্যবহার না করেন, কিংবা কোন ভুল করেন বা খালি রাখেন, তাহলে 240p দেখা যাবে। এবার অবস্থা দাঁড়ালো,

পুনঃশ্চ, রেজুলেশোন উল্লেখের সময় সঙ্গে আবার p দেবেন না ।

ব্যাস, চট জলদি ইউটিউব ভিডিও এমবেড এর ঝামেলা শেষ !

এবার একটু ফান টাইম, প্লাস টেষ্ট,

[youtube-vid id=”a8ZeqZrLxpw” res=”360″]

ইমেজ অপটিমাইজেশন এবং সার্ভিং

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

যাউক গা, লেখক স্বত্তাটা আবার জাইগা উঠতাছিলো। ঐটারে মাটি চাপা দিয়ে কামের কথা কই ! আপনেরা কেউ আজাইরা এই পোষ্ট তো পড়বেন না, কামের জিনিস জানার লাইগ্যাই পড়বেন।

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

আমি দয়ালু মানুষ, ইউজারদের কষ্ট সইতে পারিনা। তাই আপনারে অমানুষ থেকে মানুষ বানানোর কাজটা আমিই নিলাম। আসেন, কাজে নামি !

কয়টা ইমেজ দিছেন? 

তিরিং বিড়িং ছাইড়া, সোজা কথা বলেন, কয়টা ইমেজ দিছেন? ইমেজ ব্যবহারের সময়, একটা জিনিস অবশ্যই মাথায় রাখতে হবে, যেটুকু দরকার, সেটুকুই করতে হবে। অতিরিক্ত ইমেজ শুধু সমস্যা নয়, মহা সমস্যা। খেয়াল রাখতে হবে,

  • অনেককে দেখা যায়, বাহারী ফন্টে অনেকে লেখা ফটোশপে ইমেজ আকারে বানিয়ে পেজে দিয়ে থাকে। এমনটা করার কোন মানে নেই, ফন্ট ফেস এর যুগে আপনি চাইলেই সেই ফন্টটি আপনার সাইটে ব্যবহার করতে পারবেন। এক্ষেত্রে সুবিধে হলো একই ফন্টের নানা লেখা একবার ফন্ট লোড করেই দেখাতে পারবেন। সে জন্য আলাদা আলাদা ইমেজের প্রয়োজন নেই।
  • অনেক সময় আইকন এর জন্য আমরা পিচ্চি পিচ্চি একাধিক ইমেজ ব্যবহার করি। করবেন না। আইকন এর দরকার হলে, fontawesome অথবা icomoon.io এ চলে যান। ফন্ট মাধ্যমে আইকন ব্যবহারের মজাই আলাদা। কেন, সেটা অন্য একদিন ব্যাখা করবো। তবে আমার ধারনা ভাল করে এগুলো দেখলে আপনি নিজেই বুঝতে পারবেন।
  • অনেকে গ্রাডিয়েন্ট এর জন্য ইমেজ ব্যবহার করেন। কি দরকার? আপনি ষ্ট্যাইলশিট এর মাধ্যমেই গ্রাডিয়েন্ট তৈরী করতে পারবেন। বরং অনেক ভালো ভাবে। বিশ্বাস না হলে নিজেই চেক করে দেখুন, পরে এসে না হয় আমাকে এক কাপ চা খাইয়ে যাবেন।

কি কি বিষয় খেয়াল রাখতে হবে?

ওপরে দেখতে পাচ্ছেন হয়তো, যাচ্ছেতাই বাংলা ব্যবহার করেছি। এখ শুদ্ধ চলত বাংলায় ফিরে যাচ্ছি। ওয়েব পেজে ইমেজ ব্যবহারের ক্ষেত্রে অনেক গুলো ব্যাপারে খেয়াল রাখতে হবে। তবে কি কি খেয়াল রাখতে হবে, জানার আগে আমাদের জানতে হবে, কেন খেয়াল রাখতে হবে।

আপনি হয়তো জানেন, কিংবা জানেন না, গুগল তার সার্চ ইঞ্জিন র‍্যাংকিং এ যেসব ওয়েবসাইট দ্রুত লোড হয়, তাদের বেশি অগ্রাধীকার দেয়। অর্থাৎ, সব দিক দিয়ে আপনার সাইট নানা গুনে গুনান্বিত হওয়ার পরেও সার্চ ইঞ্জিন র‍্যাংকিয়ে পেছনে পরে যেতে পারেন, আপনার সাধারন কিছু ভুলের জন্য।

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

আরও কিছু বিষয় আছে। যেগুলো আলোচনা করতে গেলে মহাকাব্য হয়ে যাবে, তার মধ্যে আবার কিছু আমি নিজেই ভালো মতো বুঝিনা। তাই সেসব থাক। এখন দেখা যাক কি কি বিষয়ে খেয়াল রাখতে হবে।

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

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

র’ইমেজঃ https://dl.dropboxusercontent.com/u/72669879/ioritro.com/bg1.png

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

অপটিমাইজড ইমেজঃ https://dl.dropboxusercontent.com/u/72669879/ioritro.com/bg1%20%281%29.png

সুপার অপটিমাইজড ইমেজঃ https://dl.dropboxusercontent.com/u/72669879/ioritro.com/v8IeIz6.jpg

অপটিমাইজড ভার্সন এর সাইজ মাত্র ৩৬৬ কিলোবাইট। প্রায় ১২০০ কিলোবাইট কম। অবাক কান্ড? না, সামান্য সতর্কতা। ইমেজ কিভাবে অপটিমাইজ করলাম, সেটা নিয়ে পরবর্তীতে আলোচনায় আসবো। আর সুপার অপটিমাইজড ভার্সনটি দেখুন, এটি জেপিজি ফরম্যাটে এবং মাত্র ৭৯ কিলোবাইট ! নিজেই ভাবুন, কোন ইমেজটি ব্যবহার করবেন !

  • সি ডি এন ( কনটেন্ট ডেলিভারী নেটওয়ার্ক ) ব্যবহার করাটা বেশ জরুরী একটা বিষয় // অবশ্যই যদি আপনি দৈনিক কয়েক হাজার ভিজিটর আশা করেন।

 

সি ডি এন মূলত একটা ডিষ্ট্রিবিউটেড নেটওয়ার্ক,

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

ধরুন, আপনি একটা শেয়ার্ড হোষ্টিং ব্যবহার করেন। আপনার সাইটে দৈনিক ৫০ হাজার থেকে ১ লক্ষ ভিজিটর আসে। এখন এই পরিমান লোড আপনার শেয়ার্ড হোষ্টিং নিতে পারলেও, সার্ভিস এর বেহাল অবস্থা হবে, এটা না বললেও চলবে ( সব শেয়ার্ড হোষ্টিং না ), কেন? এই কেন এর উত্তরটা সিম্পল, আপনার সাইটের প্রতিটা ফাইলের জন্য আলাদা আলাদা রিকোয়েষ্ট যায় সার্ভারে, সেখানে এবং দৈনিক মোট ভিজিটর এর সংখ্যা দিয়ে গুন করুন। বিশাল ব্যাপার। যদিও প্রডাকশন লেভেল এর সার্ভারের জন্য সেটা ব্যাপার না। কিন্তু যখন আপনি শেয়ার্ড হোষ্টিং এ আছেন, তখন একই সার্ভারে হিসাব নেই ঠিক কতো সাইট রান করছে, ফলে সার্ভিস এর মান খারাপ হতে থাকে। আবার, আপনার সার্ভার যদি আমেরিকাতে অবস্থিত হয়, তবে একই ইন্টারনেট স্পিড নিয়ে একজন আমেরিকান ইউজার একজন রাশিয়ান ইউজার এর চেয়ে আপনার সাইট বেশি ফাষ্ট ব্রাউজ করতে পারবে। প্রশ্ন হতে পারে, তাদের ইন্টারনেট স্পিড তো একই? একই হলেও, আমেরিকান ইউজার আপনার সার্ভারের তুলনামূলক ভাবে কাছে অবস্থান করছেন, তার রিকোয়েষ্ট রাউট হচ্ছে তুলনামূলক ভাবে কম সময়ে। অপরদিকে, রাশিয়ান আছেন বেশ দূরে। তার রিকোয়েষ্ট কয়েকটা রাউটার/গেটওয়ে পেরিয়ে তারপরে সার্ভারে পৌছায়। ফলে পিং এর পরিমান বেড়ে যায়। ফলাফল, প্রচুর পরিমান প্যাকেট লস এবং লোডিং টাইম বেড়ে যাওয়া।

লাইভ উদাহরন দেখাই,

স্পিড টেষ্টঃ লোকেশন ঢাকা
স্পিড টেষ্টঃ লোকেশন ঢাকা

এই ছবিতে দেখুন, আমি ঢাকার একটা সার্ভারে টেষ্ট করেছি, আমার পিং রেট ৬৪ মিলিসেকেন্ড। এবার আসি অন্য কোথাও,

স্পিড টেষ্টঃ লোকেশোন কোলকাতা
স্পিড টেষ্টঃ লোকেশোন কলকাতা

এই ছবিতে দেখুন, পিং রেটের পরিমান বেড়েছে। এবার টেষ্ট করেছি কোলকাতাতে।

স্পিড টেষ্টঃ লোকেশন মায়ারনমার

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

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

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

তাই আপনার সাইটে যদি আপনি ম্যাসিভ ইউজার এক্সপেক্ট করেন, তাহলে একটা ভালো মানের সি ডি এন নিয়ে নেওয়াটা সময়োপযোগী সিদ্ধান্ত !

[ ইমেজ অপটিমাইজেশন নিয়ে পরবর্তী পর্ব আসবে খুব তাড়াতাড়ি, আজকে এই পর্যন্তই, নিচে রিসোর্স সেকশন দেওয়া হলো, নজর রাখবেন ]

 

ওয়েব ডেভেলপমেন্ট এর সাধারন ভুল – একটু দয়া মায়া করেন !

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

Continue reading