อัปเดตการพัฒนาเว็บรายเดือน 9⁄2018: Native Lazy Loading And Imaginary Work

เป็นแนวคิดที่น่าสนใจในการ เปรียบเทียบ JavaScript กับ CO2 แต่ยังเป็นแนวคิดที่ถูกต้อง Alex Russel ที่ทำงานให้กับทีม Chrome และมีข้อมูลเชิงลึกมากมายเกี่ยวกับสถานะปัจจุบันของเว็บกล่าวว่าการใช้ JavaScript มากเกินไปหรือใช้ JavaScript เพียงอย่างเดียว (โดยไม่มีการเพิ่มประสิทธิภาพแบบก้าวหน้า/การย่อยสลายอย่างสง่างาม) จะมีผลเช่นเดียวกับ CO2 มากเกินไปสำหรับ ระบบนิเวศบนดาวเคราะห์โลก — ระบบนิเวศจะแตกสลาย และเช่นเดียวกับที่เราต้องการ CO2 จำนวนหนึ่งเพื่อให้ใช้งานได้ เราต้องการ JavaScript บนเว็บ เป็นเส้นบางๆ ที่สร้างความแตกต่าง — เส้นแบ่งระหว่างไม่มากและไม่มีอะไรเลย

ฉันรู้สึกว่าด้วย API ของเบราว์เซอร์ดั้งเดิมที่เรามีในทุกวันนี้ เรามีโอกาสที่ยอดเยี่ยมในการ สร้างบริการเว็บที่ยอดเยี่ยมโดยไม่ทำให้ มากเกินไปและไม่ต้องพึ่ง JavaScript เพียงอย่างเดียว เราสามารถปรับปรุงองค์ประกอบดั้งเดิมด้วย Custom Elements API ได้อย่างง่ายดายผ่าน ES6 Classes ด้วยโค้ดเพียงเล็กน้อยที่ดูเหมือนไร้สาระที่จะสร้างทั้งหมดนั้นด้วยตัวของคุณเองในเฟรมเวิร์กของบุคคลที่สาม บังเอิญ ทีมวิศวกรรม Github ตีพิมพ์บทความเกี่ยวกับวิธีที่พวกเขาทิ้ง jQuery ทั้งหมดและสิ่งที่พวกเขาใช้แทน: JavaScript ดั้งเดิมและโค้ดแบบลีนขนาดเล็กที่ปรับปรุงแพลตฟอร์มของพวกเขาอย่างก้าวหน้า โค้ดน้อยลง บำรุงรักษาได้ดีขึ้น และมีเสถียรภาพมากขึ้น

ข่าว

• ขณะนี้ Chrome 70 อยู่ในรุ่นเบต้า ทำให้การตรวจจับรูปร่างเป็นรุ่นทดลองที่ช่วยให้เราสามารถอ่านโค้ด QR การตรวจจับใบหน้า และการจดจำข้อความในรูปภาพได้ Web Authentication API ได้รับการอัปเดตบางอย่างเช่นกัน และเพิ่มการรองรับนโยบาย referrerpolicy ในองค์ประกอบ <script> เวอร์ชันนี้จะเลิกใช้องค์ประกอบที่กำหนดเอง v0, การนำเข้า HTML และ Shadow DOM v0 ด้วย
• ในที่สุด ด้วย Firefox 62 Mozilla จัดส่ง ::selection แทน :-moz-selection พวกเขายังใช้งาน flat() และ flatMap() สำหรับอาร์เรย์ JavaScript และนักพัฒนาจะได้รับ Shape Path Editor ใหม่
• Chrome 69 ออกมาแล้วและนำ CSS Scroll Snap Points มาให้เรา คุณสมบัติ CSS viewport-fit สำหรับการแสดงคัตเอาท์เช่น iPhone X และ Web Locks API ซึ่งช่วยให้สคริปต์ที่ทำงานในแท็บเดียวหรือผู้ปฏิบัติงานได้รับล็อกแบบอะซิงโครนัส ขณะทำงานแล้วปล่อย การอัปเดตยังมาพร้อมกับการสนับสนุน CSS conic gradient, toggleAttribute() (ซึ่งคล้ายกับ classList.toggle() แต่สำหรับแอตทริบิวต์) และ flat() และ flatMap() สำหรับอาร์เรย์ ขออภัย รุ่นนี้เปลี่ยนวิธีที่เบราว์เซอร์แสดง URL และดูเหมือนว่าผู้คนจะมองว่าเป็นข้อบกพร่องด้านความปลอดภัย มาดูกันว่าจะพัฒนาอย่างไร
• ด้วย Firefox 62 ที่รองรับแบบอักษรเว็บแบบแปรผัน ในที่สุดเราก็ได้รับการสนับสนุนในเบราว์เซอร์หลักทั้งหมด และสามารถใช้กันอย่างแพร่หลายในขณะนี้เพื่อปรับปรุงประสิทธิภาพ มีความคิดสร้างสรรค์มากขึ้นด้วยการพิมพ์ และลดการรับส่งข้อมูลอย่างมาก
• Manuel Rego Casasnovas เขียนเกี่ยวกับการเปลี่ยนแปลงล่าสุดใน CSS Grid Layout เป็นเปอร์เซ็นต์และความสูงไม่แน่นอนในเบราว์เซอร์ Chrome
• ใครก็ตามที่ไม่ใช่ผู้เชี่ยวชาญจะรู้สึกลำบากใจที่จะอธิบายว่าการติดตามบนอินเทอร์เน็ตทำงานอย่างไร นั่นเป็นสาเหตุที่ Firefox เปลี่ยนการตั้งค่าเริ่มต้นและบังคับใช้การบล็อกการติดตามในเบราว์เซอร์ตามค่าเริ่มต้น
• PHP7.3 กำลังจะมาพร้อมกับไวยากรณ์ Heredoc และ Nowdoc ใหม่ เครื่องหมายจุลภาคต่อท้ายในการเรียกใช้ฟังก์ชัน is_countable() array_key_first() array_key_last( array_key_last() และการปรับปรุงแฮชรหัสผ่าน Argon2

ทั่วไป

• "Bait-and-Switch" ของ Alex Russell เป็นผลงานที่ยอดเยี่ยมที่อธิบายสภาพแวดล้อมที่เป็นพิษที่เราสร้างขึ้นสำหรับเว็บในปัจจุบันและเหตุใด JavaScript จึงเปรียบได้กับ CO2 ทั้งสองจึงมีความจำเป็นในส่วนเล็ก ๆ แต่ถ้ามีมากเกินไป จะทำให้ระบบนิเวศทั้งหมด (เว็บ) ตกอยู่ในความเสี่ยง บทความดีๆ ที่อยากแนะนำให้ทุกคนอ่าน แชร์ และจดจำ
• ในฐานะที่เป็น Alexa, Cortana, Siri และแม้แต่บอทแชทของฝ่ายสนับสนุนลูกค้ากลายเป็นบรรทัดฐาน เราต้องเริ่มพิจารณาไม่เพียงแค่ว่าเนื้อหาของเรามีลักษณะอย่างไร แต่จะฟังดูเป็นอย่างไร เราสามารถและควรใช้ HTML และ ARIA เพื่อทำให้เนื้อหาของเรามีโครงสร้าง สมเหตุสมผล และที่สำคัญที่สุดคือมีความหมาย

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

• PostgreSQL 11 ที่กำลังจะมีขึ้นมีการปรับปรุงประสิทธิภาพที่น่าสนใจ Dimitri Fontaine แบ่งปันสิ่งที่พวกเขาสามารถสร้างความแตกต่างได้
• Ben Schwarz แบ่งปันวิธีการใหม่ๆ ในการโหลดแบบเนทีฟสำหรับเว็บที่อาจเป็นจริงได้ในเร็วๆ นี้

ความปลอดภัย

• Nightwatch Cybersecurity เผยแพร่ช่องโหว่ด้านความปลอดภัยใน Android ซึ่งเปิดเผยข้อมูลเกี่ยวกับอุปกรณ์ของผู้ใช้ต่อแอปพลิเคชันทั้งหมดที่ทำงานอยู่บนนั้น ดูเหมือนว่าจะรวมถึงชื่อเครือข่าย WiFi, BSSID, ที่อยู่ IP ในเครื่อง, ข้อมูลเซิร์ฟเวอร์ DNS และที่อยู่ MAC โดยรวมแล้วมีข้อมูลส่วนตัวจำนวนมากที่ช่วยให้ผู้ใช้สามารถติดตามอุปกรณ์ Android แต่ละเครื่องได้ น่าเสียดายที่ระบบปฏิบัติการ Android ทุกเวอร์ชันรวมถึงส้อม (ยกเว้น Android P/9 ที่มีการแก้ไข) ดูเหมือนจะได้รับผลกระทบโดยไม่มีแผนที่จะแก้ไขเวอร์ชันเก่า

CSS

• Chen Hui Jing อธิบายวิธีปรับแต่งปุ่มตัวเลือกโดยไม่กระทบต่อความสามารถในการเข้าถึง
• CSS Shapes มีประวัติค่อนข้างดีอยู่แล้ว มาถึงเว็บตั้งแต่เนิ่นๆ โดยความคิดริเริ่มของทีม Adobe Web ผู้จำหน่ายเบราว์เซอร์ได้ยกเลิกการติดตั้งใช้งานในเร็วๆ นี้อีกครั้ง และตอนนี้ก็ค่อยๆ กลับมาพร้อมกับข้อกำหนดและการใช้งานที่ปรับปรุงและทำซ้ำๆ Rachel Andrew แบ่งปันวิธีการใช้ CSS Shapes
• Sara Soueidan จดเหตุผลที่เธอเปลี่ยนจากการกำหนดสี CSS เป็น HEX หรือ RGB เป็น HSL และข้อดีคืออะไร
• ด้วยการเติบโตของเว็บ ทำให้มีคุณสมบัติใหม่ๆ เพื่อรองรับฟอร์มแฟคเตอร์และกรณีการใช้งานใหม่ได้ดียิ่งขึ้น คุณลักษณะหนึ่งที่ฉันตื่นเต้นคือคุณสมบัติ color-adjust ซึ่งเสนอใน CSS Color Module ระดับ 4 เป็นการยอมรับว่าเว็บจะยังคงแสดงบนอุปกรณ์ที่มีหน้าจอน้อยกว่าที่เป็นตัวเอก

HTML & SVG

• Stefan Judis อ่านสิ่งที่เอกสาร Mozilla กล่าวถึงเกี่ยวกับองค์ประกอบ input และค้นพบสิ่งที่น่าสนใจสองสามอย่างที่อาจมีประโยชน์มากสำหรับโครงการต่อไปของคุณ

JavaScript

• Nolan Lawson เปรียบเทียบวิธีต่างๆ ในการใช้ตัวจับเวลาใน JavaScript และเมื่อควรใช้
• ky เป็นไคลเอนต์ HTTP ขนาดเล็กและสวยงามตามเบราว์เซอร์ Fetch API
• Ankur Anand เขียนบทความเกี่ยวกับค่าใช้จ่ายด้านประสิทธิภาพที่แย่มากของคำขอ CORS ในแอปพลิเคชันหน้าเดียว
• Adrian Roselli แชร์วิธีที่เราสามารถสร้างรายการลิงก์ที่ส่วนท้ายของหน้าสำหรับรูปแบบการพิมพ์
• บาเบล 7 ออกแล้ว เร็วขึ้น มีตัวเลือกมากขึ้น และรองรับ JSX Fragments และ TypeScript
• การปรับขนาดอัตโนมัติ <textarea> เป็นวิธีที่มีประโยชน์มากในการปรับปรุงประสบการณ์ผู้ใช้สำหรับผู้ที่เขียนเนื้อหาสำหรับไซต์หรือบริการของคุณ ฉันเขียนบล็อกโพสต์เกี่ยวกับวิธีการปรับขนาดองค์ประกอบฟอร์มอัตโนมัติด้วยคลาส ECMAScript 6 แบบสั้น

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

• Ethan Marcotte ไตร่ตรองถึงความหมายของการช่วยสำหรับการเข้าถึง และตระหนักว่ามันไม่ได้เกี่ยวกับการทำให้เว็บไซต์เข้ากันได้กับเทคโนโลยีช่วยเหลือหรือซอฟต์แวร์บางอย่าง แต่เกี่ยวกับการทำให้ทุกคนต้องการเข้าถึงเว็บไซต์นั้นใช้งานได้โดยไม่คำนึงถึงเทคโนโลยี นี่เป็นข้อแตกต่างอย่างมากเนื่องจากแนวทางของเขารวมถึงผู้ที่มีปัญหาในการอ่านเว็บไซต์แม้ว่าพวกเขาจะใช้เบราว์เซอร์เดียวกันและแล็ปท็อปเครื่องเดียวกันกับคุณ บางทีพวกเขาอาจอยู่ในแสงแดดจ้า มีปัญหากับข้อความเล็ก ๆ หรือฟุ้งซ่านด้วยสีสดใสหรือองค์ประกอบที่เคลื่อนไหวได้
• Eric Bailey เน้นว่าการทดสอบการช่วยสำหรับการเข้าถึงด้วยตนเองมีความสำคัญเพียงใด
• Scott O'Hara แบ่งปันการนำทางเบรดครัมบ์โดยใช้ aria-label เพื่อให้ชื่อที่สามารถเข้าถึงได้และ aria-current เพื่อระบุลิงก์ที่ใช้งานอยู่ในปัจจุบัน

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

• Ryan Singer ใคร่ครวญความยากในการวางแผนโปรเจ็กต์ด้วย 'งานในจินตนาการ' และเหตุใดจึงต้องทดสอบก่อนว่าการผสานรวมบางสิ่งนั้นยากเพียงใดก่อนที่จะวางแผนบนแผนงาน

ก้าวไกล…

• ฉันชอบแนวความคิดในการวาดเส้น และถึงแม้ฉันจะไม่ทำมันเป็นประจำ แต่มันก็ดึงดูดใจฉันเสมอ Doodle Addicts เป็นแพลตฟอร์มที่รวบรวม doodle จากผู้คนทั่วโลก แกลเลอรี่ที่ดีที่จะได้รับแรงบันดาลใจจาก
• Jonny Brooks-Bartlett เขียนบทความที่น่าสนใจเกี่ยวกับสาเหตุที่นักวิทยาศาสตร์ด้านข้อมูลจำนวนมากออกจากงาน งานอาจฟังดูน่าสนใจทีเดียวและดูเหมือนเป็นเดิมพันที่ดีในทุกวันนี้ แต่บ่อยครั้งที่ความคาดหวังไม่ตรงกับความเป็นจริงและการเมือง และการตัดสินใจอย่างมีจริยธรรมเป็นเรื่องยากมาก
• Marco Lambertini อธิบายว่าเทคโนโลยีสามารถช่วยเรากอบกู้โลกได้อย่างไร แต่เราต้องเรียนรู้ที่จะให้ความสำคัญกับธรรมชาติและทรัพยากรมากกว่าสิ่งใด
• สัปดาห์นี้มีการพูดคุยที่น่าสนใจโดยผู้ร่วมให้ข้อมูลโอเพ่นซอร์สที่รู้จักกันดีซึ่งพยายามเปลี่ยนใบอนุญาตของหนึ่งในโครงการของตน เพื่อป้องกันบริษัทที่สนับสนุนสถาบัน ICE ของสหรัฐอเมริกาจากการใช้ซอฟต์แวร์ของตน การเปลี่ยนแปลงนี้ถูกเปลี่ยนกลับอย่างรวดเร็วหลังจากถูกเปิดเผยว่าไม่สามารถบังคับใช้ตามกฎหมายได้ อย่างไรก็ตาม หัวข้อทั้งหมด (ซึ่งมักจะปรากฏบ่อยขึ้นเมื่อเร็วๆ นี้) แสดงให้เห็นว่าผู้คนจำนวนมากขึ้นคิดเกี่ยวกับผลกระทบของงานของตน พวกเขาไม่ต้องการให้มันถูกใช้ในทางที่ไม่ดี แต่ในทางที่ดี และถึงแม้แนวคิดเรื่องแหล่งข้อมูลเปิดที่ไม่ถูกจำกัดจะเป็นที่พึงปรารถนา ก็ต่อเมื่อผู้คนใช้แนวคิดนี้เพื่อสนับสนุนสิทธิมนุษยชนและเพื่อพัฒนาชีวิต ฉันอยากรู้เกี่ยวกับโซลูชันใหม่ที่สามารถรับรองได้ บางทีเราอาจจะเห็นข้อกำหนดในการให้บริการเพิ่มเติมสำหรับโครงการโอเพนซอร์สในเร็วๆ นี้ (ซึ่งจะมีผลผูกพันทางกฎหมาย แต่อาจทำให้โครงการโอเพ่นซอร์สฟรีไม่สามารถใช้งานได้)