อัปเดตการพัฒนาเว็บรายเดือน 11⁄2018: การออกแบบที่ทันเวลาและทางเลือกแบบอักษรที่เปลี่ยนแปลงได้

การออกแบบส่งผลต่อการรับรู้ผลิตภัณฑ์ของเราและผู้ใช้ที่โต้ตอบกับผลิตภัณฑ์มากน้อยเพียงใด สำหรับฉัน มันชัดเจนขึ้นเรื่อยๆ ว่าการออกแบบสร้างความแตกต่าง และการรวมการออกแบบเข้ากับรุ่นมาตรฐาน เช่น Google Material Design Kit ก็ทำงานได้ไม่ดี เมื่อใช้มัน คุณจะได้ดีไซน์ที่ดีซึ่งทำงานจากมุมมองทางเทคนิคได้แน่นอน แต่คุณจะไม่สร้างประสบการณ์ที่ไม่เหมือนใคร ประสบการณ์ที่คงอยู่หรือเข้าถึงผู้คนในระดับส่วนตัว

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

ข่าว

• ใช่ Firefox 63 มาแล้ว แต่อะไรนำมา? การสนับสนุน Web Components รวมถึงองค์ประกอบที่กำหนดเองพร้อมส่วนขยายในตัวและ Shadow DOM การสนับสนุนการสืบค้นสื่อ prefers-reduced-motion ก็มีให้ใช้งานแล้วเช่นกัน เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้รับโปรแกรมแก้ไขแบบอักษรเพื่อให้การเล่นกับการพิมพ์เว็บง่ายขึ้น และตัวตรวจสอบการช่วยสำหรับการเข้าถึงถูกเปิดใช้งานโดยค่าเริ่มต้น ตอนนี้องค์ประกอบ img รองรับแอตทริบิวต์การ decoding ซึ่งสามารถรับค่า sync , async หรือ auto เพื่อบอกใบ้ถึงเวลาถอดรหัสที่ต้องการไปยังเบราว์เซอร์ Flexbox ได้รับการปรับปรุงเช่นกัน ตอนนี้รองรับคุณสมบัติ gap ( row-gap , column-gap ) และสุดท้ายแต่ไม่ท้ายสุด มีการเพิ่ม Media Capabilities API, Async Clipboard API และอินเทอร์เฟซ SecurityPolicyViolationEvent ซึ่งช่วยให้เราส่งการละเมิด CSP ได้อีกด้วย ว๊าย ปล่อยไง!
• React 16.6 ออกมาแล้ว — ดูเหมือนจะไม่ใช่ข่าวใหญ่ใช่ไหม? การอัปเดตเล็กน้อยนี้นำ React.lazy() ซึ่งเป็นวิธีที่คุณสามารถใช้แยกโค้ดโดยตัดการนำเข้าแบบไดนามิกในการเรียก React.lazy() ก้าวที่ยิ่งใหญ่เพื่อประสิทธิภาพที่ดีขึ้น นอกจากนี้ยังมีสิ่งใหม่ๆ ที่เป็นประโยชน์อีกสองสามอย่างในการอัพเดท
• ตัวอย่างล่าสุดของ Safari Tech 68 รองรับ <input type="color"> และเปลี่ยนพฤติกรรมเริ่มต้นของลิงก์ที่มี target="_blank" เพื่อรับ rel="noopener" เป็นแอตทริบิวต์โดยนัย นอกจากนี้ยังมีการสืบค้นสื่อ prefers-color-scheme ใหม่ซึ่งช่วยให้นักพัฒนาสามารถปรับเว็บไซต์ให้เข้ากับการตั้งค่าโหมดสว่างหรือมืดของ macOS
• จากนี้ไป PageSpeed ​​Insights ซึ่งน่าจะเป็นเครื่องมือวิเคราะห์ประสิทธิภาพที่ใช้กันมากที่สุดโดย Google ได้รับการขับเคลื่อนโดย Project Lighthouse ซึ่งหลายท่านเคยใช้เพิ่มเติมแล้ว การทำซ้ำเครื่องมือที่ดีซึ่งทำให้แม่นยำยิ่งขึ้นกว่าเดิม
  

ทั่วไป

• สำรวจเส้นทางการเรียนรู้ที่มีโครงสร้างเพื่อค้นพบทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับการสร้างเว็บสมัยใหม่ web.dev เป็นแหล่งข้อมูลใหม่โดยทีมงาน Google Web สำหรับนักพัฒนา
• ไม่ว่าคุณจะรู้สึกอย่างไรเกี่ยวกับ Apple Maps (ฉันเดาว่าพวกเราส่วนใหญ่เคยประสบกับช่วงเวลาที่น่าหงุดหงิดกับมัน) แต่การเปรียบเทียบนี้เกี่ยวกับข้อมูลแผนที่ที่พวกเขาใช้จนถึงตอนนี้ และข้อมูลที่พวกเขารวบรวมสำหรับ Maps ที่ปรับปรุงใหม่นี้เป็นสิ่งที่น่าสนใจ ฉันแน่ใจว่ารายละเอียดที่เพิ่มขึ้นจะช่วยผู้คนจำนวนมากทั่วโลก ลองนึกภาพว่าภูมิสถาปนิกสามารถใช้ประโยชน์จากสิ่งนี้ได้อย่างไร หรือวิธีการที่ผู้ช่วยกู้ภัยจะได้ประโยชน์จากรายละเอียดระดับนั้นหลังจากเกิดแผ่นดินไหว เป็นต้น

HTML & SVG

• Andrea Giammarchi เขียนไลบรารี polyfill สำหรับองค์ประกอบที่กำหนดเองที่ช่วยให้เราสามารถขยายองค์ประกอบในตัวใน Safari สิ่งนี้ดีมากเพราะช่วยให้เราขยายองค์ประกอบดั้งเดิมด้วยคุณสมบัติที่กำหนดเองของเราได้ — สิ่งที่ใช้งานได้ใน Chrome และ Firefox แล้ว และตอนนี้ก็มี polyfill เล็กๆ นี้สำหรับเบราว์เซอร์อื่นๆ ด้วย
• องค์ประกอบที่กำหนดเองยังใหม่มากและการสนับสนุนเบราว์เซอร์แตกต่างกันไป นั่นเป็นสาเหตุที่โปรเจ็กต์ html-parsed-element มีประโยชน์ เนื่องจากมีคลาสองค์ประกอบแบบกำหนดเองพื้นฐานพร้อมเมธอด parsedCallback ที่เชื่อถือได้

JavaScript

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

UI/UX

• คุณจะสร้างจานสีได้อย่างไร? Steve Schoger จาก RefactoringUI แบ่งปันแนวทางที่ยอดเยี่ยมที่ตรงกับความต้องการในชีวิตจริง
• บทความของ Matthew Strom เรื่อง "Just-in-time Design" กล่าวถึงโซลูชันเพื่อลดการเชื่อมต่อระหว่างการออกแบบผลิตภัณฑ์และวิศวกรรมผลิตภัณฑ์ มันเกี่ยวกับการนำวิธี Just-in-time มาใช้ในการออกแบบ สิ่งที่ทีมปัจจุบันของฉันตื่นเต้นมากและฉันยินดีที่จะลองดู
• HolaBrief ดูมีแนวโน้ม เป็นเครื่องมือที่ช่วยปรับปรุงวิธีที่เราสร้างสรุปการออกแบบ ทำให้ทุกคนมีความเข้าใจตรงกันในระหว่างกระบวนการ
• แบบจำลองทางจิตเป็นคำอธิบายว่าเรามองโลกอย่างไร Teresa Man เขียนเกี่ยวกับวิธีที่เราสามารถนำแบบจำลองทางความคิดมาใช้กับการออกแบบผลิตภัณฑ์และเหตุใดจึงสำคัญ
• Shelby Rogers แชร์ว่าเราสามารถสร้างหน้าแสดงข้อผิดพลาด 404 ให้ดีขึ้นได้อย่างไร

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

• เครื่องกำเนิดจานสี Palx ให้คุณป้อนค่าฐานสิบหกและสร้างจานสีทั้งหมดตามค่านั้น

ความปลอดภัย

• เครื่องมือ Python ที่ประณีตนี้เป็นยูทิลิตี้การตรวจจับ XSS ที่ยอดเยี่ยม
• Svetlin Nakov เขียนหนังสือเกี่ยวกับ การเข้ารหัสเชิงปฏิบัติสำหรับนักพัฒนา ซึ่งให้บริการฟรี หากคุณเคยต้องการทำความเข้าใจหรือทราบข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของคีย์ส่วนตัว/สาธารณะ การแฮช การเข้ารหัส หรือลายเซ็น นี่คือจุดเริ่มต้นที่ดี
• Facebook อ้างว่าพวกเขาจะเปิดเผยว่าใครจ่ายค่าโฆษณาทางการเมือง ตอนนี้ VICE ได้ค้นคว้าเกี่ยวกับคุณลักษณะใหม่นี้และกำหนดให้สมาชิกวุฒิสภาสหรัฐฯ ในปัจจุบันทั้งหมด 100 คนแสดงโฆษณาที่ 'จ่ายโดยพวกเขา' ค่อนข้างน่ากลัวที่จะเห็นว่าความล้มเหลวด้านความปลอดภัยเพียงครั้งเดียวที่ให้ผู้ใช้มีอำนาจมากขึ้นตามที่ตั้งใจไว้สามารถเปลี่ยนแปลงการเมืองโลกได้อย่างไร

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

• ฉันไม่ชอบการลิงก์ไปยังบทความที่ต้องเสียเงินและถูกจำกัด แต่บทความนี้ทำให้ฉันคิดได้ และคุณไม่จำเป็นต้องมีเรื่องราวทั้งหมดเพื่อติดตามฉัน เมื่อเทสลาประกาศว่าจะเพิ่มการผลิตโมเดล 3 เป็น ²⁴ ⁄ ₇ ผู้คนจำนวนมากต้องการตรวจสอบเรื่องนี้และ บริษัท ที่ทำเงินโดยการให้ข้อมูลตำแหน่งทางภูมิศาสตร์ที่บันทึกข้อมูลตำแหน่งสมาร์ทโฟนจากคนงานรอบโรงงานเทสลาเพื่อยืนยันว่า นี่อาจเป็นความจริง เรื่องราวที่น่าเศร้าอีกเรื่องหนึ่งเกี่ยวกับความง่ายในการติดตามบุคคลโดยไม่ได้รับความยินยอม แม้ว่าจะเป็นกรณีของการเฝ้าระวังจำนวนมากมากกว่าการติดตามบุคคล

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

• Addy Osmani แชร์กรณีศึกษาด้านประสิทธิภาพของ Netflix เพื่อปรับปรุง Time-to-Interactive ของบริการสตรีมมิง ซึ่งรวมถึงการเปลี่ยนจาก React และไลบรารีอื่น ๆ เป็น JavaScript ธรรมดา การดึง HTML, CSS และ (React) JavaScript ล่วงหน้า และการใช้ React.js ทางฝั่งเซิร์ฟเวอร์ ค่อนข้างน่าสนใจที่ได้เห็นแนวทางที่แปลกใหม่มากมายและประโยชน์ที่ได้รับ แต่จำไว้ว่าสิ่งที่ใช้ได้ผลกับผู้อื่นไม่จำเป็นต้องเป็นแนวทางที่สมบูรณ์แบบสำหรับโครงการของคุณ ดังนั้นให้มองว่ามันเป็นแรงบันดาลใจมากกว่าการลอกเลียนแบบอย่างสุ่มสี่สุ่มห้า
• Harry Roberts อธิบายรายละเอียดทั้งหมดที่สำคัญที่ควรรู้เกี่ยวกับ CSS และประสิทธิภาพของเครือข่าย คอลเล็กชันที่ครอบคลุมซึ่งให้เคล็ดลับที่น่าสนใจเมื่อคุณมี async แบบอะซิงโครนัสในโค้ดของคุณ
• ฉันชอบแอป ImageOptim ขนาดเล็กสำหรับการเพิ่มประสิทธิภาพรูปภาพของฉันสำหรับการเผยแพร่ทางเว็บ แต่ตอนนี้ มีเว็บแอปที่น่าประทับใจชื่อ “Squoosh” ที่ให้คุณปรับแต่งรูปภาพได้อย่างสมบูรณ์แบบในเว็บเบราว์เซอร์ของคุณ และคุณยังสามารถปรับขนาดรูปภาพและเลือกการบีบอัดที่จะใช้ ซึ่งรวมถึง mozJPEG และ WebP จัดทำโดยทีมงาน Google Chrome

CSS

• Oliver Schondorfer แสดงให้เห็นว่าเราสามารถให้บริการแบบอักษร Variable กับเบราว์เซอร์สมัยใหม่ได้อย่างไร ในขณะที่ให้แบบอักษรเว็บทางเลือกสำหรับเบราว์เซอร์รุ่นเก่า สิ่งนี้น่าสนใจเป็นพิเศษเนื่องจาก Oliver ลงลึกในการปรับแบบอักษรทางเลือกให้เหมาะสมและปรับแต่งผ่าน CSS เพื่อให้ตรงกับแบบอักษรของตัวแปรมากที่สุดเท่าที่จะเป็นไปได้ในกรณีที่มีการสลับแบบอักษรระหว่างการโหลดหน้าเว็บ
• Andy Clarke แสดงให้เห็นความจำเป็นในการออกแบบผลิตภัณฑ์และเว็บไซต์ใหม่เพื่อรองรับโหมดสว่างและมืด ซึ่งเพิ่งเปิดตัวในระบบปฏิบัติการหลายระบบ และเร็วๆ นี้จะได้รับการสนับสนุนผ่านการสืบค้นสื่อโดยเบราว์เซอร์ต่างๆ
• แม้ว่า background-clip จะไม่ใช่เรื่องใหม่ แต่ก็ไม่มีประโยชน์มากนักเนื่องจากขาดการสนับสนุนเบราว์เซอร์ แต่อย่างที่ Sime Vidas แสดงให้เห็น ตอนนี้ CSS Background Clip ได้รับการสนับสนุนอย่างกว้างขวาง ทำให้เรามีโอกาสที่ดีในการปรับปรุงรูปแบบข้อความบนเว็บไซต์ของเรา

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

• Stig Brautaset เขียนเกี่ยวกับสาเหตุที่เขาเกือบล้มเหลวในการรับงานเป็นผู้ดำเนินการโซนาร์ใต้น้ำเนื่องจากกฎการจ้างงานที่โง่เขลา และวิธีที่เขาใช้สถานการณ์นี้ให้เกิดประโยชน์สูงสุดและประสบความสำเร็จ บทเรียนอันมีค่าที่แสดงให้เห็นว่าคุณไม่ควรยึดติดกับหลักเกณฑ์และกฎเกณฑ์ในการจ้างคนมากเกินไป แต่ให้วางใจสัญชาตญาณของคุณและฟังเรื่องราวของพวกเขาแทน
• ใน “ผู้คน ไม่ใช่หุ่นยนต์: นำมนุษยชาติกลับมาสู่การสนับสนุนลูกค้า” Kristin Aardsma แบ่งปันว่าทำไมการคิดใหม่ถึงวิธีการทำงานของการสนับสนุนลูกค้าจึงเป็นเรื่องสำคัญ
• Marcus Wermuth ใคร่ครวญว่าทำไมการเป็นผู้จัดการจึงไม่ใช่การเลื่อนตำแหน่ง แต่เป็นการเปลี่ยนอาชีพ

ก้าวไกล…

• Neil Stevenson กล่าวถึง Steve Jobs ความคิดสร้างสรรค์และความตาย และทำไมเรื่องนี้จึงเป็นเรื่องราวที่ดีสำหรับชีวิต แม้ว่าการลอกเลียนแบบสตีฟ จ็อบส์อาจไม่ใช่ความคิดที่ดี แต่นีลได้ให้มุมมองที่แตกต่างกันว่าเราอาจต้องการทำงานอย่างไร จะทำอย่างไรกับชีวิตของเรา และเหตุใดจุดประสงค์จึงสำคัญสำหรับพวกเราหลายคน
• Ryan Broderick สะท้อนถึงสิ่งที่เราทำโดยการประดิษฐ์อินเทอร์เน็ต เขาสรุปว่าลัทธิหัวรุนแรงทั้งหมดในโลก มุมมองทางการเมืองที่แปลกประหลาดเหล่านั้นเกิดจากการประดิษฐ์ของโซเชียลมีเดีย ซอฟต์แวร์แชท และวัฒนธรรม (ไม่ย่อย) ในการส่งเสริมและโอบรับสิ่งเลวร้ายทั้งหมดที่เกิดขึ้นในสังคมของเรา จำ 4chan, Reddit และบริการที่คล้ายกัน แต่ยัง Facebook et al? พวกเขามีส่วนร่วมและยอมรับไม่เพียงแค่ความคิดที่ดีเท่านั้น แต่มักเป็นความคิดที่โง่เขลาหรือเป็นอันตรายด้วย “นี่คือวิธีที่เราทำให้โลกนี้กลายเป็นหัวรุนแรง” เป็นเรื่องที่น่าเศร้าที่ต้องอ่านแต่เขียนได้ดี และมีความคิดที่สร้างแรงบันดาลใจมากมายเกี่ยวกับวิธีที่เรากำหนดสังคมผ่านเทคโนโลยี
• ขออภัย นี่เป็นอีกลิงค์หนึ่งเกี่ยวกับการใช้พลังงานของ Bitcoin แต่แสดงให้เห็นว่าการขุด Bitcoin เพียงอย่างเดียวสามารถเพิ่มอุณหภูมิโลกให้สูงกว่าขีดจำกัดวิกฤต (2°C) ภายในปี 2033 ถึงเวลาละทิ้งสกุลเงินดิจิทัลที่ไม่มีประสิทธิภาพประเภทนี้ ตอนนี้.
• ความรกร้างว่างเปล่าเป็นสิ่งที่พิเศษ และโลกของเราก็มีน้อยลงตามที่อธิบายไว้ในบทความนี้ แผนที่แสดงให้เห็นว่ามีเพียงไม่กี่ประเทศเท่านั้นที่มีถิ่นทุรกันดารมากมายในปัจจุบัน ทำให้สัตว์และสายพันธุ์หายากมีที่อยู่อาศัย ทำให้มนุษย์มีวิธีในการสำรวจธรรมชาติ พักผ่อน และออกผจญภัย
• เราอยู่ในช่วงเวลาที่น่าตื่นเต้นอย่างแน่นอน แต่ฉันรู้สึกเศร้าเมื่อได้อ่านเรื่องนั้นในช่วงสี่สิบปีที่ผ่านมา ประชากรสัตว์ป่าลดลง 60% นั่นเป็นมาตราส่วนที่ค่อนข้างใหญ่ และหากเป็นเช่นนี้ต่อไป โลกจะเป็นสถานที่อื่นเมื่อฉันแก่แล้ว ใช่ เมื่อ ผม แก่ตัวลง สัตว์หลายชนิดที่ผมรู้จักและเห็นในธรรมชาติจะไม่มีอยู่แล้วในตอนนั้น และมนุษย์รุ่นต่อไปจะไม่สามารถเห็นพวกมันได้นอกจากในพิพิธภัณฑ์ ยังไม่ชัดเจนว่าสาเหตุคืออะไร แต่การเปลี่ยนแปลงสภาพภูมิอากาศอาจเป็นสิ่งหนึ่ง และการขยายตัวของมนุษย์สู่พื้นที่สัตว์ป่าที่เพิ่มขึ้นเรื่อยๆ อาจมีส่วนช่วยอย่างมากเช่นกัน