os x: keychain, what?

ว่าด้วยอีกโปรแกรมที่มีประโยชน์ใน mac os x ที่หลายๆคนอาจจะไม่รู้ว่ามันมีอยู่ มันคือโปรแกรม keychain access นั่นเอง ซึ่งหากใครใช้ os x แล้วสังเกตซักนิดจะเห็นว่าหลายๆโปรแกรมที่สามารถเก็บรหัสผ่านไว้ในเครื่องได้นั้น มันเก็บลงไปใน keychain ของตัว os ซึ่งโดยปกติเจ้า keychain นี้มันจะผูกอยู่กับ user account และมีความปลอดภัยในการเก็บรหัสผ่านสูงมาก

แต่นอกจากใช้เก็บรหัสผ่านจากโปรแกรมต่างๆแล้ว เจ้า keychain นี้มันยังมีอีกฟังก์ชั่นที่น่าสนใจ นั่นคือ Secure Note ก็ตรงๆตามชื่อเลย คือไว้จดโน๊ตที่ต้องการความปลอดภัย เช่นเก็บไฟล์รหัสผ่านที่ไม่ค่อยได้ใช้แล้วกลัวลืม หรือเก็บเบอร์โทรกิ๊ก เป็นต้น

การใช้งานก็ง่ายๆ สไตล์ osx นั่นคือ เข้าไปที่ Application > Utility > Keychain Access

keychain in utility

Read more

IE6 ให้(ช่องว่าง)คุณมากกว่า

ปรากฎการณ์ลึกลับที่เกิดขึ้นมากมายใน ie6 ทำให้คนทำเว็บอย่างเราๆต้องเสียเวลาไปมากในการมานั่งตามแก้ไข ซึ่งหนึ่งในปัญหาสำคัญที่เจอใน ie6 คือปัญหาที่เกี่ยวกับการใช้ float

กรณีศึกษา “กล่องหล่น”
ทดลองสร้างกล่อง 2 กล่อง กล่องละ 200px(รวมขอบแล้ว) อยู่ภายใต้กล่องขนาดใหญ่ขนาด 400px โดยให้ทั้งสองกล่อง float ไปทางซ้าย และกล่องแรกอยู่ห่างจากขอบด้านซ้าย 5 pixels

เมื่อดูใน ie8(และบราวเซอร์อื่นๆ) จะได้ผลลัพท์ที่ถูกต้อง ดังนี้

IE8 Boxes

แต่ถ้าดูใน ie6 หล่ะ?

โค้ทเดิม ใน IE6


งานเข้าหล่ะสิ มันเกิดอะไรขึ้นเนี่ย กรอบขนาด 400 ใส่กล่องขนาด 200 สองชิ้น ก็รวมเป็น 400 พอดี แล้วทำไมมันตกลงมาได้ ???!

ก่อนที่จะถอนหายใจเฮือกใหญ่แล้วเปลี่ยนใจกลับไปใช้ table ลองมาศึกษาปัญหาอย่างเป็นระบบ แล้วหาทางแก้ไขอย่างถูกต้อง(เท่าที่จะถูกได้ใน ie6) เพื่อชีวิตที่ดีกว่า
Read more

android: my first app

ไม่นานมานี้ได้มีโครงการกับเพื่อนๆว่าเราอยากจะทำเกมส์กัน  แต่พอเรียนจบมาทุกคนก็แยกย้ายไปทำงานทำการ ไม่มีใครมานั่งโต้รุ่งบ้าเกมส์ด้วยกันอีกต่อไป คราวนี้กลับมาคุยกันอีกครั้งพร้อมโปรเจคใหม่ว่าอยากลองทำเกมส์บนแพลทฟอร์มอื่นดูบ้าง ที่เห็นหลักๆก็มี Java(J2ME), iPhone และ Android ก็ถกเถียงกับอยู่นานจึงได้ข้อสรุปว่า ลองทำบนแอนดรอยดีกว่า เพราะบน iPhone เขาน่าจะมี apps มากมายแล้ว ประกอบกับต้องใช้ mac เขียน ซึ่งไม่ใช่ทุกคนจะมีเครื่อง พอตกลงได้ว่าจะทำบนแอนดรอยก็ไปหาเอกสารอ่าน ซึ่งกูเกิ้ลก็ทำไว้ค่อนข้างดี แล้วก็ดาวน์โหลด SDK และ Eclipse plugin มา ก็ได้เวลาเริ่มทำแอพชิ้นแรก ซ้อมมือก่อนทำเกมส์จริงจัง โดยภาษาที่ใช้เขียนคือ Java ซึ่งพอเป็นบ้างอยู่แล้ว ทำให้ต่อยอดได้ง่ายหน่อย

Read more

Wave, preview

Google เตรียมเปิดตัว Wave Preview ในวันพุธที่ 1 ตุลาคมนี้ และจะแจกแอคเคาท์แก่ผู้ใช้งานจำนวน 100,000 แอคเคาท์ โดยตามบล๊อคของกูเกิ้ลเวฟ ทางกูเกิ้ลมีแผนที่จะเปิดตัวเวฟภายในสิ้นปีนี้

แก้ไข วันพฤหัสที่ 1 ตค 13:30:
ได้ Account Wave Preview มาแล้ว เขามีให้เชิญคนอื่นต่ออีก 8 คน ก็ดีเหมือนกันจะได้ชวนเพื่อนๆมาเล่นกัน ความแตกต่างจาก Sandbox คืออินเตอร์เฟสดูสมบรูณ์มากขึ้น บักน้อยลง ลื่นขึ้น แล้วที่สำคัญคือเมนูดีบักหายไปแล้ว!!

Read more

จาก php ถึง ruby on rails

จากคนเคยหากินกับ php มาเนิ่นนานจนจำไม่ได้แล้วว่าเริ่มเมื่อไหร่ แต่ด้วยความอยากรู้อยากเห็นเลยตั้งโจทย์กับตัวเองไว้ว่าโปรเจคส่วนตัวชิ้นต่อไปจะใช้ภาษาอื่นที่ไม่ใช่ php ซะบ้าง ก็เริ่มมองหาหลายๆตัวเลือก โดยพิจารณาจริงจังที่ python, ruby on rails และ java แล้วก็ลองศึกษาดูว่ามันยังไงกันบ้างนะ ลองอ่านลองเขียนอยู่นานสุดท้ายก็มาลงเอยที่ ruby on rails ด้วยเหตุผลหลายๆอย่างที่พอมาคิดๆดูก็ไม่ค่อยมีเหตุผลเท่าไหร่ แต่เอาหล่ะ rails ก็ rails

Read more

google wave: first contact

google wave logoหลายๆคนคงเคยเห็นวีดีโอสาธิตการใช้งาน google wave จากงาน google i/o มาแล้ว ดูแล้วก็เป็นรูปแบบของการสื่อสารที่เจ๋งไม่ใช่เล่น เพราะสามารถเห็นข้อความที่พิมพ์คุยกันได้แบบ real time ไม่ต้องนั่งมอง “He is typing…” “She is typing…” อีกต่อไป อีกทั้งยังสามารถเพิ่ม “ของเล่น” ลงไปในข้อความสนทนาได้อีกด้วย เช่น เกมส์ poll ฯลฯ และไม่นานมากนี้ก็ได้ลองเล่นจริงๆซักทีหลังจากได้รับ wavesandbox account มาจาก google

Read more

php oop #2: สร้างและห่อหมีแพนด้า

จากโพสที่แล้ว php oop #1: panda class ว่าด้วยเรื่องการเขียน php oop แบบง่ายๆ แต่ดูไม่มีประโยชน์เท่าไหร่นัก เพราะถ้าดูดีๆมันก็ไม่ต่างจากเขียนฟังก์ชั่นเท่าไหร่ เลยมาว่าต่อถึงคุณสมบัติจริงๆของ object oriented บ้าง

เริ่มต้นจากอย่างแรกก่อน คือคอนเซปต์การ encapsulation หรือขอเรียกง่ายๆว่า การห่อ ซึ่งก็เป็นเหมือนการซ่อนข้อมูลภายในคลาสไว้ไม่ให้สามารถเข้าถึงได้โดยตรงจากส่วนอื่นๆของโปรแกรม ลองดูโค้ทกันเลยน่าจะง่ายกว่านั่งอธิบายให้ยืดยาว

class Panda{
   private $name;
   function eat(){
       echo "eating bamboo leaf";
   }
}

ก็เล่นกันง่ายๆเลย คือเปลี่ยนตัวแปร name ให้เป็น private ซะ คราวนี้การเรียกถึงตัวแปรแบบตรงๆอย่างที่เห็นในตัวอย่างที่แล้วก็จะไม่สามารถทำได้อีกต่อไป แต่เมื่อต้องการเรียกใช้เราก็อาจจะเพิ่ม method เข้าไป เช่น

function setName($pname){
   $this->name=$pname;
}
function getName(){
   return $this->name;
}

โดย method setName จะรับค่า name มาใน parameter ด้วย ส่วน getName จะไม่ทำอะไรนอกจาก return ค่าในตัวแปร name แล้วเวลาเรียกใช้ก็จะใช้วิธีเรียกหา method เช่น

$p1 = new Panda();
$p1->setName("Lin Hui");
echo $p1->getName();

จะเห็นว่า ถ้าเราไม่เขียน method get,set ขึ้นมาซะอย่าง ใครๆก็ไม่สามารถเข้าถึงข้อมูลภายในคลาสของเราได้ ซึ่งในแง่ของความปลอดภัยแล้ว การทำ encapsulation ถือว่ามีประโยชน์มากเลยทีเดียว
Read more

จากตาราง เปลี่ยนเป็น Div

วิธีง่ายๆที่จะเปลี่ยนจากการเขียน html layout โดยใช้ตารางมาเป็น css/div layout สำหรับคนที่กำลังลังเลที่จะใช้ css แทนตารางแบบเดิมๆ

ก่อนอื่นดูตารางก่อน

Table Layout


โค้ทของตาราง

This is Header
Main Menu-Menu1 Content goes here!This is content!

ดูแล้วก็ง่ายๆ ตามสไตล์ที่คุ้นเคย แต่ดูแล้วยุ่งยากใจพิลึก ทีนี้เราจะจับเจ้า layout ที่คุ้นเคยนี้แหละมาเขียนเป็น css
Read more

php oop #1: panda class

ว่ากันเรื่องการเขียนโปรแกรม php แบบ oop หรือ object oriented programming นั่นเอง

ก่อนจะไปว่ากันเรื่อง php ก็ต้องอธิบาย oop กันก่อน สำหรับคนที่คุ้นๆกันอยู่แล้วก็ข้ามไปได้เลย

เอาง่ายๆแบบไม่ยืดยาว oop คือการเขียนโปรแกรมที่ให้ความสำคัญกับ “วัตถุ” คุณสมบัติ และความสัมพันธ์ของมัน โดยมีศัพท์ที่ต้องรู้จัก ดังนี้

  1. Class(ชนิดของวัตถุ) เป็นเหมือนเทมเพลท เพื่อบอกว่าวัตถุชนิดนี้จะมีคุณสมบัติใดบ้าง โดยคุณสมบัติประกอบด้วย 2 อย่าง คือ สถานะ(state) และ พฤติกรรม(behavior)

    คลาส หมีแพนด้า มีสถานะคือ ชื่อหมี และมีพฤติกรรมคือ กินไผ่

  2. Object(วัตถุ) สร้างขึ้นมาจากคลาส โดยเมื่อเป็นวัตถุแล้ว state จะกลายเป็น instance variable(ตัวแปรนั่นแหละ) และ behavior จะถูกเรียกว่า method

    วัตถุ หมีแพนด้า ที่มีชื่อ หลินฮุ่ย สามารถ กินไผ่ ได้

นั่นคือ ถ้าพูดว่า “หมีแพนด้า” ขึ้นมาลอยๆโดยไม่ระบุวัตถุว่าเป็นแพนด้าตัวไหน มันก็จะไม่มีชื่อ และกินไผ่ไม่ได้ งงไหม? ถ้างงก็ลงไปดูโค้ท php กันเลย มันง่ายกว่า จริงๆ
Read more

ie6.png !

ไฟล์ .png กับการทำเว็บสมัยนี้เป็นของคู่กัน ซึ่งคนที่รู้จักกับมันแล้วจะลืม .gif ไปเลย หลักๆคือความสามารถในการทำให้ส่วนใดๆของภาพโปร่งแสง(transparent) และพื้นหลังใสได้อย่างสนิทใจ

แต่ปัญหามันก็เกิดกับบราวเซอร์ที่รักเจ้าเก่าของเรา ไม่ใช่ใครที่ไหน ie6 นั่นเอง สำหรับคนทำเว็บแล้วก็อยากจะลืมๆเจ้าบราวเซอร์นี้มันไปซะ แต่พอเหลือบมาดูสถิติ browser ที่ใช้กันในบ้านเราแล้วก็ไม่สามารถจริงๆ (Truehits.net::2008-11 IE6 51.1%) ดังนั้นก็ต้องมาตามแก้กันไป

วิธีทำให้ไฟล์ png แสดงผลได้อย่างปกติสุขใน ie6 นั้นมีหลายวิธีแล้วแต่ความถนัด สำหรับวิธีที่จะพูดถึงนี้ส่วนตัวแล้วชอบเพราะว่าไม่ต้องดัดแปลงโค้ทมากนัก ก่อนอื่นก็มาดูการแสดงผลไฟล์ png ของ ie6 เทียบกับ ie7 กันก่อน

Original PNG File

IE7

IE6 !!!

จะเห็นว่าใน ie6 นั้นส่วนพื้นหลังมันไม่ใสจริง แต่มีพื้นที่สีเทาๆมาทับ background(รูปไม้บรรทัด) ด้านข้างหมด คราวนี้มาดูวิธีแก้กัน

Read more