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