การอัปเดตการพัฒนาเว็บรายเดือน 2⁄2019: การตรวจสอบเว็บและปัญหากับ UX

เผยแพร่แล้ว: 2022-03-10
สรุปอย่างย่อ ↬ ข่าวเบราว์เซอร์ บทเรียนอันมีค่าที่เรียนรู้ แนวทางปฏิบัติที่ดีที่สุด การทดลองเขียนโค้ดที่สร้างแรงบันดาลใจ ในรายการเรื่องรออ่านรายเดือนของเขา Anselm Hannemann สรุปสิ่งที่สำคัญที่สุดที่เกิดขึ้นในโลกของการพัฒนาเว็บในช่วงสองสามสัปดาห์ที่ผ่านมา

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

เช่นสัปดาห์นี้เป็นต้น ฉันนึกถึงความจริงที่ว่าเรามักจะลืมไปว่าอินเทอร์เน็ตมีโครงสร้างอย่างไร หากคุณท่องเว็บ การเข้าชมส่วนใหญ่จะถูกส่งผ่าน Amazon ในบางจุด ดังนั้นหากคุณบล็อกเซิร์ฟเวอร์ของพวกเขา — หรือของ Google หรือ Apple หรือทั้งหมด — อินเทอร์เน็ตก็เหลือไม่มากแล้ว ฉันใช้ตัวบล็อก DNS ของ Pi-Hole ในเครือข่ายของฉันมาเป็นเวลาสามปีแล้ว แต่ไม่เคยชื่นชมมันเลย จนกระทั่งฉันได้เรียนรู้เกี่ยวกับคุณค่าที่แท้จริงของมันในสัปดาห์นี้ — ความปลอดภัยและความเป็นส่วนตัวที่มอบให้เมื่อพิจารณาถึงการพึ่งพายักษ์ใหญ่ด้านเทคโนโลยีของเรา เป็นเรื่องน่าทึ่งที่การรักษาความปลอดภัยออนไลน์ส่วนใหญ่ที่ฉันรับรู้นั้นอาศัยซอฟต์แวร์โอเพนซอร์ซเพียงชิ้นเดียวที่ผู้เขียนใช้เวลาและความพยายามอย่างมากในการให้บริการฟรีในที่สุด

ข่าว

  • Firefox 65 เปิดตัวแล้ว เวอร์ชันใหม่ส่งกิจกรรมบนองค์ประกอบ HTML ที่ disabled และมาพร้อมกับการสนับสนุนแอตทริบิวต์ referrerpolicy ในองค์ประกอบ script ตัวแปรสภาพแวดล้อม CSS (ฟังก์ชัน env() ) Intl.RelativeTimeFormat สำหรับ JavaScript และรูปภาพ WebP
  • Safari Tech Preview 74 นำเสนอการ fetch ที่ยกเลิกได้ รองรับ U2F HID Authenticators บน macOS และคุณสมบัติ Web Authentication API ใหม่
  • Chrome 72 ทำให้ Chrome ได้แนะนำ User Activation API เวอร์ชันใหม่ยังไม่อนุญาตให้แสดงป๊อปอัปใน pageunload
  • การอัปเดต Chrome 72 สำหรับ Android ได้จัดส่งคุณลักษณะ Trusted Web Activity ที่รอคอยมานาน ซึ่งหมายความว่าขณะนี้เราสามารถเผยแพร่ PWA ใน Google Play Store
  • บันทึกประจำรุ่นของ Safari 12.1 พร้อมใช้งานแล้ว (iOS 12.2, macOS 10.14.4) มีอะไรใหม่บ้าง? โหมดมืดสำหรับเว็บ การป้องกันการติดตามอัจฉริยะ การแจ้งเตือนแบบพุชสำหรับ Safari บน macOS ตอนนี้ต้องใช้การตั้งค่าท่าทางสัมผัส การเคลื่อนไหว และการวางแนวของผู้ใช้บน iOS เพื่อเปิดใช้ DeviceMotionEvent และ DeviceOrientationEvent (ซึ่งหมายความว่าตอนนี้ปิดใช้งานโดยค่าเริ่มต้นแล้ว) สิ่งใหม่คือ Intersection Observer API, Web Share API และองค์ประกอบ <datalist>
เพิ่มเติมหลังกระโดด! อ่านต่อด้านล่าง↓

ทั่วไป

  • Max Bock แบ่งปันความคิดของเขาว่าทำไมความเรียบง่ายจึงเป็นสิ่งที่มีค่าและสำคัญที่สุดในโครงการ
  • Ian Littman บน Twitter: “การย้ายเซิร์ฟเวอร์ 50% เป็น PHP 7 จาก PHP 5 จะช่วยประหยัดค่าใช้จ่ายด้านพลังงานได้ 2.5 พันล้านดอลลาร์ (แก้ไขเป็น 2.0) พันล้านดอลลาร์ต่อปี และหลีกเลี่ยงการปล่อย CO2 ได้หลายพันล้านกิโลกรัม อัปเกรดเป็น PHP 7 กอบกู้โลก”
  • คุณเริ่มเรียนรู้การพัฒนาเว็บได้อย่างไร ฉันเดาว่าเราส่วนใหญ่อาศัยฟังก์ชัน "ดูแหล่งที่มา" ของเบราว์เซอร์และยังคงใช้อยู่ แต่ด้วย JavaScript SPA และเครื่องมืออื่นๆ ที่ทำให้แหล่งที่มาเสียหาย ลดขนาด และอัปลักษณ์ เราจึงปิดกั้นเส้นทางแห่งการศึกษาด้วยตนเองสำหรับผู้คนจำนวนนับไม่ถ้วน เปลี่ยนไปใช้แนวทางที่เปิดกว้างมากขึ้นและอย่างน้อยให้แผนที่ต้นทางบนเซิร์ฟเวอร์ที่ใช้งานจริงเพื่อให้ผู้คนสามารถเข้าถึงแหล่งที่มาจริงผ่านเครื่องมือสำหรับนักพัฒนา

UI/UX

  • อะไรคือความแตกต่างระหว่างผลิตภัณฑ์ดิจิทัลที่ดีและผลิตภัณฑ์ดิจิทัลที่ยอดเยี่ยม ตัวอักษรสองตัว: UX การออกแบบประสบการณ์ผู้ใช้ แต่มีปัญหาพื้นฐานในเรื่องนั้น Johannes Ippen กับเหตุผลที่เราควรเห็นมนุษย์ ไม่ใช่ผู้ใช้
  • นี่เป็นบทสรุปที่ดีว่าเว็บไซต์ยอดนิยมมีการเปลี่ยนแปลงไปอย่างไรในช่วงสิบปีที่ผ่านมา รวมถึง Google, YouTube, Amazon, Facebook, Apple และ eBay เห็นได้ชัดว่าเราอยู่ในยุคที่ต่างไปจากปัจจุบัน
  • Colin Eagan สรุปความเป็นไปได้มากมายที่เราต้องมีในการปรับแต่งประสบการณ์เว็บสำหรับผู้ใช้แต่ละคน และตัวเลือกใดใช้ไม่ได้ เขาสรุปด้วยคำแนะนำที่มีค่า: ให้เริ่มต้นง่ายๆ แทนที่จะทำตามลัทธิที่ซับซ้อน ไม่ว่าบริษัทและทีมงานจะเชี่ยวชาญด้านเทคโนโลยีแค่ไหนก็ตาม
ร่างใบหน้าด้วยเงื่อนไข เห็น พูดและทำ ได้ยิน คิด และรู้สึกลอยอยู่รอบตัว
ในการสร้างประสบการณ์ผู้ใช้ที่ยอดเยี่ยม เราจำเป็นต้องเห็นผู้ใช้ของเราเป็นมนุษย์ (เครดิตรูปภาพ)

HTML & SVG

  • Sara Soueidan เขียนหลักสูตร 101 เกี่ยวกับตัวกรอง SVG เพื่อช่วยให้คุณเข้าใจว่ามันคืออะไรและจะใช้อย่างไรเพื่อสร้างเอฟเฟ็กต์ภาพของคุณเอง

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

  • Rob Dodson แชร์ข้อมูลสรุปที่ยอดเยี่ยมเกี่ยวกับวิธีสร้างพื้นฐานการช่วยสำหรับการเข้าถึงที่ดีขึ้น

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

  • Google เป็นหนึ่งในบริษัทเหล่านั้นที่มักจะหาวิธีใหม่ๆ ที่ชาญฉลาดในการเปิดเผยข้อมูลตำแหน่งของผู้ใช้และขายให้กับบุคคลที่สาม ตอนนี้ Google ต้องการขายข้อมูลตำแหน่งที่แน่นอนของผู้ใช้เพื่อปรับปรุงการวางแผนสำหรับนักวางผังเมืองเป็นต้น มีประโยชน์ในด้านหนึ่ง แต่ยังเป็นกังวลสำหรับผู้ใช้ผลิตภัณฑ์ Google ทั้งหมดที่อาจไม่ทราบว่าเกิดอะไรขึ้นกับข้อมูลของตน
  • “ฉันคิดผิดเกี่ยวกับ Google และ Facebook: ไม่มีอะไรผิดปกติกับพวกเขา (อย่างที่เราทุกคนทราบ)” Aral Balkan กล่าว งานชิ้นนี้อธิบายว่าแม้แต่โครงการโอเพนซอร์ซที่มีเกียรติที่สุดก็ยังดิ้นรนในการตัดสินใจเลือกอย่างมีจริยธรรมและข้อผิดพลาดในการนำเสนอ UX ที่ดีที่สุด แทนที่จะส่งเสริมวิธีแก้ปัญหาที่ถูกต้องตามหลักจริยธรรม

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

  • Jens Oliver Meiert แบ่งปันงานวิจัยของเขาว่าวิธีเขียน HTML ของคุณส่งผลต่อประสิทธิภาพอย่างไร การไม่ใส่แท็กและเครื่องหมายคำพูดที่เป็นตัวเลือกสามารถสร้างความแตกต่างได้ แม้ว่าเราจะสามารถใช้ gzip หรือเทคนิคอื่นๆ เพื่อเพิ่มประสิทธิภาพการตอบกลับของเอกสารในเบราว์เซอร์ได้

JavaScript

  • เนื่องจากการรั่วไหลของข้อมูลส่วนใหญ่เกิดขึ้นเนื่องจากรหัสผ่านที่ไม่รัดกุมและใช้ซ้ำ การตรวจสอบความถูกต้องของเว็บจึงเป็นประเด็นร้อนในทุกวันนี้ Guide to Web Authentication ใหม่เป็นตัวอย่างที่ยอดเยี่ยมที่คู่มือการติดตั้งความปลอดภัยก็สวยงามได้เช่นกัน
  • Mathias Schafer สรุปบทเรียนของเขาที่ได้รับจากการรักษาฐานข้อมูล JS ขนาดใหญ่ในโครงการระยะยาว
  • Dr. Axel Rauschmayer อธิบายถึงสิ่งที่ยังขาดหายไปใน JavaScript และสิ่งที่สามารถนำมาใช้ได้ในอนาคต
  • Intersection Observer เข้าสู่ WebKit และทีม Webkit ได้เขียนบทช่วยสอนที่เป็นประโยชน์
ตัดตอนมาจากคู่มือ มันแสดงให้เห็นภาพประกอบของผู้หญิงตัวเล็ก ๆ ที่พยายามป้องกันไม่ให้ปึกใหญ่ของกุญแจล้มลง
Guide to Web Authentication เป็นคำแนะนำที่มีประโยชน์ในการรักษาความปลอดภัยข้อมูลสำคัญทางออนไลน์ (เครดิตรูปภาพ)

CSS

  • Rik Schennink อธิบายวิธีใช้ CSS อัจฉริยะเพื่อใช้สไตล์ตามตำแหน่งการเลื่อนของผู้ใช้
  • เป็นเรื่องเหลือเชื่อที่ Fabricius Seifert สร้างแอนิเมชั่นระบบสุริยะ 3 มิติด้วย CSS บริสุทธิ์
  • Preethi Sam อธิบายวิธีใช้ฟังก์ชัน CSS element() ที่ไม่ค่อยมีใครรู้จักเพื่อสร้างเนวิเกเตอร์แผนที่ย่อ
  • Roman Komarov แบ่งปันแนวทางของเขาในการจัดวางบล็อกที่ยืดหยุ่นด้วยแถบด้านข้างที่เป็นตัวเลือก สร้างด้วย CSS Grid และคุณสมบัติที่กำหนดเอง
ระบบสุริยะที่สร้างด้วย CSS
สำรวจระบบสุริยะในการทดลอง CSS ที่ยอดเยี่ยมของ Fabricius Seifert (เครดิตรูปภาพ)

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

  • Paul Greenberg กำลังค้นหาเวลาที่เสียไปจากหน้าจอและสำรวจว่าชีวิตของเราจะหน้าตาเป็นอย่างไร และเราจะมีเวลาอีกมากเพียงใดหากเราหนีออกจากหน้าจอ มีตัวเลขที่เปิดเผยอยู่ในบทความ: ชาวอเมริกันโดยเฉลี่ยใช้จ่าย 14,000 เหรียญสหรัฐต่อทศวรรษกับสมาร์ทโฟน นั่นคือ 70,000 ดอลลาร์ตลอดช่วงชีวิตการทำงานโดยเฉลี่ย ชาวอเมริกันมากกว่า 29% ยอมเลิกมีเซ็กส์เป็นเวลาสามเดือน ดีกว่าเลิกใช้สมาร์ทโฟนในสัปดาห์เดียว หรือคุณสามารถปลูกต้นไม้ได้ 150 ต้น และซื้อที่ดินครึ่งเอเคอร์ด้วยจำนวนเงินที่คุณใช้ไปกับสมาร์ทโฟนและแอปต่อปี
  • คุณเป็นคนอดทนหรือไม่? ไม่ว่าคุณจะเป็นหรือไม่ก็ตาม การทดลองที่ Jason Fried อยากลองนั้นท้าทายอย่างยิ่ง: ลองเลือกแถวที่ยาวที่สุดในซูเปอร์มาร์เก็ต ยกเลิก Amazon Prime เพื่อให้การจัดส่งใช้เวลานานขึ้น และใช้โอกาสนี้รอทุกครั้งที่ทำได้ โอบกอดความช้า
  • “In Praise of Extreme Moderation” แบ่งปันมุมมองที่น่าสนใจว่าเหตุใดวัฒนธรรมการทุ่มเทมากเกินไป ทำงานหนักเกินไป และส่งมอบมากเกินไปในทุกด้านของชีวิตจึงไม่แข็งแรง และวิธีที่เราจะเปลี่ยนไปสู่เส้นทางที่สงบและเป็นกลางมากขึ้น .

ก้าวไกล…

  • “มันต้องฟรี” เห็นได้ชัดว่าเราไม่ได้ต้องการบริการแต่ต้องการมี เรียงความของฉันเกี่ยวกับความสำคัญของการเห็นคุณค่าในสิ่งที่เราต้องการจริงๆ และทำไมน้อยจึงมีมาก
  • เราจะทำให้ชีวิตของเราดีขึ้นได้อย่างไร? Eric Barker กล่าวว่าการรักษาความสัมพันธ์ที่จำเป็น หลีกเลี่ยงเทคโนโลยี และยอมรับค่านิยมแทนการใช้ lifehacks
  • ดูการพูดคุยของ Greta Thunberg หญิงอายุสิบหกปีที่บอกกับคนที่มีชื่อเสียงและมีอิทธิพลว่าเธอไม่สนใจเรื่องเงินและทำไมเราต้องมองการเปลี่ยนแปลงสภาพภูมิอากาศจากมุมมองเช่นเธอ – ชีวิตของเธอ กำลังตกอยู่ในอันตรายและไม่มีเงินจะรักษามันไว้ได้ เราต้องการคนแบบเธอมากขึ้นที่ไม่ได้อยู่ภายใต้กฎเกณฑ์ของบริษัทหรือการเงิน