อัปเดตการพัฒนาเว็บรายเดือน 12⁄2018: WebP, สถานะของ UX และการทดสอบความเครียดต่ำ

เป็นฉบับสุดท้ายของปีนี้ และฉันก็ค่อนข้างตื่นเต้นกับสิ่งที่ปี 2018 นำมาให้เรา เกิดอะไรขึ้น และการพัฒนาเว็บเป็นอย่างไร มาสรุปและ เตือนเราว่าเราแต่ละคนได้เรียนรู้อะไรในปีนี้ : อะไรคือคุณสมบัติที่มีประโยชน์มากที่สุด, API, ไลบรารีที่เราใช้? และส่วนตัวเราเปลี่ยนไปอย่างไรบ้าง?

สำหรับการอัปเดตของเดือนนี้ เราได้รวบรวมบทความอื่นๆ สำหรับคุณ หากนั่นยังไม่เพียงพอสำหรับคุณ คุณสามารถหาข้อมูลเพิ่มเติมได้ในเอกสารสำคัญหรือรายการ Evergreen ซึ่งมีบทความที่สำคัญที่สุดตั้งแต่เริ่มต้นรายการเรื่องรออ่านสำหรับการพัฒนาเว็บ ฉันหวังว่าวันของคุณจนถึงสิ้นปีจะไม่เครียดเกินไปและขอให้คุณโชคดี เจอกันอีกครั้งปีหน้า!

ข่าว

• Microsoft เพิ่งประกาศว่าพวกเขาจะเปลี่ยนกลยุทธ์ Edge: พวกเขากำลังจะใช้ Chromium เป็นเอ็นจิ้นเบราว์เซอร์ใหม่สำหรับเดสก์ท็อปแทน EdgeHTML และอาจให้บริการ Microsoft Edge สำหรับ macOS พวกเขายังจะช่วยในการพัฒนาเครื่องมือ Blink ต่อจากนี้ไป
• Chrome 71 ออกแล้วและรองรับเวลาสัมพัทธ์ผ่าน Internationalization API สิ่งใหม่ก็คือตอนนี้การสังเคราะห์เสียงต้องเปิดใช้งานผู้ใช้
• Safari Technology Preview 71 ออกมาแล้ว โดยนำเสนอ supported-color-schemes ใน CSS และเพิ่มการตรวจสอบความถูกต้องของเว็บเป็นคุณสมบัติทดลอง
• ในไม่ช้า Firefox จะเสนอการตั้งค่าเบราว์เซอร์ให้กับผู้ใช้เพื่อบล็อกคำขออนุญาตทั้งหมดโดยอัตโนมัติ การดำเนินการนี้จะส่งผลต่อวิดีโอที่เล่นอัตโนมัติ การแจ้งเตือนทางเว็บ คำขอตำแหน่งทางภูมิศาสตร์ คำขอเข้าถึงกล้องและไมโครโฟน ความจำเป็นในการบล็อกคำขออัตโนมัติแสดงให้เห็นว่านักพัฒนาซอฟต์แวร์ที่ทำผิดอย่างร้ายแรงกำลังใช้เทคนิคเหล่านี้อย่างไร ข่าวเศร้าสำหรับผู้ที่พึ่งพาคำขอดังกล่าวสำหรับบริการของตนเช่นบริการโทร WebRTC เป็นต้น

ทั่วไป

• ในที่สุด เราก็มีวิธีการเข้าถึงและใช้เว็บไซต์แบบออฟไลน์ด้วยเทคโนโลยีที่น่าทึ่ง แต่สิ่งหนึ่งที่เราลืมไปก็คือในช่วงสามสิบปีที่ผ่านมา เราสอนผู้คนว่าเว็บเป็นแบบออนไลน์ ดังนั้นคนส่วนใหญ่ไม่รู้ว่าการใช้งานออฟไลน์นั้นมีอยู่จริง บทเรียนในการออกแบบประสบการณ์ผู้ใช้และความสำคัญของการเตือนเราถึงประวัติของสื่อที่เรากำลังสร้าง

UI/UX

• Matthew Strom เขียนเกี่ยวกับความสำคัญของการแก้ไขสิ่งต่างๆ ในภายหลังและไม่ได้พยายามทำให้สมบูรณ์แบบ
• แหล่งข้อมูลที่ค่อนข้างเสียดสีเกี่ยวกับสถานะของ UX ในปี 2019
• Erica Hall แสดงให้เราเห็นตัวอย่างว่าทำไม 'การออกแบบ UX' ส่วนใหญ่จึงเป็นมายาคติ และเหตุใดการออกแบบจึงไม่เพียงสร้างผลิตภัณฑ์ที่ยอดเยี่ยม แต่ยังรวมถึงกลยุทธ์ผลิตภัณฑ์และรูปแบบธุรกิจที่เหมาะสมด้วย ตัวอย่างที่ดีที่สุดที่คุณควรอ่านคือเมื่อ Erica เขียนว่า “Virgin America ริโอ. Google Reader. คอมคาสต์ ข้อใดให้ประสบการณ์ที่ดี ซึ่งเหล่านี้ยังคงมีอยู่?” ความจริงที่คุณไม่สามารถเพิกเฉยได้ และโชคดีที่บทความนี้ไม่ใช่บทความที่มองโลกในแง่ร้ายแต่ให้แง่คิดอย่างมาก พร้อมเคล็ดลับดีๆ เกี่ยวกับวิธีการที่เราจะนำความรู้นั้นไปปรับปรุงผลิตภัณฑ์ของเรา ด้วยกลยุทธ์ พร้อมดีไซน์ พร้อมโมเดลธุรกิจที่ลงตัว

เครื่องมือช่าง

• Sandip Devarkonda อธิบายวิธีที่เราสามารถสร้างแอปแบบเรียลไทม์ด้วยการสมัครสมาชิก GraphQL บน Postgres

HTML & SVG

• Michael Scharnagl พูดถึงสาเหตุที่ทุบตีผู้คนเพราะพวกเขาชอบภาษาการเขียนโปรแกรมแบบใดแบบหนึ่งมากกว่าที่อีกภาษาหนึ่งจำเป็นต้องหยุด

การช่วยสำหรับการเข้าถึง

• Scott O'Hara เตือนเราถึงความสำคัญของการไม่ลืมเกี่ยวกับการทำงานโดยธรรมชาติและความสามารถในการเข้าถึงที่มีให้เมื่อเราพยายามควบคุมสไตล์แบบกำหนดเอง

CSS

• ตัวแปรสภาพแวดล้อม CSS กำลังจะมา และนี่คือเหตุผลที่เราต้องการตัวแปรเหล่านี้นอกเหนือจากคุณสมบัติที่กำหนดเอง
• Andy Bell อธิบายวิธีที่เราใช้ CSS Custom Properties เพื่อจัดการโฟลว์และจังหวะในเลย์เอาต์ของเรา ตัวอย่างที่ยอดเยี่ยมที่นอกเหนือไปจากการใช้คุณสมบัติที่กำหนดเองสำหรับค่าสี

JavaScript

• Google กำลังจะนำเสนอ API อื่นให้กับเรา: Badging API ช่วยให้ Web Desktop Apps สามารถระบุการแจ้งเตือนใหม่หรือที่คล้ายกันได้ ข้อมูลจำเพาะยังอยู่ในระหว่างการหารือ และพวกเขายินดีที่จะรับฟังความคิดเห็นของคุณเกี่ยวกับเรื่องนี้
• Hidde de Vries อธิบายวิธีที่เราสามารถใช้ JavaScript API สมัยใหม่เพื่อเลื่อนองค์ประกอบเข้าไปตรงกลางวิวพอร์ต
• การดึงข้อมูล Background Fetch ใหม่พร้อมใช้งานหลังการตั้งค่าสถานะใน Chrome 71 ทำให้สามารถดึงทรัพยากรที่ใช้เวลาในการโหลด เช่น ภาพยนตร์ในเบื้องหลังได้
• Pete LePage อธิบายว่าเราจะใช้ Web Share Target API เพื่อลงทะเบียนบริการเป็น Share Target ได้อย่างไร
• ยังคงเป็นความคิดที่ดีหรือไม่ที่จะใช้ JavaScript เพื่อโหลดแบบอักษรของเว็บ แซค เลเธอร์แมนจะมาแบ่งปันว่าเหตุใดเราจึงควรตัดสินใจเป็นกรณีๆ ไป และเหตุใดจึงควรใช้ CSS สมัยใหม่และ font-display: swap; .
• Doka เป็นโปรแกรมแก้ไขรูปภาพ JavaScript แบบสแตนด์อโลนใหม่ที่ควรค่าแก่การจดจำ แม้ว่าจะไม่ใช่ผลิตภัณฑ์ฟรี แต่ก็มีวิธีที่สะดวกมากในการแก้ไขโดยให้ประสบการณ์ผู้ใช้ที่น่าพึงพอใจ และด้วยการชำระค่าธรรมเนียมรายปี คุณจะมั่นใจได้ว่าคุณจะได้รับการแก้ไขข้อผิดพลาดและการสนับสนุน
• “พลังของส่วนประกอบเว็บ” แบ่งปันแนวคิดพื้นฐาน วิธีเริ่มใช้งาน และเหตุใดการใช้องค์ประกอบ HTML ของคุณเองแทนการติด HTML คลาส CSS ที่เกี่ยวข้อง และทริกเกอร์ JavaScript ร่วมกันสามารถลดความซับซ้อนของสิ่งต่างๆ ได้มาก

ความปลอดภัย

• Scott Helme แชร์ข้อมูลเกี่ยวกับหัวข้อความปลอดภัยใหม่ที่เราสามารถใช้ได้: Clear Site Data ไซต์ช่วยให้เจ้าของไซต์ล้างข้อมูลจากแคช พื้นที่เก็บข้อมูล (ในเครื่อง/เซสชัน/ถาวร) หรือคุกกี้ ซึ่งอาจเป็นประโยชน์ในการลบข้อมูลที่ละเอียดอ่อนหรือข้อมูลส่วนตัวที่จัดเก็บไว้ใน localStorage หรือคุกกี้การตรวจสอบสิทธิ์ได้อย่างง่ายดาย
• เรารู้แล้วว่าการใช้ rel=noopener เป็นแนวคิดที่ดีสำหรับองค์ประกอบลิงก์ target=_blank ตอนนี้ Firefox ทดลองโดยแทนที่ rel=noopener ในเบราว์เซอร์โดยอัตโนมัติเพื่อให้แน่ใจว่าการโจมตีด้านความปลอดภัยจะไม่ถูกโจมตี
• Terence Eden สำรวจว่าไซต์ขนาดใหญ่จำนวนมากที่เสนอการชำระเงินนั้นรวมถึง JavaScript ที่ไม่ผ่านการตรวจสอบสิทธิ์และไม่ได้รับการยืนยันจากบุคคลที่สามอย่างไร เขาอธิบายอย่างละเอียดว่าสิ่งนี้หมายความว่าอย่างไร เหตุใดจึงเป็นอันตราย และเราจะแก้ปัญหานี้ได้อย่างไร ที่กล่าวว่าบันเดิล Stripe JavaScript ที่คุณต้องรวมไม่ได้เสนอ Sub Resource Integrity เช่นกัน
• เหตุการณ์ด้านความปลอดภัยอีกกรณีหนึ่งเกิดขึ้นกับแพ็คเกจ npm ที่ได้รับความนิยมอย่างมาก: event-stream ถูกเผยแพร่ด้วยรหัสมัลแวร์ที่ขโมยกระเป๋าเงิน Bitcoin เฉพาะจากคอมพิวเตอร์ โปรดตรวจสอบการขึ้นต่อกันบนเครื่องของคุณและให้แน่ใจว่าคุณอัปเดตเป็นแพ็คเกจเวอร์ชันล่าสุด npm audit ยังช่วยระบุปัญหาดังกล่าว

ความเป็นส่วนตัว

• คุณมีสามีหรือภรรยาหรือไม่? เด็ก? ญาติคนอื่น ๆ? คู่มือที่จำเป็นในการปกป้องข้อมูลของครอบครัวนี้เป็นสิ่งที่คุณควรอ่านและนำไปปฏิบัติ อินเทอร์เน็ตไม่ใช่สถานที่ที่ปลอดภัย และคุณต้องการให้แน่ใจว่าญาติของคุณเข้าใจว่าพวกเขากำลังทำอะไร และเป็นผู้ที่สามารถปกป้องพวกเขาได้โดยการสอนพวกเขาหรือตั้งค่าเริ่มต้นที่ดีขึ้น

ประสิทธิภาพของเว็บ

• ขนาดไฟล์ภาพ WebP เป็นอย่างไรเมื่อเปรียบเทียบกับการเพิ่มประสิทธิภาพ JPEG ที่ทำงานได้ดีที่สุด Daniel Aleksandersen นำเสนอตัวเลขและสรุปว่า WebP ทำงานได้ดีมากในการเอาชนะรูปแบบอื่นๆ ที่ปรับให้เหมาะสมที่สุดเกือบทุกครั้ง
• Ire Aderinokun แสดงให้เห็นว่าเราสามารถใช้ภาพ WebP ได้อย่างไรในวันนี้ สิ่งนี้มีความเกี่ยวข้องมากขึ้นในขณะนี้ที่ Firefox ให้การสนับสนุน WebP ในบิลด์ Nightly และ Edge รองรับรูปแบบตั้งแต่รุ่นล่าสุดเช่นกัน
• หน่วยคลาวด์ของ Amazon เปิดตัวชิปเซิร์ฟเวอร์แบบ Arm และด้วยเหตุนี้พวกเขาสามารถลดต้นทุนได้ประมาณ 45% (เช่นสำหรับเว็บเซิร์ฟเวอร์) ซึ่งหมายความว่าการใช้พลังงานลดลงมากและประสิทธิภาพโดยรวมสูงขึ้นซึ่งเป็นสัญญาณที่ดีสำหรับโลกของเราเช่นกัน เราต้องการการอัพเกรดโครงสร้างพื้นฐานด้านวิวัฒนาการเหล่านี้มากขึ้น ซึ่งจะช่วยลดผลกระทบของเทคโนโลยีต่อสภาพอากาศของเรา

ชีวิตการทำงาน

• ชานา ลินช์บอกเราว่าอะไรทำให้คนบางคนเป็นผู้นำธุรกิจที่มีจริยธรรม ค่านิยมใดสำคัญ วิธียืนหยัดเมื่อเผชิญกับความยากลำบาก และวิธีเตรียมพร้อมสำหรับสถานการณ์ที่ไม่สบายใจล่วงหน้า
• Ozoemena Nonso พยายามอธิบายว่าทำไมเรามักจะไม่มีความสุข ขโมยความสุขของเราไม่ได้เปรียบเทียบตัวเองกับคนอื่น เป็นการที่เราต้องดิ้นรนเพื่อให้ได้รูปแบบการเปรียบเทียบที่ถูกต้อง คำแนะนำชีวิตที่ดีอย่างเหลือเชื่อหากคุณเปรียบเทียบตัวเองกับคนอื่นบ่อยๆ และรู้สึกว่าความสุขของคุณต้องทนทุกข์ทรมานจากมัน
• คำแนะนำที่ไม่ธรรมดา: เหตุใดการบังคับให้ผู้อื่นออกจากเขตสบายของตนอาจเป็นความคิดที่ไม่ดี
• Sandor Dargo เกี่ยวกับวิธีการที่เขาหลีกเลี่ยงสิ่งรบกวนระหว่างเวลาทำงานและทำงานของเขาอย่างถูกต้องอีกครั้ง
• Paul Robert Lloyd เขียนเกี่ยวกับหนังสือ "Future Ethics" ของ Cennydd Bowles และในขณะที่อธิบายว่ามันเกี่ยวกับอะไร เขายังชี้ให้เห็นความท้าทายของจริยธรรมด้วยตัวอย่างง่ายๆ
• เจฟฟรีย์ ซิลเวอร์สตีนเป็นครูและพยายามอย่างหนักในการหาเวลาสำหรับโครงงานเสริมในขณะที่ทำงานเต็มเวลา ตอนนี้เขาพบวิธีแก้ปัญหาที่เขาแบ่งปันกับเราในบทความที่ยอดเยี่ยมนี้เกี่ยวกับ “วิธีสร้างสมดุลระหว่างการทำงานเต็มเวลากับโครงการสร้างสรรค์” อ่านสร้างแรงบันดาลใจที่ฉันสามารถเกี่ยวข้องทั้งหมด
• Ben Werdmuller แบ่งปันความคิดของเขาว่าทำไมธุรกิจไลฟ์สไตล์จึงถูกประเมินต่ำเกินไป แต่ธุรกิจไลฟ์สไตล์คืออะไร? เขาให้คำจำกัดความว่าเป็นธุรกิจที่ไม่ได้รับทุนสนับสนุนซึ่งช่วยให้เจ้าของสามารถรักษาระดับรายได้ไว้ได้ในระดับหนึ่งแต่ไม่มากไปกว่านั้น บทความนี้จะแสดงให้เห็นว่ารางวัลการเช่าที่บ้าคลั่งได้กลายมาเป็นสิ่งที่น่าสนุกในฝั่งตะวันตกของสหรัฐฯ ได้อย่างไร
• Jake Knapp แชร์วิธีที่เขาเอาชีวิตรอดมาได้ 6 ปีด้วยสมาร์ทโฟนที่ปราศจากสิ่งรบกวน ไม่ต้องอีเมลหรือการแจ้งเตือน และเขามีเคล็ดลับดีๆ ให้เราและแบบฝึกหัดให้ลองทำดู ฉันเพิ่งย้ายแอปทั้งหมดของฉันไปไว้ในโฟลเดอร์เดียวในหน้าจอที่สองเพื่อให้แน่ใจว่าฉันต้องค้นหาแอป ซึ่งโดยปกติแล้วหมายความว่าฉันต้องการเปิดแอปนั้นจริงๆ และไม่ได้ทำเพื่อเบี่ยงเบนความสนใจของตัวเอง
• Ryan Avent เขียนว่าเหตุใดเราจึงทำงานหนัก บทความนี้ได้รับการวิจัยเป็นอย่างดีและอธิบายว่าทำไมเราจึงมองว่างานเป็นสิ่งสำคัญ เหตุผลที่เราตกหลุมรักมัน และทำไมไลฟ์สไตล์และสังคมของเราจึงยอมทำงานหนักขึ้นตลอดเวลา

ก้าวไกล…

• “Who Do Designers really Work For” เป็นผลงานชิ้นเอกเกี่ยวกับความรับผิดชอบ
• แมรีแอนน์ วูลฟ์แบ่งปันงานวิจัยที่แสดงให้เห็นว่าเมื่อสมองของเราอ่านเล่นๆ เราไม่มีเวลาที่จะเข้าใจความซับซ้อน เข้าใจความรู้สึก หรือรับรู้ความงาม แนวโน้มที่แย่ลงในช่วงทศวรรษที่ผ่านมา
• นักลงทุนทั่วโลกที่จัดการ $32tn ออกคำเตือนอย่างสิ้นเชิงต่อรัฐบาลในการประชุมสุดยอดสภาพภูมิอากาศของสหประชาชาติ เรียกร้องให้มีการลดการปล่อยก๊าซคาร์บอนอย่างเร่งด่วนและยุติการเผาถ่านหินทั้งหมด หากไม่มีสิ่งเหล่านี้ โลกต้องเผชิญกับความผิดพลาดทางการเงินที่เลวร้ายยิ่งกว่าวิกฤตปี 2008 หลายเท่า พวกเขากล่าว
• ในบางแง่มุม การสูญพันธุ์ครั้งใหญ่ที่สุดของดาวเคราะห์ — 250 ล้านปีก่อน ณ จุดสิ้นสุดของยุคเพอร์เมียน — อาจเทียบได้กับการเปลี่ยนแปลงสภาพภูมิอากาศในปัจจุบัน