อัปเดตการพัฒนาเว็บรายเดือน 6⁄2018: ความซับซ้อน, DNS ผ่าน HTTPS และการแจ้งเตือนแบบพุช

เราเห็นความซับซ้อนในทุกมุมของโครงการเว็บในปัจจุบัน เราได้อ่านบทความมากมายเกี่ยวกับความซับซ้อนของเทคโนโลยีที่เฉพาะเจาะจง และเราพูดถึงเรื่องนี้ซ้ำแล้วซ้ำเล่า มาจากยุคที่เราอัพโหลดเว็บไซต์ผ่าน FTP และไม่มี git หรืออะไรเทียบได้ ตอนนี้อยู่ในยุคที่เรามีระบบ build, transpilers, frameworks, ทดสอบ และ CI แม้แต่โปรเจ็กต์ที่เล็กที่สุด ก็เข้าใจได้ง่าย . แต่ในทางกลับกัน การพัฒนาเว็บเติบโตขึ้นมากในช่วง 15 ปีที่ผ่านมา ซึ่ง เราไม่สามารถเปรียบเทียบวันนี้กับอดีตได้อีกต่อไป และแม้ว่าในอดีตอาจดูเหมือนบางสิ่งจะง่ายกว่า แต่เราละเลยข้อดีและความเป็นไปได้มากมายที่เรามีอยู่ในปัจจุบัน เมื่อเราไม่ได้เขียนการทดสอบในตอนนั้น เราก็ไม่มีการทดสอบ หมายความว่าไม่มีวิธีทดสอบความสำเร็จที่เชื่อถือได้ เมื่อเราไม่มีกระบวนการปรับใช้ มันง่ายที่จะอัปโหลดเวอร์ชันใหม่แต่ก็ทำลายบางสิ่งได้ง่ายพอๆ กัน และมันเกิดขึ้นมากกว่าทุกวันนี้เมื่อมีระบบการบูรณาการแบบต่อเนื่อง

Jeffrey Zeldman เขียนบทความที่น่าสนใจเกี่ยวกับเรื่องนี้: “The Cult of Complex” อธิบายว่าเราสูญเสียรายละเอียดที่ไม่จำเป็นอย่างไร และมักจะพยายาม คิดมากเกี่ยวกับปัญหา ฉันชอบความท้าทายในการสร้างระบบที่ไม่ซับซ้อนเกินไปแต่แสดงความรับผิดชอบในปริมาณที่เหมาะสม (เมื่อพูดถึงจริยธรรม ความเป็นส่วนตัว ความปลอดภัย ประสบการณ์ผู้ใช้ที่ยอดเยี่ยม และประสิทธิภาพ) และทำงานได้อย่างน่าเชื่อถือ (การทดสอบ การปรับใช้ ความพร้อมใช้งาน และ ประสิทธิภาพอีกครั้ง) ฉันเดาว่าปัญหาในการหาจุดสมดุลจะไม่หมดไปในเร็วๆ นี้ ความซับซ้อนมีอยู่ทุกหนทุกแห่ง — เราแค่ต้องตัดสินใจว่าความซับซ้อนนั้นมีประโยชน์หรือไม่ หรือถูกเพิ่มเข้าไปเพียงเพราะว่ามันง่ายกว่า หรือเพราะว่าเรากำลังพัฒนาปัญหาเดิมมากเกินไป

ข่าว

• Safari เวอร์ชัน 12 ที่กำลังจะเปิดตัวที่ WWDC ของ Apple มีอะไรใหม่บ้าง: ไอคอนในแท็บ รหัสผ่านที่คาดเดายาก รวมถึงการควบคุมตัวสร้างรหัสผ่านผ่านแอตทริบิวต์ HTML รวมถึงการควบคุมการตรวจสอบสิทธิ์แบบสองปัจจัย โปรแกรมดูโมเดล 3 มิติและ AR API แบบเต็มหน้าจอบน iPad font-display และที่สำคัญมาก Intelligent Tracking Prevention 2.0 ซึ่งมีข้อจำกัดมากกว่าที่เคยและอาจมีผลกระทบอย่างมากต่อการทำงานของเว็บไซต์ที่มีอยู่
• Puppeteer ไลบรารีระบบอัตโนมัติของ Chrome แบบไม่มีส่วนหัวพร้อมให้ใช้งานในเวอร์ชัน 1.5 แล้ว มันนำบริบทของเบราว์เซอร์มาใช้เพื่อแยกคุกกี้และข้อมูลอื่น ๆ ที่มักจะใช้ร่วมกันระหว่างเพจต่างๆ และตอนนี้สามารถใช้ Workers เพื่อโต้ตอบกับ Web Workers ได้เช่นกัน
• Google เปิดตัว Lighthouse 3.0 ซึ่งเป็นเวอร์ชันหลักที่สามของเครื่องมือวิเคราะห์ประสิทธิภาพซึ่งมีอินเทอร์เฟซรายงานใหม่ การเปลี่ยนแปลงการให้คะแนนบางส่วน การส่งออก CSV และการวัด First Contentful Paint
• Chrome 67 อยู่ที่นี่แล้ว โดยนำ Progressive Web App มาสู่เดสก์ท็อป ตลอดจนรองรับ Generic Sensor API และขยาย Credential Management API เพื่อรองรับ U2F Authenticators ผ่าน USB
• เราได้เห็นการเปลี่ยนแปลงบางอย่างในอินเทอร์เฟซความปลอดภัยของเบราว์เซอร์ในช่วงหลายเดือนที่ผ่านมา อันดับแรก พวกเขาเน้นย้ำไซต์ที่มีการเชื่อมต่อที่ปลอดภัย (HTTPS) จากนั้นพวกเขาก็ตัดสินใจที่จะระบุไซต์ที่ไม่ปลอดภัย และตอนนี้ Chrome ได้ประกาศการเปลี่ยนแปลงใหม่ในฤดูใบไม้ร่วงซึ่งจะทำให้ HTTPS เป็นค่าเริ่มต้นโดยทำเครื่องหมายหน้า HTTP ว่า "ไม่ปลอดภัย"

ทั่วไป

• ใน “The Cult of the Complex” เจฟฟรีย์ เซลด์แมนเขียนว่าเรามักจะลืมไปว่าความเรียบง่ายคือกุญแจและเป้าหมายของทุกสิ่งที่เราทำ เป้าหมายโดยรวมสำหรับโครงการและชีวิต เขาอธิบายว่าเหตุใดจึงเป็นเรื่องยากที่จะบรรลุผล และเหตุใดจึงง่ายกว่ามาก — และน่าดึงดูดใจ — เพื่อปลูกฝังระบบที่ซับซ้อน การอ่านที่ดีมากและฉันจะเพิ่มชิ้นส่วนในรายการ 'เอเวอร์กรีน' อย่างแน่นอน
• Heydon Pickering แบ่งปันบทความใหม่ที่น่าสนใจมาก ซึ่งสอนให้เราสร้างองค์ประกอบเว็บอย่างถูกต้อง คราวนี้เขาอธิบายวิธีสร้างโมดูล "การ์ด" ที่ครอบคลุมและตอบสนอง

UI/UX

• Cool Backgrounds เป็นโปรเจ็กต์สุดเท่โดย Moe Amaya เป็นเครื่องมือสร้างออนไลน์สำหรับพื้นหลังรูปหลายเหลี่ยมที่มีการไล่ระดับสีซึ่งสามารถสร้างรูปแบบและรูปร่างได้มากมาย สวยงามเพียง

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

• Ben Frain แบ่งปันเทคนิคการแก้ไขข้อความที่มีประโยชน์ซึ่งมีอยู่ในโปรแกรมแก้ไขโค้ดสมัยใหม่เกือบทั้งหมด

ความปลอดภัย

• เนื่องจากการโจมตีด้านความปลอดภัยผ่าน DNS ได้รับความนิยม DNS บน HTTPS จึงมีความสำคัญมากขึ้นเรื่อยๆ Lin Clark อธิบายเทคโนโลยีด้วยการ์ตูนเพื่อให้เข้าใจง่ายขึ้น
• Windows Edge กำลังแสดงตัวอย่างการสนับสนุนคุกกี้ same-site คุณลักษณะในการล็อกคุกกี้ให้มากยิ่งขึ้นมีอยู่แล้วใน Firefox และ Chrome ดังนั้น Safari จึงเป็นเบราว์เซอร์หลักเพียงตัวเดียวที่ยังคงต้องติดตั้งใช้งาน แต่ฉันเดาว่ามันจะเข้าสู่ Tech Preview ที่สร้างขึ้นในไม่ช้าเช่นกัน

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

• ACLU ค้นพบว่าขณะนี้ Amazon ได้ร่วมมือกับหน่วยงานบังคับใช้กฎหมายอย่างเป็นทางการ และมอบเทคโนโลยีการจดจำใบหน้าจำนวนมากที่ใช้ในเมืองต่างๆ ทั่วโลกแล้ว

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

• KeyCDN ขอให้ 15 คนที่รู้เรื่องเกี่ยวกับประสิทธิภาพเว็บมาแบ่งปันคำแนะนำที่ดีที่สุดกับผู้อ่าน ตอนนี้พวกเขาได้แบ่งปันบทความนี้ที่มีเคล็ดลับประสิทธิภาพที่เป็นประโยชน์มากมายสำหรับปี 2018 รวมถึงคำสองสามคำด้วยตัวเอง
• Stefan Judis ค้นพบว่าเราสามารถโหลดโมดูล ECMA Script ล่วงหน้าใน Chrome 66 ได้แล้วโดยเพิ่ม link rel="modulepreload"

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

• การสร้างสปินเนอร์การโหลดนั้นค่อนข้างง่าย ตัวอย่างเช่น สำหรับแอปพลิเคชันหน้าเดียวในระหว่างการโหลด แต่เรามักไม่ค่อยคิดเกี่ยวกับการทำให้สามารถเข้าถึงได้ ตอนนี้ Stuart Nelson ได้อธิบายถึงวิธีการทำ
• Paul Stanton แบ่งปันเครื่องมือช่วยการเข้าถึงที่เราควรใช้เพื่อให้ได้ผลลัพธ์ที่ดีที่สุด

JavaScript

• เมื่อเร็ว ๆ นี้ JavaScript ถูกรังแกโดยผู้ที่ชื่นชอบ Elm, Rust, TypeScript, Babel หรือ Dart แต่ JavaScript ไม่ได้แย่ไปกว่านั้นแน่นอน เนื่องจาก Andrea Giammarchi อธิบายด้วยตัวอย่างที่ยอดเยี่ยม บทความนี้เป็นบทความที่ดีสำหรับทุกคนที่ใช้ภาษาอื่นเหล่านี้ เนื่องจากแสดงให้เห็นข้อผิดพลาดสองสามข้อที่เราควรทราบ
• สำหรับโครงการจำนวนมาก เราต้องการใช้การวิเคราะห์หรือสคริปต์อื่นๆ ที่รวบรวมข้อมูลส่วนบุคคล เมื่อมีผลกับ GDPR สิ่งนี้ยากขึ้นมาก Yett เป็นเครื่องมือ JavaScript ที่ดีที่ให้คุณบล็อกการทำงานของทรัพยากรดังกล่าว จนกว่าผู้ใช้จะยินยอม
• Ryan Miller ได้สร้างสิ่งพิมพ์ใหม่ชื่อ "The Frontendian" และมีคำอธิบายและคำแนะนำที่ดีที่สุดประการหนึ่งเกี่ยวกับ CORS ที่ฉันเคยเจอมา
• ทีมงานของ Microsoft ได้สร้างหน้าสาธิตแบบโต้ตอบที่ดีเพื่อแสดงว่า Web Push Notifications สามารถและควรมีลักษณะอย่างไร หากคุณยังไม่เคยสัมผัสเทคโนโลยีนี้มาก่อน นี่เป็นวิธีเบื้องต้นที่ดีในการทำงานทั้งหมด และวิธีการสร้างอินเทอร์เฟซที่ไม่รบกวนผู้ใช้
• Filepond เป็นไลบรารี JavaScript สำหรับการอัปโหลดไฟล์ ดูดีและมาพร้อมกับอะแดปเตอร์มากมายสำหรับ React, Vue, Angular และ jQuery
• React 16.4 ออกมาแล้วและนำเสนอฟีเจอร์ค่อนข้างมาก: Pointer Events ซึ่งจะทำให้ง่ายต่อการจัดการกับการโต้ตอบของผู้ใช้และได้รับการร้องขอมาเป็นเวลานานแล้ว

CSS

• Oliver Schondorfer แชร์วิธีเริ่มต้นด้วยฟอนต์แบบปรับได้บนเว็บและวิธีที่เราจะจัดรูปแบบฟอนต์ด้วย CSS บทสรุปที่สมบูรณ์ของสิ่งที่คุณต้องพิจารณารวมถึงข้อผิดพลาดที่อาจเกิดขึ้น
• ด้วย macOS Mojave ที่กำลังจะมีขึ้นซึ่งสนับสนุน 'โหมดมืด' Safari จะเริ่มตั้งค่าสีพื้นหลังของเว็บไซต์ให้เป็นสีดำโดยอัตโนมัติหากไม่มีการตั้งค่า background-color ไว้อย่างชัดเจน นี่เป็นเครื่องเตือนใจที่ดีว่าเบราว์เซอร์สามารถตั้งค่าและแก้ไขรูปแบบเริ่มต้นได้ และเราจำเป็นต้องตั้งค่าเริ่มต้นของไซต์อย่างระมัดระวัง ฉันยังคงหวังว่า 'โหมดมืด' จะถูกเปิดเผยต่อ CSS Media Query เพื่อให้เราสามารถเพิ่มการสนับสนุนได้อย่างเป็นทางการ
• Rafaela Ferro แชร์วิธีใช้ CSS Grid เพื่อสร้างแกลเลอรีรูปภาพที่ไม่เพียงแต่ดูดีเท่านั้น แต่ยังยอดเยี่ยมจริงๆ บทความนี้มีคำตอบสำหรับคำถามมากมายที่ฉันได้รับเป็นประจำเมื่อพูดถึงเลย์เอาต์กริด
• Marcin Wichary อธิบายวิธีที่เราสามารถสร้างธีมสีเข้มในเวลาอันสั้นด้วย CSS Custom Properties ที่ทันสมัย

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

• Anton Sten เขียนเกี่ยวกับความหมายทางศีลธรรมสำหรับแอปของเรา คำอธิบายที่มีความหมายว่าเหตุใดเวลาของ "การเคลื่อนไหวอย่างรวดเร็วและแตกหัก" จึงสิ้นสุดลงในขณะที่เรากำลังจัดการกับปัญญาประดิษฐ์ เครือข่ายสังคมออนไลน์ที่ส่งผลกระทบต่อชีวิตของผู้คน และเรื่องความเป็นส่วนตัวที่บังคับใช้โดย GDPR
• Basecamp มีแผนภูมิประเภทใหม่เพื่อแสดงสถานะของโครงการ ซึ่งเรียกว่า "แผนภูมิเนิน" เพิ่มบริบทที่ดีกว่าแถบความคืบหน้าทั่วไปที่เคยทำ
• Ben Werdmuller แบ่งปันความคิดของเขาเกี่ยวกับประวัติย่อและวิธีที่พวกเขามักจะล้มเหลวในการสะท้อนว่าคุณเป็นใคร คุณทำอะไร และเหตุใดคุณจึงควรได้รับการว่าจ้าง

ฉันหวังว่าคุณจะสนุกกับการอัปเดตรายเดือนนี้ รายการต่อไปมีกำหนดวันที่ 13 กรกฎาคม โปรดคอยติดตาม ในระหว่างนี้ หากคุณชอบสิ่งที่ฉันทำ โปรดพิจารณาช่วยฉันให้ทุนสนับสนุนด้านการเงินสำหรับรายการเรื่องรออ่านสำหรับการพัฒนาเว็บ

มีวันที่ดี!

— อันเซลม์