Social Networking and People these days

တစ်ရက်က Gymက အပြန်မှာ ဒီမှာရှိတဲ့ ဆရာတစ်ယောက်ရဲ့ သားလေး ဘောလုံးဆော့နေတာကို မြင်တော့ သူနဲ့ အတူတူ ကစားလိုက်သေးတယ်။ အဲ့ဒိကလေးက သုံးနှစ်ပြည့်ကာစလေးရှိသေးတယ်။ နောက် ဖုံးထုတ်ပြီး သူနဲ့ အတူတူ ဓါတ်ပုံရိုက်ပြီး အဲဒိကလေးဆီက ပြောလိုက်တဲ့ စကားကို ကြားတော့ တော်တော်အံ့သြသွားတယ်။ ကလေးပြောလိုက်တဲ့ စကားက ဒါပြီးရင် facebook ပေါ်တင်မှာလားတဲ့။

သူနဲ့ ခဏလောက်နေပြီး ညစာစားဖို့ လမ်းဘေးပလက်ဖောင်းမှာ ဖွင့်တဲ့ ဆိုင်တွေဘက် လမ်းဆက်လျှောက်ဖြစ်ခဲ့တယ်။ ထူးခြားမှုတစ်ခုတော့ မဟုတ်ပေမယ့် သတိထားမိတဲ့ အချက်တစ်ခုသွားတွေ့တယ်။ ထမင်းစား စားပွဲတွေမှာ အတွဲတွေ၊ သူငယ်ချင်း အုပ်စုလိုက်တွေ၊ မိသားစုတွေ တော်တော်များများ လက်ထဲမှာ ရှိတဲ့ blackberry, iphone, ipad တွေ ကိုယ်စီသုံးပြီး တစ်ယောက်နဲ့ တစ်ယောက် စကားမပြောကြတာ တွေ့ဖြစ်လိုက်တယ်။ ပြုံးမိတာ တစ်ခုက ကောင်လေးတစ်ယောက်က iphone နဲ့ facebook သုံးနေတာကို သူ့ကောင်မလေးက မေးထောက်ပြီး ထိုင်ကြည့်နေတာပဲ။

နည်းပညာတွေ တိုးတက်လာတယ်၊ ဆက်သွယ်မှုတွေ လွယ်ကူလာတယ် ဆိုပေမယ့် အခုအချိန်တွေမှာ online အသုံးပြုတာကို တတ်နိုင်သလောက် ရှောင်နိုင်ရင် ကောင်းမယ်လို့ ထင်မိတာပဲ။

Multi-Column

Multi-Column  ကို CSS အကြောင်းရေးတဲ့ ဆိုဒ်တွေမှာ တွေ့ဖူးတာတော့ကြာပြီ။ Multi-Column ဆိုတာက W3C အတည်မပြုရသေးတဲ့ CSS feature တစ်ခုပါ။ သတင်းစာတွေမှာ မြင်တွေ့နေရသလို စာတွေကို အလိုလျောက် ကော်လံခွဲပြီး အစီအစဉ်တကျ ဖေါ်ပြပေးသွားတာပါ။ နောက်ပိုင်း modern browser တွေဖြစ်တဲ့ firefox, chrome, opera, safari တို့မှာ prefix တွေသုံးပြီးရေးထားရင် browser က ကိုယ်သတ်မှတ်ပေးထားသလို စာတွေကို ကော်လံတွေခွဲပြီး ဖော်ပြပေးပါတယ်။

Multi-Column မှာ column-count, column-gap, column-rule ဆိုပြီး ရှိပါတယ်။

column-count

column ဘယ်နှစ်ခု ခွဲမယ်ဆိုတာကို ပြောပေးရတာပါ။ နှစ်ခု သုံးခုခွဲမယ်ဆိုရင် အောက်ကပုံစံအတိုင်းရေးပေးရပါတယ်။ အတည်မပြုရသေးတော့ prefix တွေထည့်ရေးရပါတယ်။ Firefox အတွက် -moz, Webkit engine တွေအတွက် -webkit

column-count: 2;
-moz-column: 2;
-webkit-column: 2;

column-gap

ကော်လံ တစ်ခုနဲ့ တစ်ခုအကြား အကွာအဝေးကို ဘယ်လောက်ထားမယ်ဆိုတာကို သတ်မှတ်ပေးရပါတယ်။

column-gap: 20px;
-moz-column-gap: 20px;
-webkit-column: 20px;

column-rule

ကော်လံတွေအကြားမှာ မျဉ်းကြောင်းဆွဲထားတာပါ။

column-rule: 1px solid #aaa;
-moz-column-rule: 1px solid #aaa;
-webkit-column-rule: 1px solid #aaa;

column-rule ကို အပေါ်ကလို မဟုတ်ပဲ တစ်ခုချင်း ထပ်ပြီး ပြန်ရေးချင်ရင် column-rule-width, column-rule-style, column-rule-color ဆိုပြီး ပြန်ရေးလို့ရပါတယ်။

Multi-Column ကို အတည်မပြုရသေးပေမယ့် အတည်ပြုခဲ့ပြီးရင်လဲ နောက်ပိုင်း web design မှာ တော်တော်လေး အသုံးများလာမယ့် သဘောရှိပါတယ်။ Multi-Column နဲ့ပါတ်သက်လို့ ဆက်ပြီး လေ့လာဖို့ အောက်မှာ Multi Column နဲ့ပါတ်သက်တဲ့ ဆိုဒ်တွေကို ညွှန်းလိုက်ပါတယ်။

Multi-Column related Articles

Making Soft tone Vintage Retro Photo

vintage-soft-tone-side-by-side

ကိုဖြိုးပုံတွေကို ဘယ်လိုပြင်တာတုန်းလို့  အသိတစ်ချို့က ကျွန်တော့်ကို မေးလေ့ရှိတယ်။ ကျွန်တော်လဲ တတ်နိုင်သလောက်တော့ ရှင်းပြပါတယ်။ Chat ထဲမှာ ရိုက်ပြတော့ သိပ်အဆင်တော့ မပြေဘူး။ Tutorial လေးတစ်ခုလောက် ရေးမယ်၊ ရေးမယ်လို့ စိတ်ကူးမိတာလဲ ခဏခဏပဲ။ တကယ်တမ်းလုပ်တော့မယ်ဆိုရင် screen snapshot လုပ်ဖို့ ပျင်းတာရယ်၊ စာရေးဖို့ပါ ပျင်းလို့ မလုပ်ဖြစ်တာကလဲ များတယ်။ ဒီတစ်ရက်တော့ Edit လုပ်ရင်း step by step ရှင်းပြနိုင်အောင် ပုံတွေပါ screen snapshot ရိုက်ပြီး တင်လိုက်ပါတယ်။

မစခင်မှာ သိထားရမှာပါ ပုံတိုင်းလဲ ဒီလိုပုံစံထွက်လာချင်မှ ထွက်လာမှာပါ။ နဂိုမူရင်းပုံမှာ ပါနေတဲ့ အရောင်တွေ ပေါ်မှာ မူတည်ပြီး ပြောင်းလဲနိုင်ပါတယ်။

Step 1

ပြင်ချင်တဲ့ပုံကို Photoshop မှာဖွင့်ပါ။

Step 2

Layer Windows မှာရှိတဲ့ Create new fill or adjustment layer ကိုနှိပ်ပြီး Curves … ကိုရွေးလိုက်ပါ။ (Layers Window မမြင်ရဘူးဆိုရင် F7 ကိုနှိပ်ပါ။)

Step 3

Layers Windows မှာ Curves ကိုရွေးပြီး Adjustment Windows မှာရှိတဲ့ Red Channel ကိုရွေးပါ။ ​Mouse ကိုဖိဆွဲပြီး အောက်က ပုံစံအတိုင်းဆွဲပါ။ (Red channel ကိုအ​ပေါ်ဆွဲတင်ရင် အနီများလာပြီး၊ အောက်ကိုဆွဲရရင် အစိမ်းရောင်တွေ များလာပါတယ်။)

Step 4

Green ကိုရွေးပါ။ အောက်မှာ မြင်ရတဲ့ ပုံစံကို ရအောင်လုပ်ကြည့်ပါ။

Step 5

နောက်ဆုံးအဆင့်အနေနဲ့ Blue channel ကိုရွေးပါ။ Blue Channel မှာ ညာဖက်ကနေအောက်ကိုဆွဲချရင် အဝါရောင် ပိုများလာပါတယ်။

Step 6

နောက်တဆင့်အနေနဲ့ Layer Windows ကိုပြန်သွားပြီး Create new fill or adjustment layer ကိုနှိပ်ပါ။ ဒီတစ်ခါ Hue/Situation… ကိုရွေးပါ။

Step 7

Adjustment Windows မှာ Hue, Situation, Lightness ကိုအောက်မှာ မြင်ရတဲ့အတိုင်းရွှေ့ပေးပါ။ Colorize ကို tick လုပ်ပေးပါ။ နောက် Layer Windows မှာ Hue/Situation layer ကို opacity ကို ချိန်ညှိပေးပါ။ ကျွန်တော်ကတော့ 30% ပဲထားလိုက်ပါတယ်။

Step 8

ဒီအဆင့်မှာတင် ရပ်ရင်တော့ ရပ်လို့ရပါတယ်။ နောက်တစ်ခု ကျွန်တော်ထပ်ထည့်ချင်တာက Gradient Map ပါ။ Gradient map က သူ့မှာ ပါဝင်နေတဲ့ အရောင်တွေပေါ်မူတည်ပြီး ပုံရဲ့ tone အနေအထားကို ပြောင်းလဲပစ်နိုင်ပါတယ်။

Step 9: Final

Adjustment windows မှာ Pastel tone ကာလာတွေလိုက်ရှာပါ။ (မတွေ့ဘူးဆိုရင် > icon လေးကို နှိပ်ပြီး Pastels ကိုနှိပ်လိုက်ပါ။) အောက်မှာမြင်နေရတဲ့ pastel color ပုံစံကိုရွေးပြီး Layers Windows မှာရှိတဲ့ Gradient map ကိုနှိပ်ပါ။ opacity ကို 10% လောက်ဖြစ်ဖြစ်ထားလိုက်ပါ။ ဒီလောက်ဆိုရင် လိုချင်တဲ့ vintage retro effect ရလောက်ပါပြီ။ ဒီ tutorial မစခင်က ပုံတိုင်းလဲ ဒီလိုထွက်ချင်မှ ထွက်ပါလိမ့်မယ်။ အဓိကကတော့ ဓါတ်ပုံမှာ ပါဝင်နေတဲ့ အရောင်တွေနဲ့ ပါတ်သက်နေပါတယ်။ ကျွန်တော်ပြောသလို

Before

After

unfinished tasks

Programming လေ့လာနေတုန်း လုပ်ဖြစ်ခဲ့တာတွေက commercial ထုတ်ထားတဲ့ software ဖြစ်ဖြစ် web application တွေကို inspire ဖြစ်ပြီး ရေးခဲ့တာပါပဲ။ English Myanmar Typing Tutor ကို ၂၀၀၁ ဝန်းကျင်လောက်က ထုတ်ဖြစ်တယ်။ ၂၀၀၅ လောက်က social network (အဲ့ဒိတုန်းက friendster က တော်တော်လေး ဟော့ဖြစ်နေတဲ့အချိန်) လိုမျိုး တစ်ခုရေးဖြစ်ခဲ့တယ်။ နောက်ပိုင်း CMS အသေးစားလေးတွေ ရေးဖြစ်ခဲ့တယ်။ ပြီးခဲ့တဲ့ နှစ်က blogging Engine တစ်ခုကို လုပ်ဖြစ်ခဲ့သေးတယ်။ အဲဒိလိုရေးဖြစ်ခဲ့တဲ့အထဲမှာ သဘောကျမိတာက Basecamp လို ​Project management ကို ကိုယ့်ဘာသာပြန်ရေးဖြစ်တာပါပဲ။

အဲဒိလိုတွေရေးဖြစ်ပေမယ့် အခုနောက်ပိုင်းမှာ အပြီးသတ်လက်စ မသတ်နိုင်ခဲ့ဘူး။ full time အလုပ်ရှိနေတာရယ်။ အားလပ်ချိန်မှာ အပိုဝင်ငွေရဖို့ လုပ်နေတာရယ်။ နောက် အားကစားလုပ်လိုက်၊ တစ်ခြားကိစ္စတွေအတွက် အချိန်ပေးလိုက်နဲ့ ဘယ်တော့မှ ပြီးပြတ်အောင်မလုပ်နိုင်တော့ဘူး။ အရင်နှစ်ကလဲ BlackBerry mobile phone ပေါ်မှာ မြန်မာလို မြင်ရအောင် ကြိုးစားရေးပြီး BlackBerry အတွက် English Myanmar Dictionary app ရေးဖြစ်တယ်။ နောက်ပိုင်း BlackBerry လဲ အသစ်တွေထွက်ထွက်လာလိုက် OS တွေအသစ်တွေထွက်လာတော့ လိုက်ပြီး update version မရေးပေးနိုင်ခဲ့ဘူး။

အဲဒိလို ဖြစ်တော့ ကိုယ့်ကိုယ်ကို ပြန်လည်စမ်းစစ်ကြည့်မိတယ်။ ကိစ္စတစ်ခုခုကို သေချာအလေးအနက်ထားပြီး ဘယ်အချိန်စမယ်၊ ဘယ်အချိန်မှာ ပြီးအောင်လုပ်မယ်လို့ အစီအစဉ်မဆွဲခဲ့တာလဲပါတယ်။ တစ်ခါတလေ စိတ်နှစ်ပြီး တစ်ခုခုကို လုပ်နေပေမယ့် အကြောင်းအရာ နောက်တစ်ခုက ပေါ်လာပြီး အဲဒိဘက်ကို အလေးပေးလိုက်တော့ လက်ရှိလုပ်နေတဲ့ဟာကို ရပ်လိုက်ရတယ်။ အဲဒါကြောင့် ဘာတစ်ခုမှ ပြီးပြတ်တယ်ဆိုတာမရှိဘူး။ ဒါပေမယ့် ဒီနှစ်ထဲမှာတော့ အဲဒိလို မဖြစ်ရအောင် သေသေချာချာ အစီအစဉ်တွေဆွဲမှလို့ ကိုယ့်ကိုယ်ကို အမြဲသတိပေးနေရတယ်။

Integrating Facebook API with CodeIgniter

ကျွန်တော်တို့ Facebook API ကို authentication အနေနဲ့ဖြစ်ဖြစ် status update တို့လုပ်ဖို့ပဲဖြစ်ဖြစ် သုံးလေ့ရှိပါတယ်။ တစ်ရက်က CodeIgniter နဲ့ app တစ်ခုရေးနေရင်းက Facebook API နဲ့ပါသုံးဖို့ လိုလာတော့ အွန်လိုင်းမှာ လိုက်ရှာကြည့်ရင်းကနေ တစ်ချို့ ဘလော့ဂ်တွေက ဘယ်လိုလုပ်ရမယ်ဆိုတာ သေချာရှင်းထားတာ သွားတွေ့တယ်။ ပုံမှန် Facebook API ကို PHP မှာ require သို့မဟုတ်လဲ include သုံးပြီးရေးလေ့ရှိပေမယ့် CodeIgniter လို framework မှာ သုံးရင် အဲဒိလိုရေးတာက သိပ်အထာတော့ မကျဘူး။ အဲဒါနဲ့ပဲ ရှင်းပြထားတဲ့ အတိုင်းလုပ်ဖြစ်တယ်။

facebook codeigniter

ပထမ လိုအပ်ချက်က Facebook API (PHP) ကို အရင် download လုပ်ပါ။ Facebook API မှာ ပါလာတဲ့ file သုံးခု facebook.php, base_facebook.php, fb_ca_chain_bundle.crt ကို application/libraries ထဲထည့်ပါ။ နောက် application/config folder မှာ facebook.php ဆိုပြီး file အသစ်တစ်ခုလုပ်လိုက်ပါ။ အဲဒိ facebook.php မှာ အောက်က ကုဒ်ရေးပါ။

facebook.php under application/config

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');

$config['appId']  = ''; /* your facebook app ID */
$config['secret'] = ''; /* your facebook app secret code */

Loading Facebook library from Controller

ကိုယ်သုံးမယ့် Controller မှာ facebook library ကိုသုံးရင် CodeIgniter မှာ library တွေကို ခေါ်သလို

$this->load->library('Facebook', $config);

Autoloading

Controller တိုင်းမှာ ခဏခဏ သုံးနေမယ်ဆိုရင်တော့ autoload.php မှာ  အောက်ကအတိုင်း ရေးလိုက်ရုံပါပဲ။

$autoload['libraries'] = array('facebook');