Optimizing web application using CSS sprites and Caching static contents

A year ago, my company provided a renowned Bangladeshi daily newspaper site a plugin. This plugin which basically provides an interface to our companies services on their website.

Last night they raise an issue regarding the optimization of our plugins code. What basically they were telling was,

  1. The images that our plugin use, can be shrunk maintaining the same quality, to make their page load faster
  2. The static contents like JS, CSS, images should be cached with an expiry date

I got assigned with the task. I figured out the solution in this way:

  1.  Like, 5 png images were downloading while the plugin loads on their page. 5 different HTTP-request cost their clients browser 36KB of data. I moved all the images in CSS sprites hence they were shrunk into 17.3KB. Hmm, this technique saves around 50% data.
  2. The plugin was served from the Apache web server. I had to put a .htaccess file mentioning some caching rule there.

In the plugin’s root directory (/var/www/plugin.co/public_html/), I created an .htaccess file. The rules were:

## EXPIRES CACHING ##
 <IfModule mod_expires.c>
 ExpiresActive On
 ExpiresByType text/css "access 1 month"
 ExpiresByType application/javascript "access 1 month"
 ExpiresByType application/x-javascript "access 1 month"
 ExpiresByType image/x-icon "access 1 year"
 ExpiresDefault "access 2 days"
 </IfModule>
## EXPIRES CACHING ##

That is all it.

Now, in the /etc/apache2/apache2.conf file, I added the following lines:

<Directory /var/www/plugin.co/public_html/>
AllowOverride All
</Directory>

And finally, I had to run these commands on the terminal:

admin@plugin:/etc/apache2$ sudo a2enmod expires
Enabling module expires.
To activate the new configuration, you need to run:
 service apache2 restart
admin@plugin:/etc/apache2$ sudo service apache2 restart
 * Restarting web server apache2

The end result was, the plugin was loading images from the CSS sprite and caching the static contents (JS,CSS). Yeah, the plugin was loading much faster now 😀

The web resources that helped me doing it were:

  1. CSS Sprite Generator
  2. Make Browsers Cache Static Files With mod_expires On Apache2 (Debian Squeeze)
  3. How to speed up your site by remote caching static content
Advertisements

JavaScript testing with Protractor

I recently tried UI testing for javascript. I used Protractor end to end testing framework which uses Jasmine testing framework underneath. Protractor also uses web-driver manager which is a helper tool to easily get an instance of a Selenium Server running. This local standalone Selenium server acts as an user who interacts with the browser.

lets try to define a workflow to get up and running with Protractor test suit !

  1. You need node js (greater than v0.10.0) installed on your machine
  2. You need Java Development Kit (JDK) installed on your machine
  3. Type npm install -g protractor on the command line to install protractor globally. It will install protractor and webdriver-manager
  4. Type webdriver-manager update
  5. Now start up the selenium server with webdriver-manager start

Now, in your javascript project folder,

  1. Create a folder, lets name it test/
  2. Create two file named conf.js and spec.js

In conf.js write the below code:

// conf.js
exports.config = {
       // when you installed protractor, it brought Jasmine test framework with it
       framework: 'jasmine', 
       // remember webdriver-manager start?the selenium server is running in this url
       seleniumAddress: 'http://localhost:4444/wd/hub',
       // in spec.js you write your test code
       specs: ['spec.js']
}

In spec.js, write:

// spec.js
describe('Protractor Test for PussyCat', function () {
       it('should have a title', function () {
       //the web page url where the js code is being used
       browser.get("http://127.0.0.1:8080/"); 

       //the pages Title should return Dashboard string !!
       expect(browser.getTitle()).toEqual("Dashboard"); 
   });
});

 

  1. Now in your javascript project directory, run node http-server (its a node command line program, install it with npm). In the command line the live url of your project will be given. change your spec.js url according to that.
  2. By this time, you probably running two command prompt, one is running selenium server, another running your project in http-server. open the third command prompt and navigate to test folder (cd test).
  3. Type protractor conf.js to run the test suit, the test will pass or fail based on your web pages title.

Voila !! you are testing you are js code !!!

lemme know if you faced any issue while following this short tutorial 🙂

NPM GRUNT Uglify Minify

১। npm install -g grunt-cli
২। npm install -g grunt-init
৩। git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
৪। grunt-init gruntfile
৫। npm install grunt
৬। npm init
৭। http://gruntjs.com/plugins > npm install grunt-contrib-uglify –save-dev
৮।

uglify: {
    options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
    },
    build: {
    src: 'js_src/*.js',
    dest: 'build/<%= pkg.name %>.min.js'
   }
 }

৯। grunt uglify
১০। Your Js is minified

ডেবিয়ান ইন্সটল করার পরে প্রয়োজনীয় কনফিগারেশন

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

বিস্তারিত পড়ুন

অবজেক্ট ওরিয়েন্টেড জাভাস্ক্রিপ্ট !!

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

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

Focusing your energy to what matters most !

I guess the title explains everything. You have this limited amount of energy to spend per day. Don’t waste it doing ramblings. Work 5 hours a day, focus all your energies their and be super productive. You can enjoy the rest of the time, taking rest, doing what you enjoy most. A well rested mind will produce good output anyway.

বিস্তারিত পড়ুন

উইন্ডোজ ফোন অ্যাপে নিজের লোকেশন নির্ণয় ও ম্যাপে পুশপিনের মাধ্যমে লোকেশন দেখানো

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

বলে রাখা ভালো, যে সময়ে এই টিউটোরিয়াল লিখছি, দুই ধরনের উইন্ডোজ ফোন টেমপ্লেট পাওয়া যায়। একটা হলো Windows Phone Silverlight 8.1 & Windows Phone WinRT।

দুই ধরনের প্রজেক্ট টেমপ্লেটেই দেখবো কিভাবে ম্যাপ নিয়ে নানা রকম কাজ কর্ম করা যায়।

বিস্তারিত পড়ুন

থিসিস কথন – ১ ( যেভাবে শুরু করলাম )

প্রায় দুই বছর আগে প্রিয়.কম এ একটা আর্টিকেল পড়ি। সেখানে বিগ ডাটা নিয়ে অনেক কথাবার্তা হয়। তখনকার দিনগুলোতে সারাক্ষন ভাবতাম, পাশ করে কি করবো ? চাকরি – বাকরি কিছু পাবো তো ! ব্লা ব্লা ব্লা -_-

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

বিস্তারিত পড়ুন

পড়াশোনায় ফাকি অতঃপর – ২

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

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

বিস্তারিত পড়ুন

উইন্ডোজ ফোনে RSS Reader App তৈরির বাংলা টিউটোরিয়াল

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

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

বিঃদ্রঃ আমি নিজেও খুব একজন অভিজ্ঞ অ্যাপ ডেভেলপার নই, বেস্ট প্র্যাক্টিস সহ ইত্যাদি অনেক কিছু আমার নিজেরও এখনো শেখা বাকি। সুতরাং অভিজ্ঞরা যদি এই ব্লগ এন্ট্রির গঠনমূলক সমালোচনা করেন, তবে কৃতজ্ঞ থাকবো।

আমরা আজকে একটি RSS Reader অ্যাপ বানাবো।

RSS – Rich Site Summary

XML বা JSON ফরম্যাটে এই RSS আমাদের কোন ওয়েবসাইটের নিত্যনতুন আপডেট প্রদান করে থাকে।

সাধারনত ব্লগ, নিউজ সাইট, ফেসবুক ইত্যাদি আমাদের RSS লিংক প্রদান করে থাকে।

ডেমো হিসেবে আমরা আজকে একটি ফেসবুক পেইজ, Collected Notes and Discussions এর RSS লিংক নিয়ে কাজ করবো।

আমরা আমাদের অ্যাপে MVVM (Model View ViewModel) সম্পুর্ন ভাবে অনুসরন করবো।

আমাদের অ্যাপে মুল যে কয়টা ক্লাস থাকবে, তারা হলোঃ

১.    MainPage

২.    DetailPage

৩.    Model

৪.    HtmlRemover ( helper class )

৫.    ViewModel

MainPage ক্লাসের কাজ হবে মুল অ্যাপ টা ইনিশিয়েট করা, প্রতিটা নোটের Title আর Summary লিস্ট আকারে প্রদর্শন করা।

DetailPage এর কাজ হবে প্রতিটা নোটের মুল লেখা প্রদর্শন করা, অবশ্যই এককভাবে একটা পেইজে।

Model ক্লাস হবে RSS এর মাধ্যমে প্রাপ্ত ডাটার মিরর ক্লাস। অর্থাৎ RSS এর মাঝে যেই ফিল্ড/ প্রোপারটি/ ভ্যারিয়েবল গুলো থাকবে, ঠিক অনুরুপ ফিল্ড/ প্রোপারটি/ ভ্যারিয়েবল নিয়ে গঠিত একটা ক্লাস। এর ফলে প্রাপ্ত RSS ডাটা আমরা সরাসরি সেই Model ক্লাসের অবজেক্টের ভেতরে ঢুকিয়ে দিতে পারবো।

HtmlRemover ক্লাস হবে একটি স্ট্যাটিক, হেল্পার ক্লাস। এর কাজ হবে প্রাপ্ত RSS ডাটার মাঝে যদি কোনরকম HTML জনিত সমস্যা থাকে, তবে তা সমাধান করা।

ViewModel হচ্ছে আমাদের মুল কন্ট্রোলার ক্লাস। এইখানেই আমাদের অ্যাপের RSS ডাটা ওয়েব থেকে লোড হয়ে MainPage ও DetailPage এ গিয়ে প্রদর্শন করবে।

মুল কোডের ব্যাখ্যায় যাবার আগে আরো কিছু প্রাসঙ্গিক ব্যাখ্যা দেবার প্রয়োজন মনে করছি।

প্রথমত XML বা JSON কি জিনিস তা আমাদের জানতে হবে। এরা হচ্ছে Open Data Format. XML বা JSON এ কোন ডাটা সংরক্ষন করা হলে, সেই ডাটা যে কোন ধরনের সিস্টেম বুঝতে পারে।

আমি নিজে উদাহরন দেয়ার জন্যে প্রায়ই সময় একটা উদাহরন দেই। তাহলো, ধরুন আমাদের কে জাভা বেসড একটা সিস্টেম এর সাথে ডট নেট বেসড একটা সিস্টেমের সাথে ডাটা আদান প্রদান তথা কম্যুনিকেশন করতে হবে। এখন দুইটা সিস্টেম দুই ধরনের এনভায়রন্মেন্টে চলে। এদের মাঝে কম্যুনিকেশন স্থাপন করতে হলে আমাদের কে অবশ্যই এমন একটা মাধ্যম ব্যবহার করতে হবে যা কিনা জাভা এবং ডট নেট, দুইটা সিস্টেমই বুঝতে পারে। এই ধরনের প্রয়োজনীয়তা থেকেই XML, JSON এর মতো Open Data Format এর উৎপত্তি।

কোড দিয়ে ব্যাপারটা ব্যাখ্যা করা যাক।

ধরুন, সি# এ আমার একটা ক্লাস আছে, যা দেখতে অনেকটা এইরকম,

class Entry

{

public string title {get;set;}

public string summary {get;set}

public string content {get;set;}

}

Entry entry = new Entry(){ title = “hello”, summary = “summary” content = “main content goes here” };

 

এখন এই entry নামের অবজেক্ট টা কে যদি আমি XML এ পরিনত করি, তাহলে তা টেক্সট আকারে একটা টেক্সট ফাইলে সংরক্ষন করা যাবে এবং দেখতে হবে এইরকমঃ

<Entry>

<title>hello</title>

<summary>summary

<content>main content goes here</content>

</Entry>

 

আর JSON এ দেখাবে এইরকম,

{

“Entry”:{

“title”:”hello”,

“summary”:”summary”,

“content”:”main content goes here”

}

 

চাইলে এই XML, JSON কে আবার সি# এর অবজেক্টে রুপান্তর করা যায়। এবং শুধুমাত্র সি# নয়, জাভা, পিএইচপি, পাইথন, রুবি থেকে শুরু করে যে কোন অবজেক্ট অরিয়েন্টেড ল্যাংগুয়েজের অবজেক্টে রুপান্তর করা যায়, ওই ভাষার বিভিন্ন লাইব্রেরী/ ফাংশন ব্যবহার করে।

আর এইখানেই আসল মজাটা নিহিত। ফেসবুক তাদের RSS XML/JSON উৎপন্ন করছে হয়তো পিএইচপির মাধ্যমে, গুগল হয়তো তাদের API support দিচ্ছে XML/JSON এর মাধ্যমে যা উৎপন্ন হচ্ছে গুগলের সার্ভারে চলতে থাকা পাইথন ল্যাংগুয়েজের সাহায্যে, আর আমি এইদিকে সেই RSS XML/JSON রিসিভ করে কাজে লাগাচ্ছি সি# এর মাধ্যমে। এক কথায় সম্পূর্ণ দুটো আলাদা সিস্টেমের মাঝে ডাটা আদান প্রদান হচ্ছে।

তুলনামুলকভাবে  XML এর চাইতে JSON নিয়ে ডাটা আদান প্রদান সহজতর। কারন XML এ শুরু এবং শেষ দুইটা ট্যাগের মাধ্যমে ডাটা চিহ্নিত করতে হয়, যা কিনা XML ফাইলের সাইজ বাড়িয়ে দেয় এবং প্রসেস করতে বেশি সময় লাগে।

কিন্তু JSON সরাসরি অবজেক্ট আকারে ডাটা প্রদর্শন করে, Key-Value Pair হিসেবে। যার কারনে মুল JSON ফাইলের সাইজ যেমন ছোট হয়, তেমনি JSON ডাটা প্রসেস করতেও XML এর চাইতে কম সিপিউ পাওয়ার ব্যয় হয়।

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

JSON থেকে ডাটা সি# এর অবজেক্টে রুপান্তর করা অথবা এর বিপরীত কাজটা করার জন্য সি# এ একটা চমৎকার লাইব্রেরী আছে যার নাম NewtonSoft. http://json.net এ গেলে এই লাইব্রেরী সম্বন্ধে খুব সুন্দরভাবে, সহজে জানা যাবে।

এইবার আসি ডেস্কটপ বা মোবাইল অ্যাপ এর মাধ্যমে ওয়েব থেকে ডাটা কালেকশনের পদ্ধতি নিয়ে। হ্যা, বিভিন্ন ল্যাঙ্গুয়েজে নানারকম লাইব্রেরী পাওয়া যায় এই ব্যাপারে, যারা কিনা Http Request পাঠাতে পারে কোন নির্দিষ্ট ওয়েব লিঙ্কে, এবং সেই লিংক ওয়েব ব্রাউজারে লোড করলে, আমরা যে ডাটা(XML, JSON)/ওয়েবপেইজ পেতাম, তা ওই ল্যাঙ্গুয়েজের একটি অবজেক্টের ভেতরে স্ট্রিং আকারে সেইভ করে রাখে।

এইবার ওই স্ট্রিং এর ভেতরে থেকে চাইলে প্রয়োজনীয় ডাটা এক্সট্রাক্ট যেমন করে নিতে পারা যায় (XML, JSON), আবার চাইলে লোড হওয়া ওয়েব পেইজের নির্দিষ্ট HTML ট্যাগ এর ভিতরে থাকা প্যারাগ্রাফ, টেক্সট ইত্যাদি এক্সট্রাক্ট করে নিজের প্রয়োজন মত অ্যাপের ইউজার ইন্টারফেসে ব্যবহার করা যায়।

সি# এর ক্ষেত্রে Http Client নামের একটি ক্লাস আছে, যে কিনা আমাদেরকে ওয়েব থেকে এইভাবে ডাটা লোড করার সুযোগ দেয়।

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

এই সমস্যা সমাধানের জন্য Asynchronous Method এর উৎপত্তি। এই মেথড কে যখন কল করা হয়, তখন সে নিজে নিজে অ্যাপের মুল কার্যক্রম ( থ্রেড ) এর পাশাপাশি আরেকটা সহযোগী কার্যক্রম ( সাব থ্রেড ) তৈরি করে। অ্যাপের মুল ইউজার ইন্টারফেস কোন রকম ঝামেলা ছাড়াই চলতে থাকে। আর সাব থ্রেডে চলতে থাকে লোডিং এর কাজ। যখন ডাটা ওয়েব থেকে এসে অ্যাপে লোড হয়, তখন আমাদের সাব থ্রেডের কাজ বন্ধ হয় এবং লোডকৃত ডাটা অ্যাপে ব্যবহার করার জন্য প্রস্তুত হয়।

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

Asynchronous Method সম্বন্ধে আরো কিছু কথা বললে বুঝতে সুবিধা হবে। আমরা যারা ওয়েব নিয়ে কাজ করি, বা ওয়েব টেকনোলোজি সম্বন্ধে খোঁজখবর রাখি, তারা Ajax এর নাম শুনে থাকব। এই Ajax এর পুরো অর্থ হলো Asynchronous JavaScript. আমরা যখন ফেসবুক ব্রাউজ করি, তখন দেখা যায় ওয়েব পেইজ রিফ্রেশ না হয়েই নতুন নতুন নোটিফিকেশন আসছে, চ্যাট হচ্ছে, কমেন্ট করা যাচ্ছে। অথচ নরমাল সেন্সে বলে পুরো ওয়েব পেইজ লোড না হলে নতুন আপডেট পাবার কথা না। এইখানেই Ajax কাজ করে। ওয়েব পেইজের যে অংশটুকু লোড/ আপডেট হবার দরকার শুধু মাত্র সেই অংশটুকুই লোড/ আপডেট করে এই Ajax। এতে করে নতুন করে ওয়েব পেইজ লোডের ঝামেলা পোহাতে হয় না, অধিক ব্যান্ডউইথ খরচ হয় না, নতুন আপডেট পাবার সময় পুরনো লোড হওয়া ডাটা/ টেক্সট পড়তে কোন সমস্যা হয় না।

যাই হোক, অ্যাপ টা কিভাবে কাজ করে, কোন ক্লাস কোন ক্লাসের সাথে কিভাবে কানেক্টেড এইসব বর্ণনা করার আগে কিছু জিনিস জানতে হবে। যেমনঃ

১. কিভাবে নাগেট ম্যানেজারের মাধ্যমে নতুন প্যাকেজ/.dll/লাইব্রেরী ভিজুয়াল স্টুডিও প্রজেক্টে লোড করতে হয়

২. কিভাবে নেইমস্পেইস কাজ করে। প্রজেক্টের বিভিন্ন ফোল্ডার এর ভিতরে থাকা ক্লাসগুলোর নেইমস্পেস কিভাবে ডিফাইন করতে হয়।

৩. অবজেক্ট অরিয়েন্টেড প্রোগ্রামিং সম্বন্ধে মোটামুটি ধারনা থাকতে হবে

৪. এই প্রজেক্টের জন্য INotifyPropertyChanged, ObservableCollection এদের কাজ কি, কেন ব্যবহৃত হয় সে সম্বন্ধে ধারনা থাকতে হবে

৫. Partial Class কি, কিভাবে কাজ করে তা জানতে হবে

৬. উইন্ডোজ ফোনের ডিজাইন ল্যাঙ্গুয়েজ XAML ( Extensible Application Markup Language ), কিভাবে XAML এর সাথে মুল সি# কোডের অবজেক্ট বাইন্ড করতে হয়, XAML এর বিভিন্ন কন্ট্রোল(textBox, webBrowserControl) ইত্যাদি সম্বন্ধে পরিচয় এবং এদের বিভিন্ন প্রোপার্টি ইত্যাদি জানতে হবে।

৭. ইভেন্ট কিভাবে কাজ করে

মোটামুটি এই ব্যাপারগুলো সম্বন্ধে ধারনা থাকলে অনেক সহজেই এই অ্যাপ কিভাবে কাজ করে তা বোঝা যাবে।

এইবার আসুন ব্যাখ্যা করি অ্যাপের অভ্যন্তরীণ আর্কিটেকচার।

সবার প্রথমেই Nuget Manager এর মাধ্যমে Json.net, MVVMlight ও Http Client এই তিনটি প্যাকেজ সল্যুশনে অ্যাড করে নিতে হবে। কোন সমস্যা হলে ম্যানুয়ালি ওয়েব থেকে ডাউনলোড করে তারপরে প্রজেক্টের Reference এ অ্যাড করা যাবে।

প্রথমেই RSS link. আমরা ফেসবুকের এই http://goo.gl/pdGyPd লিংক থেকে Get Notes Via Rss ট্যাবে ক্লিক করি। XML এর একটা RSS আমাদের ওয়েব ব্রাউজারে লোড হবে। সতর্কতার সাথে লোড হওয়া পেইজের URL এর দিকে তাকাই, দেখতে পাবো সবার শেষে লেখা আছে, ….&format=rss20, এইখানে rss20 এর জায়গায় json লিখে এন্টার প্রেস করি। তাহলে এইবার দেখবো JSON এর একটি পেইজ লোড হয়েছে।

এইবার পুরো পেইজ যদি ভালোভাবে লক্ষ্য করে দেখি, তবে দেখা যাবে পুরো পেইজটা একটা অবজেক্ট। তার ভিতরে title, link, self, updated, icon, author, entries নামে বেশ কিছু ফিল্ড আছে। আবার author এর ভেতরেও দুটো ফিল্ড, name আর uri.

entries নামের ফিল্ডের ভেতরে আবার প্রায় ১০ টা অবজেক্ট, অর্থাৎ entries ফিল্ড টা একটা অ্যারে এর মতো কাজ করছে। এই ১০ টা অবজেক্টের প্রত্যেকের ভেতরে আবার title, id, alternate, catagories ইত্যাদি সহ প্রায় ১৫ টার মত ফিল্ড রয়েছে।

আমাদের অ্যাপে শুধুমাত্র এই entries নামের অ্যারে থেকে title, summary আর content(_html) এই তিনটা ফিল্ড দরকার।

এখন এই পুরো পেইজটা সিলেক্ট করে কপি করি এবং http://json2csharp.com এ যাই। কপি করা JSON এইখানে পেস্ট করে দেই এবং এই JSON কে ধারন করতে পারে, এমন একটা সি# এর ক্লাস জেনারেট করি।

জেনারেট হওয়া ক্লাস টা আমাদের অ্যাপের মডেল হিসেবে ব্যবহৃত হবে।

এইবার MainPage.xaml এ গিয়ে একটি longlistselector ডিক্লেয়ার করি, এর ডাটাটেমপ্লেটে title আর summary এর জন্য দুটো ফিল্ড ডিক্লেয়ার করি।

ViewModel এ আমাদের Model এ থাকা Entry ক্লাসের একটি Observable Collection Object ডিক্লেয়ার করি। একই সাথে Entry ক্লাস এ INotifyPropertyChanged Interface ইমপ্লিমেন্ট করি। এই ক্লাসের title, summary আর content প্রোপার্টি গুলোতে INotifyPropertyChanged এর শর্ত গুলো ব্যবহার করি।

ViewModel এ Load() এবং DownloadPageAsync() নামের মেথড দুইটি ডিক্লেয়ার করি। ViewModel এর Constructor যখন কল করা হবে, তখন Load() মেথড কে কল করা হবে যা শেষ পর্যন্ত DownloadPageAsync() মেথড কে কল করবে, এবং যখন ডাটা ওয়েব থেকে এসে হাজির হবে, তখন ViewModel এর Load() ও DownloadPageAsync() নামের Asynchronous Method দুইটির কাজ শেষ হবে।

এইবার MainPage.xaml.cs এ MainViewModel এর একটি অবজেক্ট MyVM ডিক্লেয়ার করি। এই ক্লাসের constructor এ পুরো অ্যাপের DataContext হিসেবে সেট করে দেই MyVM কে। একই সাথে আমাদের পূর্বে ডিক্লেয়ার করা longlistselector এর ItemsSource হিসেবে assign করে দেই আমাদের MyVM.entry কে।

longlistselector এর একটি silectedItemChanged ইভেন্ট ডিক্লেয়ার করি, এবং তাতে রেফার করে দেই longlistselector এর কোন আইটেমে ক্লিক করলে যেন DetailsPage.xaml এ চলে যায় এবং সাথে সাথে সিলেক্টেড আইটেমের content প্রোপার্টি যেন ওই পেইজে লোড হয়। এইখানে NavigationService.Navigate() নামের একটি মেথড ব্যবহার করা হয়েছে, এবং content প্রোপার্টির ভিতরে HTML সম্পর্কিত কোন সমস্যা থাকলে তা সমাধান করা হয়েছে Htmlrmover.StripSpaceCharArray() নামের একটি স্ট্যাটিক মেথডের মাধ্যমে।

DetailsPage.xaml এ পাস করা content প্রোপার্টি কে প্রদর্শন করা হয়েছে একটি ওয়েব ব্রাউজার কন্ট্রোলের মাধ্যমে কারন content প্রোপার্টি বিভিন্ন লাইন ব্রেক, ইন্ডেন্টিং ইত্যাদি নিয়ন্ত্রন করা হচ্ছে HTML ট্যাগ এর মাধ্যমে। DetailsPage.xaml.cs এ OnNvaigatedTo() মেথডের মাধ্যমে পাস হয়ে আসা content কে ওয়েব ব্রাউজার কন্ট্রোলে প্রদর্শন করা হচ্ছে।

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

সোর্স কোডের লিংক http://cnd.codeplex.com . সোর্স কোড টা ভালো করে পড়বেন এই ব্লগে দেয়া বর্ণনার সাথে সাথে। ভালো থাকবেন 🙂

যেভাবে উইন্ডোজ ফোন ইমুলেটরে ইউএসবি মডেম দিয়ে নেট কানেক্ট করবেন

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

সুতরাং আমার সমস্যার সমাধান RJ45 কানেকশন। এছাড়া ওয়াইফাই কানেকশন ও ইমুলেটর পেত।

সুতরাং RJ45 কানেকশন পাওয়ার জন্য আমাকে হয় ব্রডব্যান্ড কানেকশন নিতে হবে, নয়তো ওয়াইফাই রাউটার কিনে সেই অনুসারে কনফিগার করতে হবে।

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

সেই ধারনা থেকেই কম্পিউটারের দোকানে গেলাম, জিজ্ঞেস করলাম দুটো পিসি কানেক্ট করার জন্য নেটওয়ার্ক ক্রস কেবল আছে কিনা। যারা জানেন না নেটওয়ার্ক ক্রস কেবল কি তাদের জন্য জানিয়ে রাখি, নেটওয়ার্ক ক্রস কেবল হচ্ছে স্ট্যান্ডার্ড নেটওয়ার্ক কেবল, ক্যাট – ৩ বা ক্যাট – ৫ ক্যাটাগরির। এই তারের দুই প্রান্তে দুটো RJ45 সকেট লাগানো থাকে। নেটওয়ার্ক কেবলের মধ্যে প্রায় ৮ রকম তার থাকে, ক্রস কেবলের এক প্রান্তে তারের কম্বিনেশন থাকে এক রকম, আরেক প্রান্তে থাকে আরেক রকম। কোন রকম হাব বা সুচ ছাড়া দুটো পিসি কে কানেক্ট করার জন্য এই ক্রস কেবল ব্যবহার করা হয়।

তাদের কাছে ৩ মিটারের ক্রস কেবল তৈরি করাই ছিলো, ১০০ টাকা দিয়ে কিনে নিলাম। এর পরে বাসায় এসে ডেস্কটপের পিছে যে নেটওয়ার্কিং পোর্ট আছে, সেখানে ক্রস কেবলের এক প্রান্ত সংযোগ করলাম, অন্য প্রান্ত সংযোগ করলাম ল্যাপটপের নেটয়ারকিং পোর্টে।

এরপরে ডেস্কটপকে হোস্ট কম্পিউটার ধরে নিলাম। ইউএসবি মডেম কানেক্ট করালাম ডেস্কটপে। এরপরে

  1. Start button > [type] Control Panel > Network and Sharing >  Change Adapter [left sidebar] > এবং আমার ওয়াইম্যাক্স মডেমের যে কানেকশন এডাপ্টার আছে সেটা সিলেক্ট করলাম।
  2. এইবার এডাপ্টারে ডবল ক্লিক > properties > Sharing Tab > এবং এর পরে Allow other network users to connect through this computer’s Internet connection এই চেকবক্স চেক করে দিলাম।

এতক্ষন আমি আমার হোস্ট কম্পিউটার কনফিগার করলাম ইন্টারনেট শেয়ার করার জন্য। এইবার ক্লায়েন্ট কম্পিউটার, তথা যে কম্পিউটারে ইন্টারনেট শেয়ার করতে চাই [[আমার ক্ষেত্রে আমার ল্যাপটপ]] , সেই কম্পিউটারে এসে কন্ট্রোল প্যানেল থেকে Internet Option > Connection Tab > Lan Settings > এবং সবগুলো চেক বক্স আনচেক করলাম।

কম্পিউটারের চার্ম বারে নোটিশ আসলো আমি কি নতুন কানেক্সনের সাথে যুক্ত হতে চাই কি না এই ব্যাপারে, ইয়েস ক্লিক করলাম।

ব্যাস, সুন্দর ভাবেই দুটো পিসির মাঝে ইন্টারনেট শেয়ার হয়ে গেলো।

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

বিঃদ্রঃ আমার দুটো পিসিতেই উইন্ডোজ ৮.১ অপারেটিং সিস্টেম

সুত্রঃ  http://windows.microsoft.com/en-us/windows/set-internet-connection-sharing#1TC=windows-7

http://windows.microsoft.com/en-us/windows/using-internet-connection-sharing#1TC=windows-7

যেভাবে ওয়ার্ডপ্রেস সেটাপ করবেন লোকাল কম্পিউটারে

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

প্রথমেই আপনার দুটো জিনিস লাগবে। WAMP অথবা XAMP সার্ভার এবং WORDPRESS.

প্রথমে WAMP/XAMPP ইন্সটল করে নিন।

এর পরে C:\wamp\www ( WAMP এর ক্ষেত্রে ) অথবা C:\xamp\htdocs ( XAMP এর ক্ষেত্রে ) প্রবেশ করুন। এই www অথবা htdocs ফোল্ডার দুটো হলো সেই দুই জায়গা যেখানে আপনার ইন্সটল করা ওয়ার্ডপ্রেস ওরফে আপনার ওয়েবসাইট থাকবে।
লেখার এই পর্যায় থেকে আমি বর্ণনার সুবিধারতে শুধু মাত্র WAMP সার্ভার দিয়ে পুরো প্রক্রিয়া বর্ণনা করবো। XAMP সার্ভারের ক্ষেত্রেও পুরো প্রক্রিয়া শতকরা ৯০ ভাগ একইরকম।
স্টার্ট মেনু থেকে WAMP চালু করি,

1

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

2

আপনারা দেখতে পাচ্ছেন এইখানে Tools, Your Projects, Your Virtual Host নামে তিনটা হেডীং আছে। এর মাঝে Your Projects এর নিচে যে ফোল্ডার দেখছেন, এই ফোল্ডার রাখা আছে সেই www নামের ডিরেক্টরিতে। তার মানে এই ফোল্ডারে আপনি যাই রাখেন না কেন, লোকালহোস্টের এই পেইজে আসলে সেইসব ফোল্ডার এই জায়গায় দেখাবে।
এখন আপনার ডাউনলোড করা ওয়ার্ড প্রেসের যিপ ফাইলটি আনযিপ করুন সেই www ফোল্ডার টিতে।

3

এইবার phpmyadmin এ ক্লিক করুন। phpmyadmin হচ্ছে একটি মাইএসকিউএল ডেটাবেস ম্যানেজম্যান্ট সিস্টেম। এইখানে ওয়ার্ডপ্রেসের কিছু ডেটা সেভ করে রাখা হয়। তাই ওয়ার্ডপ্রেস ইন্সটল করার আগে আমরা এইখানে একটা ডেটাবেজ খুলবো।

4

উপরে, লাল রঙ করা ডেটাবেজ বাটনে ক্লিক করুন।

6

ক্রিয়েট ডেটাবেজের নিচে যেকোনো নাম দিয়ে ক্রিয়েট ডেটাবেজ বাটনে ক্লিক করুন। ব্যস, ডেটাবেজ ক্রিয়েট হয়ে গেলো।

5

এইবারে www ফোল্ডারের ভিতরে থাকা wp_config_sample.php ফাইল টি রিনেইম করে wp_config.php করুন এবং যে কোন টেক্সট এডিটরে ওপেন করুন।

7

এইখানে আপনার ডিবি নেইম, ডিবি ইউজার নেইম, পাসওয়ার্ড, হোস্ট প্রদান করুন। আমার ক্ষেত্রে ডিবি নেইম wordpress, ইউজার নেইম root, পাসওয়ার্ড নেই , এবং ডিবি হোস্ট localhost।

এইবার সার্ভারের হোমপেইজে গিয়ে wordpress ফোল্ডার টিতে ক্লিক করুন। ওয়ার্ডপ্রেস নামের একটা ডিরেক্টরি দেখাবে। সেখানে আবার ক্লিক করুন। এইবারে নিচের মত একটা পেইজ আসবে।

8

প্রয়োজনীয় ডেটা প্রদান করে ইন্সটল ওয়ার্ডপ্রেস বাটনে ক্লিক করুন। নিচের পেইজ আসবে।

9

লগ ইন এ ক্লিক করুন। আপনার ইউজার নাম আর পাসওয়ার্ড দিয়ে প্রবেশ করুন।

10

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

11

উপরে বাম কোনায় মাই ব্লগ > ভিসিট সাইট এ ক্লিক করুন।

12

আপনার ডিফল্ট ব্লগ দেখতে দেখাবে এইরকম।

13

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

** যদি WAMP সার্ভার চালু না হয়, অর্থাৎ হলুদ বা লাল রঙের হয়ে থাকে, তাহলে এর সম্ভাব্য কারন হতে পারে আপনার সার্ভার ও আপনার পিসি তে চালু অন্য কোন অ্যাপ্লিকেশন একই পোর্ট নাম্বার ব্যবহার করছে। সাধারনত WAMP সার্ভার পোর্ট ৮০ ব্যবহার করে থাকে। সেই ক্ষেত্রে আপনি আপনার সার্ভারের পোর্ট নাম্বার করে দিতে পারেন।

http://flowingmotion.jojordan.org/2013/04/19/how-to-change-the-port-numbers-on-wamp-and-stop-conflicts-with-a-portable-server/

যেভাবে মাইক্রোসফট Lync Meeting আয়োজন করবেন

ধরে নিচ্ছি আপনি একজন মাইক্রোসফট স্টুডেন্ট পার্টনার এবং আপনার ভার্সিটি তে মাইক্রোসফটের অ্যাপাথন আয়োজন করার জন্য ভার্সিটির ফেলো পার্টনারদের দের সাথে আপনার একটা মিটিং আয়োজন করা দরকার। আপনি খুব সহজেই মাইক্রোসফট lync web sheduler দিয়ে আপনার মিটিং অনলাইনে আয়োজন করতে পারেন।
এজন্য আপনার যা যা দরকার হবে তা হল,
১. আপনার *******@studentpartner.com ইমেইল অ্যাড্রেস যা কিনা মাইক্রোসফট বাংলাদেশের পক্ষ হতে আপনাকে একজন MSP হিসেবে সরবরাহ করা হয়েছে।
২. ওয়েব ব্রাউজার ( IE, Chrome, Firefox etc )
তাহলে চলুন, দেখা যাক কিভাবে আপনার অনলাইন মিটিং Microsoft Lync দিয়ে সহজেই আয়োজন করতে পারেন।
প্রথমে, এই লিঙ্কে  https://sched.lync.com যান। আপনার স্টুডেন্ট পার্টনার ক্রেডেন্সিয়াল দিয়ে লগিন করুন।

1

Create new meeting এ ক্লিক করুন।
General, Meeting time, Access and presenter, Perticipants and Audio এই ফিল্ড গুলো নিজের প্রয়োজন মত ফিল আপ করুন এবং সেভ বাটনে ক্লিক করুন।

12

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

2

নিজে সেই লিঙ্কে ক্লিক করুন এবং এইরকম একটা ট্যাব ওপেন হবে।
3

যদি আপনার ব্রাউজারে lync প্লাগিন ইন্সটল না করা থাকে, তাহলে প্লাগিন ইন্সটল করার অনুমতি চাইবে। প্লাগিন ইন্সটল করে নিন।
এর পরে আপনার মিটিং এর অন্যান্য সদস্যদের এই লিঙ্ক দিয়ে মিটিং এ জয়েন করতে বলুন।
একজন প্রেজেন্টার এবং এডমিন হিসেবে মিটিং পরিচালনার অনেক ধরনের কন্ট্রোল থাকবে আপনার হাতে। সেগুলো ব্যবহার করুন।
মিটিং থেকে বেরিয়ে আসতে চাইলে বাম পাশে উপরে লাল রঙের টেলিফোন বাটনে ক্লিক করুন।

আর যারা lync meeting এ জয়েন করবেন তাদের কাজ আরো অনেক সহজ। তারা শুধু মাত্র লিঙ্কে ক্লিক করে মিটিং এ জয়েন করবেন।

যদি ব্রাউজারে lync ওয়েব প্লাগিন ইন্সটল না করা থাকে তাহলে পপ আপ উইন্ডো আসবে ৭ মেগাবাইটের একটা প্লাগিন ডাউনলোড করার জন্য। ডাউনলোড করে ক্লিক করে ইন্সটল করুন এবং মিটিং এ যোগদান করুন।
Lync অনলাইন মিটিং সম্পর্কে আরো বিস্তারিত জানতে চাইলে http://office.microsoft.com/en-001/lync-help/set-up-a-lync-meeting-HA102827058.aspx  এইখান থেকে ঘুরে আসতে পারেন।

 

পড়াশোনায় ফাঁকি অতঃপর …………….. :( :( :(

fakibaj student
ভার্সিটির শুরুর দিকের সেমিস্টার গুলোতে অনেক আজাইরা ফাউন্ডেসন কোর্স করানো হয়। যেমন, পড়তে আসছি কম্পু বিজ্ঞান, হাতে ধরায়া দিল রসায়ন, ক্যালকুলাস, যন্ত্র বিজ্ঞান, পদার্থ বিজ্ঞান। প্রথম দিকে বুঝতাম না, যে আসলেই এইগুলা পড়ে কি করব। কই আমাদেরকে শুরু থেকেই নানা ধরনের প্রোগ্রামিং ভাষা শিখাবে না !!!
সিলেবাস ঘেঁটে দেখলাম, পুরো ৪ বছরে সি, জাভা, এসেম্বলি ছাড়া আর কোন ভাষা শিখাবে না। মাঝখানে কি জানি এসকিউএল আছে। তাই ১-১ আর ১-২ ইউনিভার্সিটির সিলেবাস প্রনেতাদের গালাগালি করে পার করলাম। কীসব আজাইরা সাবজেক্ট পড়ায় কামের জিনিশ থুইয়া !!!! পেইন !!!! 😡

কিন্তু, ২-১ এ উঠার পরে চোখ কান আস্তে আস্তে খুলতে লাগল। যেই স্বপ্ন নিয়া কম্পু বিজ্ঞান পড়তে আসছি, পাস কইরা ফিরি লাঞ্ছিং দিয়ে বহুত টাকা পয়সা কামাব, তা আস্তে আস্তে ফিকে হতে লাগল। কারন বুঝতে পারছিলাম এতদিন অনেক ক্ষুদ্র স্বপ্ন দেখে এসেছি। জগতটা আরও অনেক বড়। আর বিশেষ ভাবে এই লাইনে যদি ক্যারিয়ার গড়তে চাই, তবে পাড়ি দিতে হবে এখনও বহু দূর !!!

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

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

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

এইভাবে বিভিন্ন ক্ষেত্রে অনুভব করছি যে এতদিন নিজেকে ফাঁকি দিয়ে কি বড় ভুলটাই না করলাম। যদি এইভাবেই ভার্সিটি লাইফ টা পার করে দেই, বা হয়ে যায়, তাহলে খোমাখাতায় চ্যাট করার সুবাদে যে টাইপিং স্পিড হাতে এসেছে, তা দিয়ে কোনরকমে একজন টাইপিস্টের চাকরি বাগায়ে নেয়া যাবে !!!

আরও অনেক কিছু অনুভব করি। আমি এইটা করতে চাই- ওইটা করতে চাই , কিন্তু করার জন্য যে আলস্য ভেঙ্গে কীবোর্ডে হাত চালাব আর মাথা টা একটু খাটাব, সেই দিকে কোন নজর নাই। আমার ইচ্ছা আছে যে আমি উন্নতি করব, কিন্তু সেইজন্যে আমার কোন চেষ্টা নাই !!! এমন অদ্ভুত স্ববিরোধীতা একমাত্র মানুষের পক্ষেই সম্ভব !!!! 😛

আরও একটা রোগ আছে। ভ্রমনে নাকি জ্ঞান বাড়ে। তাই সমানে ইন্টারনেট ব্রাউজ কর। মাসে হাজার টাকা বিল এই দুর্মূল্যের বাজারে। কিন্তু এখন বুঝি, ভ্রমনে জানা হয়, কিন্তু শিখা হয় ওই খাতা কলমেই, ফেসবুক যদি ব্লক করা না থাকে, তবে যতই এটেম্পট নাও, কোন লাভ নাই পিসির সামনে কোড করার আশা নিয়া বসাতে !!!!

কেউ যদি এই লেখা পড়ে থাকেন, এবং আপনার অবস্থাও যদি আমার মত হয়, তাহলে ভাই/বোন, এখনও সময় আছে, আসেন সাবধান হই। নইলে সামনে যে দুর্দিন আসছে,নিজের পায়ে দাঁড়ানো- সংসারের হাল ধরা – সংসার করা !!! 😛 😛 😛

আল্লাহ আমাদের সবাইকে এই আলস্যময়ফাঁকিবাজি থেকে উদ্ধার করুন, আমিন !!!!!!!!!!

SOLUTION FOR BANGLA FONTS ON YOUR COMPUTER!!!

Beng-অ (1)
I started surfing on net in 2003 , at that time i used to go to cyber cafe .There was no bangla content during that time on internet. I got my home PC net connected on 2009.Then I got chance for full time roaming around on net and discovered “OMA!!! there’s a lots of bangla stuffs on net now a days!!! it seems to me very useful having bangla contents.

বিস্তারিত পড়ুন

SOLUTION FOR BANGLA FONTS ON YOUR COMPUTER!!!

Beng-অ (1)
I started surfing on net in 2003 , at that time i used to go to cyber cafe .There was no bangla content during that time on internet. I got my home PC net connected on 2009.Then I got chance for full time roaming around on net and discovered “OMA!!! there’s a lots of bangla stuffs on net now a days!!! it seems to me very useful having bangla contents.

but for the first ,I could not see this bangla contents on my browser. i googled and found a solution.now i m gonna share that with u.

1. first i downloaded bangla unicode fonts from the following site:

www.omicronlab.com/bangla-fonts.html

2.then i downloaded and install AVRO from there

www.omicronlab.com/avro-keyboard-download.html

this softwere is actually for writing bangla, i want to help you out with a total bangla solution for your pc.

3.now copy the downloaded  bangla unicode fonts and paste them in  start>control panel>fonts

4.now , do another download.go to

www.omicronlab.com/tools/font-fixer.html

5.now open your browser.get urself in a site having bangla  contents.u may find ur bangla fonts are tiny.so open font fixer,select a font preferably vrinda or siyam rupali ,then click on fix it button.ur computer wants to be restarted?? let him be restarted 🙂

6.after restart , open ur browser and and go to a site having bangla content . u will be definitely amazed seeing your new,fresh,stunning bangla fonts !!!

7.from now on you can also write bangla , turn on your AVRO keyboard, press F12 or click on bangla on the AVRO panel at the top of your screen.

now just write BANGLADESH on your notepad.you will find on the notepad written as বাংলাদেশ .If there is any spelling mistake, you will get a suggestion window , select the exact spelling through up-down arrow keys or mouse. After selecting your desired spelling  press space or left/right arrow key to disappear the suggestion box.Don’t you worry!! do another spelling mistake and it will show up again !!!

This way you can solve ur bangla font problem in your computer !!!
HAPPY BANGLA NETTING!!!
😀