Chào mừng bạn đến với phiên bản thứ hai của Chrome Dev Insider, nơi chúng tôi chia sẻ thông tin cập nhật về những điều mới mẻ và thú vị trong cộng đồng cũng như tại Chrome. Đây là tập mới gồm những câu chuyện nội bộ về cách chúng tôi tiếp cận công việc của mình, đồng thời giới thiệu sơ lược một số điểm cập nhật quan trọng nhất mà bạn nên chú ý.
Tôi là Rachel Andrew, Trưởng nhóm nội dung của web.dev và developer.chrome.com, thành viên của nhóm Quan hệ với nhà phát triển Chrome. Tôi đã làm việc trên web trong hơn 20 năm, tập trung vào các tiêu chuẩn web mở và CSS, đồng thời là thành viên của Nhóm công tác CSS.
Hai tháng trước, chúng tôi đã kết thúc Google I/O, trong đó chúng tôi đã chia sẻ một số nội dung cập nhật quan trọng nhất về cách chúng tôi hỗ trợ nhà phát triển làm cho web nhanh hơn và mạnh mẽ hơn trong khi vẫn đảm bảo thông tin người dùng an toàn và riêng tư.
Một trong những điều nổi bật (và chúng tôi rất vui vì cộng đồng đã chú ý đến!) là khối lượng công việc khổng lồ mà nhóm đang làm để hỗ trợ thêm nhiều tính năng CSS và giao diện người dùng trên web. Trong ấn bản này của Chrome Dev Insider, chúng tôi sẽ đưa bạn đến hậu trường về những người đứng sau công việc này, cách chúng tôi hỗ trợ nhà phát triển CSS và giao diện người dùng cũng như những điều phía trước. Đó là lý do khiến tôi rất vui khi được tổ chức ấn bản này của Insider.
Địa điểm thu hút truyền thông
Trong lần đầu tiên Chrome Dev Insider, chúng tôi đã chia sẻ một số thông tin cập nhật về các sáng kiến Compat 2021 và Interop 2022 khi các nhà cung cấp trình duyệt và đối tác trong hệ sinh thái đang hợp tác để cung cấp thêm nhiều tính năng cho web được hỗ trợ trên tất cả các trình duyệt. Sáng kiến này chủ yếu tập trung vào CSS vì trình duyệt không tương thích là một trong những thách thức lớn nhất đối với các nhà phát triển CSS.
Mặc dù đây có thể không phải là tin vui đối với hầu hết người dùng, nhưng chúng tôi rất vui khi thấy chúng tôi đã đạt được những tiến bộ gì trên nhiều trình duyệt.
Vào đầu tháng trước, Safari công bố bản phát hành quảng cáo đệm cho Safari 16.0 Beta, trong đó có các tính năng thú vị như Truy vấn vùng chứa, lưới phụ và trình kiểm tra hộp linh hoạt. Các bản phát hành gần đây của Firefox và Chrome đã bao gồm một số tính năng và bản sửa lỗi thú vị—Tôi sẽ trình bày những nội dung chính về trình duyệt ổn định và phiên bản beta mỗi tháng trong loạt bài đăng mới dành cho nền tảng web của tôi.
Tin tức nội bộ: Hỗ trợ các nhà phát triển CSS và giao diện người dùng
Năm 2022 trở thành một năm thú vị đối với các tính năng của CSS. Do vậy, chúng tôi tin rằng đây là thời điểm thích hợp để bạn vén màn hậu trường. Tôi đã thảo luận với Una Kravets, trưởng nhóm DevRel về giao diện người dùng web và Devtools, cùng với Nicole Sullivan (Nhà quản lý sản phẩm của Google phụ trách giao diện người dùng web) để thảo luận về hành trình của Chrome trong việc hỗ trợ nhà phát triển giao diện người dùng.
Hãy bắt đầu với cả hai. Bạn có thể chia sẻ thêm đôi điều về bản thân mình không?
Nicole: Tôi là người quản lý sản phẩm về Giao diện người dùng web trên Chrome. Tôi đặc biệt tập trung vào các API CSS và HTML mới, cũng như những nhà phát triển và nhà thiết kế xây dựng giao diện người dùng. Đây là một không gian thú vị với một số API thực sự quan trọng sắp ra mắt như Truy vấn vùng chứa, Phạm vi và nhịp điệu dọc (hy vọng là!)
Una: Tôi là trưởng nhóm DevRel của trang web và Công cụ cho nhà phát triển. Chúng tôi tập trung hỗ trợ các kỹ sư giao diện người dùng trên nền tảng web và đảm bảo họ có các công cụ cần thiết để thành công. Trong đó bao gồm API CSS và thành phần HTML cùng với các tính năng của Công cụ cho nhà phát triển để bạn có thể xem các thay đổi và phản hồi đang diễn ra.
Trong vài năm qua, chúng tôi đã tăng cường hỗ trợ các nhà phát triển giao diện người dùng của Chrome. Vì sao bạn cho rằng mất nhiều thời gian như vậy để đến đây? Đâu là thách thức lớn nhất?
Una: Chúng tôi cần thực hiện một số hành động để chứng minh tầm quan trọng của công việc này và tại sao công việc này lại cần được ưu tiên. Chúng tôi bắt đầu bằng khảo sát ADN MDN vào năm 2019, trong đó xác định giao diện người dùng là một trong những vấn đề hàng đầu trên nền tảng này. Kể từ đó, chúng tôi tiếp tục sử dụng dữ liệu làm kim chỉ nam thông qua MDN cũng như các cuộc khảo sát nội bộ về mức độ hài lòng của nhà phát triển. Kết quả của tất cả những việc này là chúng tôi có thể thu hút sự tham gia sâu sắc hơn của lãnh đạo và có thể ưu tiên công việc kỹ thuật cho một số tính năng được yêu cầu nhiều nhất dành cho nhà phát triển trong không gian giao diện người dùng. Đây cũng chính là trọng tâm của các sáng kiến như Compat 2021 và Interop 2022.
Nicole: Ngoài việc nhận được sự ủng hộ của ban lãnh đạo, chúng tôi cũng phải tìm cách phù hợp để đưa các API này đến với nhà phát triển. Khi mới tham gia Chrome, tôi đã gặp rắc rối trong một dự án có tên là Layered APIs (API Phân lớp) (hay nói ngắn gọn là LAPI). LAPI hướng đến việc mang đến cho nhà phát triển trải nghiệm thành phần thả xuống. Tôi vẫn nghĩ rằng kết quả ghi hình này là tuyệt vời, nhưng chúng tôi đã mắc rất nhiều sai sót! Trước tiên, chúng tôi tập trung vào Thông báo ngắn và Danh sách trực tuyến. Gần như không thể truy cập được thông báo ngắn và danh sách ảo là một trong những thành phần khó nhất để xử lý. Ý định của chúng tôi rất tốt nhưng không giúp ích cho các nhà phát triển, vì vậy chúng tôi đã ngừng dự án. Rất khó để biết được một cách khó khăn, nhưng mọi sai lầm đều đang thúc đẩy sự phục hồi của CSS và HTML hiện tại.
Hãy cùng tìm hiểu thêm một chút về LAPI. Điều gì đã xảy ra ở đó?
Nicole: Đối với LAPI, chúng tôi biết rằng web cần có một trải nghiệm dành cho nhà phát triển thành phần tương tự như việc xây dựng giao diện người dùng gốc. Và rõ ràng là việc đổi mới định hướng này đã cản trở các nhà phát triển. Tôi không thể đếm số lượng thẻ mà tôi đã xây dựng trong sự nghiệp của mình! Tuy nhiên, chúng tôi đã cố gắng giải quyết vấn đề đó bằng cách truyền JavaScript qua trình duyệt vốn rất khó. Trước đây, chưa có ai gửi JavaScript vào trình duyệt và không rõ cách mã này tương tác với mã C++ hỗ trợ công cụ kết xuất của trình duyệt. Chúng tôi lắng nghe các nhà cung cấp trình duyệt khác (cảm ơn Mozilla!) và dừng lại từ cách tiếp cận đó và vì vậy, chúng tôi có thể tìm thấy nhiều thứ tốt hơn nhiều với Open UI (Giao diện người dùng mở). Bằng cách dựa vào HTML và CSS, chúng tôi sẽ có được các giải pháp linh hoạt và mang tính khai báo. Vì nó mang tính khai báo, nên chúng ta có thể tích hợp khả năng hỗ trợ tiếp cận theo cách mà với JavaScript sẽ không dễ thực hiện. Tôi rất hào hứng với hướng đi của công việc này. Chúng tôi đang nỗ lực hỗ trợ các mẫu thực sự cần thiết trong thiết kế giao diện người dùng là trình đơn chọn, cửa sổ bật lên, chú giải công cụ, thanh điều hướng, đàn accordion, thẻ, băng chuyền và nút bật/tắt.
Chúng tôi đã tìm hiểu được rất nhiều điều. Và tôi biết rằng có những sáng kiến khác trong lĩnh vực này, chẳng hạn như CSS Houdini. Tin bài là gì?
Una: Vâng, CSS Houdini là một nơi khác mà chúng tôi học hỏi từ cộng đồng. Có rất nhiều tính năng của Houdini hữu ích, nhưng nhiều tính năng ở mức quá thấp để được nhiều người sử dụng và hỗ trợ hơn. Chúng tôi nhận ra rằng việc triển khai API cấp thấp không nhất thiết làm giảm phiền hà cho nhà phát triển. Thay vào đó, việc tập trung vào các giải pháp và nhu cầu cấp cao hơn đã giúp thu hút sự hỗ trợ trên nhiều trình duyệt, cũng như các bước khởi đầu cần thiết để tạo nên sự thay đổi trong hệ sinh thái. Chúng tôi hiện đang theo dõi tiến trình tại https://ishoudinireadyyet.com/.
Về khả năng hỗ trợ trên nhiều trình duyệt, các sáng kiến như Khả năng tương tác 2022 và Giao diện người dùng mở có vẻ như đang mang lại kết quả tích cực đáng kể cho cộng đồng. Các bạn nghe được gì từ nhà phát triển?
Una: Một trong những vấn đề hàng đầu mà chúng tôi nghe được từ các nhà phát triển là "làm cho thiết kế hoạt động như nhau trên các trình duyệt". Chúng tôi đã giải quyết vấn đề này bằng cách hợp tác với các nhà cung cấp trình duyệt khác để ưu tiên và cung cấp một số tính năng được yêu cầu nhiều nhất dành cho nhà phát triển. Chúng tôi cũng nhận được ý kiến phản hồi cực kỳ tích cực từ cộng đồng. Ngoài ra, thông qua một nỗ lực tái cấu trúc lớn tên là RenderingNG, chúng tôi có thể đưa một vài tính năng trong số này vào hiệu quả hơn rất nhiều. Các nhà phát triển rất vui mừng vì những tính năng được mong đợi nhiều năm mà họ yêu cầu trong nhiều năm nay cuối cùng cũng đã được hoàn thiện và được triển khai trên nhiều trình duyệt.
Nicole: Có thể sờ thấy sự phấn khích trong cộng đồng. Bạn có thể thấy thông tin này trên Twitter. :)
Việc hợp tác với hệ sinh thái này đã được chứng minh là rất quan trọng đối với mọi thành công của chúng tôi trong việc giúp các nhà phát triển cuộc sống dễ dàng hơn. Tôi biết rằng nhóm của bạn đã nỗ lực rất nhiều. Bạn có muốn chia sẻ một số thông tin không?
Nicole: Thứ nhất, tôi luôn háo hức về các dự án mà các nhà phát triển xây dựng trên web. Từ thư viện nhỏ nhất cho đến đầy đủ các khung, nhà phát triển đang tạo ra những điều tuyệt vời. Đó là một cộng đồng nhà sáng tạo tuyệt vời. Và Chrome đang thực hiện nhiều bước để kết nối sâu sắc hơn với các dự án này.
Ví dụ: vài năm trước, chúng tôi đã bắt đầu làm việc với các Khung JavaScript như React và Angular. Và metaframeworks – ví dụ như Next, Nuxt và Gatsby. Năm ngoái, chúng tôi đã bắt đầu làm tương tự với các công cụ và khung giao diện người dùng như Sass, Bootstrap và Material. Tôi hy vọng trong năm nay chúng ta có thể cộng tác với GreenSock và các công cụ khác giúp nhà phát triển cuộc sống dễ dàng hơn. Tôi vừa thấy Cassie May từ kênh GreenSock phát biểu tại Smashing Summit và điều đó khiến tôi thực sự hào hứng khi được làm việc với mọi người trong lĩnh vực hoạt hình.
Vậy đâu là cơ hội lớn nhất đối với hệ sinh thái giao diện người dùng web?
Una: Về những cơ hội lớn, tôi cảm thấy có vẻ như chúng tôi mới chỉ mới khám phá được những gì có thể tạo ra cho trải nghiệm web có thể tuỳ chỉnh. Các API mới như truy vấn vùng chứa và các tính năng đa phương tiện theo lựa chọn ưu tiên của người dùng về CSS đang định nghĩa lại cách nhà phát triển xem thiết kế thích ứng. Tôi cũng rất vui mừng về trải nghiệm thiết kế cộng tác cho phép các nhà phát triển và nhà thiết kế có thể làm việc đồng hành với những người dùng truy cập vào trang web của họ.
Còn Nicole, làm gì tiếp theo trong lộ trình cho nhóm của bạn?
Nicole: Không phải mọi dữ liệu khám phá đều có thể vận chuyển được, nhưng hiện tại có rất nhiều điều khiến tôi rất hào hứng:
Điều đầu tiên chúng ta sẽ làm là thiết kế thích ứng dựa trên thành phần. Nền tảng này có các công cụ thiết kế hệ thống màu, giúp nhà thiết kế có thể đáp ứng lựa chọn ưu tiên của người dùng, chẳng hạn như chế độ tối. Ví dụ: Hệ màu OKLCH giúp duy trì độ sáng nhất quán giữa các sắc độ. Các nhà thiết kế có thể chuyển từ việc chọn màu sang thiết kế mối quan hệ giữa các màu sắc mà không phải kết thúc bằng bảng màu lộn xộn!
Chúng tôi cũng đang nghiên cứu một số API được yêu cầu nhiều nhất, chẳng hạn như truy vấn vùng chứa, lớp tầng, bộ chọn mẹ (:has), kiểu phạm vi và lồng ghép. Nhà phát triển cần những thành phần này để có thể xây dựng hệ thống thiết kế linh hoạt với đầy đủ các thành phần có thể tái sử dụng.
Cuộn hoạt ảnh được liên kết là một khu vực thú vị khác. Tôi thực sự thích bản minh hoạ của Steve Gardner. Anh ấy có khả năng cuộn mượt mà như bơ và ảnh động máy bay thú vị được kích hoạt khi cuộn. Mặc dù những ý tưởng này rất thú vị, nhưng bạn có thể gặp khó khăn khi thực hiện những hành động này, đặc biệt là khi chú ý đến khả năng hỗ trợ tiếp cận. Vì vậy, chúng tôi hiện đang chạy thử nghiệm khả năng tiếp cận cho người dùng đối với tính năng này.
Điều mà cá nhân tôi thích nhất là các chức năng điều khiển trên giao diện người dùng web được tích hợp sẵn. Các nhà phát triển cứ tiếp tục xây dựng cùng một thẻ tab nhiều lần, tôi cho rằng trình duyệt có thể hữu ích. Tại Open UI (Giao diện người dùng mở), chúng ta đang xử lý các thành phần như trình đơn chọn, cửa sổ bật lên, chú thích, thẻ, điều hướng, đàn accordion và nút bật/tắt. Chúng tôi đang khám phá xem việc tích hợp khả năng hỗ trợ tiếp cận vào các dữ liệu gốc của trình duyệt này sẽ như thế nào để web có thể truy cập theo thời gian theo mặc định. Sau đó, nhà phát triển có thể tập trung vào những vấn đề phức tạp và tinh vi hơn. Trình duyệt có thể hỗ trợ những vấn đề cơ bản như cách hoạt động của thẻ. Có lẽ bạn cần có một bài đăng riêng, nên tạm thời tôi sẽ dừng ở đó!
Cuối cùng, chúng tôi sẽ tiếp tục đầu tư vào việc tương tác giữa các trình duyệt. Thật tuyệt khi được làm việc với các thành viên tại WebKit và Gecko để mang lại sự nhất quán cho trải nghiệm của nhà phát triển. Chúng tôi đã lắng nghe ý kiến của các nhà phát triển rằng họ muốn điều này!
Còn nếu bạn chưa dùng thử, thì API chuyển đổi phần tử dùng chung của nhóm Seamless Web sẽ thay đổi cách thiết kế web của mọi người. Tất cả những chuyển đổi nhỏ tinh tế đó giúp nhà thiết kế định hướng thiết kế của họ trong không gian thực tế sẽ không chỉ khả thi mà còn dễ dàng. Jake Archibald có một bản minh hoạ tuyệt vời.
Nếu các tiêu chuẩn diễn ra tốt đẹp, chúng tôi thậm chí có thể xem xét nhịp điệu dọc trong năm nay! Chúng tôi có thể xây dựng trên LayoutNG để mở khoá rất nhiều tính năng.
Cảm ơn cả hai. Tôi chắc chắn rằng toàn bộ cộng đồng, như chúng ta, đều rất hào hứng khi thấy tốc độ cải tiến và các tính năng mới trong thế giới giao diện người dùng web. Vẫn còn nhiều điều để tìm hiểu, vậy bạn sẽ nói một người nên bắt đầu hành trình của mình từ đâu?
Una: Phiên Tính năng mới cho nền tảng web tại I/O đề cập đến những điểm nổi bật của nhiều tính năng sắp ra mắt trong năm nay. Adam Argyle cũng đã viết một bài viết hữu ích về tất cả các trang web CSS mới và sắp ra mắt. Tạm thời, tôi sẽ tập trung vào các bản phát hành ổn định và sẽ nắm rõ các công việc khác sắp ra mắt. Loạt video Mới dành cho nền tảng web tuyệt vời của bạn là một loạt chương trình tuyệt vời mà bạn nên theo dõi để nắm bắt cơ hội đó. Việc đăng ký nhận bản tin trên web.dev cũng sẽ giúp nội dung này được cung cấp cho nhà phát triển hộp thư đến. Đối với các nhà phát triển muốn tham gia và giúp thực hiện tất cả những điều này, tham gia Open UI là một trong những cách tốt nhất bạn có thể hỗ trợ công việc này.
Nội dung cập nhật quan trọng sắp ra mắt
Chúng tôi giữ vững truyền thống của mình để thông báo trước cho bạn về một thay đổi sắp tới mà bạn cần lưu ý khi xây dựng trải nghiệm trên web.
Giới hạn thời gian tối đa cho cookie là 400 ngày
- Nội dung cập nhật: Giờ đây, khi bạn đặt cookie bằng một thuộc tính
Expires/Max-Agerõ ràng, giá trị đó sẽ không vượt quá 400 ngày trong tương lai. Trước đây, không có giới hạn và cookie có thể hết hạn hàng thiên niên kỷ trong tương lai. Mục tiêu của giới hạn này là để cân bằng giữa thói quen sử dụng phổ biến và tôn trọng quyền riêng tư của người dùng. Bất kỳ trang web nào được truy cập thường xuyên hơn 400 ngày một lần đều có thể làm mới cookie để đảm bảo tính liên tục của dịch vụ và người dùng có thể yên tâm rằng cookie sẽ không tồn tại trong trình duyệt của họ hàng nghìn năm mà không được sử dụng. - Tiến trình dự kiến: Giao hàng trong Chrome 104 (Ổn định vào ngày 2 tháng 8 năm 2022).
- Lời kêu gọi hành động của nhà phát triển: Nhà phát triển có thể cần phải chủ động làm mới cookie thường xuyên hơn trước khi người dùng truy cập vào trang web của họ. Nếu không, người dùng có thể bị đăng xuất sau 400 ngày kể từ ngày đặt cookie ban đầu.
Tôi hy vọng bạn thích đọc ấn bản này của Chrome Dev Insider. Nếu bạn đã bỏ lỡ, đây là email đầu tiên. Chúng tôi hy vọng sẽ mang đến cho bạn nhiều tính năng hơn trong quý tiếp theo.
Cho đến lúc đó, hãy cho chúng tôi biết suy nghĩ của bạn về phiên bản Chrome Dev Insider này và những gì chúng tôi có thể làm để cải thiện phiên bản này.
Bạn nghĩ sao về phiên bản này của The Chrome Dev Insider? Chia sẻ ý kiến phản hồi của bạn.