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