Real Time Web: Next generation website

เคยทวิตไว้นานแล้วครับ เกี่ยวกับเรื่อง Real Time Web เลยขอเก็บมาเขียนบล็อคเดี๋ยวจะกลายเป็นบล็อคอนิเมะไปซะได้ (ที่ BG เป็นรูปอนิเมะเนื่องจากผมต้องการผูก [menome profile](http://menome.sunburn.in.th/whs)​ โปรเจกท์ใหม่ของผม เข้ากับบล็อคครับ สักพักคงจะกลับมาเป็นแบบธรรมดาๆ)

Web 2.0 คงจะได้นิยามเป็น Web+Social ครับ เราผลัดจากการเป็นผู้ผลิตเนื้อหา เป็นผู้ผลิตแพลตฟอร์มสำหรับเนื้อหา ผมเองก็ใช้แนวคิดนี้กับ menome “Social+anime” เรามี Wiki ให้ผู้ใช้สามารถจัดการอัพเดตได้ (แต่ต้องอนุมัติก่อนอยู่ดี) แต่บางจุดพื้นฐานอย่างการเพิ่มอนิเมะก็ต้องมีแอดมินที่ทำหน้าที่ตรงนี้ เพื่อไม่ให้เกิดปัญหาเน่าเสียแบบ foursquare แต่เว็บทุกวันนี้เราก้าวไปด้วย HTML5 แล้ว อะไรละคือยุคถัดไป?

คำตอบของผมคงจะเป็น Real-time web ครับ อาจจะว่า เอ๊ะ มันมีคนใช้หรอ? ที่เราเห็นชัดเจนคงเป็น Twitter นั่นแหละครับ วันแรกที่ผมสัมผัส user stream มันว้าวววมาก (ผมเขียน client เองเลยได้ใช้ก่อนคนอื่นหลายเดือน) จากที่เราต้องรอตอบเมนชั่นสามนาที ห้านาที สิบนาที นั่งกดรีเฟรชรอคำตอบ เราสามารถจะตอบสนองกันได้ทันที ทุกวันนี้เราก็คงเคยชินกับ real-time web ใน notification ของเฟสบุ๊คแล้ว ไม่ต้องนั่งรีเฟรชแค่เปิดเว็บทิ้งไว้ก็ไม่พลาดอัพเดต

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

หรืออย่างบล็อคผมเนี่ยครับ ก็ใช้ [pubsubhubbub](https://code.google.com/p/pubsubhubbub/) protocol (ลองอ่านชื่อเร็วๆ สิบรอบดู) ถ้า feed reader ใครรองรับก็จะพบว่าพอผมอัพบล็อคจะขึ้นอัพเดตในทันทีเลย ซึ่งใน menome ผมก็ implement pubsubhubbub ไว้ อย่างบล็อคผมนี้เวลาอัพแล้วใน menome ก็จะขึ้นอัพเดตในทันที ทำให้คนอ่านไม่ต้องมานั่งเข้าบล็อคผมทุกวันๆ เพื่อหาข่าว และยังประหยัดเวลา polling ด้วย​ (menome poll blog 30 นาทีครับ)

สำหรับใน HTML5 เองก็มี WebSocket ที่มาตอบโจทย์นี้ครับ เซิร์ฟเวอร์สามารถพุช event เข้ามาหาผู้ใช้ได้ในทันที และแน่นอนคำว่าทันทีคือทันทีจริงๆ ครับ ไม่มี delay จาก polling interval ต่างๆ เลย ใน [live.bd2.in.th](http://live.bd2.in.th) ก็ใช้ websocket ในการอัพเดตข่าว DJ ครับ เมื่อ DJ กด enter แทบจะเรียกได้ว่าวินาทีเดียวกับที่ดีเจได้รับข้อความว่าอัพเดตเรียบร้อยแล้ว ฝั่งคนฟังก็สามารถเห็นข้อความนั้นได้ทันทีแล้วครับ

ปัญหาของ Realtime Web ตอนนี้คือการ implement ไม่ง่ายครับ Apache แสดงอายุมันออกมาแล้วโดยเฉพาะ connection นานๆ แบบนี้ถ้าไม่ใช่ event based คงไม่รอด ฝั่ง nginx เองก็มี plugin ที่ทำงานนี้ครับ (รู้สึกว่าจะไม่ใช่ WebSocket อยู่ดี) แต่ที่มาแรงตอนนี้เลยคือ [nodejs](http://nodejs.org) ครับ ใน bd2.in.th ก็ใช้

แน่นอน nodejs ไม่ใช่ภาษาที่คุ้นเคยแบบ PHP ครับ มันเป็น JavaScript แถมเป็น Async อีก (ลองหา mongodb driver ใน nodejs driver สิครับ แล้วจะรู้ว่า async นรกมาก) ฉะนั้นคนใช้เลยน้อย ของ menome ผมเองยังบอกเลยว่าไม่ทำ websocket ใช้ poll 60 วิแทนเพราะไม่ได้ไหลเร็วขนาดนั้น และก็ขี้เกียจเขียนหลายตัว ขี้เกียจเปิดพอร์ตเพิ่ม

อีกอย่างนึงคือผมเห็นใจคนที่ใช้แชร์โฮสต์ด้วยแหละครับ ในอดีตเรามีฟรีโฮสต์ เอา HTML ไปฝากก็พอ ใครใช้ CMS นั่นกระแดะ ยุคต่อมาใน 2.0 PHP เป็นสิ่งสำคัญที่ขาดไม่ได้ และนั่นคือแชร์โฮสต์ แต่ในยุค 3.0 แบบนี้ nodejs ไม่ใช่จะจัดการง่ายแบบ Apache PHP แล้วครับ คงต้องเพิ่มไปถึงขั้น VPS และ VPS เองก็เป็นปัญหาการจัดการทั้งผู้ดูแล (ที่ต้องเรียนวิธีใช้ลินุกซ์ แถมจ่ายแพงกว่าแชร์โฮสต์อีก) จนไปถึงผู้ให้บริการ (เพราะก็ต้องหาเครื่องมาทำ VPS ที่กินทรัพยากรมากขึ้น) ซึ่งแชร์โฮสต์เองมีมานานแล้ว แต่ VPS นี่ก็เพิ่งได้รับความนิยมครับ

(จริงๆ แล้วโฮสต์ node จริงๆ จังๆ ก็มีเช่น heroku/Joyent แต่พวกนี้ใช้ระบบของตัวเองครับ ใครจะเปิดก็ต้องไปลงทุน R&D มาทำให้ราคามันยังแพง)

WMC Web Contest 2011

จริงๆ เรื่องการแข่งน่าจะเคลียร์จบไปใน Twitter แล้ว แต่บอก @winwanwon @Fantasier ไว้ว่าจะ blog ก็เลยต้องมา blog (ที่รับปากไว้คือไม่อยากพูดมากในงาน แต่สุดท้ายก็พูดซะยาว)

ท้าวความเดิม​ @Fantasier เอาลิงก์ IT-ThaiNichi มาแปะซึ่งเป็นการแข่งทำเว็บ ผมเองก็ว่า เออ น่าสนใจ เลยไปถามเพื่อนว่าใครจะมามั้ย แต่ก็เกรงใจต้นกล้าว่าเค้าเป็นคนชวนมาก็ไม่อยากไปแย่งเค้า (จริงๆ ผมก็กลัวเค้าเพราะเค้าทำ design สวยกว่า ส่วนเค้าก็กลัวผมว่าผมทำ code เก่งกว่า) ก็เลยบอกเพื่อนที่โรงเรียนว่าต้องให้ครบสามคนถึงจะไป ปรากฎว่าถามไปถามมาแล้ว ได้แค่ 2 คนเพราะมันเป็นวันชดเชย รด. พอดี วันต่อมา @onsanookza GTalk มาถามก็เลยตกลงไปกัน

ทีนี้จะไปกันก็ต้องตกลงกันก่อน ก็ประชุมทีมกันซึ่งเค้าผลักให้ผมเป็นหัวหน้าทีม ก็โอเค ถัดมาก็เรื่องชื่อทีม คิดกันมาหลายชื่อมากๆ อ้นเสนอ lol แต่เห็นต้นกล้าจะใช้ชื่อ lolz แล้วก็เลยเอา LOLWUT ไปเข้ารหัส base64 ได้ TE9MV1VU ซึ่งผมก็โอเคว่ามันจำง่าย ตัวอักษรสองตัวเลขหนึ่งตัว และไม่มีใหญ่เล็กสลับกัน (ถ้า LOL เฉยๆ เข้ารหัสแล้วมันคือ TE9M ซึ่งคนอาจจะเดาว่ามันมาจากเอา 9 แทนตัว A ซึ่งไม่ใช่ เลยเลี่ยง) การประชุมครั้งนั้นไม่ใช่ง่ายครับ เพราะ Google Talk มันประชุมกลุ่มไม่ได้ (XMPP น่ะทำได้ แต่ Google ดันทำครึ่งๆ กลางๆ) ก็เลยตกลงว่าจะใช้ Skype ขณะนั้นผมก็เพิ่งแข่ง Hackathon จบมา ก็เลยต้องหาสถานที่มีเน็ต มีข้าวกิน และมี Pump it up ก็คือ Esplanade ซึ่งนึกว่าเกมมันจะสั้นๆ ปรากฎว่าเล่นทีเป็นชั่วโมงครับ กว่าจะได้ประชุมอีกสองคนก็ใกล้เวลานอนกันแล้ว

พอถึงวันก่อนแข่ง ทีมโน้นเค้าเตรียม CMS กันคร่ำเคร่ง ส่วนผมก็ใช้ Django ซึ่งมันมี admin สำเร็จรูป มี ORM ทำอะไรก็สบายไม่ต้องไปนั่งจิ้มโค๊ดเยอะๆ และก็เลยว่าให้สมาชิกเตรียมออกแบบกันมา โดยผมให้ดูตัวอย่างจากสุดยอดเว็บสวย 2 เว็บที่ผมอยากเจอคนเขียนมาก คือ [Lubd Hostel](http://siamsquare.lubd.com) และ [Cubiccreative](http://cubiccreative.org/creativecamp7/) โดยพ่อแนะนำอันหลังว่าน่าจะทำทันในเวลามากกว่า

พอมาถึงวันแข่ง เริ่มงานมาได้ concept ชื่อ “การศึกษาในฝัน” ตอนแรกผมยังนึกไม่ออกว่าจะทำเนื้อหายังไง จนพอเริ่มทำ mockup แล้วคำว่า ในอนาคต มันเข้ามาในหัว ก็เลยเขียนไปว่า ศึกษาต่อในประเทศ ศึกษาต่อต่างประเทศ และ นีท!! (เขียนจริงๆ เมนูนีทก็เคยมีมาแล้ว) แล้วก็ออกแบบคร่าวๆ มา ซึ่งอ้นติดใจหัวเว็บจากเว็บหลับดี ที่เห็นแล้วอยากได้มาก ก็เลยทำหัวโค้งสนอง need ให้มี fade เหมือนกัน

ถัดมาก็แบ่งกันทำงาน อ้นทำตัวหัวเว็บ เติมให้ไปค้นข้อมูลมาแล้วก็ทำหัวข้อ ทำภาพประกอบ ส่วนเราระหว่างนั้นก็ละเลง CSS ให้พร้อมรับหัวเว็บและ content ซึ่งตัว content เสร็จก่อน (ใช้เวลาเป็นชั่วโมง) ซึ่งก็ใส่ content ไปได้หลายอันแล้วกว่าหัวเว็บจะเสร็จ

ตัวหัวเว็บนี่ยากครับ เพราะสังเกตว่ามันจะ fade ได้ ฉะนั้นต้องมีหลายชิ้น ปัญหาที่เจอคือภาพพื้นหลังนี่แหละครับ ไม่รู้จะเอาภาพอะไร สุดท้ายภาพมันเลยเล็กๆ ทำให้ผมรู้สึกว่าการ fade มันไม่ wow เท่ากับของหลับดี ที่ fade จุดใหญ่ๆ ให้ตระการตาไปเลย

สำหรับ content ก็จัดปาซ้ายสลับขวาไปนั่นแหละครับ แต่คือต้องดูเรื่อง margin padding ให้ดีว่ามันสวยงามเหมาะสมแล้ว และกว่าจะทำเสร็จทั้งหมดก็เรียกได้ว่าไม่ทันในเวลาที่กำหนดเลยแหละครับ

ถัดมาเป็นการ present งานฉบับรวบรัดครับ คือกินข้าว 15 นาทีแล้วต้องลงมา present ฉะนั้นจะไม่ได้เตี๊ยมอะไรกันมาก ผมบอกว่าโอเค ผมจัดการทุกอย่างได้ ก็เลยเริ่มด้วยการแนะนำทีมทั้งแบบเป็นพิธีการและแบบไม่เป็นพิธีการ (ก็มีคนช่วยขำ ขอบคุณครับ) พอเข้าสู่เนื้อหา เนื่องจากว่าทีมอื่นๆ จะเน้นเรื่องเนื้อหาของเว็บซะมากกว่า ซึ่งผมไม่ค่อยคิดว่าเหมาะกับแข่งเว็บแบบนี้ที่เค้าเน้นการออกแบบเว็บ เลยพูดถึงโครงสร้างของเว็บมากกว่าที่ผมจะชูจุดขายว่า No Flash, Tableless, No Frame ซึ่งทีมอื่นๆ จะใช้กัน ตรงนี้พลาดไปว่ากรรมการที่ไม่ได้เขียนเว็บสมัยใหม่จะไม่เข้าใจว่าทำไม no frame สำคัญ no flash สำคัญ ผมก็ลืมอธิบายไป

สำหรับคำถามที่ถูกถามนะครับ คำถามแรกคือเรื่องการกลับหน้าแรกหาไม่เจอ ซึ่งผมก็ต้องสาธยายโดยยกตัวอย่างเว็บอย่าง Facebook ว่ามันไม่ต้องมี Home กดโลโก้ก็ได้ (ผมเพิ่งนึกออกว่า Facebook ที่ผมพูดถึงตอนนั้นคือ Facebook Touch ไม่ใช่รุ่นบนคอมฯ) แต่ก็ต้องยอมรับว่าโลโก้ไม่เด่นพอที่จะให้เห็นว่ามันคลิกได้ มันเหมือนเป็นเมนูอันนึงไปมากกว่า

คำถามถัดมาที่ถูกถามคือเรื่องเมนูว่าทำไมไว้ข้างบน ซึ่งเว็บที่มาแข่งอื่นๆ จะไม่ทำกัน ตรงนี้คิดนานอยู่กว่าจะตอบได้ โชคดีว่านึกถึงทีมนึงได้ที่แกใช้เมนูแล้วมันเว้นที่ไว้หลังเมนูสุด ก็เลยอธิบายไป (แต่ผมรู้สึกว่าดราม่านะ) ว่า “คนเข้าเว็บเราเข้ามาอ่านเนื้อหาครับ ฉะนั้นตรงนี้ก็เลยจะมีแต่เนื้อหา ถ้ามี sidebar ปุ๊บ พอเมนูสุดมันก็จะเป็นสีขาวครับ พอเลื่อนลงมาก็จะกินที่เนื้อหาไปให้ที่สีขาวอย่างไร้ประโยชน์ เกะกะ ฉะนั้นตัดออกดีกว่าครับ” (นึกถึง blog นี้ก็ได้ครับ สังเกตว่าหน้าเนื้อหาจะไม่มี sidebar และธีมนี้คือธีมมาตรฐานของ WordPress ซึ่งผมดัดแปลงแค่ในเมนูที่มีไม่ได้แก้โค้ด)

คำถามสุดท้ายที่ถูกถามคือเรื่องว่าผมบอกว่าใช้ HTML5 (จริงๆ ไม่ได้ใช้ HTML5 ถ้าพูดกันตามตัว standard เพราะผมลอง HTML5 Shim แล้วก็ยังไม่ได้ เลยว่าใช้ div ธรรมดา แต่คำนี้คนรู้จักมากกว่าถ้าจะพูดถึงการออกแบบเว็บสมัยใหม่ที่ใช้ div ไม่ใช่ table หรือ layer) กรรมการเลยเตือนว่าถ้าไปทำให้ลูกค้าต่อไปอย่าเอาเทคโนโลยีเป็นตัวตั้ง เพราะคนใช้งานบางคนไม่ได้อัพเดต browser ซึ่งตรงนี้ได้ยินคำว่า “อย่าเอาเทคโนโลยีเป็นตัวตั้ง” แล้วตะขิดตะขวงใจเพราะมันเหมือนบอกว่า “อย่าเอา best practice มาเป็นตัวตั้ง แต่ให้เห็นแก่ความ petdo ของ user” (Flash? แล้วโทรศัพท์หละ? Table? แล้วโค้ดจะอ่านยังไง?) ฉะนั้นเลยบอก “อ้น ขอ IE เปิดหน่อย” ปรากฎว่า IE เปิดได้ครับ ยกเว้น CSS overflow มันมีผลทั้งสองแกนทำให้ scrollbar หาย (ลืมเช็คตอนออก รีบเกินไป) และก็ shadow ไม่มี นอกนั้น IE แสดงผลได้ปกติ เป็นเครื่องยึนยันว่าเว็บผมไม่ใช่ว่า HTML5 อย่างเดียวแล้วจะยิง IE ทิ้งอย่างไร้ความปรานี

สิ่งที่พลาดไปตอน present ครับ คือการนำเสนอว่าทำไมต้อง tableless ต้อง no flash ต้อง no frame ซึ่งพวกนี้ผมว่าครูสอนทำเว็บตามโรงเรียนจะไม่เห็นความสำคัญกันเพราะถ้าจะทำพวกนี้ได้นักเรียนตายแน่เพราะ Tools ที่ใช้กันมันทำไม่ได้ง่ายๆ (ลองเอา android เข้าหน้ามี frame แล้วจะรู้ครับว่ามัน scroll frame ไม่ได้เพราะสิทธิบัตรการ scroll frame มันอยู่กับ Apple ส่วน Flash เอ่อ คงรู้ๆ กันดีว่า iOS ไม่มี Flash)

ผลปรากฎว่า ทีมที่ได้ที่ 1… Usability ห่วยขั้นเทพครับ เปิดมาภาพหัวเว็บยาวล้นจอ ตรงนี้ไม่ใช่ว่าแพ้แล้วจะมาเขียนโจมตีเขา เพราะทีมต้นกล้าก็เห็นด้วยกับผมว่าแค่ header ล้นจอมันก็เห็นแล้วว่าเว็บมันออกแบบมาแล้วใช้ไม่ได้จริงแค่ไหน สำหรับทีมอื่นๆ ที่ได้รางวัล ก็โอเคว่าเว็บพอใช้ได้ (ถึงจะไม่ได้นำสมัย) แต่มีการใช้ ​Flash วูบวาบ

“คนออกแบบเว็บน่ะมีสองประเภท ประเภทที่หนึ่งคือ Web Designer ที่มองเว็บไม่ใช่เป็นกราฟฟิคภาพหนึ่งแต่เป็น interactive ไม่ได้ว่าเว็บจะอยู่ตามที่ออกแบบตลอด เข้าใจเรื่อง Usability ส่วนอีกประเภทคือ Graphic Designer ที่มาออกแบบเว็บ เว็บอาจจะดูสวยกว่าเพราะภาพอลังการ แต่แน่หละเมื่อนำไปใช้งาน ความรู้สึกมันต่างกันนะ” — @manatsawin

[อ่านบล็อค @Fantasier](https://itongla.wordpress.com/2011/07/31/things-from-wmc3/)

ปล. ผมแนะนำว่า วิธีที่ยุติธรรมที่สุดคือเปิดเผยคะแนน หรือเขียนวิจารณ์ทีละเว็บ แบบ NSC ที่จะเขียนจุดเด่นด้อย คำแนะนำของกรรมการให้ในแต่ละรอบด้วย