Blog

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
- Introduction to CSS2 Multi Column Module from A List Apart
- CSS Multi-column Layout Module from W3.org
- CSS Multi Column cross browser javascript
- Using CSS Multi Column Layout from Mozilla Developer Network
March 14, 2012
Making Soft tone Vintage Retro Photo

ကိုဖြိုးပုံတွေကို ဘယ်လိုပြင်တာတုန်းလို့ အသိတစ်ချို့က ကျွန်တော့်ကို မေးလေ့ရှိတယ်။ ကျွန်တော်လဲ တတ်နိုင်သလောက်တော့ ရှင်းပြပါတယ်။ 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

March 12, 2012
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 မရေးပေးနိုင်ခဲ့ဘူး။

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

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

ပထမ လိုအပ်ချက်က 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');
```
March 6, 2012
Windows 8 Consumer Preview

Windows 8 Consumer Preview ထွက်နေတယ်လို့ ဒီတလောသိရပေမယ့် မစမ်းဖြစ်လိုက်ဘူး။ ဒီနေ့မနက် အချိန်ရတုန်းလေး Virtual Box မှာသွင်းပြီး စမ်းလိုက်တယ်။ 1GB memory share လုပ်ပြီး Virtual Box မှာသွင်းတာ သိပ်တောင်မကြာဘူးလို့ပဲ ပြောရမယ်။ Windows 8 Install လုပ်နေတုန်း Screen snapshots တွေသိမ်းဖို့မေ့သွားတယ်။ Start up screen မလာခင် Account ကို Hotmail နဲ့ချိတ်ပြီး ဖွင့်ခိုင်းတာနဲ့ ဖွင့်လိုက်တယ်။ အဲဒိလိုလုပ်တဲ့အတွက် start up screen ရဲ့ messaging, email, people contacts, calendar နဲ့ တစ်ခြား app တေွမှာ ကိုယ့်အကောင့်နဲ့ ပါတ်သက်တာတွေ ပေါ်နေပါတယ်။

Myanmar Input Language and Bugs

Install စစခြင်းမှာ Input method မှာ မြန်မာပါလာပါတယ်။ ဒါပေမယ့် Format settings မှာ မြန်မာကို ရှာမတွေခဲ့ဘူး။ Default အနေနဲ့ မြန်မာစာ လုပ်ထားတဲ့အတွက် စာရိုက်တဲ့အခါမှာလဲ မြန်မာကစပါတယ်။ English input ပြောင်းချင်ရင် Left Control + Shift နဲ့ပြောင်းရုံပါပဲ။ မြန်မာလို စာနည်းနည်း ရိုက်ကြည့်တော့ သဝေထိုး အရင်ရိုက်ရတယ်ဆိုတာ သိသွားတယ်။ တစ်ခြား စမ်းသုံးကြည့်သူတွေတော့မသိဘူး။ ရိုက် (yike, eng: “type“) ကိုရေးတဲ့အခါမှာ တစ်ချောင်းငင်က အရှည်ပဲ ဖြစ်နေပြီး ရ က အတိုကိုပြတ်မသွားဘူး။ “ရှာ လို့” (ကို ခွဲရေးရင်ရပေမယ့်) ရှာနဲ့ လို့နဲ့ တွဲရေးရင် (ရှာလိုု့) တစ်ချောင်းငင်က “ရ”မှာရောက်သွားပြီး ရ အတိုဖြစ်သွားတယ်။ WordPress text editor မှာရေးနေရင်းကနေ ဖျက်လိုက်ပြုလိုက်လုပ်ရင် ရေးခဲ့စာတွေ နှစ်ခေါက် ထပ်ကုန်တယ်။ ကျွန်တော့်ဘက်ကပဲဖြစ်တာလား မသိဘူး။ အခုရေးနေရင်းကနေ (“နှစ်ခေါက်” “ထပ်ကုန်”) ကို တွဲရေးရင် “နှ”က “နှု” ဖြစ်သွားတယ် (“ကုန်” နေရာမှာ “က” ကြီးပဲ ကျန်ခဲ့တယ်)။ နောက်တစ်ခု သတိထားမိတာက “တွေ” ကိုရိုက်တဲ့ အခါမှာ windows 8 မှာ ဘာမှမဖြစ်ပေမယ့် Windows 7 မှာ ပြန်ကြည့်တော့ (တေ ွ) ဖြစ်နေတယ်။ (windows 7 ကနေပြောင်းကြည့်မှ သတိထားမိတယ်။)

Screenshots

နောက်တော့ Windows explorer ဖွင့်ပြီး မြန်မာစာနဲ့ ပါတ်သက်သမျှတွေကို snapshots တွေရိုက်ထားလိုက်တယ်။

အဓိက မျှော်လင့်တာကတော့ အပြီးသတ်မထွက်ခင် မြန်မာစာနဲ့ ပါတ်သက်ပြီး perfect ဖြစ်စေချင်ပါတယ်။ (အခု ဒီစာကို Windows 8 ကနေပါလာတဲ့ မြန်မာ ကီးဘုတ်နဲ့ပဲ ရေးတင်လိုက်တာပါ)

March 5, 2012