fontface ninja

Chrome Extension สำหรับ front end developer

Chrome browsers ถือเป็น เครื่องมือสำหรับท่องเว็บ อันดับต้นๆของโลกไปแล้ว แน่นอนว่าด้วยความเป็น Web Design หรือg Front end developer คุณก็จำเป็นจะต้อง มีเครื่องมือ ดีๆติดตัว สำหรับช่วยให้การทำงานง่ายขึ้น วันนี้มาดู List ที่น่าสนใจที่ผมเก็บไว้ให้กันครับ

Chrome browsers กับเครื่องมือเสริมช่วย Develop

เครื่องมือเสริม ที่สามารถติดตั้งได้ บน browser ส่วนใหญ่แล้วเกิดจาก การปล่อย API หรือการปล่อยให้ Developer เข้ามาทำงานร่วมกัน กับ Code ที่เปิดเผยได้ในส่วนต่างๆ เพื่อให้เกิดเครื่องมือ มากขึ้น สำหรับการพัฒนาเว็บไซต์ เครื่องมือเหล่านี้ จึงถูกปล่อยออกมาเต็มไปหมด ทั้งความสามารถแบบนิดหน่อย และแบบเต็มสูบกันเลย แต่ส่วนใหญ่ มันก็จะมุ่งไปที่ การช่วยให้เรา ทำงานสำหรับ front end ได้ง่ายขึ้นนั้นเอง

ขอเริ่มต้นกันเลยแล้วกันนะ

1.Page Ruler

page ruler chrome

page ruler extension

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

Link: Page Ruler

2.ruul. Screen ruler

ruul-screen-ruler

ruul screen ruler extension

อันนี้เป็นแนววัดเหมือนกันกับตัวเมื่อกี้ แล้วแต่ความชอบ ความถนัดได้เลยครับ ตัวนี้ออกมาให้เห็นเป็น ไม้บรรทัดเลยทีเดียว เหมาะสำหรับเว็บทำหน้าเว็บ ที่ลูกค้าแปะมากๆ เรื่องของขนาดแบบชนิดที่ เอาไม้บรรทัดมาไว้กันเลยทีเดียว

Link: ruul. Screen ruler

3.Awesome Screenshot App

awesome-screenshot-app

awesome screenshot app

หลังจากวัดหน้าจอกันไปแล้ว มาดูแนว จับภาพหน้าจอกันบ้าง เรื่องนี้ก็สำคัญ ไม่น้อยเลยทีเดียว Awesome Screenshot เป็นแอพเก่าแก่ และมีชื่อเสียง พอสมควรเลย คนใช้งานกันเยอะ เห็น Hot อยู่ใน Firefox ด้วย อันนี้เด็ดตรง จะจับหน้าจอ ง่ายนิดเดียว แถมยังปรับแต่งรูปภาพ ขีดเขียนเพิ่มเติมได้ด้วย

Link: Awesome Screenshot App

4.Full Page Screen Capture

full-page-screen-capture

full page screen capture extension

อันนี้ มาแนวเน้นเรียบง่าย กดทีเดียว ได้ยาวหมดเลยทั้งหน้าจอ ไว้ดีเหมือนกัน แต่แต่งภาพ ขีดเขียนเพิ่มเติมไม่ได้

Link:Full Page Screen Capture

5.Dimensions

dimensions

dimensions extension 

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

6.Responsive web design tester

responsive web design tester

responsive web design tester extension

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

Link: Responsive web design tester

7.Window Resizer

window resizer

window resizer extension

Window Resizer จะเข้ามาทำหน้าที่ ปรับแต่ง ขนาดของหน้าจอ ตาม Size ที่เราต้องการ โดยมีให้เลือก หลากหลาย หรือหากยังไม่พอ ก็สามารถตั้งค่า เพิ่มเติมเองได้ เรียกว่าเยอะจนต้อง พอ เลยทีเดียว

Link: Window Resizer

8.ColorZilla

colorzilla extension

colorzilla extension

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

Link: ColorZilla

9.Color Picker and Converter

color picker and converter

color picker and converter

Color Picker and Converter อีกตัวช่วยเรื่องสี ที่ทำให้เราสามารถ เลือกการใช้สี ง่ายๆ ไม่ยุ่งยาก ชอบตรงที่ มีทั้ง RGB และ CMYK นี่แหละ สไลด์เอา อยากได้สีแนวไหน

Link:Color Picker and Converter

10.CSS Shack

css shack

css shack

CSS Shack เป็นเครื่องมือ สำหรับตรวจสอบ ค่าใน CSS บนเว็บเพจ ได้อย่างง่ายดายปรับแต่ง เล่น ลอง จะได้ลองปรับแต่ง บนหน้าจอก่อน แล้วค่อยมาลง Code จริงกันอีกที

Link: CSS Shack

11.Snappy Snippet

snappy snippet

snappy snippet

อยากรู้ว่า Elements ไหนสวยๆ เค้าเขียน CSS มาอย่างไร อยากแก้ Code มาศึกษา ไม่ยากเลย Snappy Snippet แกะออกมาให้หมด ชนิดที่ แกะเสร็จแล้ว เอามาลองเล่นต่อได้เลย ใช้งานง่ายมากๆ

Link: Snappy Snippet

12.Web Developer

web developer

web developer

อันนี้ รู้จักกันดีในความสามารถ คงไม่ต้องอ้างอะไรมาก ที่ใช้งานบ่อยๆเลยก็พวก Form กับ Image ใครยังไม่มีติดเครื่อง อันนี้แนะนำเลยครับ

13.Corporate Ipsum

corporate ipsum

corporate ipsum

สำหรับ Lorem Ipsum น่าจะรู้จักกันดี อันนี้เป็นเรื่องของ Corporate แบบที่ใช้งานได้จริง ดูดีกว่า Lorem เพราะข้อความที่ออกมา เป็นแนว ทางการมากกว่า ใช้ง่ายง่ายมากๆ

Link: Corporate Ipsum

สุดท้ายมาดูกันครับ เป็นอีกอันที่ อยากพูดถึง

14.Fontface Ninja

fontface ninja

fontface ninja

งานนี้ เอาไว้สำหรับ ตรวจสอบดูครับว่า Font สวยๆที่เว็บงามๆเค้าทำกัน มันเป็นยังไง ใช้ Font ชื่ออะไรกันนะ ทำไมถึงเลือกใช้งาน Font นี้กัน ตัวนี้บอกได้เลยครับ ว่า Font ที่ใช้งานนี่ เป็นยังไง

หวังว่า List นี้คงพอมีใครสนใจ หยิบไปใช้ติดไม้ ติดมาประจำเครื่องกันบ้างนะครับ