Category Archive: Me Coding

Faux Columns using jQuery

Faux Columns using jQuery

เคยเจอปัญหานี้กันหรือเปล่า… ออกแบบ layout แบบสองคอลัมน์ (หรือมากกว่า) โดยใช้ div + float แต่พอเจอ content มากๆ ความสูงของ div มันกลับไม่เท่ากัน ทำให้ไม่สามารถใส่ background-color ให้กับคอลัมน์ที่สั้นกว่าได้ (ส่วนมากจะเป็น navigation menu) Faux Columns คือนิยามของเรื่องข้างบนที่ A List Apart ให้ไว้ – เขาใช้การใส่ background image สลับข้าง คือให้เป็นพื้นหลังของข้างที่ยาวกว่า ผมมีวิธีแก้ปัญหาอีกทางหนึ่ง โดยใช้ JavaScript เข้ามาช่วย สมมุติว่ามีโค้ดแบบนี้ HTML <div id="wrapper"> <h1 id="header">Site Header</h1> <div id="main"> <div id="sidebar"> <!– Main Navigation–> <ul id="navigation"> … </ul> </div> <div id="content"> … </div> <div class="clear"/> </div> </div> <div id="footer"> … </div> CSS #wrapper { margin: 0 auto; width: 780px; } #sidebar { float: left; width: 200px; } #content { float: [...]

 

JMakNeeb – AI Board Game

JMakNeeb – AI Board Game

What is JMakNeeb? JMakNeeb is an open source strategy board game written in java. I and my colleagues wrote this application as a part of Artificial Intelligence class project when I was studied in B.Sc. Computer Science SIT, KMUTT 2004. Makneeb (in Thai is หมากหนีบ) is not quite popular board game like Othello or chess (I guess [...]

 

Heuristics in OOD

Heuristics in OOD

- I – เพิ่มฟีเจอร์ บั๊ก แก้บั๊ก, เพิ่มฟีเจอร์ บั๊ก แก้บั๊ก, เพิ่มฟีเจอร์ บั๊ก แก้บั๊ก… วงจร (อุบาทว์) สามัญที่โปรแกรมเมอร์ทุกคนต้องพบเจอ ไม่ว่าจะเทพมาจากไหนหากก้าวเดินบนทางสายนี้คงเจอกับตัวเองไม่มากก็น้อย "ผมเขียนโปรแกรมเป็น OO นะพี่ มี Class แบ่ง namespace เป็นระเบียบเรียบร้อย มี Method เซ็ตเก็ต ใส่ private/protected/public ครบถ้วน – แล้วทำไมยิ่งเพิ่มฟีเจอร์ยิ่งมีบั๊กล่ะครับ?" "ตอนเรียนอาจารย์ก็บอกว่า OO ดียังงั้น OO ดียังงี้ ไอ้ผมก็เชื่อ ทำตามที่จานสอนเป๊ะๆเลยเนี่ย ไม่เห็นมันจะช่วยอะไรเลย?" หรืออาจารย์ซุงแหล… หรือคุณเข้าใจอะไรผิด…

 

Semantic Bar Chart

Semantic Bar Chart

เรื่องที่จะพูดถึงในวันนี้คือกราฟแท่ง – แล้วทำไมต้องจั่วหัวว่า semantic? มันเป็นกราฟแบบใหม่หรือเปล่า? คำตอบคือ Nope – ก็แค่กราฟแท่งธรรมดาๆนี่แหละครับ แต่วันนี้เราจะทำให้มันไม่ธรรมดาด้วยการใส่ “ความหมาย” เข้าไปในกราฟด้วย การนำข้อมูลมาแสดงผลด้วยแผนผังต่างๆ อย่างกราฟแท่ง, กราฟเส้น, pie chart (ไม่รู้ภาษาไทยแปลว่าอะไร) นั้นสำคัญอย่างมากเลยทีเดียว – ลองนึกภาพข้อมูลเรียงกันเป็นตับๆ เป็นตาราง แน่นอนว่าหากเราพยายามทำความเข้าใจกับมันสัก 2-3 นาที (หรืออาจจะมากกว่า)ก็ย่อมเข้าใจได้ไม่ยาก – ทีนี้ถ้าตารางมันซับซ้อนขึ้น หรือมีความสัมพันธ์กับตารางอื่น เริ่มมีปัญหาแล้วล่ะ เผลอๆอาจถึงขั้นดูไม่รู้เรื่อง การแสดงข้อมูลดิบไม่ friendly กับมนุษย์ จึงเป็นทีมาของการทำ data visualization…

 

Sliding Font Resizer with mootools

Sliding Font Resizer with mootools

Because Text resize controls are similar, I want something new! Most site/blogs which has a lot of text content usually offer an ability to resize text on the page via control. This functionality is not seems to necessary for average-power users because they know how to change font-size in browser (I know you did right?) If you [...]