คำสั่ง debugger; ใน javascript

เพื่อนๆ คงคุ้นเคยกับหน้าจอนี้ใน Developer Tools ของ Chrome/Firefox/Safari ที่เราสามารถกำหนด breakpoint เพื่อหยุดการทำงานโปรแกรม และไล่ดูสถานะของตัวแปรต่างๆ รวมทั้งรันโปรแกรมต่อไปจนถึง breakpoint ต่อไปได้

สมมติว่าฟังก์ชันนี้ซับซ้อนมาก… เราก็กำหนด breakpoint และรันโปรแกรม บราวเซอร์0tโชว์สถานะของตัวแปรต่างๆ ว่า ตอนนี้ a = 1, b =2 , …

เรารู้ว่าบราวเซอร์มี feature นี้ช่วยให้เราเขียนโปรแกรมง่ายขึ้น… แต่ไม่ค่อยได้ใช้เพราะการไล่เปิด tab source code และกำหนด breakpoint ตำแหน่งที่เราต้องการนั้นยากเหลือเกิน (บางกรณีทำได้ยากเพราะใช้ dependency injection/asynchronous module load) ทำให้ Chrome ไม่แสดง source code โปรแกรมเราให้เลือก

คำสั่ง debugger; ช่วยคุณได้!

เมื่อหาบรรทัดที่จะกำหนด breakpoint ไม่เจอ (หรือหาเจอแต่ขี้เกียจเพราะใช้เวลานาน) ลองทำตามนี้ดีกว่า

1. ใส่คำสั่ง debugger; ไว้ใน source code ตำแหน่งที่ต้องการกำหนด breakpoint เช่น

   function addMe() {
       var a = 1;
       var b = 2;
       debugger;  // ใส่บรรทัดนี้
   
       var c = a + b;
       document.getElementById("result").innerHTML = "a + b = " + c;
   }

2. Reload หน้าเว็บ และเปิด Developer Tool tab Sources (ใช้ได้ใน Chrome, Firefox, Safari)
3. รันโค้ดให้ถึง breakpoint

อ่านเพิ่มเติม:

• debugger – JavaScript | MDN

ใช้จอย DualShock 3 บน Windows 10

1. ทำตามขั้นตอนใน http://pcgamingwiki.com/wiki/Controller:DualShock_3
   เพื่อติดตั้ง Driver
2. Disable Driver signature enforcement ของ Windows 10 ตามขึ้นตอนนี้
   1. Go to Start Menu and open Settings
   2. Go to Update and Recovery
   3. Choose Recovery from the left pane
   4. Under Recovery section, choose Advanced Startup
   5. Your computer will restart and you’ll get advanced startup options on the next boot
   6. In these options, choose Troubleshoot
   7. Now head to Advanced options
   8. And then Startup settings
   9. The computer will restart again and it will give you the list of startup settings you can change
   10. You should look for Disable driver signature enforcement, to turn off this option, press F7
   11. Restart your computer and boot normally
       (ขั้นตอนจาก: http://windowsreport.com/ps3-controller-windows-10/)
3. ใช้จอยได้ตามปกติ (จะมองเห็นเป็น Xbox 360 Controller)

metaclass = class ที่ใช้สร้าง class ครับ

ชอบคำตอบนี้ใน stack overflow มากครับ

http://stackoverflow.com/a/6581949/554894

git diff ด้วย meld

ปกติ git diff ใช้ดูการเปลี่ยนแปลงของไฟล์ได้แบบ text mode เช่น

ผมติดใจใช้ meld เป็น diff tool มาโดยตลอดเพราะทำให้เห็นการเปลี่ยนแปลงง่ายขึ้นเป็นแบบนี้

ที่ผ่านมาผมก็ config git ให้ใช้ meld ด้วยท่าแปลกๆ แล้วก็ใช้มาเรื่อยๆ แต่จะมีอยู่จุดนึงที่รู้สึกว่าลำบากไปหน่อยคือเวลา git diff ระหว่างเวอร์ชั่นแล้วมีไฟล์ที่ต่างกันหลายๆ ไฟล์ เช่น

git diff 1.0..2.0    # สมมติมี 10 ไฟล์ที่ต่างกันจะมีหน้าต่าง meld เด้งขึ้นมา 10 ครั้ง

รู้จักกับ git difftool

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

1. ติดตั้ง meld และตั้งค่า git

   sudo apt-get install meld         # Ubuntu
   brew install homebrew/gui/meld    # OSX
   git config --global diff.tool meld

2. เวลาอยากดูการเปลี่ยนแปลงก็เรียกคำสั่ง

   git difftool   # ใช้แทน git diff ได้เลย

3. แต่ที่เจ๋งไปกว่านั้นคือ

   git difftool -d 1.0..2.0      # คำสั่งนี้จะเปิด meld ในโหมด dir diff

บอกลาหน้าต่าง meld เด้งขึ้นมา 10 ครั้งไปได้เลยเพราะคุณจะเจอกับหน้าจอนี้แทน

หน้าจอ meld จะสรุปว่ามีไฟล์ไหนที่แตกต่างกันบ้าง ให้เราดับเบิ้ลคลิกเข้าไปดูไฟล์ที่สนใจได้ทันที

ปกติชอบใช้เครื่องมือ diff/merge ตัวไหนกันบ้างครับ?

GIF with H.264

เคยสงสัยไหมว่าทำไม GIF ใน facebook ถึงกดหยุดได้ ณ จังหวะที่เรากดทันที (ลองเล่นได้ที่นี่ หรือลอง inspect ดูได้ท้ายโพสต์)

ก็เพราะว่ามันไม่ใช่ GIF จริงๆ น่ะสิ

นี่มันวีดีโอชัดๆ! เป็น html5 video ที่เล่น loop และ play/pause ตามการกดของเรา

สงสัยไหมทำไม GIF ใน facebook ถึงโหลดเร็วกว่าเว็บอื่นๆ

GIF ต้นฉบับ 5MB:

H264 Video 231KB:

ถ้าไม่ใช้ Video หละจะกด Play/Pause GIF ได้ไหม?
ตอบ ได้ ใช้ 2 รูปสิ GIF กับภาพนิ่ง 

SciTE กับภาษาไทย tis620

พอดีต้องกลับไปแก้โค้ด php ที่ใช้ encoding tis-620, windows-874

หาทางใช้ Sublime Text เปิดแล้วไม่สำเร็จเลยกลับไปขุด Text Editor ตัวโปรดตอนเรียนป.ตรีมาใช้ มันคือ SciTE

สามารถตั้งค่าให้เปิดไฟล์โค้ดภาษาไทยได้โดยกด Options -> Local settings

code.page=620
character.set=222

.ssh/config: สร้าง shortcut สำหรับ ssh ที่ใช้บ่อยๆ กันเถอะ

เวลาจะ SSH แล้วต้องมานั่งนึกมั้ยครับว่า server นี้ใช้ user/port อะไร, domain บางทีก็ยาวจนขี้เกียจพิมพ์ คำสั่ง ssh ใช้ option -p ระบุ port ส่วน scp ต้องใช้ -P (พีใหญ่) พิมพ์ผิดพิมพ์ถูกหลายครั้งกว่าจะส่งไฟล์ได้

ssh -p 2345 satoshi@gym1.pewter.com
scp -P 2345 satoshi@gym1.pewter.com:~/pikachu.txt .

ไฟล์ ~/.ssh/config

ไฟล์ ~/.ssh/config ช่วยให้เราตั้งค่า username, port, domain สำหรับ host ที่เราใช้บ่อยๆ เก็บไว้ได้

Host gym1                   # ตั้งชื่อเล่น
        HostName gym1.pewter.com    # หรือใช้ IP ก็ได้
        User satoshi
        Port 2345
Host red                    # มีได้หลายๆ host เลย
        HostName team-rocket.com
        User nyarth
        Port 4529

เวลาจะใช้ ssh ก็พิมพ์เพียงแค่ชื่อ Host สั้นๆ ก็พอ

ssh gym1
scp gym1:~/pikachu.txt .

ปล. ลอง man ssh_config ดูได้นะครับว่ามี options อะไรให้ใช้อีกบ้าง

ทำไมคีย์บอร์ดแม่นแม่นไม่มีเลข ๑ ไทย?

เหตุผลที่ไม่มีเลข ๑ ไทย (ในเวอร์ชั่นแรกๆ) และตัวอักษรอื่นๆ ที่หายไปเพราะ….

ส่ง patch ไปโปรเจค open source

เคยใช้ SMACK library ในการทำงานครับ ต้องเขียนโปรแกรมคุยผ่านโปรโตคอล XMPP (ที่ใช้ใน GTalk)

ระหว่างหัดเขียนอย่างงงๆ ก็ใช้ feature IBB (In-Band Bytestream) เพื่อส่งไฟล์ครับ

ปรากฏว่าเจอปัญหาแปลกๆ เหมือน SMACK มันคุยกับ server คนอื่นไม่รู้เรื่อง เลยไปไล่ๆ อ่าน XEP (XMPP Extension Protocol) ปรากฏว่า น่าจะมีสักคนที่ implement ไม่ตรงตาม protocol

ก็ส่ง patch เข้าไป เขาก็รับครับ… ดีใจ 🙂
http://community.igniterealtime.org/message/234808

ผ่านไป 3 ปี, protocol มีการปรับปรุงแก้ไขนิยามที่คลุมเคลือ จาก

The base64-encoded data to be sent, prior to any wrapping in the element and IQ or message stanza, MUST NOT be larger than the ‘block-size’ determined in the bytestream negotiation.

—XEP-0047 (version 1.3)

เป็น

The data to be sent, prior to base64-encoding and prior to any wrapping in XML, MUST NOT be larger than the ‘block-size’ determined in the bytestream negotiation.

—XEP-0047 (version 2.0)

กลายเป็นว่า protocol โดนปรับให้ตรงกับ implementation ที่มีแพร่หลายครับ และ patch ก็โดน reverse แล้วครับ

เล่น OX กัน

เผอิญค้นไปเจอรูปนี้ในเครื่อง 🙂 หยิมมาแปะไว้บนบล็อกกันหาย

เคยมั้ยครับ? เล่นเกมแล้วสงสัยว่า คอมมันคิดยังไงนะ… ผมเคยเล่นเกมต่อจุดแล้วแพ้มันตลอดเลย (เกมที่ใครต่อจุด 5 จุดเป็นเส้นตรงได้ก่อนชนะ)

พอไปเข้าค่าย อาจารย์ก็ให้ลองเขียนเกม OX ขึ้นมา ให้คอมคิดเองได้บนตาราง 3×3 แล้วเราก็ WOW!!

ผมได้รู้จักกับ Minimax ครั้งแรกก็ตอนเขียนโปรแกรมในค่ายหละครับ พอดีมีน้องๆ ที่โรงเรียนอยากทำ project เกมหมากรุก… ให้คอมเล่นสู้กับคนได้ เลยลองวาดๆ รูปข้างบน อธิบายให้น้องฟัง

ไม่แน่ใจว่าน้องฟังเข้าใจรึเปล่า แต่ก็เห็นเขียนออกมาได้แฮะ 😀

เกม OX: ใครเรียง O หรือ X ได้ครบ 3 ในแนวตั้ง แนวนอน หรือทแยงมุมได้ก่อนเป็นผู้ชนะ

ภาพข้างบนอธิบายวิธีคิดของ คอม กับ คน(จำลอง) ในแต่ละตาครับ

คอม จะลองลงในช่องว่างที่เหลือ แต่ละช่อง และตัดสินใจเลือกว่า ลงช่องไหนแล้วทำให้ตัวเองชนะได้
คน จะลองลงในช่องว่างที่เหลือ แต่ละช่อง และพยายามเลือกว่า ลงช่องไหนแล้วทำให้ตัวเองชนะได้

ถ้าการลงครั้งนั้น ยังไม่รู้ว่าผลจะออกมาเป็นยังไง ก็คิดต่อไปจนกว่าจะจบเกมส์… คิดลึกลงไปเรื่อยๆ ตาม Pseudocode นี้

เกม OX ที่มีตารางขนาด 3×3 เราสามารถคิดรูปแบบที่เป็นไปได้จนจบเกมส์ได้…

แต่เกมส์ที่ซับซ้อนขึ้นเช่น OX ขนาด 4×4 (คอมคิดนานหน่อย) หรือหมากรุกไทย หมากรุกฝรั่ง

โปรแกรมอาจไม่สามารถคิดล่วงหน้าไปจนจบได้… เพราะรูปแบบที่เป็นไปได้เยอะมากกกก

คนเขียนโปรแกรมเลยต้องตัดสินใจว่าจะคิดล่วงหน้าไปกี่ตา… แล้ววัดว่า กระดานหมากรุกนั้น คอมหรือคนมีโอกาสชนะ/แพ้มากน้อยแค่ไหน 🙂