สรุปเนื้อหางาน Bug Day Bangkok 2013 by heha
Mar0
Openning Session
- ฟังทีมงาน CP โม้ว่ากำลังวิจัยหุ่นยนต์ จะเอาไปใช้งานใน 7-Eleven 7000 สาขา
- ชอบมาก Case Study จากอเมริกาที่ว่า “วางขวดเบียร์ข้างๆ ผ้าอ้อมแล้วยอดขายเพิ่มขึ้น 50%” เหตุเพราะผัวโดนเมียใช้ให้ไปซื้อผ้าอ้อม แต่ผู้ชายไม่มีเซ้นเรื่องซื้อของ เห็นอะไรใกล้มือกูหยิบแล้วรีบจากไปทันที(ผ้าอ้อมแบบแพงสุดเลยนะเออ) เพราะกูจะรีบไปกินเบียร์!!!
Fix UX Bug - Rawitat Pulam (Silapakorn University)
- มี OS บางตัวที่เราต้องกด Start เพื่อสั่ง Shutdown (คุ้นๆ ไหม?)
- การจะสร้างอะไรขึ้นมาซักอย่าง ต้องทำตามฐานความต้องการ user ไม่ใช่ความต้องการผู้สร้าง
- จะสร้างอะไรซักอย่าง ได้ถามเค้ารึยังว่าเค้าทำไปให้ใครใช้?
- หากมีความจำเป็นต้องเปลี่ยน UI จริงๆ เราควรจะคงความเคยชินของผู้ใช้ไว้บ้าง เช่น คงรูปๆ เดิม คงตำแหน่งๆ เดิม คงคำพูดแบบเดิม เพื่อให้ user ที่เคยชินแบบเก่ามีเวลาปรับตัวเข้ากับ UI ใหม่ได้ทัน ไม่ใช่หักดิบ ไม่เหมือนเดิมเลยแม้แต่น้อย
- ถ้าต้องเลือกระหว่างแก้ UI ที่ชวนเข้าใจผิด (เช่นกด start เพื่อสั่ง shutdown) ให้เป็นแบบใหม่ กับการสละเอาความเคยชินผู้ใช้เดิมจนชินแล้ว สุดท้ายต้องถามก่อนว่าฐานลูกค้าส่วนไหนสำคัญกว่ากัน
- UX ที่ดีต้องเกิดจากการใช้งานจริงของผู้ใช้ เป็นที่มาว่าทำไมเราต้องทำ TDD
Using TDD to understand legacy code - Dr.Suradet Jitprapaikulsarn (Naresuan University)
- เป็นปรมาจารย์ด้าน TDD คนแรกๆ ของประเทศไทย ที่สอน TDD ให้กับนักศึกษาตั้งแต่ปีหนึ่ง!!
- หัวใจสำคัญข้อแรกของการทำคือ “เขียนโค้ดใหม่เมื่อ test fail เท่านั้น” (Write new code only if a test has failed) - Kent Beck
- ข้อสอง “จัดการโค้ดส่วนที่ซ้ำซ้อนให้หมดไปซะ” (Get rid of duplication) - Kent Beck
- หนังสือที่น่าสนใจ:
- K.Beck, Test-Driven Development by Example, Addison-Wesley, 2003
- M. Features, Working Effectively with Legacy Code, Prentice Hall, 2004 (เป็นภาษา Python และมี legacy code ที่ bug เกิดจาก syntax ผิดด้วย - -”)
- ใครว่า test ui ไม่ได้ test ได้แค่มันยากกกก เช่น บริษัทแห่งหนึ่งทำเว็บให้บริษัทขายยา 2 แห่งที่เป็นคู่แข่งกัน core code เหมือนกัน เปลี่ยนแค่ template แต่เสือกสลับ template ผิด ทำให้บริษัทขายยาเข้าใจว่าบริษัทขายยาคู่แข่งไปขโมยข้อมูลของตนมา เรื่องราวโดนฟ้องร้องใหญ่โต
Test Driven Development 3.0 - Twin Panichsombat (Siam Chamnankit)
- BDD คือการมองจากภาพใหญ่ไล่เข้าไปยังจุดเล็กสุด (unit) ตรงข้ามกับ TDD ที่เริ่มจากจุดเล็กสุด (unit-test) ไล่ออกมาข้างนอก
- BDD คือ superset ของ TDD มันคือการทำให้เขียน TDD เป็นเรื่องสนุก
- BDD ยังช่วยให้ Business Analytic อ่าน spec ได้เข้าใจเป็นภาษาคนอีกด้วย ให้ BA มาช่วยเขียน spec ง่ายขึ้นมาก
- การใช้งาน BDD จำเป็นต้องมี tools ที่ design มาเพื่อการนี้โดยเฉพาะ ใช้ tools เดิมแบบตอนเขียน TDD ไม่ได้
- Behal เป็น framework สำหรับใช้งาน BDD ในภาษา PHP
- Rspec สำหรับ Ruby on Rails
Big Data and How to test it - Somkiat Puisungnoen (Siam Chamnankit)
- Big Data ก็คือการทำงานกับข้อมูลเยอะๆ นั่นแหละ มีขนาดตั้งแต่หลาย GB ขึ้นไป ใช้ mySQL query แล้วมันช้า ต้องรอเป็นวัน
- ตัวอย่างการใช้งาน Big Data เช่น Modern Information Infrastructure, Semantic Technology, The Logical Data Warehouse, NoSQL DBMS, In-Memory Computing
- การจัดการกับ Big Data คือการเลือก tools ที่ทำงานเฉพาะทางเข้ามาทำงานแทนแค่บางส่วน ไม่ได้มาแทนที่ mySQL สุดท้ายเราจะยังคงต้องใช้ mySQL อยู่ต่อไป
- ถ้าปริมาณข้อมูลที่ใช้งานปัจจุบัน คุณสามารถใช้งานได้อย่างปกติสุข รวดเร็ว พอใจอยู่แล้ว คุณก็ไม่จำเป็นต้องกระเสือกกระสนที่จะพยายามใช้ tools สำหรับ Big Data ต่างๆ เพ
- กฎที่น่าสนใจของ Big Data คือเราควรต้องดูแลข้อมูลเพียงชุดเดียว เพื่อความง่ายในการจัดการ
- ข้อมูลจะมีค่าเมื่อเวลาผ่านไป ห้ามลบทิ้งถ้าเป็นไปได้
- ซอฟต์แวร์ที่น่าสนใจสำหรับการประมวลผลข้อมูลแบบ Real time: Storm
จบละครับ 
ทำภาพธรรมด๊า…ธรรมดา ให้เป็นภาพที่มีน้ำท่วม!!!(ยังไง) by Amp3r3
Mar0
Crop ภาพให้อยู่ในระดับเดียวกับเส้นระดับสายตา
ต่อมา Cavas Size ให้เพิ่มสูงของภาพอีกเท่านึง
Flip แบบ Vertical 
เพิ่ม Leyer ขึ้นมา1เลเยอร์ ใช้คำสั่ง Gradient Tool ให้มีสีใกล้เคียงกับสีของท้องฟ้า
ใช้คำสั่ง Mask และ Gradient Tool สีดำ ลบ Mask ไล่จากล่างขึ้นข้างบน
ใช้คำสั่ง Motion Blur 
พักเรื่องภาพไว้แป๊บนึง มาทำTexture น้ำกันก่อน
ใช้Texture ลักษณะที่มีพื้นผิวขรุขระสักนิดนึง
ไปที่คำสั่ง Filter>Noise>Add Noise 
ต่อมา ไปที่คำสั่ง Filter>Blur>Gaussian Blur
Transform โดยใช้คำสั่ง Perspective
เสร็จแล้ว Save แล้วตั้งชื่อไฟล์ว่า “Water”
กลับมาที่ไฟล์ภาพ ใช้คำสั่ง Filter>Distort>Displace 
เลือกไฟล์ 
เขียนเส้นตรงสีดำ ระหว่างภาพทั้ง2 พร้อมกับใช้คำสั่ง Gaussian Blur 
ปรับ Opacity 
เสร็จแล้ว!!!
ทำฟอนต์ระบายสีแบบหลอกตา [ai] by TAMA
Mar0
มาขี้โกงกัน!
พิมพ์ฟอนต์หนาๆขึ้นมาก่อน
copy layer แ้ล้วสร้างอีกเลเยอร์ให้มีแต่เส้นขอบตามแบบนะคะ
จิ้มฟอนต์ในเลเยอร์ที่ไม่ใช่ขอบ เลือก Effect >> Stylize >> Scribble
ปรับค่าประมาณนี้
เสร็จแย๊ววว
เหมือนเด็กหัดระบายสี ฮ่าๆๆ
วิธีการสกรอล์(หมุนลูกกลิ้ง)เมาส์แล้วทำให้ข้อมูลใน Flash เลื่อนโดยที่ไม่เลื่อนหน้าจอ Web by Ziah
Feb0
วันนี้จะมาสอนวิธีการสกรอล์(หมุนลูกกลิ้ง)เมาส์แล้วทำให้ข้อมูลใน Flash เลื่อนโดยที่ไม่เลื่อนหน้าจอ Web ไปด้วยครับ แบ่งเป็นสองส่วนหลักๆละกัน เริ่มที่ส่วนแรกก่อนการสกรอล์เมาส์แล้วทำให้ข้อมูลของเราเลื่อน
Scroll ตัวอย่าง
โค้ดส่วนที่เป็น mxml หรือแท็กของ Flex
//ส่วนของขอบเขตการแสดงผลของ List ของเรา เราทำการใส่ MouseEvent mouseWheel เข้าไปเพื่อรับ Event การกลิ้งเมาส์ ซึ่งจะเรียกใช้ฟังก์ชั่นในย่อหน้าถัดไป
//List ที่อยู่ด้านใน
ต่อไปเป็นโค้ดในส่วนของ as3 ที่จะถูกเรียกฟังก์ชั่น wheelRoomprivate function wheelRoom(event:MouseEvent):void{
scrollerRoom.value -= (event.delta>0 ? 20 : -20);
//จากด้านบนค่า event.delta จะมีค่าตามขนาดที่เรากลิ้งเมาส์ กลิ้งลงเป็น ค่า+ กลิ้งขึ้นเป็นค่า- เราจึงนำค่าดังกล่าวมากลับบวกลบแล้วไปตั้งค่า value ของ ScrollBar ของเราซึ่งจะมีผลให้ข้อมูลของเราเลื่อนตามไปด้วย ซึ่งเรากำหนดให้เลื่อนได้ใกล้ไกลตามใจชอบจากตัวอย่างจะใช้ 20 และ -20
}
เท่านี้ถ้าเราสกรอล์ที่ข้อมูลของเรา ข้อมูลก็จะเลื่อนตามแล้วล่ะครับ
โดนเลื่อนลงมาด้วย
ทีนี้ปัญหาถัดมาคือเวลาเราสกรอล์หน้า Web จะถูกเลื่อนขึ้นลงตามด้วยเพราะ Html มีการรับค่า Scroll อยู่แล้วเราจึงต้องทำการดักไว้ ซึ่งผมได้ใช้ class ที่มีชึ่อว่า MouseWheelTrap สามารถดาวน์โหลดได้จากที่นี่ครับ http://www.spikything.com/blog/index.php/2009/11/27/stop-simultaneous-flash-browser-scrolling/ ให้เราทำการ import ให้เรียบร้อยในหน้า Main ของเราจากนั้นก็ทำการตั้งค่าเล็กน้อยดังนี้ครับ
ในแท็ก ใส่ eventดังนี้ addedToStage=”stretchHandler()”>
แล้วเราก็นำฟังก์ชั่นด้านล่างไปใส่ในแท็ก Script ของ Main ของเราเท่านี้ก็ใช้ได้แล้วครับprivate function stretchHandler():void{ stage.scaleMode = StageScaleMode.SHOW_ALL; stage.align = StageAlign.TOP; this.width = stage.stageWidth; this.height = stage.stageHeight; }
วาดก้อนเมฆแบบเร่งด่วน [Ps] by Amp3r3
Feb0
มาวาดก้อนเมฆภายในเวลาเพียงไม่กี่นาทีกัน…
เริ่มจากสร้างส่วนที่เป็นท้องฟ้า โดยการไล่สีฟ้าด้วยคำสั่ง Gradient Tool
วาดก้อนเมฆ โดยเริ่มจาก เลือก Brush แบบ Hard Brush สีขาว
ตั้งค่า Brush 
เลือก Brush แบบ Soft Brush
เปลี่ยนโหมด Brush 
ตั้งค่า 
เลือกคำสั่ง 
เลือก Brush แบบ Spatter
ตั้งค่า 
ปรมาณนี้
ตกแต่ง
เสร็จเรียบร้อย…
Who are we?
