ในงาน Chrome Dev Summit 2014 มีหัวข้อต่างๆ มากมายและแบรนด์ที่พูดถึง API ใหม่ แต่กลับไม่ได้พูดถึงตัวใหม่เอี่ยมอะไรทั้งหมด
หากคุณเป็นนักพัฒนาเว็บรายใหม่หรือแม้กระทั่งนักพัฒนาซอฟต์แวร์มากประสบการณ์ที่กำลังจะเริ่มสำรวจ API ใหม่ ก็มีโอกาสที่คุณจะทำตาม 3 ขั้นตอนต่อไปนี้ นั่นคือเรียนรู้ สร้าง และทำซ้ำ
Matt Gaunt พูดถึงความพยายามอย่างต่อเนื่องในการจัดการปัญหาเหล่านี้จากทีมแพลตฟอร์มนักพัฒนาซอฟต์แวร์ของ Chrome
เรียนรู้
Web Fundamentals คือชุดเอกสารที่นำโดยกรณีการใช้งานที่ครอบคลุมหัวข้อต่างๆ เป้าหมายหลักคือการหานักพัฒนาซอฟต์แวร์ที่มีความรู้น้อยหรือไม่มีเลย แล้วทำตามแนวทางปฏิบัติแนะนำอย่างรวดเร็วที่สุดเท่าที่จะเป็นไปได้
เป้าหมายสำคัญอย่างหนึ่งของหลักพื้นฐานในการทำเว็บไซต์คือเพื่อให้แน่ใจว่าหากคุณยังไม่เคยใช้หัวข้อใดหัวข้อหนึ่ง คำแนะนำจะลด "ภาวะอัมพาตจากทางเลือก" ให้น้อยที่สุดเท่าที่จะเป็นไปได้ ซึ่ง Addy Osmani พูดถึงสูตรนี้อย่างลงตัวที่ Pastry Box
หากพบปัญหาเกี่ยวกับเว็บไซต์หรือเนื้อหา หรือต้องการให้ Web Fundamentals ครอบคลุมหัวข้อใดหัวข้อหนึ่ง โปรดแจ้งให้เราทราบโดยส่งความคิดเห็นเกี่ยวกับ GitHub
สร้าง
เราได้สร้างชุดเครื่องมือเว็บเพื่อช่วยคุณเริ่มต้นโปรเจ็กต์เว็บใหม่ ซึ่งมีทุกอย่างที่คุณ ต้องการ เช่น
- กระบวนการสร้างที่มีประสิทธิภาพ
- HTML แบบ Boilerplate
- สไตล์การแปล
ขั้นตอนการสร้าง
สำหรับผู้ที่ไม่เคยสร้างกระบวนการสร้าง วิธีที่ง่ายที่สุดในการนึกถึงกระบวนการสร้างคือการดูกระบวนการสร้างเป็นโปรแกรมที่นำชุดไฟล์มาทำงานบางอย่างกับไฟล์เหล่านั้น แล้วส่งออกเวอร์ชันใหม่ในตำแหน่งอื่น งานดังกล่าวจะเพิ่มประสิทธิภาพไฟล์เพื่อปรับปรุงเวลาในการโหลด ตรวจหาข้อผิดพลาดที่อาจเกิดขึ้น หรือจัดการงานที่ทำให้ระบบอัตโนมัติได้
ใน Web Starter Kit เรามีกระบวนการดังต่อไปนี้
เราลดขนาดและเชื่อมต่อ CSS และ JavaScript เพื่อให้เบราว์เซอร์ดึงไฟล์ได้อย่างรวดเร็ว นอกจากนี้ JavaScript จะทำงานผ่าน JSHint เพื่อตรวจสอบแนวทางปฏิบัติที่ดีที่สุดของ JavaScript และข้อผิดพลาดที่พบบ่อยในการเขียนโค้ด รูปภาพจะถูกลดขนาดลงด้วย imagemin และสามารถ ลดขนาดไฟล์ได้มากโดยใช้สิ่งนี้ เรายังมีขั้นตอนในการสร้าง CSS ของ styleguides ด้วย
ต้นแบบสำหรับ HTML จากหลายอุปกรณ์
ชุด HTML ชุดแรกที่คุณเขียนสำหรับหน้าใหม่นั้นค่อนข้างเป็นมาตรฐานยาก และเป็นไปได้ว่าคุณจะมีไฟล์ HTML ที่เก็บสต็อกไว้อย่างรวดเร็ว ซึ่งทำงานได้ดีในอุปกรณ์และหน้าจอหลายขนาด
ใน Web Starter Kit เราอยากเพิ่มการรองรับฟีเจอร์ใดก็ตามที่ทำให้เส้นแบ่งระหว่างแพลตฟอร์มกับเว็บไซต์ของคุณเบลอ เราจึงเพิ่มการรองรับเพิ่มลงในหน้าจอหลักและหน้าจอแนะนำสำหรับ Android, Windows Phone, iOS และ Opera Coast
สไตล์การแปล
ชุด Web Starter ชิ้นสุดท้ายคือ Styleguide
ซึ่งจะทำให้โปรเจ็กต์ใหม่มีชุดรูปแบบและคอมโพเนนต์เริ่มต้นที่ยอดเยี่ยมซึ่งส่งเสริมการพัฒนาที่ขับเคลื่อนด้วยสไตล์ คุณสามารถเปลี่ยนสไตล์ที่มีอยู่ ให้กับองค์ประกอบต่างๆ และเพิ่มสไตล์ของตัวเอง
ใน WSK เวอร์ชันถัดไป ก่อนที่จะเปิดตัวในช่วงต้นปีหน้า เรากําลังทํางานอย่างเต็มที่เพื่อให้การปรับให้สอดคล้องกันได้ง่ายขึ้น และเปลี่ยนไปใช้รูปลักษณ์และความรู้สึกของดีไซน์ Material Mattได้แสดงภาพตัวอย่างล่วงหน้าว่าภาพนี้จะมีหน้าตาเป็นอย่างไรในงาน Chrome Dev Summit ดูตัวอย่างได้ที่ด้านล่าง
ปรับราคาเสนอใหม่
เมื่อได้เริ่มนำความรู้ใหม่ไปใช้จริงแล้ว คุณจะต้องใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อแก้ไขข้อบกพร่อง ปรับปรุง และดูแลรักษางาน
มีฟีเจอร์ใหม่ๆ ที่ยอดเยี่ยมบางส่วนในเครื่องมือสำหรับนักพัฒนาเว็บ และ Matt ได้พิจารณาฟีเจอร์ใหม่ๆ ต่อไปนี้
โหมดอุปกรณ์
โหมดอุปกรณ์เป็นส่วนใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บที่ช่วยให้คุณดูวิธีการทำงานของเว็บไซต์ในอุปกรณ์เคลื่อนที่ต่างๆ ได้อย่างรวดเร็ว พร้อมกับดูคำค้นหาสื่อใน CSS
คุณลักษณะที่ยอดเยี่ยมอย่างหนึ่งของโหมดอุปกรณ์คือความสามารถในการควบคุมความเร็วของเครือข่าย ซึ่งช่วยให้คุณจำลองประสบการณ์ของผู้ใช้ด้วยการเชื่อมต่อแบบ GPRS, EDGE, 3G, DSL หรือ Wi-Fi
เครื่องมือสร้างโปรไฟล์การแสดงผล
ถ้าคุณเปิดแท็บไทม์ไลน์และกดปุ่มบันทึก ก็คงจะเห็นกิจกรรมการแสดงผลเกิดขึ้นใน Waterfall ซึ่งโดยปกติแล้ว นี่จะเป็นกล่องสีดำซึ่งไม่มีทางให้คุณรู้เลยว่าทำไมเบราว์เซอร์ถึงทำหรือ ทำอะไร
หมายเลขเครื่องมือโปรไฟล์การแสดงผลจะให้ข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่เบราว์เซอร์ กำลังทำระหว่างการระบายสีนั้น
การติดตามการเอาโมฆะ
ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บแสดงเหตุผลที่การระบายสีหรือเลย์เอาต์เกิดขึ้นทุกครั้งที่ทำได้ ซึ่งมีประโยชน์สำหรับทุกคนที่เรียนรู้เกี่ยวกับไทม์ไลน์ ลักษณะการทำงานของเบราว์เซอร์ และช่วยให้คุณเพิ่มประสิทธิภาพโค้ดเพื่อป้องกันปัญหาด้านประสิทธิภาพ
มุมมองแผนภูมิเปลวไฟ
ซึ่งจะเป็นวิธีที่ต่างออกไปอย่างมากในการดูข้อมูลที่มีในไทม์ไลน์ ซึ่งจะทำให้คุณดูการทับซ้อนกันของงานต่างๆ และลักษณะการทำงานของเบราว์เซอร์ที่เป็นผลมาจากงานอื่นๆ ได้ง่ายขึ้น
โปรแกรมดูเฟรม
ขณะอยู่ในมุมมองแผนภูมิ Flame Chart คุณสามารถเลือกเฟรมที่ต้องการ และในจุดนี้ คุณจะสามารถสำรวจว่าองค์ประกอบใดในหน้าเว็บที่ได้รับการโปรโมตเป็นเลเยอร์แบบผสม รวมทั้งเหตุผลที่ได้รับการโปรโมต
เรียนรู้ สร้าง ปรับราคาเสนอใหม่
นั่นเป็นความพยายามบางส่วนจากทีม Chrome ที่จะช่วยให้นักพัฒนาซอฟต์แวร์สามารถพัฒนาเว็บได้อย่างรวดเร็ว ดังนั้นอย่าลืมดูหลักพื้นฐานในการทำเว็บไซต์ ชุดเครื่องมือเว็บเริ่มต้น และฟีเจอร์ใหม่ๆ ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome