Life On VM

ค่อนข้างจะเป็นเรื่องคึกโครมหลังมีข่าวเรื่องพอร์ตของ Quake II บน HTML5 ออกมา อยากจะรวบรวมงานเจ๋งๆที่เห็นไว้หน่อย เผื่อว่ายังมีคนไม่เคยดู

จริงๆแล้ว HTML5 มันมีหลาย features มาก แต่ demo ส่วนใหญ่ที่เห็นแล้วรู้สึก “อึ้ง” มักจะเป็นการใช้ Canvas ประกอบกับอาศัยการทำงานของ JavaScript ที่เร็วขึ้นมากใน Browser ใหม่ๆ

Quake II

สดๆ อันนี้น่าจะเคยเห็นกันหมดแล้ว

ผมแอบสงสัยเหมือนกัน ว่าถ้าของมันดีจริงทำไมไม่ทำ demo link ให้กดเข้าไปดูง่ายๆหว่า …’ ลองดูใน FAQ เค้าก็บอกนะว่ามันติดปัญหาลิขสิทธิ์ sth

NES (Famicom) Emulator

ผมเป็นหนึ่งในคนคลั่งไคล้ Emulator ครับ! เวลาเห็นอะไรแบบนี้ตื่นเต้นทุกที

วิธีเขียน Emulator พวกนี้ก็ต้องเขียนโปรแกรมขึ้นมาจำลองการทำงานของ CPU นั่นแหละ (รวมถึงส่วนที่เป็น game controller, video, audio, memory ด้วย) โดยทำการจำลองการทำตาม instruction แต่อันใน binary ของตัว ROM (หมายถึงตัวเกม) ความเจ๋งก็คือว่าการทำงานทั้งหมดนี้ทำใน JavaScript ทั้งหมดเลย!

Phong Shading

อันนี้คนเคยเรียนวิชากลุ่ม CG คงคุ้นหูมิใช่น้อย …’’

HTML5 Paint

ทำออกมาเกือบเหมือน Photoshop เลยทีเดียว แต่เท่าที่ผมดูมันก็ยังเอ๋อๆอยู่บ้างนะ (เช่นลาก selection แล้วขอบมันเลื่อนไปเรื่อยๆ)

เป็นเดโมอันแรกๆที่ทำมาแล้วรู้สึกว่า HTML5 เจ๋งว่ะ!

สำหรับผมแล้ว อะไรที่คลิกขวาลงไปแล้วไม่มีชื่อ Adobe โผล่มานี่ให้ความรู้สึกดีขริงๆ T-T … ไม่ได้ชิงชัง Adobe นะครับ แต่แค่มันให้ความรู้สึกว่ามันเบา (lightweight) ไม่ต้องโหลด plug-in อะไรมาเพิ่มระหว่างเราเปิดเว็บ แต่คนใหญ่คนโตบางคนก็มีวิสัยทัศน์กับ Adobe ชัดเจนเหมือนกัน โดยการทำให้ผลิตภัณฑ์เกือบทุกตัวใช้ Flash ไม่ได้ ^ ^” ไอ่เรื่อง Flash มัน bug เยอะ จริงหรือไม่จริงนี่ในฐานะผู้ใช้เราตอบได้น้อยมาก ปัญหาบางอย่างมันอาจจะเกิดมาจากคนใช้ Flash จริงๆ แต่บางที Jobs อาจจะเจอสถานการณ์แบบ Apple submit bugs ไป support ของ Adobe แล้วทางนั้นไม่ยอมแก้ซักที หรืออะไรแบบนี้ก็เป็นได้

On Google: We did not enter the search business, Jobs said. They entered the phone business. Make no mistake they want to kill the iPhone. We won’t let them, he says. Someone else asks something on a different topic, but there’s no getting Jobs off this rant. I want to go back to that other question first and say one more thing, he says. This don’t be evil mantra: “It’s bullshit.” Audience roars. 

About Adobe: They are lazy, Jobs says. They have all this potential to do interesting things but they just refuse to do it. They don’t do anything with the approaches that Apple is taking, like Carbon. Apple does not support Flash because it is so buggy, he says. Whenever a Mac crashes more often than not it’s because of Flash. No one will be using Flash, he says. The world is moving to HTML5.  

ในฝั่งชุมชนผู้พัฒนา ผมลอง surf เล่นๆดูก็เจอคำถามประเภทว่า "เริ่มใช้ HTML5 ได้รึยัง?” พอสมควร แต่ส่วนใหญ่จะได้คำตอบว่า “ยัง” เพราะพวก browser ยังไม่ค่อยพร้อมกันเท่าไหร่ ยังมี behavior ที่ไม่เหมือนกันอยู่อีกมาก

ณ เวลานี้ ส่วนตัวผมรู้สึกว่า technology มันดูมีอนาคตมากมาย ไว้อีก 3 ปีมาดูกันว่าจะเป็นยังไง (ถ้าตอนนั้นยังเขียนบลอกอยู่นะ = =’)

Tags: html5, flash, apple

ทุกวันนี้พวกเราทำงานกับข้อมูลจำนวนมาก มันเป็นศาสตร์ใหญ่ๆอย่างนึงเลยทีเดียวในเรื่องของวิธีการเอาข้อมูลมาแสดง ว่าการแสดงในรูปแบบไหนถึงจะทำให้ผู้ชมเข้าใจข้อมูลได้ง่ายที่สุด และสามารถ reveal feature บางอย่างที่ถ้าสังเกตจาก representation อย่างอื่นแล้วอาจจะมองไม่เห็น!

รูปด้านบนเกิดจากการเอาโพสต์จากบลอกภาษาอังกฤษของผมมาตัดคำแล้วเอามาทำเป็นต้นไม้ จะเห็นได้ขึ้นมาชัดระดับนึงว่า เวลาเราเขียนคำๆนึงแล้ว เรามักจะเอาคำอะไรมาต่อ (อื้มมมม น่าจับพวกเนื้อเพลงมาทำ คงฮาระดับนึง :P) อันนี้มีคนใจดีทำไว้ให้เล่น ที่ Many Eyes

อันนี้เป็นอีกรูปนึงที่ความถี่ของคำเยอะกว่ารูปแรกมาก (ใช้คำว่า I)

จริงๆแล้วตัวเว็บมันยังมีรูปแบบในการ Visualize ให้เล่นอีกหลายแบบมาก รวมถึงรูปแบบข้อมูลที่เอา input ให้ระบบไปก็ยังมี 2 รูปแบบ ตัวอย่างข้อมูลที่เป็นโพสต์จากบลอกของผมเรียกว่า Free Text แต่ยังมีอีกแบบนึงที่เป็น Table ซึ่งทำให้สามารถนำเสนอข้อมูลที่มันสัมพันธ์กันซับซ้อนมากกว่า 1 มิติได้

ส่วนอันนี้เป็นอีกรูปแบบนึงที่เรียกว่า Phrase Net อันนี้จะเน้นการแสดงความสัมพันธ์ในระดับคำแทน เราสามารถเลือกได้ว่าให้ระบบแสดงความสัมพันธ์แบบไหน ตัวอย่างเช่น สัมพันธ์แบบเป็นวลีในรูปแบบ “A and B” หรือ “A’s B” หรือ “A of B” หรือ “A[space]B” อันที่เอามาให้ดูนี่เป็นแบบ “A[space]B” รู้สึกว่ารูปสวยดี (อันนี้เหมาะจะเอามาทำกับเนื้อเพลงมากกว่าอันข้างบนอีก ฮ่าๆ)

ส่วนอันนี้ชอบมาก! สวยกว่านั่งทำ Typography เองอีก โอ้ว!!! ใครโดนสั่งทำปกสมุดแล้วคิดอะไรไม่ออก เอาไอนี่ไปวางแก้ขัดได้เลย ~

สาขา ป.โท ที่ใกล้เคียงเรื่องพวกนี้ที่สุดน่าจะเป็นเรื่อง Human Computer Interaction (HCI) เคยอยากเรียนเหมือนกัน แต่จน .. เอ้ย! แต่โง่ …. เย้ยย! รู้สึกว่าถ้าไปเรียนก็คงสนุกดี (เข้าทาง) ชอบเรื่องพวกนี้มากๆเลย ถ้าไปเรียนก็อยากไปเรียน ”เพื่อความบันเทิง” อ่ะ (แต่คงยากจะเกิดเหตุการณ์แบบนั้นขึ้น –_-‘ ถ้ายังคงมีภาระชีวิตที่ต้องรับผิดชอบอยู่)

ใครสนใจก็ลองไปเล่นกันดู :)

Tags: visualization, algorithm, graphics, english

ตั้งชื่อบลอกไม่ถูก คำศัพท์ Java มันเยอะจัด (J2EE, Web Container, Servlet, ...)

ฐานโค้ดที่ผมดูอยู่ที่ทำงานมันค่อนข้างใหญ่มาก เป็นไฟล์ Text ขนาดรวมกันเกือบ 20 MB ซึ่งจริงๆแล้วส่วนที่เราจะเข้าไปมองจริงๆมันก็ไม่ได้เยอะอะไรหรอกครับ แต่ปัญหาก็คือว่า เราจะหาส่วนที่เราต้องการมาได้ยังไงจากข้อมูลที่เยอะขนาดนั้น ??? คำตอบหนึ่งคือใช้โปรแกรมพวก Cross Referencing เช่น OpenGrok จะช่วยให้ค้นหาส่วนของโค้ดที่ต้องการได้ง่ายขึ้นเยอะเลย นอกจากนี้ OpenGrok ยังสนับสนุนการทำ index บน repository ของพวก SCM Tools ต่างๆเช่น SVN, Git และ Mercurial อีกด้วย

เข้าเรื่อง … ปัญหาที่ผมเจอคือ OpenGrok มันดันไม่โชว์ History ให้ ซึ่งหลังจากถามไปใน mailing-list ก็พบว่ามันเกิดจากการหาโปรแกรม hg (Mercurial) ไม่เจอใน PATH ผมลองมา reproduce ที่บ้านบน environment ที่เป็น Windows ก็ยังเจอปัญหาเดียวกันอยู่ เลยต้องหาวิธี Debug OpenGrok ตอนนั้นคิดๆไว้หลายวิธี

• Build เฉพาะ Class ที่ทำหน้าที่ส่วนนั้นขึ้นมาใหม่ แล้วใส่ให้มันโหลดขึ้นก่อนใน CLASSPATH  .. อันนี้สุดท้ายก็ทำไม่ได้เพราะผม build เป็นไฟล์ๆไม่ได้มันติดพวก dependency เลยไม่รู้ว่าสรุปแล้วใช้วิธีนี้ได้ป่าว
• อ่านวิธี Build OpenGrok จากเว็บมันแล้วลองตั้ง breakpoint ตรงส่วนที่เป็นปัญหา อ่านแล้ววิธีนี้น่าจะง่าย แต่เนื่องจากว่าตัว Container ที่ใช้มันเป็น Tomcat แต่ปกติ Netbeans มันจะติดมากับ Glassfish เลยเกิดความขี้เกียด config ขึ้นมาในบัดดล
• ทำ Remote Debugging คือ start Tomcat ใหม่ให้มันรันแบบ Debug และเปิด port 7001 รอไว้ แล้วเอา Debugger เข้าไป attach … อันนี้ได้ผลครับ และง่ายมากด้วย แต่ต้อง build OpenGrok ได้น่ะ หลังจากตั้ง breakpoint ไว้แล้วปรากฎว่ามัน break จริงๆด้วยว่ะ! Watch + Evaluate ได้แทบทุกอย่างเลย

จริงๆ ASP.NET ก็มีของแบบนี้เหมือนกัน มันเหมาะมากเวลาเกิดปัญหากับ Application ใหญ่ๆที่การ Setup ให้เกิดปัญหาเดียวกันมันยาก ใช้แล้วก็รู้สึกว่า Java ก็ไม่เลวครับ : )

Java Options สำหรับ Start Tomcat

-Xdebug
-Djava.compiler=NONE
-Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=7001

แล้วใช้ Netbeans attach เข้าไปที่ port 7001 ของ localhost

Tags: j2ee, netbeans, tomcat, glassfish, mercurial, opengrok

หลังจาก Tweet ไปทำนองว่า “หลงรัก Hg เข้าแล้ว” นาย @teerapapc มันก็ทักไว้ตั้งแต่เมื่อวันก่อนว่าเด๋วคงได้เขียนบลอกแน่ ซึ่งก็เขียนจริงๆแต่ขอทิ้งระยะหน่อย เด๋วคำทำนายมันจะตรงไป อะแฮ่ม~!

หลังจากที่ผมอิดออดกับการเลือก Distributed Version Control System มาลองเล่นซักตัว จนเมื่อเร็วๆนี้เห็นข่าวว่า Google มัน supports Mercurial เพิ่มเรียบร้อยแล้ว (จากเดิมที่ support SVN อยู่แล้ว) โดย Google มีรายงานเหตุผลที่ Google เลือก Mercurial แต่ไม่เลือก Git ให้อ่านกันด้วย ผมอ่านแล้วเกิดความรู้สึกให้ไปเปรียบเทียบสองอย่างนี้กับ Emacs และ VIM ยังไงไม่ทราบ (ซึ่งผมเป็นสาวก VIM) คืออันแรกมัน customizable มากๆ แต่ก็ใช้ยากและ learning curve ชัน ส่วนอันที่สองมันค่อนข้างจะเรียนรู้ง่าย ถึงจะ features ไม่เยอะเท่าก็ตาม สุดท้ายผมเลยเลือกไปลอง Mercurial ตามรอยเท้าคุณ Google ซึ่งผลก็น่าประทับใจครับ :) มีเรื่องที่ชอบดังต่อไปนี้

• รู้สึกว่าคำสั่งบน command line ตรงไปตรงมาและใช้ง่ายมากๆ จนรู้สึกว่าไม่ต้องมี GUI (พวก Tortoise) ก็ได้ล่ะมั้ง (จริงๆแล้วอาจจะเป็นเพราะช่วงนี้ใช้ cmd line บ่อยมากก็ได้)
• หลายครั้ง GUI มันก็ช่วยให้เข้าถึงข้อมูลเร็วขึ้น ตัว Mercurial เองก็มี web server ย่อมๆ built-in มาด้วย เรียก hg serve –n “Gant Repo” แล้วก็เข้าไปดูเว็บที่ port 8000 ได้เลย ผมรู้สึกว่าไอเดียนี้เจ๋งมาก!
• เอกสาร Tutorial และ Quick Start ที่เว็บของเค้าเขียนอ่านแล้วทำตามได้ง่ายๆ ผมอ่านแล้วรู้สึกไม่หนักสมองเท่าไหร่ อ่านนิดเดียวก็เริ่มสนุกกับของเล่นใหม่ได้แล้ว

ปล. Hg = Hydrogentum = Mercury เป็นตัวย่อที่เท่และตรงไปตรงมา สำหรับคนเคยเรียนเคมี และรู้จัก Mercurial มาก่อน

Tags: mercurial

วันนี้พยายามจะเขียนโปรแกรมให้ export ข้อมูลออกจาก web app ที่ทำงานตัวนึงอัตโนมัติ เขียนไปเขียนมา account โดนล็อค - -‘ แกว่งเท้าหาเสี้ยนชัดๆเลย

[Test]
public void SearchForWatiNOnGoogle()
{
 using (IE ie = new IE("http://www.google.com"))
 {
  ie.TextField(Find.ByName("q")).TypeText("WatiN");
  ie.Button(Find.ByName("btnG")).Click();
  
  Assert.IsTrue(ie.ContainsText("WatiN"));
 }
} 

ใช้ง่ายเกินไปแล้ว!! สนใจเชิญที่ WatiN (สำหรับชาว .NET เท่านั้น – Web Application Testing in .NET - รุสึกจะมี WatiR ที่เป็นของ Ruby ด้วย)

มันเป็นเครื่องมือสำหรับให้พวก QA/Tester ใช้อ่ะครับ แต่คิดว่าถ้าจะเอาไปดัดแปลงทำ บอตโหวตคะแนน บอตลงทะเบียน หรืออะไรทำนองนี้ก็เอาไปทำได้ไม่ยากเลย

ข้อเสียคือใช้ได้กับ IE 6 7 8 เท่านั้น (Firefox อยู่ใน Roadmap) ถ้าอยากใช้กับ Firefox หรือ browser อื่นๆ ลองดู Selenium

ข้อเสียอีกอย่างคิดว่าคงเหมือนกับเครื่องมือทำนองนี้อื่นๆทั่วๆไป คือถ้าเมนูเป็น Flash เป็น Java Applet หรือเป็น ActiveX Object อะไรซักอย่าง มันจะทำให้เขียนโค้ดเข้าไป Automate ยาก (หรือทำไม่ได้) ขึ้นมาทันที

ปล. ต่อไปนี้จะพยายามเขียนบลอกให้สั้นๆ ได้ใจความมากขึ้น

Tags: testing, automation, c#

คงเคยรู้จัก vi และ emacs กันมาบ้างนะครับ ชื่อเสียงที่หนาหูเกี่ยวกับ editor สองตัวนี้คือมันใช้ยากกกกก

VIM หรือ vi-improved เป็น vi เวอร์ชันเพิ่มความสามารถครับ แล้วก็มีให้ดาวน์โหลดไปใช้ได้แทบทุก OS มันจะมีฟังก์ชันหล่อๆเพิ่มขึ้นมาที่ vi ไม่มี เท่าที่ผมเห็นว่าสำคัญมีอยู่สองสามอย่าง

• Autocomplete อันนี้หล่อมากเลย ยอมรับ ทำได้หลายอย่าง เช่น
  • ชื่อไฟล์ หรือ path ไปยังไฟล์ สะดวกมากเวลาต้องเขียนไฟล์ที่มันต้องระบุ path
  • คำที่เคยพิมพ์มาแล้ว
  • keyword ในภาษาเขียนโปรแกรม โดยมันเป็น context-sensitive ด้วย (Omni-completion) อันนี้อาจจะต้องลง plug-in เพิ่ม
• Multiple Tabs เปิด Tab หลายๆอันได้
• Visual Mode ทำให้การ คัดลอก ลบ แก้ไข เป็นเรื่องง่ายขึ้นมาก เลือกเป็นแบบ จุดเริ่มต้น-สิ้นสุด เป็นบรรทัด หรือเป็นคอลัมน์ได้ (อันหลังนี่เหมาะมากสำหรับไฟล์ข้อความที่ลักษณะเหมือนตาราง)

ตอนนี้ VIM เลยกลายเป็น text editor ที่ผมมักจะใช้แทน notepad ไปแล้วครับ :) ปัญหาจะเกิดอีกทีตอนใช้ภาษาไทย ซึ่งผมคิดว่าอย่าใช้ไฟล์ text ภาษาไทยกับ VIM เลยดีกว่า คนที่น่าจะมีปัญหานี้ที่สุดคงเป็นพวกเขียนเว็บ ..

หลังจากอ่านบทความจำพวกแนะนำ vi หรือ vi สำหรับมือใหม่ มานับไม่ถ้วน ผมพบว่าคำสั่งพื้นฐานเท่าที่จะสามารถทำให้เราใช้ VIM แทน Notepad ได้ มีอยู่ไม่กี่ตัว ดังต่อไปนี้

ออกจากโปรแกรม

พิมพ์ :q! ครับ

: เป็นการบอกว่าจะมี command อื่นๆตามมา ส่วน q แปลว่าออก และ ! แปลว่าออกแบบบังคับ (ถ้าเราแก้ไขไฟล์มันจะไม่ยอมให้ออกธรรมดา)

หรืออาจจะใช้ :wq เป็นการ save แล้วออก

ถ้า save เฉยๆก็ :w myfilename

ไป Command Mode

กด Ctrl + [ หรือ Esc

เราควรอยู่ใน Command Mode ตลอดเวลาที่ทำงานครับ ใช้ Insert Mode เฉพาะเวลาจะพิมพ์เท่านั้น :)

เคลื่อน cursor ไปมา

ใช้ปุ่ม h j k l แทน ซ้าย ล่าง บน ขวา

ถ้าพบว่าจำยาก ลองมองตัว j ว่ามันเหมือนลูกศรชี้ลงล่าง! แล้วจะจำได้ครับ (ได้มาจาก video youtube ซักอัน)

การเคลื่อนในระดับคำ

• w ไปคำต่อไป
• b คำก่อนหน้า

ระดับบรรทัด คล้ายๆกับ regex

• ^ ต้นบรรทัด
• $ ท้ายบรรทัด

ระดับ document

• gg ต้น document
• G ท้าย document

ไป Insert Mode

เข้าได้หลายแบบ แบบแรกควรรู้คือ a กับ i

• a ต่อหลัง cursor
• i วางหน้า cursor

และแบบที่สอง ที่หลังจากใช้สองอันแรกจนเจอปัญหาบางอย่างแล้วจะพบว่า Useful มาก คือ

• A หลังสุดของบรรทัด
• I หน้าสุด

และแบบสุดท้าย เป็นการแทรกบรรทัดว่างๆเข้าไป

• o แทรกบรรทัดใหม่ ใต้บรรทัดปัจจุบัน
• O แทรกบรรทัดใหม่ เหนือบรรทัดปัจจุบัน (So useful!)

ยกเลิก – Undo

กด u

อยาก Redo กด Ctrl+r

Autocomplete

• กด Ctrl + P เป็นการเติมจากคำก่อนหน้า
• กด Ctrl-x-f เป็นการเติมชื่อหรือพาธไปยังไฟล์ กด Ctrl-f ต่อจะวนรอบชื่อไฟล์ไปเรื่อยๆ
• กด Ctrl-x-o เป็น omni-completion อาจจะต้องลง plug-in เพิ่มสำหรับไฟล์บางแบบ (เช่น C++)

เพิ่มตัวบอกบรรทัด

:set ruler

Visual Mode

มีสามแบบ

• แบบเริ่มต้น - สิ้นสุด กด v
• แบบบรรทัด กด V
• แบบคอลัมน์ (Visual Block Mode) กด Ctrl + V

หลังจากกดแล้วจะใช้ cursor เลื่อนซ้ายขวาเพื่อ select ข้อความได้ ซึ่งหลังจาก select แล้วอาจจะทำอะไรได้หลายอย่าง เช่น

• ลบ กด d
• คัดลอก กด y (yank) เวลาจะเอาไปวางก็กด p หรือ P
• แทนที่ กด c แล้วพิมพ์คำตามเข้าไป แล้วกด enter (จะเห็นประโยชน์ตอนใช้ในแบบคอลัมน์)
• เพิ่ม tab ด้านหน้า (indent) กด >

ค้นหา

อันนี้ใช้บ่อยสุดๆ กด / แล้วพิมพ์ regular expression ของคำที่ต้องการค้น เช่น /search_key_word

นอกจากนี้ยังมีวิธีค้นหาแบบใช้ * คือเลื่อน cursor ไปเหนือคำที่ต้องการค้นหาแล้วกด * จะทำให้ VIM ทำ highlight ให้กับคำเดียวกันทุกคำในเอกสารนั้น เหมาะเวลาที่จะใช้เปลี่ยนชื่อตัวแปร หรือไล่โค้ด อะไรทำนองนั้น

แทนที่ – Replace

ใช้คำสั่ง :%s/before/after/gc

• ตัว c แปลว่า confirm คือให้ถามก่อนแทนที่
• ถ้าไม่มีตัว g มันจะแทนที่แค่บรรทัดละตัว
• before และ after เป็น regular expression ของตัวที่จะให้แทนก่อนและหลัง
• s เป็น substitute command
• % เป็นการบอกว่าแทนทั้งไฟล์ (จริงๆแล้วบอกเป็นเลขบรรทัดได้ แต่จะไม่ cover แล้วกัน)

จัดย่อหน้าให้สวยงาม

หลังจาก save ไฟล์ไปแล้ว VIM จะฉลาดพอที่จะทำ syntax highlight สวยๆให้ดู รวมถึงจัดย่อหน้าให้ไฟล์ให้ถูกต้องตามประเภทไฟล์ (เช่นไฟล์ .c .cpp)

กด gg=G

Tabs

จำเป็นเหมือนกันเวลาต้องเปิดสอง (หรือมากกว่า)ไฟล์คู่กัน จริงๆแล้ว VIM มันมี buffer ให้ใช้หลายๆอันด้วย แต่ผมว่า concept ของ Tab มันเข้าใจง่ายกว่านะ

• :tabnew path/to/filename เปิดไฟล์ หรือสร้างไฟล์ใหม่
• :tabc ปิด tab ปัจจุบัน
• gt และ gT ไปแทบต่อไป และก่อนหน้า

แก้ไขจาก command mode

การแก้ไขหลายอย่างทำจาก command mode ได้ ในที่นี้ผมรวม command แบบที่ต้องใช้ประกอบกับ motion ไว้ด้วย แต่ขอละไว้ เนื่องจากผมเองก็ไม่คล่อง –*- เอาเฉพาะอันที่ใช้กันบ่อยๆแล้วกัน

• r แก้หนึ่งตัวอักษร
• x ลบหนึ่งตัวอักษร
• dw ลบคำปัจจุบัน
• dd ลบทั้งบรรทัด
• dfg ลบจนถึงตัว g หรือ df” ลบจนถึงเครื่องหมายคำพูด
• d$ (ลองเดาดู)
• ggdG (ลองเดาดู)

ทำซ้ำคำสั่งสุดท้าย

กด . 

ผมไม่ค่อยได้ใช้แฮะ

note: ตัวที่ผมใส่สีน้ำเงินไว้ แปลว่าสำคัญอย่างยิ่งนะครับ :)

สิ่งนึงที่ผมเห็นว่า tutorial vi มักจะสอนคือการใช้ตัวเลขนำหน้าคำสั่งเพื่อบ่งว่าจะให้ทำคำสั่งนั้นกี่ครั้ง ซึ่งผมว่า มันแทบไม่ได้ใช้เลยว่ะ … โดยเฉพาะใน VIM ที่มี visual mode

การมี editor พื้นฐานสำหรับแก้ไฟล์ หรือ อ่านไฟล์ ง่ายๆบน unix ซักตัว เป็นอะไรที่ผมแนะนำอย่างยิ่งครับ และผมแนะนำ VIM เหนือ emacs (ไม่รู้ editor มันจะมี game tower of hanoi ไปทำไม ใช้ก็ยาก :[ )

ไปดาวน์โหลด VIM

Tags: vim

เวลาเราเข้าไปเรียนรู้ปัญหาในโดเมนใหม่ๆหรือทำโปรเจคอะไรซักอย่าง มันย่อมมีการ จด จด จด และจด ข้อมูลสำคัญที่เราอาจจะต้องใช้อีกบ่อยๆในอนาคต หรือไม่ก็เป็นข้อมูลที่มักซ่อนตัวอยู่ในเอกสารที่เข้าถึงยากๆ จดมาไว้รวมกันที่เดียวก็จะทำให้ค้นหาง่ายกว่า ยกตัวอย่างเช่น ถ้าเราไปเรียนภาษาโปรแกรมมิงใหม่ๆเราอาจต้องการเขียนโค้ดโปรแกรมสั้นๆ (ที่ยาวกว่า Hello World) ซักโปรแกรมนึงไว้เพื่อเป็นตัวแทน Syntax ของภาษานั้นๆเอามาใส่ไว้ในโน้ตของเรา เป็นต้น นอกจากนี้ยังเป็นการบันทึกไอเดียที่เกิดขึ้น “วูบ” หนึ่ง ไว้ไม่ให้หายไปอีกด้วย

มาดูกันดีกว่า ว่าชาวบ้านชาวเมืองเค้าใช้เครื่องมืออะไรในการจด “โน้ต” กันบ้าง :)

กระดาษ / สมุด

ไม่ต้องใช้อะไรมากมาย กระดาษ ดินสอ นี่แหละ

ข้อดี

• จดได้ค่อนข้างจะ Free form มากครับ จะวาดรูป ทำเส้นชี้ อะไรยังไงก็ได้
• ให้ความรู้สึกดีสำหรับคนที่ต้องการอะไรสัมผัสได้
• ใช้ง่าย

ข้อเสีย

• ค้นหา / คัดลอก / แก้ไข ข้อมูลยาก ยังไม่นับเรื่องคนที่ลายมือห่วยอ่านลายมือตัวเองไม่รู้เรื่องอีกนะ (ผมคนนึง  - -‘)
• มีอุปกรณ์เพิ่มอีกหนึ่งชิ้นเวลาไปไหนมาไหน

บลอก

จะจดไว้คนเดียวทำไม แบ่งให้คนอื่นอ่านด้วยดีกว่า :D

ข้อดี

• เผื่อแผ่ความรู้สู่โลก!
• เพิ่ม visibility ของตนเองในสังคม internet
• ได้รับ feedback จากผู้อ่าน สำหรับวิธีที่ดีกว่า หรือข้อมูลเพิ่มเติม
• เข้าจากที่ไหนก็ได้ที่ต่อ Internet :P
• เขียนดีๆ คนเข้าเยอะ ยังทำเงินค่าขนมได้จากการแปะ Ads อีกตะหาก
• ค้นหาง่าย
• ฝึกฝนภาษา (ถ้าเขียนเป็นภาษาอังกฤษนะครับ)

ข้อเสีย

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

วิกิส่วนตัว

เพิ่งได้ลองวิธีนี้มาเป็นเวลาสองเดือนกับ Tiddly Wiki ครับ ข้อดี + ข้อเสีย ส่วนใหญ่ก็เหมือนกับบลอก ผมตั้งไว้เป็นหน้าแรกใน Firefox ที่ทำงาน โปรแกรมมันใช้ง่ายมากเลยครับเพราะเป็นไฟล์ HTML ธรรมดาไฟล์เดียว (งงล่ะสิ ว่าแล้วมันมี permission แก้ไขตัวเองได้ยังไง ฮาาา)

ข้อดี

• ทำ cross reference ได้ เวลามี term บางอย่างที่อาจจะไม่เคลียร์ เช่น พวกตัวย่อ ก็จะสามารถทำลิงค์ไปหาหน้าที่อธิบายตัวย่อนั้นได้
• ทำงานเร็วมากเพราะรันบนเครื่อง ไม่ต้องใช้ internet
• เขียนอะไรสั้นๆ อ่านรู้เรื่องคนเดียวได้
• ค้นหาง่าย

ข้อเสีย

• วุ่นวายกับการ sync ถ้าต้องใช้บน PC มากกว่าหนึ่งเครื่องขึ้นไป ( เอ่อ … Mac ก็ใช้ได้นะ ..)
• มี syntax สำหรับการเขียนวิกิโดยเฉพาะ บางทีก็งงๆว่าจะทำตัวหนา หรือใส่รูป ต้องทำยังไง ..

นอกจากเครื่องมือต่างๆที่กล่าวมาแล้ว ยังมี Tool สำหรับจดโน้ตโดยเฉพาะเช่น Microsoft OneNote, Google Notebook เป็นต้น

อ่อ โพสต์นี้เป็นการกลั่นกรองข้อมูลจากกระทู้ดีๆใน StackOverflow.com นะครับ :)

Tags: productivity, wiki, blog

เหมือนที่ชื่อบอกครับว่ามันคงเป็นผลิตภัณฑ์ในตระกูล Profiler นั่นแหละ

Profiler เป็นโปรแกรมที่ไว้วัดประสิทธิภาพในการทำงานของโปรแกรม โดยอาจจะวัดในแง่เวลาการทำงาน หรือหน่วยความจำที่ใช้ โดยวัดกันได้ถึงระดับ Class, Method เลยทีเดียว ตัวที่เอามาลองวันนี้เป็นของ Redgate ทดลองใช้แบบ Evaluation ได้ 14 วันครับ

โปรเจคที่เอามาลองเป็นโปรเจค C# ในวิชา Game Programming ซึ่งเป็นเกม 3D ที่ใช้ Graphics Engine ตัวหนึ่งชื่อ OGRE3D (หรือสั้นๆว่า OGRE : Object-Oriented Graphics Rendering Engine) ตัวเดียวกับที่ใช้ทำ Senior Project

ตอนแรกก็สงสัยเหมือนกันว่าแล้วเราใช้ Library เสริมในลักษณะนี้ แล้วตอนทำ Profile โปรแกรมมันจะไม่อืดน่าดูเหรอ (ยิ่งเป็น Application ประเภทเกมด้วย) ปรากฎว่าตอนลองทำ Profile ดูแทบไม่เห็นความแตกต่างเลยครับ ตัวโปรแกรมก็ใช้ง่ายมาก มีการทำ Profile ได้หลายแบบ ทำไปสองแบบคือ Profile Performance และ Profile Memory เอามาให้ดูเฉพาะ Profile Performance

ส่วนอันนี้เป็นการดูรายละเอียดแต่ละ method ดูได้ว่าเข้ามาจากทางไหนบ้าง กระโดดไปทำงานต่อที่ไหนบ้าง แต่ละส่วนใช้เวลาเท่าไหร่

สรุปว่าก็เป็น Tool ที่มีประโยชน์ครับ ไว้หาคอขวดของโปรแกรม คือส่วนที่ทำงานช้าที่สุด (ในเคมีเรียกว่าขั้นตอนกำหนดปฎิกริยาสินะ) และ Profile Memory ก็เอามาไว้ช่วยหา Memory Leak ได้ (ยังใช้ไม่เป็น - -‘a)

Tags: profiling

อันนี้เป็นผลงานร่วมระหว่างผมกับน้องบุ๊ค (@hybridknight) นะครับ จริงๆมีความคิดเรื่องแนวๆนี้ผ่านเข้ามาในหัวเรื่อยๆบ้างตั้งแต่ตอนเรียนวิชาเกมแล้วขี้เกียดลอกอิน เพราะว่าบางทีก็พิมพ์รหัสนิสิตผิด พิมพ์เกินบ้าง ขาดบ้าง บางทีก็พิมพ์ password ตัวเองลงไปผิดช่อง คนอื่นมาเห็นก็แย่เลย บางทีพิมพ์ครบหมดก็ลืมกดยอมรับข้อตกลงอีก ..'' ก็เลยเป็นเรื่องที่ ... annoying พอสมควรครับ

ไอเดียเริ่มต้นคงอธิบายได้ด้วย Conversation ชุดนี้

ปัญหาอย่างเดียวของการลอกอินอัตโนมัติก็คือเจ้า "Captcha" นี่เอง  แต่เนื่องจาก captcha ที่เราเจอในเคสนี้ยังไม่หนักหนาสาหัสถึงขั้นจะแกะไม่ได้ครับ มีลักษณะคร่าวๆดังนี้

• ประกอบด้วยสีมากมาย
• มีเส้นพาดไปพาดมามากมายในฉากหลัง
• แต่ละตัวอักษรหมุนเอียงไปในทิศทวนเข็มนาฬิกา (เท่านั้น) ด้วยองศาไม่เท่ากัน

ก็เลยได้ไอเดียที่ว่าจะอ่านตัวอักษรในภาพได้ต้องทำดังต่อไปนี้

แยกเฉพาะตัวอักษรออกมาก่อน ทำโดยการแยกส่วนของภาพที่มีสีของตัวอักษรเท่านั้นออกมา ทำได้โดยการวิเคราะห์ Histogram หากสังเกตดูดีๆก็จะพบว่า สีของตัวอักษรนั้นจะเป็นสีที่ครอบครองพื้นที่ในรูปมากเป็นอันดับสองเสมอ (อันดับหนึ่งคือสี Background) ก็สามารถแยกออกมาได้โดยง่าย

ทำ OCR บนตัวอักษรที่แยกออกมา เลิกคิดเรื่องเขียนเองไปได้เลย หลังจากควานหา library ดูซักพักก็พบ  tesseract-ocr ที่ดูแลอยู่โดยพี่ Google แต่เนื่องจากตัว library มันเป็น C/C++ ดังนั้นถ้าจะเอามาใช้กับ .NET ก็จะวุ่นวายพอสมควร จะให้ไปเขียน C/C++ ก็คงมากไปสำหรับโปรเจคเขียนเล่นเอามัน ควานไปเรื่อยๆเจอคนใจดีทำ wrapper ไว้ให้ คือ Tessnet .NET Tesseract wrapper ทำให้ OCR ง่ายไปเลย (โค้ดตัวอย่างจากเว็บ)

หลังจากได้ทุกอย่างมาครบ ก็เริ่มทำโปรเจค มีการใช้คลาสพวก HttpWebRequest พวกนี้นิดหน่อยตามธรรมชาติของโปรแกรมลักษณะนี้

ผมได้โปรแกรมตั้งต้นหน้าตาเป็นแบบนี้

และหลังผ่านการปรับปรุงและเพิ่ม Feature เช่นแก้ส่วนของ Keep-Alive, จัดโปรแกรมลง Tray, และอื่นๆ โดยคุณน้องบุ๊ค @hybridknight ก็ได้อะไรประมาณนี้ออกมา http://twitpic.com/xmfe

โปรเจคนี้ทำเล่นเอามัน และ communicate ผ่าน Twitter ตลอด (จนเพื่อนบางคนอาจจะรำคาญ - -''a) ไม่มีจุดประสงค์ใดแอบแฝง

ตัวโปรแกรมและซอร์สโค้ด จะอัญเชิญเวอร์ชันล่าสุดจากน้องมาโปะให้เร็วๆนี้นะครับ และโปรแกรมนี้เพื่อการศึกษาเท่านั้นนะ :P

Tags: security, c#, c++, ocr, .net, cp, network, fun

วันก่อนไปฟังงานสัมนาประจำปีของ Software Park ที่ศูนย์ประชุมแห่งชาติมา เข้าฟังหัวข้อที่เป็น "MySQL - Yes, We can scale" พูดโดย ดร.ธนชาติ มา (ผมเคยเจอ ดร.ธนชาติอีกหนตอนท่านเป็นกรรมการในโครงการ Samart Innovation Awards)

เนื่องจากว่าตอนนี้ Sun ซื้อ MySQL มาเรียบร้อยแล้ว ก็เลยต้องโปรโมตกันหน่อย เรื่องของเรื่องคือ ดร.ธนชาติ พูดจนผมกลับบ้านมาอยากลองใช้เลยครับ บางคนอาจจะถามว่าอยู่มาได้ยังไงไม่เคยใช้ ผมก็เคยมีงานที่ต้องยุ่งๆกับ MySQL เยอะพอควร แต่ไม่เคยต้องทำงานออกแบบทั้งหมดบน MySQL เลย (เคยแต่ใช้ MS Access ต่อมาก็ SQL Server แล้วก็ Oracle) เคยแต่งานประเภทปรับปรุง แบ็คอัพ ใช้ phpMyAdmin เป็นบ้าง

ปัญหาอย่างหนึ่งของเจ้า phpMyAdmin คือ มันไม่มี GUI สวยๆประเภทลากแปะๆให้ใช้ ผมเลยต้องหาทางเลือกอื่น เคยใช้ DBDesigner มาก็ไม่ค่อยประทับใจเท่าไหร่ จนไปเจอ MySQL Workbench เข้า อินเทอร์เฟซบาดใจมากครับ

ปัญหาอย่างเดียวคือ เวอร์ชันที่มันฟรี (OpenSource) มันไม่สนับสนุนการ Sync กับตัว MySQL Server ที่ทำได้ก็คือต้อง export เป็นไฟล์ .sql แล้วไปเรียกคำสั่ง mysql ผ่าน cli เอาเอง (หรือไม่ก็ใช้ import ใน phpMyAdmin) 

ลองไปเล่นกันดูครับ ดาวน์โหลดที่ http://dev.mysql.com/workbench

Tags: mysql, sql