[CSS] ใช้ z-index กับ iframe youtube embed ไม่ได้

วันนี้ได้ประสบปัญหากับ IE อย่างหนึ่งนั่นก็คือ slide down menu ที่ตั้งค่า z-index ไว้ 999 กลับไปอยู่ข้างหลัง embed code <iframe> ของ youtube วิดีโอ ในเบราว์เซอร์ Internet Explorer ซึ่งเบราว์เซอร์อื่นไม่มีปัญหานี้เลย นั่งค้นไปสักพัก ก็เจอวิธีแก้ง่ายๆเลย นั่นคือใส่พารามิเตอร์เพิ่มเข้าไปดังนี้

?wmode=transparent ต่อท้าย url ของ src
และ
wmode="Opaque" เข้าไปใน attribute ของ iframe

เช่น จาก
จะเป็น

แค่นี้ เมนู z-index: 999 ก็ไม่ไปอยู่ข้างหลัง youtube วิดีโออีกแล้ว :)

[PHP] จับเวลาการทำงานของโปรแกรม PHP ด้วยฟังก์ชัน microtime()

บางครั้งเราก็อยากจะทราบเวลาในการทำงานของโปรแกรมที่เราเขียน เพื่อที่เราอาจจะได้พัฒนาให้มันทำงานได้เร็วขึ้นได้อีก
วิธีง่ายๆที่สามารถใช้ได้ก็คือจับเวลาตอนเริ่มต้นของโปรแกรม และเวลาที่โปรแกรมสิ้นสุดการทำงาน จากนั้นเอาผลต่างมาลบกัน ก็จะได้เวลาที่โปรแกรมของเราใช้ทำงานนั่นเอง โดยใช้ฟังก์ชัน microtime() ซึ่งให้ความละเอียดถึงระดับ microseconds นั่นเอง
ตัวอย่างโปรแกรมที่เปรียบเทียบเวลาในการเพิ่มค่าหนึ่งค่าเข้าไปในท้าย array ระหว่าง
กับการใช้ฟังก์ชัน array_push()
ซึ่งหากใส่เข้าไปทีละค่า ผลลัพธ์ที่ได้จะเหมือนกัน แต่เวลาในการทำงานจะเป็นอย่างไร?
ผลลัพธ์ที่ได้
จะเห็นได้ว่า หากทำการเพิ่มค่าต่อท้าย array เข้าไปทีละค่า ควรจะใช้วิธี มากกว่า เนื่องจากทำงานได้เร็วกว่านั่นเอง

หาตำแหน่งที่ตั้งจาก IP Address หรือ Domain Name

บางครั้งเราก็อยากรู้ว่าเว็บนี้ Domain Name นั้น IP Address ต่างๆ มาจากประเทศไหนกัน?

ผมมีเครื่องมือดีๆ ที่ช่วยให้คำตอบคุณได้ นั่นก็คือ

Geo IP Tool (http://www.geoiptool.com)

เพียงแค่ระบุ IP Address หรือ Domain Name ลงไป เว็บนี้ก็จะส่งรายละเอียดกลับมาให้คุณทราบได้เลย ทั้ง Host Name / IP Address / Country / Country code / Region / City / Postal code / Calling code / Longitude / Latitude รวมถึง แสดง Google Map ของสถานที่ให้ดูอีกด้วย

แม้ว่าจะไม่แม่นยำ 100% แต่ก็ทำให้เราพอได้ทราบถึงตำแหน่งที่เราต้องการได้ (ส่วนมากก็ดูว่าอยู่ประเทศไหนนั่นแหละ)

Where is webdevformula by Geo IP Tool

แสดง Code ใน Blog ให้สวยงามด้วย Syntax Highlighter

จะทำบล็อกเกี่ยวกับ Code ทั้งที ก็ต้องทำให้ Code สามารถอ่านได้ง่าย แล้วมีวิธีการอย่างไร?
ใช้ Syntax Highlighter ในการช่วยทำให้ Code อ่านได้ง่าย ได้เลยครับ
ตัวอย่าง :
วิธี :
1. ไปที่ Template แล้ว Edit HTML ของ Theme ที่คุณใช้
2. ก่อนส่วนของ </head> ให้ใส่ Code HTML และ Javascript ดังต่อไปนี้
*หมายเหตุ1: สามารถลบ shBrushX.js ที่คุณไม่ต้องการใช้ได้ เพื่อให้โหลดได้เร็วขึ้น
*หมายเหตุ2: สามารถเลือก Theme ของ Syntax Highlighter ได้ที่ http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

3. บันทึกให้เรียบร้อย
4. สร้างโพสต์ใหม่ โดยใช้ HTML Editor วิธีใส่โค้ดจะมีอยู่ 2 วิธี
ใช้แท็ก <pre />
ผลลัพธ์ :

    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }

ใช้แท็ก <script />
ผลลัพธ์ : *หมายเหตุ: ระบบของบล็อกอาจจะมีการแปลงตัวอักษร < หรือ > ให้อัตโนมัติ ซึ่งทำให้การแสดง Code ที่เราใส่ไม่ถูกต้อง ให้เราเปลี่ยนข้อความภายในแท็ก <pre /> หรือ <script /> เป็น HTML Entities ก่อน คือ
< เป็น &lt;
> เป็น &gt;

Announcement

ขอเริ่มต้นโพสต์แรกของบล็อก Web Dev Formula นี้ ด้วยการประกาศถึงเจตนารมณ์กันก่อน

เนื่องด้วยวันนี้เป็นวัน Halloween ผมจึงขอเริ่มโพสต์แรกในวันนี้ (ปล่อยผีนี่เอง แบร่ ;p)

ภาพ Google Doodle ประจำวัน Halloween วันนี้ (2013-10-31)

ผมก็เป็น Web Developer คนหนึ่ง ที่ต้องเขียนโค้ดพัฒนาระบบของเว็บอยู่ทุกวัน บางครั้งเราก็ต้องมาเขียนโค้ดที่คล้ายๆโค้ดเดิมที่เคยเขียนไปแล้ว แต่ว่าอาจจะเป็นโค้ดที่คำสั่งซับซ้อนหน่อย หรือเป็นโค้ดที่นานๆใช้ที ก็เลยจำไม่ได้ หรือว่าต้องไปค้นถึง 4-5 เว็บเพื่อนำมาผสมให้ได้โค้ดที่ต้องการ สุดท้ายแล้วพอต้องใช้อีก ต้องไปนั่งค้นหาใหม่ทุกครั้งไป เจ้าของบล็อกจึงมีแนวคิดว่าน่าจะรวบรวมวิธีที่เราทำสำเร็จไว้ เป็นที่ๆของเราเลยดีกว่า ภายหลังมาค้นหา ก็จะได้ค้นหาง่ายๆหน่อยนั่นเอง :)

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

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

พล่ามมาเยอะแล้ว... ควรไปเริ่มเขียนอะไรที่มันมีประโยชน์ได้แล้วนะ :p