Load CSS and JavaScript at Runtime using "rloader"

สำหรับผู้ที่ต้องการ load CSS หรือ JavaScript ในขณะ Run Time ลองใช้งาน rloader ดูครับ เป็น jQuery Plugin ใช้งานง่าย เพียงแค่บรรทัดเดียว นอกจากนั้น rloader ยังช่วย tracking CSS หรือ JavaScript ที่เรา load ไปแล้ว ทำให้ไม่ load ซ้ำ ซึ่งจะเหมือนกับการใช้งาน require_once ใน PHP เทคนิคในการ load CSS หรือ JavaScript ในรูปแบบนี้ บางครั้งเราเรียกกันว่า Lazy Loading สำหรับผู้ที่สนใจ สามารถศึกษาการใช้งานได้ที่นี่ครับ http://code.google.com/p/rloader/

แหล่งที่มา: http://code.google.com/p/rloader/

CSS Table Display

การนำ CSS Table Display มาใช้ในการวาง layout จะช่วยให้เราสามารถจัดวาง Layout ได้เหมือนกับการใช้ Table แต่เป็นการใช้ CSS แทนที่จะใช้ Table Tag ซึ่งเราควรใช้ Table Tag สำหรับในกรณีที่ข้อมูลที่เรากำลังเสนอนั้นอยู่ในรูปแบบของ table สำหรับข้อดีอีกอย่างที่เห็นก็คือ การสร้าง Column ในแบบ Equal Height ซึ่งปกติจะเป็นเรื่องที่วุ่นวายพอสมควร แต่เราสามารถทำได้ง่ายๆโดยใช้ CSS Table สำหรับบทความแนะนำการใช้งานแบบสั้นๆ สามารถเข้าไปอ่านได้ที่นี่ครับ

1. http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
2. http://ajaxian.com/archives/display-table 

ส่วนรายชื่อของ Web Browser ที่รองรับ CSS Table Display สามารถเข้าไปดูได้ที่นี่ครับ http://caniuse.com/css-table

แหล่งที่มา :

1. http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
2. http://ajaxian.com/archives/display-table
3. http://caniuse.com/css-table

Quick CSS Trick: How To Center an Object Exactly In The Center

ปกติผมมักจะวาง DIV ให้อยู่ในตำแหน่ง center โดยใช้ margin: 0 auto แต่วิธีการนี้ ใช้ไม่ได้กับ DIV ที่มี position แบบ fixed ก็เลยลองค้นหาใน Google ดู ก็เจอบทความแนะนำวิธีการเอาไว้ ลองอ่านดูได้ที่นี่ครับ http://bit.ly/Oln1We

แหล่งที่มา : http://css-tricks.com

CSS - Pseudo Classes and Pseudo Elements

Pseudo Classes และ Pseudo Elements เป็น selector ที่มีไว้สำหรับ select Element ที่อยู่นอกเหนือจาก Document Tree อย่างเช่น state ต่างๆในแต่ละ elements หรือ sub-part ของ element ซึ่งทั้ง Pseudo Classes และ Pseudo Elements นั้นมีให้ใช้งานมาตั้งแต่ CSS 1 ผมเคยสงสัยในความแตกต่างระหว่าง Pseudo Classes และ Pseudo Elements ว่ามันแตกต่างกันอย่างไร จนกระทั่งมาอ่านเจอในหนังสือเล่มหนึ่ง ซึ่งอธิบายความแตกต่างไว้ดังนี้ครับ เค้าเขียนเอาไว้ว่า Pseudo Class จะใช้สำหรับแบ่งแยกความแตกต่างในแต่ละ State ของ Element ยกตัวอย่างเช่น link state อาทิเช่น :hover, :visited, :active เป็นต้น สว่น Pseudo Element นั้นจะใช้สำหรับ access ใน sub-part ของ Element ยกตัวอย่างเช่น :first-line, :first-letter หวังว่าน่าจะช่วยให้เข้าใจความแตกต่างระหว่าง Pseudo Classes และ Pseudo Elements ได้มากขึ้นนะครับ

แหล่งที่มา : The Book of CSS3 - A Developer's Guide to The Future of Web Design เขียนโดย Peter Gasston

cssreset.com - most popular CSS Reset scripts, all in one place

สำหรับคนที่พัฒนา Web น่าจะคุ้นเคยกับปัญหา Default Style ของแต่ละ Browser ที่ไม่ค่อยจะเหมือนกัน สำหรับวิธีการที่จะใช้ในการแก้ปัญหาก็คือการใช้ CSS Reset เพื่อปรับ Style เริ่มต้นของแต่ละ Browser ให้ใกล้เคียงกันมากที่สุดก่อน ที่ www.cssreset.com จะนำ CSS Reset ที่เป็นที่นิยมมารวมไว้ให้เราได้เลือกใช้งาน โดยมีทั้งของ Eric Meyer, HTML5 Doctor, Yahoo! เป็นต้น สำหรับผู้ที่สนใจใช้งานสามารถเข้าไปที่ http://www.cssreset.com/

แหล่งที่มา: http://www.cssreset.com 

LESS - The Dynamic Stylesheet Language

LESS เป็นทั้ง Framework และ Tool ที่ช่วยให้เราสามารถเขียน/แก้ไข CSS ได้สะดวกและรวดเร็วขึ้น เพราะ LESS จะทำให้เราสามารถใช้ Variables และ Function ได้ เราสามารถใช้งาน LESS ได้หลายรูปแบบ ไม่ว่าจะเป็น Client Side, Server Side และผ่านทาง Command Line โดยการใช้งานทางฝั่ง Client Side เราสามารถเขียน CSS ในรูปแบบ LESS Syntax และเรียกใช้งาน less.js สำหรับการใช้งานทางฝั่ง Server Side จะสามาถใช้งานกับ Node.js และ Rhino ส่วนใครที่ต้องการใช้ CSS ในรูปแบบปกติ ก็สามารถใช้  Command Line Tool (lessc) แปลง CSS ในรูปแบบ LESS Syntax ให้เป็น CSS มาตรฐาน จากนั้นก็นำไปเรียกใช้งานแบบปกติได้ โดยไม่ต้องมีการเรียกใช้งาน less.js ส่วน Syntax การใช้งาน สามารถศึกษาได้จาก http://lesscss.org ครับ

แหล่งที่มา: http://lesscss.org

jsFiddle - The Web is Your Playground

วันนี้อยากจะมาแนะนำให้รู้จักกับ jsFiddle เป็นบริการ online editor สำหรับ HTML, JavaScript และ CSS  อีกทั้ง source code ที่เราเขียนไว้บน jsFiddle ยังสามารถบันทึกเก็บไว้ได้ด้วย โดย jsFiddle จะบันทึกเก็บไว้ในรูปแบบของ short url ซึ่งเราสามารถ นำ URL ดังกล่าวไป share หรือจะ embeded ไว้บน website ของเราก็สามารถทำได้  jsFiddle มี JavaScript Framework ต่างๆให้เลือก load อาทิเช่น jQuery, Mootools, Prototype, Dojo และเราสามารถ include JavaScript ของเราเข้าไปเองได้อีกด้วย เหมาะอย่างยิ่งสำหรับผู้ที่พัฒนา JavaScript Library หรือ CSS Framework เพราะสามารถให้ผู้ใช้ทดลองใช้งานแบบ online ได้เลย สำหรับผู้ที่สนใจสามารถทดลองใช้งานได้ที่นี่ครับ http://jsfiddle.net

แหล่งที่มา: http://jsfiddle.net

Mozilla Developer Network - Online References for Web Development

สำหรับใครที่กำลังพัฒนา Web แล้วจำ Syntax ไม่ค่อยได้ ลองใช้บริการของ Mozilla Developer Network ที่นี่เค้ามีบริการ Online Reference สำหรับใช้ในการพัฒนา Web ไมว่าจะเป็น HTM, JavaScript, DOM, HTML5, CSS, AJAX และอื่นๆอีกมากมาย สำหรับผู้ที่สนใจ สามารถเข้าใช้บริการได้ที่นี่ครับ https://developer.mozilla.org/en-US/docs

แหล่งที่มา: Mozilla Developer Network

CSS Zen Garden - The Beauty of CSS Design

สำหรับใครที่อยากรู้ว่า CSS มีความสามารถแค่ไหน หรือว่าสามารถทำอะไรได้บ้าง อาจลองแวะไปเข้าไปดู CSS Zen Garden ผมจำได้ว่าตอนแรกที่เข้ามาที่ CSS Zen Garden เป็นครั้งแรก ก็ไม่รู้สึกอะไร เห็นแต่เพียงว่ามี Web Page หลากหลาย Design ให้ดู แต่มาสะดุดตรงที่ ทุกๆ Design ที่เห็นนั้น ล้วนพัฒนาขึ้นมาจาก HTML ชุดเดียวกัน สิ่งที่ต่างกันก็เป็นเพียงแค่ CSS ทำให้ผมรู้สึกทึ่งในความสามารถของ CSS ขึ้นมาในทันที CSS Zen Garden เปิดให้แต่ละคนสามารถใช้จินตนาการของตนเองในการสร้าง CSS และส่งขึ้นเพื่อนำไปแสดงไว้ที่ CSS Zen Garden สำหรับใครที่อยากทดสอบความสามารถของตนเอง สามารถส่ง CSS ไปที่ CSS Zen Garden (อย่าลืมอ่าน Submission Guidelines ก่อนนะครับ จะได้รู้กฎระเบียบและขั้นตอน) เฉพาะผลงานที่ผ่านการคัดเลือกเท่านั้นถึงจะได้แสดงไว้บน CSS Zen Garden นะครับ

แหล่งที่มา: http://www.csszengarden.com/

Zen Coding - a new way of writing HTML and CSS code

Zen Coding เป็น Abbreviation Engine เหมาะสำหรับคนที่ชอบเขียน HTML หรือ XML ด้วยตนเอง Zen Coding จะช่วยให้เราสามารถเขียน HTML, XML และ XSL ได้สะดวกและรวดเร็วขึ้น วิธีการใช้งานก็เพียงแค่พิมพ์ code แบบย่อในรูปแบบของ CSS Selector จากนั้น Zend Coding Engine จะทำการขยายสิ่งที่เราพิมพ์ ให้เป็น HTML หรือ XML ที่เต็มรูปแบบ ซึ่งสามารถช่วยลดเวลาการพิมพ์ไปได้อย่างมาก ยกตัวอย่างเช่น ถ้าหากเราพิมพ์ code ดังต่อไปนี้

div#page>div.logo+ul#navigation>li*5>a

Zend Coding Engine ก็จะขยายสิ่งที่เราพิมพ์ ให้ออกมาเป็น code ดังต่อไปนี้

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div> 

Zend Coding เป็น Open Source Project ปัจจุบัน มี Editor หลายตัวที่นำ Zend Coding ไปใช้งาน ยกตัวอย่างเช่น Notepad++, Edit Plus, Sublime Text 2, PSPad, Dreamweaver, Visual Studio, UltraEdit เป็นต้น สำหรับใครที่ต้องการศึกษาเพิ่มเติมเกี่ยวกับ Zend Coding Engine สามารถ click เข้าไปที่นี่ครับ http://code.google.com/p/zen-coding/

แหล่งที่มา: http://code.google.com/p/zen-coding/

Working with CSS sprites in Fireworks CS6

CSS Sprites Export Options

CSS Sprite เป็นเทคนิคสำคัญสำหรับการพัฒนา Web Page ในปัจจุบัน เพราะสามารถช่วยลดจำนวนของ HTTP Request ซึ่งจะช่วยให้ Web Page สามารถ load ได้รวดเร็วขึ้น Sprite Image ก็คือ Graphic File ที่ภายในประกอบไปด้วย Graphic หลายๆรูปที่เอามาจัดเรียงไว้ภายใน file เดียว ซึ่งเวลาเรียกใช้งาน เราก็จะอาศัย CSS ในการบอกตำแหน่งพิกัด ความกว้าง ความยาว ของ Grpahic ที่เราต้องการใช้งาน สำหรับวันนนี้อยากจะมาแนะนำการใช้ Adobe Firework CS6 ในการสร้าง Sprite Image ซึ่งข้อดีของการใช้ Adobe Firework ก็คือ มันจะคำนวณตำแหน่งพิกัด ความกว้าง ความยาว และ Generate ออกมาเป็น CSS ให้เราสามารถนำไปเรียกใช้งานได้เลย โดยที่เราไม่ต้องมาเสียเวลาสร้าง CSS ขึ้นมาเอง ซึ่งสามารถช่วยลดเวลาในการ develop ลงได้อย่างมากเลยทีเดียว สำหรับขั้นตอนการใช้งาน Adobe Firework ในการสร้าง Sprite Image สามารถศึกษาได้จากบทความความของ Adobe ซึ่งเขียนโดย Prinyanka C. Herur ตาม link นี้ครับ http://www.adobe.com/devnet/fireworks/articles/css-sprites.html

แหล่งที่มา: http://www.adobe.com/devnet.html

Free CSS Compressor and CSS Compression Tool

หน้าจอแสดงการใช้งาน CSS Compressor

การลดขนาด file ก่อน deploy ขึ้น server นั้น เป็นสิ่งที่ควรทำ เพราะนอกจากจะช่วยประหยัดค่า Bandwidth แล้ว ยังช่วยให้ Web Page สามารถ load ได้เร็วขึ้นอีกด้วย กระบวนการการลดขนาดของ File เรามักเรียกกันว่า compress หรือบางครั้งเราเรียกว่า minify สำหรับวันนี้ อยากจะมาแนะนำเครื่องมือสำหรับช่วยลดขนาดของ CSS ซึ่งสามารถใช้งานผ่านหน้า Web ได้โดยตรง มี profile ของการ compress หลายแบบให้เลือก โดยเราสารถเลือกแบบ compress เต็มที่ หรือจะให้ balance ระหว่าง compression rate กับ readability ก็สามารถทำได้ สำหรับ Options อื่นๆที่มีให้ใช้งาน ก็อย่างเช่น merge selectors with the same properties, compress color สำหรับใครที่สนใจก็ลองเข้าไปใช้งานได้ที่นี่ครับ http://www.minifycss.com/css-compressor/

แหล่งที่มา: http://www.minifycss.com/css-compressor/

960 Gridder - Layout Websites with Ease

ภาพการแสดง Grid Overly ของ 960 Gridder

สำหรับใครที่ใช้ Grid Framework ในการวาง Layout สำหรับการออกแบบ Web Page น่าจะชอบ Bookmarklet ตัวนี้ ที่มีชื่อว่า 960 Gridder ซึ่งเมีหน้าที่แสดง Grid Overlay บนหน้า Web Page ใดๆก็ตาม ซึ่งจะทำให้เราสามารถตรวจสอบตำแหน่งของการวาง Layout ได้อย่างสะดวกรวดเร็ว วิธีการติดตั้งก็เพียงแค่ลาก URL ของ Bookmarklet อันนี้ ไปวางไว้บน Bookmark Bar บน Browser จากนั้นเวลาใช้งาน ก็เพียงแค่ Click ไปที่ Bookmarklet ก็จะมี Overlay แสดงขึ้นทับอยู่บน Web Page ที่เรากำลังดูอยู่ ณ ขณะนั้น ซึ่งเราสามารถใช้ปุ่ม CTL + ALT + Z ช่วยในการ เปิด/ปิด การแสดง Overlay ได้ โดยปกติ 960 Gridder จะแสดง Grid Overlay ในแบบ 12 Columns แต่สำหรับคนที่ต้องการใช้งานในรูปแบบ 24 Columns ก็สามารถปรับแต่งเองได้ในหน้าจอ Setting สำหรับผู้ที่สนใจใช้งานก็สามารถเข้าไปที่ http://peol.github.com/960gridder/

แหล่งที่มา: http://peol.github.com/960gridder/

CSS Menu Maker

สำหรับใครที่อยากได้ CSS Menu สวยๆ และไม่อยากต้องเสียเวลาสร้างเอง ลองใช้บริการ CSS Menu Maker ที่ http://www.cssmenumaker.com ดู มีหลายแบบให้เลือก และยังสามารถ Cusomize ได้อีกด้วย

ภาพ Menu แบบต่างๆที่มีให้เลือกใช้งาน

แหล่งข้อมูล: http://www.cssmenumaker.com

Icon Fonts are Awesome

ภาพตัวอย่างการใช้งาน Icon Fonts

HTML และ CSS สำหรับเรียกใช้งาน Icon Fonts

พอดีได้อ่านเจอบทความนี้ เป็นบทความเกี่ยวกับการใช้งาน Icon Fonts บน Web เห็นว่าน่าสนใจดี ก็เลยเอามาลงไว้ให้ได้อ่านกันครับ ลองเข้าไปอ่านได้ที่นี่ครับ http://css-tricks.com/examples/IconFont/

แหล่งที่มา: http://css-tricks.com

Responsive Web Design in 3 Steps

วันนี้ผมมีบทความอยากแนะนำ บทความนี้มีชื่อว่า Responsive Design in 3 Steps  เป็นบทความเกี่ยวกับการออกแบบ Web ในรูปแบบที่เรียกว่า Responsive Design คือ สามารถรองรับขนาดหน้าจอได้หลายขนาด อธิบายไว้ค่อนข้างดีครับ ยังไงถ้าหากสนใจก็ลองอ่านเพิ่มเติมได้ที่นี่ครับ http://webdesignerwall.com/tutorials/responsive-design-in-3-steps อ่านจบแล้วก็ลองอ่านบทความนี้ต่อนะครับ จะอธิบายถึงวิธีการ implement ที่ละเอียดขึ้นมาอีก http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

แหล่งที่มา : http://http://webdesignerwall.com

1140 CSS Grid

วันนี้อยากจะมาแนะนำ CSS Framework ที่มีชื่อว่า 1140 CSS Grid เป็น CSS Framework ที่ช่วยในการวาง Layout แบบ Fluid Grid Layout โดยอาศัย Media Query ออกแบบมาสำหรับขนาดหน้าจอ 1140 ลองศึกษาเพิ่มเติมได้ที่นี่ครับ http://cssgrid.net/

แหล่งที่มา: http://cssgrid.net/

Adapt.js - Adaptive CSS

Adapt.js คือ JavaScript Library ที่พัฒนาขึ้นโดย Nathan Smith (เป็นผู้พัฒนา 960.gs) ทำหน้าที่ช่วยในการ Load CSS ที่เหมาะสม ตามขนาดหน้าจอของเรา โดยที่ Adapt.js จะ Load CSS ก่อนที่ Browser จะ Render Page และถ้าหากมีการ Resize  เกิดขึ้น Adapt.js ก็จะตรวจสอบขนาดความกว้าง และ Reload CSS ที่เหมาะสม Adapt.js ศึกษาการใช้งานเพิ่มเติมได้ที่นี่ครับ http://sonspring.com/journal/adapt-js-explained#how-to-use

และถ้าอยากรู้ว่ามี CSS3 Media Query แล้ว ทำไมยังต้องใช้ Adapt.js อีก ก็ลองอ่านบทความนี้ดูครับ CSS3 Media Query for Mobile is Fool's Gold

แหล่งที่มา: http://adapt.960.gs/

Using the CSS Transitions Panel in Dreamweaver CS6

Adobe Dreamweaver CS6 ได้เพิ่มความสามารถให้เราสามารถทำงานกับ CSS Transition ได้สะดวกมากขึ้น โดยมีการเพิ่ม CSS Transition Panel มาให้เราใช้งานกัน ลองดู Video แนะนำการใช้งานได้ที่นี่ครับ http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-the-css-transitions-panel/

Apply Multiple Classes in Dreamweaver CS6

Adobe Dreamweaver มีการพัฒนาความสามารถในการทำงานกับ CSS เรื่อยๆมา จนกระทั่ง Version ปัจจุบัน Dreamweaver CS6 ได้เพิ่มความสามารถในการ Apply Multiple Classes ให้กับ HTML Element ลองดู Video แนะนำการใช้งาน Feature นี้ได้ที่นี่ครับ http://tv.adobe.com/watch/learn-dreamweaver-cs6/selecting-multiple-classes/