เนื่องมาจากว่า Facebook Game นั้นจะมีระบบหลายๆอย่าง ที่จะเกี่ยวข้องกับ Friend ใน Facebook เช่น

การ Request Item จากเพื่อน, Publish Feed ให้เพื่อนคลิ๊กให้ และ อื่นๆอีกหลากหลายรูปแบบ

ดังนั้นในการ Test Game เพื่อทดสอบระบบและหาบั๊ก จึงต้องมีการให้ Facebook ID มากกว่า 1 อันครับ

ทีนี้จะให้นั่ง Log in / Log out บ่อยๆก็เหนื่อยตาย จึงจำเป็นต้องเปิด Browser หลายๆอัน ที่ Log in Facebook คนละ ID กันครับ

ถาม : ทำไมไม่ใช้ คนละ Browser กันล่ะ

ตอบ: ในหลายๆครั้ง ใช้ มากกว่า 3 ID ครับ Browser ที่ใช้ทดสอบมีแ่ค่ Firefox, Chrome, IE ก็หมดละครับ

จำนวนบอทที่ผมใช้ในการทดสอบเกม

มาที่วิธีทำกันเลยดีกว่าครับ
คลิ๊กขวาที่ Short Cut ของ Firefox ครับ

จากนั้นให้เติมคำว่า -profilemanager -no-remote ต่อท้าย Path ของ firefox ในช่อง Target ครับ
ตัวอย่าง
“C:\Program Files (x86)\Mozilla Firefox\firefox.exe” -profilemanager -no-remote

เท่านี้ทุกๆครั้งที่กดเปิด Firefox ก็จะมีหน้าต่างให้เลือก Profile โผล่ขึ้นมาให้เลือกทุกครั้งแล้วครับ

ปล.1 ถ้ามีแค่ Profile Default อันเดียวก็สร้างเพิ่มครับ ง่ายๆ กด next ไปเรื่อยๆ

ปล.2 ถ้ารำคาญที่จะต้องเลือกทุกครั้ง ก็สร้าง Short Cut แยกไว้ 2 อันครับ อันนี้เป็นธรรมดา กดแล้วเปิด Default Profile เลย

วันนี้จะมาเสนอวิธีการง่ายๆให้มัหยุดขยับซะ

ด้วยการกดปุ่ม Esc ซะ แค่นี้ก็จบแล้ว

หรือจะเอาไปประยุกต์ใช้ หรือดูหรูหน่อยก็ สั่งด้วย javascript : window.stop();

(หาวิธีให้กลับไปวิ่งไม่ได้ เลยเอามาใช้ต่อไม่ค่อยได้ =w=)

• Firefox ใช้เวลา Startup Program นานมาก หลายนาที
• กินแรมมหาศาล (ส่วนนึงเพราะผมลง Extension ไว้เยอะด้วยนั่นแหละ)
• ลง Extension ต้อง restart

แค่นี้ก็เพียงพอที่จะทำให้ผมเปลี่ยนใจมา Chrome ได้แล้วละครับ(ฮา) เพราะมันเร็วกว่ามาก และมีตัวจัดการ Process ของแต่ละ Extension ได้อย่างลื่นไหลโดยไม่ต้อง restart browser เอาเป็นว่ามาเข้าเรื่องกันดีกว่า เนื่องในตอนนี้ Google Chrome 4.0 ได้ support Extension ค่อนข้างสมบูรณ์มากแล้ว สามารถดาวน์โหลดได้ที่นี่ เมื่อดาวน์โหลดเสร็จแล้วมีเว็บรวม Extension อยู่สองเว็บคือ Official Site ของ Google และเว็บ Chrome Extension ส่วน Extension ที่ผมขอแนะนำมีดังนี้

• Last Pass ตัวช่วยจำ password ผ่านเว็บไซต์ แต่ตัวนี้ต้องสมัครสมาชิกกับทางเว็บมันซะก่อน ตัวนี้ผมใช้ตั้งแต่ยังใช้ Firefox อยู่ work ดีครับ เข้าเว็บแล้วไม่ต้องคลิกอะไรก็ล็อกอินให้เลย และเก็บข้อมูลไว้ที่เว็บ ไม่ใช่ในเครื่อง จึง secure กว่า
• AdBlock+ ใช้บล็อคโฆษณาหรือ content ส่วนที่เราไม่ต้องการดูได้ตลอดกาล ใช้แทน Adblock Plus ใน Firefox ได้เลย(แต่มีจุดอ่อนคือต้องคลิกเอง ไม่มีฐานข้อมูลให้เหมือนของ Firefox)
• RSS Supscription เป็นตัว auto detect rss ในหน้าเว็บเหมือน Firefox ใครขัดใจที่ Chrome ไม่มีไอคอน rss ให้คลิกที่ช่อง URL ก็ลงตัวนี้แก้ขัดได้
• Facebook Notifications ตัวเช็ค Notifications มุมขวาล่างของ Facebook ครับ ใช้งานได้ดี เสียอย่างเดียวตอนคลิกจะดูว่ามีอะไรใหม่มันโหลดช้าไปหน่อย
• Gmail Checker Plus ตามชื่อครับ แต่ผมชอบที่สามารถ Mark as read, Delete, Reply ผ่าน extension ได้เลย ไม่ต้องเข้าเว็บ Gmail รอโหลดให้เสียเวลา
• IE Tab เหมือนของ Firefox ครับ เปิด IE ใน tab Chrome
• Delicious Bookmarks ตัว sync bookmark ที่ผมใช้อยู่ประจำ เก็บข้อมูลบนเว็บ เวลาย้ายเครื่องก็ไปค้นได้ไม่มีปัญหา CTRL+D เพื่อ bookmark เว็บได้ แต่ระบบ search ยัง search จาก tag ไม่ได้
• Mouse Stroke (Mouse Gesture นั่นแหละ) เอาไว้ลากเม้าส์ไปทางซ้าย, ขวา แทนกด back, forward ได้
• Smooth Scroll เอาไว้ตอนเลื่อน scrollbar ให้เท่ห์ขึ้น
• Chrome Bird แทน Echofon(TwitterFox) ใน firefox ได้เลยครับ ใช้เล่น Twitter ผ่าน Chrome นั่นเอง
• Youtube Downloader ตามชื่อครับ เพิ่มปุ่มดาวน์โหลดในเว็บ youtube
• One Manga Full Chapter Loader อันนี้ไว้อ่านการ์ตูนเว็บ onemanga ครับ เพื่อความบันเทิงส่วนตัว 555 (Chrome สามารถ install UserScripts ได้เลยโดยไม่ต้องอาศัย Greasemonkey เหมือนอย่าง Firefox ครับ)

สำหรับ Firebug นั้นตัว Chrome เองมี Developer Tools อยู่แล้ว (คลิกขวา Inspect หรือ CTRL+Shift+I) สามารถแก้ HTML, edit css, Debug Javascript, ตรวจ Resource(tab net ใน firebug) และดู cookie ได้ แม้จะยังใช้ไม่ง่ายเท่า Firebug แต่ก็พอจะแทนที่ได้ครบแล้ว

มาใช้ Chrome กันเถอะครับ!

หัวข้อที่ผมเอาไปพูดก็คือ Web design Tips & Technique 1.5
(ที่ต้องเป็น1.5 เพราะว่าทำ2ไม่ทัน ในslideเป็นของครั้งแรกที่พูดใน barcampbkk2 ซะครึ่งนึง)

ทีนี้ในslideก็จะมีหัวข้อนึงน่ะครับ ที่เกี่ยวกับเครื่องมือในการทำงานกับhtmlและcss
ซึ่งเดี๋ยวผมจะพูดต่อไปนี่แหละครับ ว่ามันมีเครื่องมืออะไรที่น่าใช้บ้าง
(ตกลงที่แพล่มไปตั้งนานนี่ไม่ได้เกี่ยวเลยใช่ไหม…. -_-”)

ก่อนอื่นเลยครับ ผมขอแบ่งเครื่องมือออกเป็น3ประเภทหลักๆคือ

1. เครื่องมือสำหรับการสร้าง html และ css (Creation)
2. เครื่องมือสำหรับการตรวจสอบการรับรองการทำงาานบนBrowserต่างๆ (Check Compatibility)
3. เครื่องมือสำหรับการแก้บั๊ก (Debug)

1. Creation

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

2. Check Compatibility

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

browser ที่ผมตรวจสอบนั้น ปกติแล้วก็จะมี Firefox , ie7 ,ie6 ครับ
(แต่สำหรับในเว็บนี้ ขอออกตัวไว้ก่อนเลยครับไม่ได้รับรองie6)

แต่ก็มีคำถามตามๆมาครับ ว่าแล้วจะเช็ค ie6 ยังไง ในเมื่อwindowเราลง ie7 ไปแล้ว
มันก็มีหลายๆวิธีน่ะนะครับ ทั้ง ietester , ie6 portable

แต่ผมก็ยังเจอจุดผิดพลาดทั้งสองตัวอยู่ ตัวที่ผมใช้ในปัจจุบันและ happy กับมันที่สุดคือตัวนี้ครับ

XENOCODE สำหรับตัวนี้ไม่จำเป็นต้องลงโปรแกรมไว้ในเครื่องด้วยครับ
เพราะมันสามารถรันbrowserที่ท่านต้องการผ่านหน้าเว็บได้เลย
ซึ่งนอกจาก ie6 แล้ว xenocode ยังสามารถรันbrowserอื่นๆได้อีกด้วย (ลองไปเล่นกันดูเองละกันครับ)

3.Debug

จะมีใ้ช้ด้วยกัน2ตัวครับคือ firebug ซึ่งเป็น add-on อยู่บน firefox (คิดว่าหลายๆท่านน่าจะรู้จักกัน)

และ IE developer toolbar สำหรับ บน ie ครับ

แต่คราวนี้ผมจะมาพูดถึงอีกปัญหานึงครับ ไม่ใช่ปัญหาธรรมดาๆอย่างที่กล่าวมา

ก็ไม่รู้จะอธิบายเป็นคำพูดยังให้เข้าใจง่ายๆยังไงอ่ะนะครับ ลองไปดูจากตัวอย่างเลยดีกว่า

<div style=”background:#567ED4;padding:20px;”>
<img src=”color_code_567ED4.png”>
</div>

นี่คือโค้ดHTMLที่ผมกำหนดให้พื้นหลังของ div มีค่าสีเป็น #567ED4

ซึ่งเป็นสีเดียวกับรูป color_code_567ED4.png

แล้วลองมาดูผลที่ไ่ด้ใน firefox และ ie ครับ

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

ซึ่งปัญหานี้เท่าที่ผมค้นหามา รู้สึกว่าจะเจอแต่บน ie เท่านั้น browserอื่นๆ ไม่มีปัญหาอะไร

ส่วนวิธีแก้น่ะหรอครับ เหอะๆๆๆ

…

ผมก็ใช้วิธีโง่ๆเอาด้วยการใช้รูป png ที่เป็นสีที่ต้องการนั้นแหละไปใส่เป็น background แทน