Pipes

by pittaya

ลองเช็คสถิติจาก google reader พบว่า Feed ที่อ่านบ่อยที่สุด คือ feed ข่าวกีฬาจากเวบผู้จัดการ (ราวๆ 30 ข่าวต่อวัน) แต่ว่า feed ตัวนี้มันเป็น “ข่าวกีฬา” แบบรวมๆ ทำให้มีข่าวที่ไม่สนใจจะอ่านโผล่มาให้เห็นอยู่เรื่อยๆ เช่นข่าวเทนนิส, แข่งรถ, NBA, NFL อะไรพวกนี้ ซึ่งไม่ได้สนใจจะอ่านเลย ที่อยากอ่านมีแต่ข่าวฟุตบอลอย่างเดียว

ก็เลยมานั่งคิดดูว่า ทำยังไงถึงจะ filter เอาข่าวที่ไม่สนใจพวกนี้ออกไปได้ สุดท้ายก็มาปิ๊งไอเดียว่า ใช้ Yahoo Pipes ดีกว่า

Yahoo Pipes เป็นบริการสำหรับ ตัด ต่อ ผสม ข้อมูลที่อยู่บนเวบในรูปแบบต่างๆ (ทั้ง feed, csv, xml ฯลฯ) ขั้นตอนการทำก็คือ จับเอาโมดูล Fetch feed มาวางก่อน แล้วใส่ URL ของ feed ที่เราต้องการลงไป (ในกรณีนี้คือ feed ข่าวของผู้จัดการ) จากนั้นก็ต่อ output ของ Fetch feed มาลงที่โมดูล Filter แล้วใส่กฎให้มันบล็อกทุก item ที่ใน description มีคำว่า “บาสเกตบอล” หรือ “เทนนิส” อยู่ สุดท้ายก็ต่อ output ออกไปที่ Pipe output

เท่านี้เราก็ได้ feed ข่าวกีฬาที่ไม่มีข่าวบาสเกตบอล และข่าวเทนนิสแล้ว (ด้วยวิธีลูกทุ่งๆ หน่อย คิดวิธีหรูกว่านี้ไม่ออก) แต่พอลองเปิดดูเนื้อหา feed ดูแล้วพบว่า มันอ่านไม่ออก ก็ต้องย้อนไปดูที่ feed ต้นฉบับซึ่งก็เป็นอย่างที่คิด คือ มันใช้ encoding แบบ Windows-874 พอดูดเข้าไปใน yahoo pipes ที่มันเป็น UTF-8 มันก็เลยออกมาอ่านไม่ออก

ไปดูในโมดูลต่างๆ ที่มีให้ใช้ ก็ไม่เห็นมีโมดูลสำหรับแปลง encoding (ท่าทาง yahoo คงคิดว่าโลกนี้เค้าใช้ utf-8 กันหมดแล้ว) ทางแก้ที่พอคิดออกคือ แปลง feed จาก windows-874 ให้กลายเป็น utf-8 ก่อน แล้วค่อยเอาใส่ pipes ก็เลยต้องเขียน script ขึ้นมาทำเอง ประมาณนี้

< ?php
$content = @file_get_contents("http://www.manager.co.th/RSS/Sport/Sport.xml");
header("Content-Type: text/xml; charset=utf-8");
echo iconv('cp874', 'utf-8', $content);
?>

แล้วก็ให้โมดูล Fetch feed ของ pipes มาดึงเอาจาก script ตัวนี้แทน

Yahoo Pipes

ประมาณเอาคร่าวๆ ก็ลดจำนวนข่าวจาก feed นี้ไปได้เกือบครึ่งเลย

Vote NO on Facebook

by pittaya

ใครใช้ Facebook สามารถแปะแบนเนอร์ we vote no ในหน้า profile ได้แล้ว เพียงแค่ add “We Vote No” application

We Vote No

App ตัวนี้จะสุ่มแบนเนอร์ (มีอยู่ 6 แบบ - แนวนอนกับแนวตั้ง อย่างละ 3 รูป) ขึ้นมาแสดง ถ้าคลิกที่แบนเนอร์ก็จะลิงค์ไปที่เวบ wevoteno

เสียดายที่ app ตัวนี้อายุมีแค่ 2 วัน พอหลังจากวันลงปาหี่มติก็ล้าสมัยไปแล้ว น่าจะทำออกมาเร็วกว่านี้

ปกติแล้ว python ที่ติดมากับ Mac OS X จะไม่มี module สำหรับติดต่อกับ MySQL database ทำให้เวลาที่ต้องการจะใช้งานผ่านทาง python ต้องติดตั้ง module MySQLdb เสียก่อน วิธีติดตั้งคือ

  • ไปโหลด source module มาก่อนที่ http://sourceforge.net/projects/mysql-python/ อันที่โหลดมาเป็นเวอร์ชัน 1.2.2
  • untar ออกมาจะได้ source อยู่ในไดเรกทอรีนึง
  • แก้ไฟล์ setup_posix.py จากที่ว่า

    mysql_config.path = “mysql_config”

    แก้เป็น

    mysql_config.path = “/path/to/your/mysql_config”

  • สั่ง build ด้วยคำสั่ง

    $ python setup.py build

  • install module ด้วยคำสั่ง

    $ python setup.py install

  • เวลาเรียกใช้งานก็ import เข้ามาตามปกติ

    Python 2.3.5 (#1, Jan 13 2006, 20:13:11)
    [GCC 4.0.1 (Apple Computer, Inc. build 5250)] on darwin
    Type “help”, “copyright”, “credits” or “license” for more information.
    >>> import MySQLdb

ลองนั่งแก้ theme ของหน้าบ้านตัวเองใน multiply.com โดยระบบ theme ของ multiply อนุญาตให้ผู้ใช้แก้ไขได้เฉพาะ Stylesheet ของหน้าเวบเท่านั้น ดังนั้นการออกแรงแก้ไขหน้าตา จึงต้องใช้ความรู้เรื่อง CSS selector ค่อนข้างเยอะ แต่พอดีช่วงนี้พอมีเวลาทำอะไรไร้สาระอยู่บ้าง ก็เลยมานั่งทำดูจนได้ผลลัพธ์ออกมาแบบนี้

Pittaya’s Multiply

ลำพังแค่การนั่งแก้ CSS อัพโหลดขึ้นไปใหม่ รีเฟรชหน้าเวบ แล้วกลับมาแก้ต่อ มันจะกระบวนการที่โหดร้ายมาก แต่ถ้าเราลองค้นดูดีๆ มันก็มีเครื่องไม้เครื่องมือที่ช่วยให้การทำเวบง่ายขึ้น โดยโปรแกรมที่ใช้ในปฏิบัติการครั้งนี้ประกอบด้วย

  1. Mozilla Firefox - สุดยอดเวบบราวเซอร์ ปลอดภัย ว่องไว ความสามารถเพียบ โหลดได้ฟรี!
  2. Firebug - เป็นส่วนขยายเพิ่มเติมของ Firefox ทำให้การเขียน แก้ไข debug เวบ กลายเป็นเรื่องง่ายอย่างที่ไม่เคยเป็นมาก่อน แค่ extension ตัวนี้ตัวเดียว ก็ทำให้ Firefox เจ๋งกว่า IE ประมาณหนึ่งล้านเท่าตัว
  3. Tango Icon - ชุดไอคอน Tango จากโครงการ freedesktop รวมชุดไอคอนสวยๆ สำหรับใช้งานได้ฟรี (ลิขสิทธิ์แบบ CreativeCommons)
  4. The Gimp - โปรแกรมตกแต่งตัดต่อภาพ โหลดมาใช้งานได้ฟรี ไม่เสียค่าใช้จ่าย ไม่ละเมิดลิขสิทธิ์ ไม่ต้องใช้โปรแกรมแพงๆ อย่าง Photoshop ก็สร้างสรรค์ผลงานได้
  5. Textmate - Text Editor สำหรับใช้เขียนโปรแกรมบน Mac OS X กัดฟันซื้อมาราคา 39 ยูโร แต่ใช้คุ้มจริงๆ

ปกติใน php เวลาที่มีการเรียกใช้คำสั่ง session_start() จะเป็นการสั่งให้ php เก็บข้อมูลสำหรับ session นั้นๆ ของผู้ใช้ ซึ่งปกติจะเก็บเป็นไฟล์ไว้ที่ไดเรกทอรี /tmp (แก้ไขตำแหน่งที่เก็บได้ใน php.ini) หรือาจเปลี่ยนวิธีการเก็บไปใช้ shared memory หรือ database ก็ได้ (หรือ storage ใดๆ ตามแต่จะคิดก็ได้)

ข้อมูลส่วนที่เก็บไว้ตรงนี้ ก็คือค่าที่อยู่ในตัวแปร $_SESSION ของผู้ใช้แต่ละคนนั่นเอง ที่เวบปกติจะเก็บค่าตรงนี้ไว้ ก็เพื่อใช้ในประโยชน์ต่างๆ เช่น การล็อกอินเข้าระบบสมาชิก ต้องเก็บข้อมูล member_id กับ member_name ไว้ตลอดทั้ง session ที่สมาชิกเข้ามาใช้งาน

วิธีนี้มันก็มีข้อดีตรงที่ง่าย แต่ปัญหาคือมันต้องมีการอ่านและเขียนฮาร์ดดิสก์เสมอเมื่อมีการเรียกฟังก์ชัน session_start() ซึ่งมันไม่ค่อยดีถ้ามีการใช้งานเยอะๆ และทำให้การขยายระบบทำได้ลำบาก

วิธีเก็บข้อมูลของผู้ใช้ที่ล็อกอินเข้ามาโดยไม่ต้องเก็บลง session สามารถเก็บได้อีกวิธีนึงคือใช้ cookie แต่ข้อเสียของ cookie คือว่า ข้อมูลจะถูกเก็บที่ฝั่งผู้ใช้ ทำให้ผู้ไม่หวังดี อาจจะเปลี่ยนแปลงข้อมูลตรงนี้เพื่อหลอก server ก็ได้ ดังนั้นเพื่อแก้ปัญหาอันนี้ เราก็จะเข้ารหัส cookie ซะโดยใช้วิธีแบบนี้

// สมมุติเราจะเก็บ $member_id กับ $nickname
$data = $member_id."-".$nickname;
// เก็บเวลาไว้ด้วย
$time = time();
// เข้ารหัสซะ
$signed = sha1($secret.$time.$data);
// เอาตัวนี้เก็บใน cookie
$cookie = base64_encode("$signed-$time-$data");

เวลาจะแกะข้อมูลออกมาก็

// แกะออกมาจากที่มัน encode ไว้
$parts = explode("-", base64_decode($cookie), 2);
// เอาทั้งส่วนมา 1 กับ 2 มา sha1 ดูว่าเท่ากับส่วนที่ 0 หรือเปล่า
if (sha1($secret.$parts[1].$parts[2]) == $parts[0]) {
// cookie ถูกต้อง
$data = $parts[2];
// session หมดอายุหรือยัง
if (time() - $parts[2] > 60*60*2) {
// session อยู่มานานเกินสองชั่วโมงแล้ว
}
} else {
// cookie โดนแอบแก้
}

อ่านมาจาก slide ของ Cal Handerson

max-height

by pittaya

อีกหนึ่งความเลวร้ายของ IE คือมันไม่ support คุณสมบัติ max-height ของ CSS

max-height ใน CSS จะเป็นตัวกำหนดความสูงมากที่สุดที่ element อันนั้นจะยอมได้ ถ้าเนื้อหาที่บรรจุใน element มันยาวเกิน ก็จะมี scrollbar โผล่มาให้เลื่อนๆ เอง บราวเซอร์เกือบทั้งหมดทำแบบนี้ได้ ยกเว้น IE ที่ชอบทำอะไรตามใจตัวเอง วิธีแก้มันเลยต้องเขียนอะไรพิลึกๆ แบบนี้

#mydiv {
max-height: 250px; /* CSS-compliant browser */
height: expression(this.scrollHeight > 250 ? "250px" : "auto"); /* for IE only ! */
overflow: auto;
}

ไม่ค่อยชอบวิธีแบบนี้เท่าไหร่ ดูแล้วมันไม่ elegant เลย

เห็นเพื่อนฝูงคนถ่ายรูปเค้าเล่นเวบ multiply.com กันเป็นล่ำเป็นสัน ท่าทางก็ดูมีฟีเจอร์เยอะและเป็น community ดี เมื่อก่อนตอนที่มันเพิ่งฮิตก็ไปสมัครไว้ลองเล่นกับเค้าเหมือนกัน แต่เท่าที่ดูแล้วมัน customize ได้ไม่ตรงใจเท่าไหร่ รวมทั้งฟีเจอร์เรื่องแปะรูปก็ยังสู้ของ Flickr ไม่ได้ และที่สำคัญคือผมเป็นคนขี้เกียจ มีบล็อกอยู่ที่เดียวยังไม่ค่อยจะได้อัพเดตเท่าไหร่เลย ถ้าจะให้ไปอัพเดตที่นั่นด้วย คงไปไม่รอด

พยายามคิดหาวิธีที่จะทำให้โพสที่ dogpositive นี่ไปขึ้นที่ multiply ได้เองโดยอัตโนมัติ ก็เลยมาลองดูว่า multiply มี publish API อะไรให้ใช้หรือเปล่า ผลปรากฏว่าไม่มี… ไม่เป็นไร โชคดีที่มันยังมีฟีเจอร์โพสผ่านทาง email โดยคอนเซปต์มันก็คือ ให้เราส่ง email ไปที่ address ซักอันนึงที่กำหนด แล้วมันจะเอาขึ้นโพสให้

ทีนี้ก็มาคิดต่อว่า ทำยังไงเวลาเราเขียนบล็อกแล้ว มันจะอีเมลไปให้เอง จะตั้งเวลาให้โปรแกรมมาวนอ่าน feed แล้วส่งอีเมลมันก็พอได้ แต่มันไม่ real time และดูจะไม่ค่อยสวยเท่าไหร่ คิดไปคิดมา ก็มาลงตัวที่การเขียน plugin ให้กับ wordpress เพื่อ hook action การ publish_post น่าจะเป็นวิธีที่ elegant ที่สุด

เปิด document ของ plugin development ในเวบ wordpress ดูแล้วก็ลองเขียนแบบ dirty หน่อย ก็ได้เป็น plugin แบบปรับแต่งอะไรไม่ได้มาตัวนึง คือจริงๆ แล้วมันควรจะมี panel ของ plugin ตัวนี้มาให้แก้ได้ว่าจะให้ส่งอีเมลไปที่ address ไหน แต่ว่าขี้เกียจอ่าน document ก็เลยเขียน hardcode ไปดื้อๆ ได้ออกมาประมาณนี้

< ?php
/*
Plugin Name: Publish to Multiply
Plugin URI: http://pit.dogpositive.com/blog/
Description: Email the published post to multiply.
Author: Pittaya Sroilong
Version: 0.1
Author URI: http://pit.dogpositive.com/blog/
*/
function email_multiply($pid) {
$to = "secret_pin_at_username_dot_multiply_dot_com";
$post = get_post($pid);
if ($post->post_date == $post->post_modified) {
$subject = ‘=?utf-8?B?’.base64_encode($post->post_title).’?=’;
$msg = $post->post_content;
$headers = “Content-Type: text/html;charset=utf8″;
mail($to, $subject, $msg, $headers);
}
return $pid;
}
add_action(’publish_post’, ‘email_multiply’);
?>

เซฟไฟล์แล้วเอาไปใส่ใน wp-content/plugins/ จากนั้นไป activate ใน plugin panel เพื่อใช้งาน

ว่างๆ จะไปเยี่ยมชมก็ได้
http://pittaya.multiply.com

Beginning LaTeX

by pittaya

ข้อกำหนดในการเขียนวิทยานิพนธ์ของมหาลัยที่เรียนอยู่ เค้ากำหนดว่าต้องเขียนตามรูปแบบมาตรฐานของเค้า แต่ไอ้ “รูปแบบมาตรฐาน” ที่เค้าบังคับดันไม่มีการเขียนกำหนดไว้ชัดเจนว่า ใช้ฟอนต์ขนาดเท่าไหร่ เว้นระยะขอบเท่าไหร่ แต่กลับมักง่ายด้วยการให้คนเขียนดาวน์โหลด template ไปใช้เอง ซึ่ง template ที่ให้ดาวน์โหลดอันนี้มันเป็น template สำหรับ Microsoft Word

เท่ากับว่าทางมหาวิทยาลัย (อันทรงเกียรติ) คาดหวังว่านิสิตนักศึกษาทุกคนจะมี Microsoft Word เอาไว้ใช้งานกันทุกคน โดยไม่สนใจว่าราคาของชุด Microsoft Office จะแพงขนาดไหน หรือว่าคนที่มีใช้จะใช้ของที่ถูกลิขสิทธิ์หรือไม่ เป็นถึงมหาวิทยาลัยที่บอกว่าตัวเองเป็นมหาวิทยาลัยชั้นนำของประเทศ แต่กลับทำเรื่องมักง่ายแบบนี้ ในฐานะคนที่เรียนอยู่รู้สึกสะอิดสะเอียนอย่างบอกไม่ถูก

โชคดีที่ว่าในแลปที่เป็นสมาชิกอยู่ เค้าเขียนวิทยานิพนธ์หรืองานวิจัยกันด้วย LaTeX (อ่านว่า เล-เทค) และมีการทำ template ไว้ให้ใช้เรียบร้อยแล้ว (เป็นของ unofficial ทำกันเอง ไม่ได้มาจากทางมหาวิทยาลัย) เลยคิดว่าคงหันมาใช้วิธีนี้เขียนบ้างดีกว่า เพราะผลงานที่ออกมาดูดี สวยงาม แก้ไขง่าย และใช้ได้หลาย platform (ทำให้ไม่ต้องสลับไปใช้ windows เวลาจะเขียน)

การใช้งานภาษาไทย LaTeX บน Mac มีวิธีบอกที่ thaimacdev คร่าวๆ ก็คือ (จดไว้กันลืม)

  1. ลง Xcode จะได้มี tools ที่จำเป็นในการ compile thailatex และ swath (อันนี้ลงไว้ในเครื่องอยู่แล้ว)
  2. โหลด MacTeX มาลง (ไฟล์ขนาด 720 MB!)
  3. ลง thailatex จัดการ configure / make / install ตามปกติ ในขั้นนี้อาจจะโดนโวยวายว่าไม่เจอ latex ก็ให้ add path ของ latex ที่ได้จากการลง MacTeX เข้าไปด้วย (ปกติจะอยู่ที่ /usr/texbin/latex)
    พอเสร็จแล้วให้ย้ายไฟล์ share/texmf ไปไว้ใน ~/Libary แล้วก็สั่ง updmap
    $ updmap --enable Map=~/Library/texmf/fonts/map/dvips/thai/thai.map
  4. ลง swath เอาไว้ตัดคำภาษาไทย ก็แค่ configure / make / install ตามปกติ

หลังจากนี้มันจะมีปัญหานิดหน่อยตรงที่ package thailatex มันใช้ได้กับไฟล์ที่เป็นรูปแบบ ascii (หรือ tis-620) เท่านั้น แต่ text editor ที่ใช้งาน (TextMate) มันเซฟเป็น tis-620 ไม่ได้ ก็เลยให้มันเซฟเป็น utf-8 แทน แล้วในขั้นตอนการ compile เอกสาร ก็แอบแปลงให้มันเป็น tis-620 เสียก่อน

# แปลงจาก utf-8 เป็น tis-620 แล้วผ่านเข้า swath ที่เป็นตัวตัดคำ
$ iconv -f utf8 -t tis620 foo.tex | swath -f latex > foo.ttex
# compile ให้ออกมาเป็น pdf
$ pdflatex foo.ttex

แต่อันนี้ที่จริงก็ยังไม่เนียนเท่าไหร่ เพราะใน TextMate มันจะมีคำสั่งให้กด Cmd-R แล้วคอมไพล์เอกสารให้เลย รวดเร็วดี แต่มันจะไม่แปลง encoding และไม่ตัดคำให้ ถ้าจะแก้ก็ต้องไปแก้ใน Bundle Editor ของมันเอง เพิ่มคำสั่งเข้าไปสักที่นึง แต่ตอนนี้ยังขี้เกียจแกะโค้ด เอาไว้มีเวลาว่างๆ ก่อน

netcat

by pittaya

จดไว้กันลืม
ใช้ netcat เป็น echo server เอาไว้เทสดูว่า message ที่ได้รับมาถูกต้องหรือเปล่า

$ nc -l -p <port number>

std::max

by pittaya

ปกติไม่ค่อยคุ้นเคยกับการเขียนโปรแกรมบน Visual Studio สักเท่าไหร่ เพราะถ้าไม่เขียนพวก script language ก็จะเขียนด้วย text editor ธรรมดา แล้วสร้าง Makefile เองเสียมากกว่า

พอดีมีเรื่องต้องใช้ C++ โปรเซสแต่ละเฟรมของไฟล์วิดีโอ ไม่มีอะไรมาก แค่เปรียบเทียบค่าของ Red และ Blue ของแต่ละ pixel ว่าอันไหนมีค่ามากกว่ากัน และดูว่ามันต่างกับค่าสี Green อยู่เท่าไหร่ แต่ละ pixel เป็น RGBTRIPLE คิดดูก็ไม่มีอะไรยาก

for (int i = 0; i < numPixels; i++, pRgb++) {
diff = pRgb->rgbtGreen - std::max(pRgb->rgbtRed, pRgb->rgbtBlue);
}

แค่เพิ่มโค้ดส่วนนี้เข้าไป ทำให้ไฟล์วิดีโอขนาด 784×576 ที่เคยเล่นได้ลื่นๆ กระตุก และเฟรมเรตลดลงไปเหลือประมาณ 10-15 fps (โดยประมาณ) ทันที
ไม่น่าเชื่อ…

ลองแก้ใหม่ เปลี่ยนบรรทัดที่เปรียบเทียบเป็น

diff = (prgb->rgbtBlue > prgb->rgbtRed)? prgb->rgbtGreen - prgb->rgbtBlue : prgb->rgbtGreen - prgb->rgbtRed;

กลายเป็นว่าวิดีโอไฟล์เดิม วิ่งฉิว ไม่มีหนืด ไม่มีกระตุก

โค้ดเดียวกันนี้ รันบน hardware เดียวกัน แต่เป็น Mac OS X ทำงานได้ว่องไว ไม่กระตุกเช่นกัน

สรุปว่า… งง…
std::max บน visual studio มัน implement มาไม่ดีหรือเปล่า ?

« Previous PageNext Page »