ผมเคยเห็นคนใช้ไฟล์นามสกุล .inc ครั้งแรกตอนสมัยเขียน ASP สมัยนั้นผมยังเป็นเด็กเอ๊าะ ๆ วัยละอ่อนที่ไม่รู้ประสีประสาอะไร มันจะมีไฟล์ที่ผมใช้ประจำอยู่ไฟล์นึงที่ผมโหลดมาจากในเน็ต มันมีชื่อเต็ม ๆ ว่า adodb.inc ครับ ไฟล์นี้เป็น text file ธรรมดานี่แหละ ข้างในเป็น ASP Script (Server-Sided VBScript) ที่มีการประกาศค่าคงที่ต่าง ๆ มากมาย ที่ช่วยให้ชีวิตในการเขียน ASP สะดวกขึ้นอย่างมาก ผมใช้มันมาตลอดเวลาที่ผมเขียน ASP จนกระทั่งผมเลิกเขียน ASP ไป

จริง ๆ ผมไม่ได้หมายถึงแค่ .inc อย่างเดียวหรอกครับ ผมหมายถึง text file ทุกชนิดที่ server มันไม่รู้จัก หรือประมวลผลไม่ได้ ไม่ว่าจะเป็น .txt, .conf, .config, .inc, .duck, .dat, .ini หรือแม้กระทั่งไม่ใส่นามสกุลให้มันเลยก็ตาม ถ้าข้อความข้างในเป็น text มันก็คือ text file อยู่วันยังค่ำ

ปัญหามันอยู่ที่ไหนเหรอครับ ยังมีเว็บโปรแกรมเมอร์หลายคนที่ยังตั้งนามสกุลไฟล์เป็นพวกนี้อยู่ และมิหนำซ้ำ ยังเอาไป include ใช้งานจริงเสียด้วย ผมยกตัวอย่างกรณีของ php ละกันครับ ตัว php web server เอง (เช่น Apache) ปกติแล้วมันไม่ประมวลผลไฟล์นามสกุลพวกนี้หรอกครับ ยกเว้นแต่เราไป include ไฟล์พวกนั้นลงไปใน script ที่เราเขียน เช่นถ้าเป็น php มันก็จะประมวลผลไฟล์นามสกุลพวก .php, .php4, .php5 (หรืออะไรก็แล้วแต่ตามที่ตั้งไว้) ถ้าเราสั่ง include(“test.inc”) แบบนี้มันจะประมวลผล test.inc ให้ครับ แต่ถ้าเราลองเรียก test.inc ตรง ๆ ผ่าน browser มันไม่ประมวลผลหรอกครับ ทีนี้พอ server มันไม่ประมวลผล สิ่งที่มันคืนกลับมาให้เราเห็น มันก็คือข้อความข้างในไฟล์นั่นเอง ค่าต่าง ๆ ที่เราตั้งไว้เก็บไว้กะว่าจะดูคนเดียว ทั้ง username กับ password ของ database ทั้งโน่น ทั้งนี่ ตั้งหลายอย่าง ถูกเผยแพร่ไปง่าย ๆ ด้วยเหตุผลเพียงการตั้งนามสกุลไฟล์แบบนี้เท่านั้นเอง

พอมองเห็นปัญหาแล้วใช่มั๊ยครับ หลายคนตั้งนามสกุลไฟล์เป็นแบบนี้ เพื่อที่จะให้สื่อความหมายว่ามันเป็น include file นะ ก็ย่อว่า inc ไง หรือ config file นะ ก็ย่อว่า conf ไง ใช่ครับ มันสื่อ แต่มันไม่ได้เรื่องครับ อยากจะตั้งให้สื่อ แล้วยังจะให้ server ประมวลผล ก็ง่ายนิดเดียวครับ แค่เติมนามสกุลมันลงไปอีกหน่อยก็ได้ครับ เป็น .inc.php ก็ได้ เป็น .conf.php ก็ได้ สมัยไหนแล้ว ไม่ใช่ DOS นะครับ จะตั้งชื่อมีจุดหลาย ๆ จุดไม่ได้

แล้วคนอื่นจะรู้ได้ไงว่าเราตั้งนามสกุลไว้แบบนี้น่ะเหรอครับ ก็ตอนที่ server ล่ม หรือ script เจ๊งไงครับ เคยเห็นมั๊ยครับ ที่ script ทำงานไม่ถูกต้อง แล้วมัน report error ออกมา พร้อมชื่อไฟล์ที่มีปัญหา คิดว่ามันจะไม่มีวันเกิดขึ้นเลย 100% เหรอครับ กันไว้ก่อนดีกว่าครับ ดีกว่าจะมานั่งเสียใจทีหลังเพราะความเลินเล่อเล็ก ๆ น้อย ๆ

(entry นี้ เหมือนจะเป็นการบ่นเลยแฮะ แต่เพิ่งไปเจอคนตั้งชื่อไฟล์นามสกุลแบบนี้มา แล้ววันก่อนเว็บมันเจ๊งพอดี เลยเข้าไปดู เห็นอะไรหลายอย่างที่ไม่ควรให้เห็นเลยเชียว เฮ้อ… เห็นแล้วกลุ้ม เอามาบ่นหน่อยดีกว่า XD)

header("location:http://blog.chonla.com");

ซึ่งความจริงแล้ว มันเป็นการกำหนดค่า Location ลงไปใน HTTP Header นั่นเอง เรายังสามารถกำหนด Header อื่น ๆ ลงไปใน HTTP Header ได้อีก แต่วันนี้ผมจะพูดถึงเฉพาะ Location ครับ

มีหลายคนหลงคิดไปเองว่า การสั่ง Redirect ด้วยวิธีนี้นั้น ผู้ใช้จะไม่เห็นส่วนที่เหลือในเว็บ เว็บหนึ่งที่มีการตรวจสอบว่าผู้ใช้ล็อกอินแล้วหรือยัง ถ้ายังให้ redirect ไปยังหน้าล็อกอิน แต่ถ้าล็อกอินอยู่แล้วก็ให้แสดงเนื้อหาในเว็บนั้นเลย ตามโค๊ดด้านล่างนี้ครับ

<?php
if (!$login)
    header("location:login.php");
?>
เนื้อหาสำคัญที่จะเข้าถึงได้เฉพาะผู้ที่ล็อกอินแล้วเท่านั้น

สิ่งที่เกิดขึ้นจริงคือ เมื่อ PHP แปลคำสั่งถึง header ที่กำหนด location แล้ว จะเป็นการส่ง HTTP Response 302 กลับไป ซึ่งหมายถึงสิ่งที่เว็บบราวเซอร์ต้องการนั้นอยู่อีกที่หนึ่ง รวมถึงระบุ URL ของหน้านั้น ๆ กลับไปให้ และยังทำการแปลส่วนที่เหลือจนจบและส่งกลับไปให้บราวเซอร์ด้วย

เริ่มเห็นปัญหาแล้วหรือยังล่ะครับ ถ้าเริ่มเห็นอะไรเหมือนที่ผมเห็นแล้ว ลองไปดู LIVE DEMO กันได้เลยครับ

คุณจะเห็นรายละเอียดใน LIVE DEMO ได้ง่ายขึ้นด้วยโปรแกรมประเภท HTTP Sniffer ครับ เช่น Fiddler, HTTPWatch หรือจะใช้พวก Packet Sniffer อย่างเช่น WireShark (Ethereal)

การแก้ไขปัญหามีหลายวิธีครับ ใน LIVE DEMO ผมใช้ exit() เป็นตัวแก้ไขปัญหา แต่ในความเป็นจริงแล้ว เราอาจจะใช้ if…else… ครอบไว้ก็ได้ครับ หรือใครมีวิธีอื่น ๆ อีกก็มาคุยกันได้ครับ

ตัวอย่างภาพที่ผมเซฟมาให้ดูนั้น เป็นภาพที่ได้จาก HTTPWatch ครับ ให้ลองเปรียบเทียบกันระหว่างส่วนที่เป็น Content กันระหว่างแบบที่ผมไม่ได้ใส่ exit() กับแบบที่ผมใส่ exit() เพื่อให้เห็นความแตกต่างของสิ่งที่ได้ส่งกลับมาให้บราวเซอร์ครับ

Redirect ทั่ว ๆ ไป

Redirect และปิดด้วย exit()

นอกจากนี้แล้วการทำแบบนี้ยังทำให้ Perfomance สูงขึ้นด้วยครับ เพราะ PHP ไม่จำเป็นต้องประมวลผลคำสั่งส่วนที่เหลือนั่นเองครับ

for(i = 0; i < 30; i++)
    alert(i);

หรือ

for(x in a)
    alert(a[x]);

แต่เมื่อกลับมามองที่ jQuery ทาง jQuery เองก็ได้เตรียมฟังก์ชั่นสำหรับการวนลูป element ที่ได้มาจาก selector แล้วเหมือนกัน นั่นคือ $.each()

$.each() ไม่้ใช่แค่จะลูป element จาก selector ได้เท่านั้น แต่ยังสามารถลูปใน JavaScript Array และ JSON ได้ด้วย ถือว่าเป็นสุดยอดฟังก์ชั่นอีกตัวหนึ่งเลยก็ได้

โดยปกติแล้ว Syntax ของ $.each() คือ $.each(object, callback) โดยที่ object จะหมายถึง object ที่สามารถลูปได้ เช่น jQuery Object, Array หรือ JSON ส่วน callback จะหมายถึง callback function ที่ในลูปแต่ละรอบมันจะมาเรียกฟังก์ชั่นนี้ครับ เรายังสามารถเขียนในรูปแบบอีกแบบนึงได้คือ $(object).each(callback) ก็ได้ครับ

ลองไปดู LIVE DEMO กันดีกว่าครับ

ผมแยกไอเดียของ jQuery ออกมาคร่าว ๆ เพื่อให้เข้าใจได้ง่ายขึ้นดังนี้ครับ

• ตามหลักคือฟังก์ชั่นต่าง ๆ ที่เราเรียกใช้งานได้ของ jQuery Object นั้น มันคืนค่า jQuery Object กลับมาให้ ซึ่งก็จะมีฟังก์ชั่นต่าง ๆ ของ jQuery Object อย่างครบถ้วน ทำให้เราสามารถเรียกฟังก์ชั่นของ jQuery Object ได้ต่อเนื่องกันไปเรื่อย ๆ ไม่รู้จบ เช่น

$("span[@name=clickme]")
    .mouseover(mouseover_handler)
    .mouseout(mouseout_handler)
    .click(mouseclick_handler)
    .html("คลิกฉันสิจ๊ะ");

• Chainability จะกระทำกับ Object ที่เกิดจาก Selector ที่เราระบุไว้เท่านั้น บางกรณีเราสามารถเปลี่ยน Selector ในขณะที่กำลังทำ Chain (เรียกอย่างต่อเนื่อง) อยู่ก็ได้

$("span")
    .filter("[@name=clickme"])
        .click(function(){alert("Click");})
        .end()   // เพื่อจบ chain ที่ได้จาก filter "[@name=clickme]"
    .filter("[@name=hoverme"])
        .mouseover(function(){alert("Mouse over");})
        .mouseout(function(){alert("Mouse out");});

ข้อดีที่เท่าที่ผมเห็นของ Chainability คือ

1. เมื่อเราทำ Chain แสดงว่า เราจะได้จำนวนบรรทัดที่น้อยลง
2. เมื่อมันเป็น Chain แสดงว่า มันจะมีการ re-use (ใช้ซ้ำ) Object เดิม ไม่ต้องไปเสียเวลาค้นหาใน DOM ใหม่ แน่นอนที่ว่า มันจะเป็นการเพิ่ม Throughput ให้กับงานที่ทำได้ไปในตัว เช่น ลองเปรียบเทียบ Code ที่ทำงานเหมือนกัน 2 ชุดด้านล่างนี้ จะเห็นความแตกต่างทันทีครับ

$("span[@name=clickme]")
    .mouseover(mouseover_handler)
    .mouseout(mouseout_handler)
    .click(mouseclick_handler)
    .html("คลิกฉันสิจ๊ะ");

$("span[@name=clickme]").mouseover(mouseover_handler);
$("span[@name=clickme]").mouseout(mouseout_handler);
$("span[@name=clickme]").click(mouseclick_handler);
$("span[@name=clickme]").html("คลิกฉันสิจ๊ะ");

เพื่อให้เห็นภาพได้ชัดเจนมากขึ้น ลองไปดูที่ LIVE DEMO กันครับ

เข้ามาครั้งแรก ได้เจอกับข้อความแจ้งถึงการเปลี่ยนแปลงของ Hotmail ครั้งใหญ่ ที่อ้างถึง 3 สิ่งที่เปลี่ยนแปลงไป คือ

1. รูปลักษณ์ที่เรียบง่ายที่ปรับแต่งได้เองมากขึ้น
2. เข้าถึงอีเมลได้เร็วขึ้นถึง 70%!
3. เข้าถึงผู้ติดต่อ Windows Live Hotmail ได้ง่ายขึ้น

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

ผมได้ลองเรื่องความรวดเร็วในการเข้าถึงอีเมลแต่ละฉบับ ก็พบว่า เข้าถึงรวดเร็วดี น่าจะเร็วขึ้นกว่าแต่ก่อนตามที่กล่าวอ้าง แต่ผมจับเวลาไม่ได้ว่าเร็วขึ้นกี่เปอเซนต์ แต่ก็ถือว่าเร็วใช้ได้

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

โดยรวมแล้ว ผมถือว่าเป็นพัฒนาการที่ดีขึ้นของ Hotmail ครับ แต่ถึงยังไง ผมก็ยังชอบ Gmail มากกว่าครับ

องค์ประกอบของ Gears

Gears ประกอบด้วยส่วนประกอบต่าง ๆ ดังนี้

1. Database Module (ใช้ SQLite) เพื่อใช้เก็บข้อมูลต่าง ๆ ของเว็บไว้ในเครื่องของเรา
2. WorkerPool Module ใช้สำหรับการรัน JavaScript ใน Background
3. LocalServer Module ใช้สำหรับการเรียกใช้ไฟล์ต่าง ๆ ไม่ว่าจะเป็นภาพ หรือข้อมูลอื่น ๆ โดยไม่จำเป็นต้องมีการต่ออินเตอร์เน็ต (Offline Data) โดย LocalServer จะทำการ Cache ข้อมูลเหล่านี้ไว้บนเครื่อง และให้บริการเมื่อมีการร้องขอ
4. Desktop Module ใช้เพื่อให้เว็บที่ใช้ Gears สามารถใช้งานคำสั่งที่เกี่ยวกับ Desktop ได้ เช่น การสร้าง Shortcut
5. Geolocation Module ใช้สำหรับบอกตำแหน่งที่อยู่ของผู้ใช้งานเว็บที่ใช้ Gears ณ ขณะนั้น

การทำงานของ Gears

ตามที่ผมเคยอ้างไว้ในบทความ Ajax? คืออะไรกันหว่า? [http://blog.chonla.com/?p=8] ว่า เว็บ 1 หน้า จะแยกเป็น 3 ส่วน คือ Layout (Application UI), Data, และ Script ส่วนที่เป็น Data ที่แยกออกมานี้ เราเรียกว่า Data Layer

โดยปกติเว็บทั่ว ๆ ไป จะไม่มีการแยก Data Layer ออกมาจากส่วน Layout แต่จะเขียนปนกัน

การเชื่อมต่อแบบไม่มี Data Layer

การที่จะเก็บ Data ไว้ในเครื่องเราได้นั้น เราจำเป็นต้องแยก Data Layer ออกจาก Layout ก่อน เราเรียกขั้นตอนนี้ว่า Data Isolation เมื่อเรามองถึงเว็บที่มีการเรียกใช้ Ajax ในการแลกเปลี่ยนเฉพาะ Data ระหว่างเว็บบราวเซอร์ และเว็บเซิร์ฟเวอร์ เราสามารถพิจารณาได้ว่า Ajax นี่เองที่ทำหน้าที่เป็น Data Layer ของเว็บนั้น ๆ

การเชื่อมต่อแบบมี Data Layer

และตรงนี้เองที่ Gears จะเข้ามามีบทบาท ลองพิจารณาดูนะครับว่า ถ้าเราเอา Module อะไรซักอย่าง ไปคั่นระหว่างส่วนเว็บบราวเซอร์กับส่วน Data Layer เพื่อใช้ในตัดสินใจว่าจะดึงข้อมูลที่เราเก็บไว้จากในเครื่องของเรา หรือจะดึงข้อมูลใหม่จากเว็บเซิร์ฟเวอร์แทน หรือจะทำทั้ง 2 อย่างดี เราเรียก Module ตัวนี้ว่า Data Switch เราสามารถมองได้ว่า Data Switch นี่ก็ทำตัวเหมือนเป็น Data Layer เหมือนกันนั่นเอง

เพิ่ม Data Switch เข้าไป

Data Switch จะทำหน้าที่ทั้งบันทึกข้่อมูลที่ต้องการลงสู่เครื่องของเรา และดึงข้อมูลที่เราต้องการออกมา เมื่อเราเชื่อมภาพการทำงานของ Data Switch เข้าไปด้วย เราจะเห็นได้ว่า นี่แหละครับ คอนเซ์ปต์การทำงานของ Gears

ภาพการทำงานของ Gears เมื่อติดต่อกับ LocalServer และ Database Module

ตัว Data Switch เองยังสามารถที่จะกำหนดให้ทำการ Synchronize ข้อมูลกับ Server เป็นระยะได้อีกด้วย

Gears เมื่อไม่มี Data Layer

จะทำยังไง ถ้าเราไม่ได้ทำ Data Layer? ยังทำได้ครับ แต่ก็ยุ่งยากขึ้นมาหน่อย เราจะต้องเขียน Code ในการดักขั้นตอนของการรับส่งข้อมูลไปยัง Server เช่น ตอน Submit Form แต่การทำแบบนี้ ทำให้เราต้องทำงานหนักขึ้นอีกเยอะ สู้เอาเวลามาแยก Data Layer ออกมาน่าจะง่ายกว่าหรือเปล่า?

เมื่อไหร่ที่จะควรหรือไม่ควรทำ Offline Data

• เมื่อข้อมูลเป็นข้อมูลชั่วคราว เช่น ข้อมูลดัชนีหุ้น แบบนี้ก็ไม่ควรทำ
• ข้อมูลบางอย่างจะมันก็ควรจะเป็น online มากกว่าที่จะเป็น offline เช่น ข้อความพูดคุยในโปรแกรม Chat แบบนี้ก็ไม่ควรทำเหมือนกัน
• ข้อมูลที่มีการเรียกใช้บ่อย ๆ แบบนี้ควรทำอย่างยิ่ง
• ข้อมูลที่ต้องมีการประมวลผล หรือใช้ข้อมูลมากมายมหาศาลเกินกว่าเครื่องผู้ใช้จะรับไหวได้ แบบนี้ก็ไม่ควรทำ

การ Synchronize Data

จะเกิดขึ้น เพราะสาเหตุดังนี้

• มีการเปลี่ยนแปลงข้อมูลในขณะที่ Offline
• มีการใช้งานข้อมูลร่วมกันกับคนอื่น (คนอื่นอาจจะเปลี่ยนแปลงข้อมูลนั้นได้)
• มีการเรียกใช้งานข้อมูลจาก External Resource เช่นการเรียกใช้งาน Feed

การทำให้ข้อมูลบนเครื่อง เหมือนกับข้อมูลบนเว็บเซิร์ฟเวอร์ เราเรียกว่าการทำ Synchronization เราสามารถทำได้ 2 วิธีคือ Manual Sync และ Background Sync

Manual Sync

จะทำก็ต่อเมื่อ มีข้อมูลที่ต้อง Sync ไม่มากก และผู้ใช้้ต้องการข้อมูลที่ใหม่ล่าสุดก่อนที่จะทำการเปลี่ยนไปใช้ข้อมูลแบบ Offline แต่ปัญหาของการทำ Manual Sync ก็มี เช่น เราไม่สามารถรู้ได้ว่า Network ในขณะนั้นหลุดเมื่อไหร่ เพราะผู้ใช้อาจจะอยู่ในสถานที่ที่ Network ไม่เสถียร เช่นบนรถ เป็นต้น หรือ User อาจจะลืม Sync ก่อนที่จะเข้าสู่ Offline ก็ได้

Background Sync

วิธีนี้จะมีข้อดีคือ ข้อมูลจะอัพเดทเสมอ และสามารถทำได้แม้เน็ตจะไม่เร็ว ข้อเสียคือ ถ้าไม่ได้ใช้ WorkerPool (ถ้าจำไม่ได้ว่าคืออะไร ให้ย้อนกลับไปอ่านข้างต้น) มันจะกิน resource ปริมาณมาก อาจจะทำให้เน็ตช้าได้

Gears ภาพรวม

ตัวอย่างเว็บที่ใช้ Gears

Google (Docs, Reader, Picasa, YouTube), MySpace, WordPress 2.6

ตัวอย่าง Gears Application

• http://code.google.com/apis/gears/sample.html

บทสรุป

ตามความเห็นส่วนตัวแล้ว Gears ถือว่าเป็นเทคโนโลยีที่น่าสนใจตัวหนึ่ง ยิ่งผนวกเข้ากับ DHTML ที่นับวันยิ่งหวือหวาได้ใจด้วยแล้ว คงเอาชนะใจ Developer หลาย ๆ คนได้ไม่ยาก แต่สำหรับในเชิงการพัฒนาเพื่อธุรกิจแล้ว อาจจะทำได้ยาก เพราะความไม่แน่นอนของพฤติกรรมของผู้ใช้ อาจจะเป็นปัจจัยหลักในการตัดสินใจนำมาใช้สำหรับผู้บริหารได้

แหล่งอ้างอิง

• http://code.google.com/apis/gears/architecture.html
• http://en.wikipedia.org/wiki/Gears_(software)

CSS Sprite สามารถช่วยให้จำนวนไฟล์ลดลงได้ โดยการรวมไฟล์ภาพเข้าด้วยกัน และนำไปใช้โดยการกำหนดผ่านค่า background-position ใน css นั่นเอง และการรวมไฟล์ภาพเข้าด้วยกันนี่เอง จากที่เราเคยจะต้องโหลดไฟล์หลาย ๆ ไฟล์ ก็จะสามารถลดลงมาใช้เพียง 1 หรือ 2 ไฟล์ บางกรณีการรวมไฟล์เข้าด้วยกันเป็นไฟล์เดียว ยังทำให้ขนาดไฟล์โดยรวมเล็กลงอีกด้วย

การใช้ CSS Sprite ส่วนใหญ่แล้ว จะพบเห็นได้บ่อยในการทำกรอบของข้อความ

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

เราลองมาดูตัวอย่างกันใน LIVE DEMO ได้เลยครับ