Chrome ครองตลาดเบราว์เซอร์ 25% กลายเป็นเบราว์เซอร์อันดับสองหลัง Internet Explorer (ที่กำลังกลายเป็น Project Spartan) ทำให้ Chrome เป็น "บ้านหลัก" (de facto home) ของนักพัฒนาเว็บ
แม้ผมจะชอบ Firefox แต่เข้าใจได้ว่าทำไมคนชอบ Chrome มักนำหน้า benchmark และทำให้คนทั่วไปกลายเป็น power user ได้ง่าย บางคนเกลียด Chrome แต่ต้องใช้เพราะเอ็กซ์เทนชันบางตัว
นั่นคือเหตุผล Chrome ดีนักพัฒนา: Chrome Web Store และสระเอ็กซ์เทนชันมหาศาล หากวางแผนออกแบบหรือเขียนเว็บไซต์ นี่คือเครื่องมือจำเป็นที่ควรติดตั้งทันที
ColorZilla
ColorZilla เริ่มต้นเป็น Firefox addon แต่อย่างน่าประหลาดใจจนขอให้มีเวอร์ชัน Chrome ตอนนี้ก็มีแล้ว เอ็กซ์เทนชันนี้เป็น eyedropper tool ขั้นสูงแบบที่เจอใน Paint หรือ Photoshop
ชี้ที่ไหนในเบราว์เซอร์ ก็ดึงข้อมูลสีที่จุดนั้นทันที ได้แก้ไข (RGB, HSV, หรือ hex) ก่อนคัดลอกไปคลิปบอร์ด ใช้ง่ายมาก
ยังมี CSS Gradient Generator, Webpage Color Analyzer และพาเลทสีติดมาหลายชุด
Window Resizer
อันตรายของนักพัฒนาเว็บคือทำให้ประสบการณ์ดูเว็บสนุกสนานทุกอุปกรณ์ ไม้แค่ mobile vs desktop — แท็บเล็ตเล็กกับจอใหญ่ก็ต่างกัน
Window Resizer ปรับขนาดหน้าต่างเบราว์เซอร์บนบินได้ คลิกปุ่มเดียว ทดสอบเว็บในความละเอียดต่างๆ ดูว่าผู้ใช้เห็นอะไร แล้วปรับตามนั้น
IE Tab
อันตรายอีกอย่างคือมาตรฐานเบราว์เซอร์ (หรือขาดมาตรฐาน) IE, Firefox, Chrome, Opera เรนเดอร์เว็บต่างกัน บางตัวใช้มาตรฐานช้า
กรณี IE 拋มาตรฐานออกหน้าต่าง ทำให้นักพัฒนาต้องทำ accommodations จนเกือบถอนผม
ด้วย IE Tab กระบวนการนี้ง่ายขึ้นเล็กน้อย ให้ดูเว็บในแท็บ Chrome ใหม่ แต่เรนเดอร์แบบ IE — ไม่ใช่โซลูชันปฏิวัติ แต่มากกว่าไม่มี
Validity
โค้ด HTML ไม่ได้เท่ากันทุกตัว เบราว์เซอร์มีบทบาทใหญ่ในการปฏิบัติตามมาตรฐาน แต่ส่วหนึ่งก็อยู่ที่นักพัฒนาที่ต้องปฏิบัติ HTML practice ที่ดี นั่นจึงมีเครื่องมือทดสอบและ validate HTML
Validity คือเอ็กซ์เทนชันที่ทำได้ทั้งหมดโดยไม่ต้องไปเว็บอื่น เปิดเว็บของตัวเอง กดปุ่ม จะแสดงข้อความ HTML ที่ไม่ valid ใน browser console Validation ผ่าน W3C Validation Service
BuiltWith
สิ่งที่เกลียดในการพัฒนาเว็บคือมี libraries, frameworks, engines ให้เลือกเยอะมาก อิสระเลือกดี แต่มากจนตามไม่ทัน
เคยเข้าเว็บแล้วสงสัยว่าเทคโนโลยีพื้นฐานคืออะไรไหม?
เอ็กซ์เทนชัน BuiltWith ปุ่มเดียว วิเคราะห์หน้าเว็บปัจจุบัน ดู ทั้งหมด ของ libraries, frameworks, engines ที่ขับเคลื่อน รวม ad networks, content distribution platforms, และ hosting software
Postman REST Client [ไม่พร้อมใช้งานแล้ว]
สำหรับคนทำงานกับ REST APIs Postman คือเครื่องมือเดียวที่ต้องการสำหรับ workflow ที่ streamlined สร้าง HTTP requests ได้ และได้ formatted responses ใน JSON และ XML Responses เปิดในหน้าต่างแยกเป็น HTML
จัดกลุ่มหลาย requests เป็น collection — วิธีดีในการจัดระเบียบและมีประสิทธิภาพ ทดสอบหลาย environments ได้ด้วยการเปลี่ยน environmental variables ภายในเอ็กซ์เทนชัน
Corporate Ipsum
วิธีสร้าง filler text คือ copy-paste "asdf" ซ้ำๆ 100 ครั้ง วิธีดีกว่าคือติดตั้ง Corporate Ipsum ให้สร้าง filler text ให้ในกะพริบตา
เคยครอบ Lorem Ipsum generators หลายตัว แต่นิสัยดึงดูดของ Corporate Ipsum คืออยู่ในเบราว์เซอร์ เรียกได้ด้วยคลิกเดียว ไม่มีเหตุผลไม่ใช้ — ตอนนี้กลับไปเขียนโค้ดเว็บต่อได้แล้ว!
TabCloud
การพัฒนาเว็บบางครั้งเกิดขึ้นหลายเครื่อง Source control เป็นวิธีหลัก sync แต่ถ้าอยากย้ายหลายแท็บข้ามเครื่อง? TabCloud ตอบโจทย์
TabCloud sync แท็บขึ้นคลาวด์ เปิดซ้ำที่อื่นได้ ใช้เป็น session saver ท้องถิ่นได้ — เก็บชุดแท็บไว้เปิดภายหลัง แท็บบันทึกในบัญชี Google
WhatFont
การออกแบบแบบอักษรเป็นส่วนสำคัญของพัฒนาเว็บ ทำให้ Google Web Fonts ยอดนิยม ข่าวดีคือฟอนต์ฟรีเหล่านี้ตอนนี้เป็นฟอนต์เว็บที่สวยที่สุดบางส่วน
แต่มองชัดๆ: บางครั้งเล่นเน็ตเจอฟอนต์สวยที่ไม่เคยเห็น มีหลายวิธีระบุ แต่เร็วที่สุดคือ WhatFont — hover ชี้ที่ฟอนต์ก็รู้ชื่อทันที สะดวกกว่านี้ไม่อีกแล้ว
Awesome Screenshot [ไม่พร้อมใช้งานแล้ว]
ถ้าสกรีนช็อตไม่ใช่ส่วนหนึ่งของ routine พัฒนาเว็บ Awesome Screenshot จะช่วยเปลี่ยน Screen captures ดีสำหรับบันทึกการเปลี่ยนแปลง design และแชร์ work-in-progress ให้ลูกค้าหรือทีม
มีฟังก์ชันจับภาพหลายแบบ: 全หน้า, selected area, visible area ใส่ annotation, blur ส่วนที่ละเอียดอ่อน แชร์คลิกเดียว หรืออัปโหลด Google Drive
ถ้าสนใจแต่อยากโปรแกรม desktop ที่แรงกว่า ดูเปรียบเทียบ screenshot tools และเลือกที่เหมาะสม
Check My Links
ข้อผิดพลาดพัฒนาเว็บเยอะมากที่ทำให้ผู้เยี่ยมชมหงุดหงิด ลิงก์เสีย (broken links) เป็นหนึ่งในสักหลัก หนึ่งลิงก์เสียอาจโอเค แต่มากกว่านั้นเว็บเริ่มเสียความน่าเชื่อถือและชื่อเสียง โชคดีที่หลีกเลี่ยงได้ง่าย
Check My Links ทำตามสัญญา: เช็คลิงก์ ลิงก์ถูกต้องマークเขียว ลิงก์เสียマークแดง สรุปเป็นเปอร์เซ็นต์ ทำต่อให้เสร็จคือไปแก้ลิงก์เหล่านั้น!
คุณใช้เอ็กซ์เทนชันไหน?
เอ็กซ์เทนชันเพิ่มผลิตivitàอีกตัวแนะนำ: StayFocusd เป็น general purpose มากกว่า web development แต่มีประโยชน์แน่นอน — กันการหลุดโฟกัสเว็บขณะทำงาน!
คิดยังไงกับตัวเหล่านี้? มีเอ็กซ์เทนชันพัฒนาเว็บจำเป็นอื่นแนะนำไหม? แชร์ในความคิดเห็นได้เลย!
