Chào mừng bạn đến với ấn bản thứ hai của Chrome Dev Insider. Đây là nơi chúng tôi chia sẻ thông tin cập nhật về những tính năng mới và thú vị trong cộng đồng cũng như tại Chrome. Đây là một tập mới của loạt nội dung nội bộ về cách chúng tôi tiếp cận công việc, cũng như một số nội dung 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, đồng thời là thành viên của Nhóm quan hệ đối tác nhà phát triển Chrome. Tôi đã làm việc trên web được 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 làm việc về CSS.
Hai tháng trước, chúng tôi đã kết thúc Google I/O, nơi chúng tôi chia sẻ một số thông tin cập nhật quan trọng nhất về cách chúng tôi hỗ trợ nhà phát triển trong việc giúp web trở nên nhanh hơn và mạnh mẽ hơn, đồng thời đảm bảo thông tin của người dùng được an toàn và riêng tư.
Một trong những điểm nổi bật (và chúng tôi rất vui khi cộng đồng đã chú ý đến!) là khối lượng công việc khổng lồ mà nhóm đang thực hiện để hỗ trợ thêm các tính năng CSS và giao diện người dùng trên web. Trong số Chrome Dev Insider này, chúng tôi sẽ giới thiệu cho bạn những thông tin 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ợ các nhà phát triển CSS và giao diện người dùng, cũng như những điều sắp tới. Đó là lý do tôi rất vui khi được tổ chức phiên bản này của chương trình Insider.
Địa điểm thu hút truyền thông
Trong Chrome Dev Insider đầu tiên, 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, trong đó các nhà cung cấp trình duyệt và các bên tham gia hệ sinh thái đã hợp tác để mang thêm nhiều tính năng được hỗ trợ trên tất cả trình duyệt cho web. Sáng kiến này tập trung vào CSS vì tính không tương thích của trình duyệt 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 tức mới đối với hầu hết mọi người, nhưng thật thú vị khi thấy tiến trình chúng tôi đã đạt được trên các trình duyệt.
Đầu tháng trước, Safari đã công bố một bản phát hành lớn với Safari 16.0 Beta, bao gồm các tính năng thú vị như Truy vấn vùng chứa, lưới con và trình kiểm tra flexbox. Các bản phát hành gần đây của Firefox và Chrome có một số tính năng và bản sửa lỗi thú vị. Mỗi tháng, tôi sẽ đề cập đến những điểm chính trong các trình duyệt ổn định và thử nghiệm trong loạt bài viết mới làm quen với nền tảng web.
Thông tin nội bộ: Hỗ trợ nhà phát triển CSS và giao diện người dùng
Năm 2022 hứa hẹn sẽ là một năm thú vị đối với các tính năng CSS. Vì vậy, chúng tôi nghĩ đây là thời điểm thích hợp để giới thiệu cho bạn những điều thú vị trong quá trình phát triển. Tôi đã ngồi xuống với Una Kravets, trưởng nhóm DevRel cho Giao diện người dùng web và Công cụ dành cho nhà phát triển, cùng với Nicole Sullivan, Nhà quản lý sản phẩm của chúng tôi về Giao diện người dùng web, tập trung vào các API CSS và HTML, để nói về hành trình của Chrome trong việc hỗ trợ các nhà phát triển giao diện người dùng.
Hãy bắt đầu với cả hai bạn. Vui lòng cho chúng tôi biết thêm một chút về bạn.
Nicole: Tôi là nhà quản lý sản phẩm cho giao diện người dùng web trên Chrome. Tôi tập trung cụ thể vào các API CSS và HTML mới, cũng như các 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à (hy vọng là) nhịp độ dọc.
Una: Tôi phụ trách các nhóm DevRel về Giao diện người dùng web và DevTools. Chúng tôi tập trung vào việc 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ó những công cụ cần thiết để thành công. Bao gồm các API CSS và thành phần HTML cùng với các tính năng DevTools để xem các thay đổi và phản hồi đang hoạt động.
Hoạt động hỗ trợ của Chrome cho nhà phát triển giao diện người dùng đã tăng tốc trong vài năm qua. Theo bạn, tại sao phải mất nhiều thời gian như vậy? Bạn gặp phải những thách thức lớn nhất nào?
Una: Chúng tôi cần làm một số việc để chứng minh tầm quan trọng của công việc này và lý do tại sao công việc này phải được ưu tiên. Chúng tôi bắt đầu bằng bản khảo sát về DNA MDN vào năm 2019, trong đó xác định giao diện người dùng là một trong những điểm đau đầu 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 cơ sở cho MDN và các bản khảo sát nội bộ về mức độ hài lòng của nhà phát triển. Nhờ đó, chúng tôi có thể thu hút sự ủng hộ sâu sắc hơn của các nhà lãnh đạo và ưu tiên công việc kỹ thuật liên quan đến một số tính năng được nhà phát triển yêu cầu nhiều nhất trong không gian giao diện người dùng. Đây cũng là trọng tâm chính của các sáng kiến như Compat 2021 và Interop 2022.
Nicole: Ngoài việc thuyết phục ban lãnh đạo, chúng tôi cũng phải tìm ra cách phù hợp để cung cấp các API này cho nhà phát triển. Khi mới gia nhập Chrome, tôi đã làm hỏng việc này trong một dự án có tên là API phân lớp (viết tắt là LAPI). LAPI nhằm mang đến cho nhà phát triển trải nghiệm thành phần thả vào. Tôi vẫn nghĩ đây là một kết quả tuyệt vời để hướng đến, nhưng chúng tôi đã mắc rất nhiều lỗi! Trước tiên, chúng ta tập trung vào Thông báo ngắn và Danh sách ảo. Hầu như không thể hỗ trợ tiếp cận thông báo ngắn và danh sách ảo là một trong những thành phần khó điều chỉnh nhất. Ý định của chúng tôi là tốt nhưng không giúp ích được cho các nhà phát triển, vì vậy, chúng tôi đã ngừng dự án này. Rất khó để học theo cách khó, nhưng mọi lỗi đều đang thúc đẩy sự hồi sinh của CSS và HTML đang diễn ra.
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ó trải nghiệm nhà phát triển thành phần thả vào gần giống với việc tạo giao diện người dùng gốc. Và rõ ràng là việc phát minh lại bánh xe đang kìm hãm các nhà phát triển. Tôi không thể đếm số lượng thẻ mà tôi đã tạo 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 vận chuyển JavaScript bằng trình duyệt, nhưng rất khó. Trước đây, chưa có ai phân phối JavaScript trong trình duyệt và chưa rõ cách JavaScript 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à từ bỏ phương pháp đó. Nhờ đó, chúng tôi đã tìm thấy một giải pháp tốt hơn nhiều với Open UI (Giao diện người dùng mở). Bằng cách sử dụng HTML và CSS, chúng ta sẽ có được các giải pháp linh hoạt và khai báo. Vì là ngôn ngữ khai báo, nên chúng ta có thể tích hợp tính năng hỗ trợ tiếp cận theo cách không dễ dàng như khi sử dụng JavaScript. Tôi rất hào hứng về những gì sẽ diễn ra. Chúng tôi đang nỗ lực hỗ trợ các mẫu thiết kế giao diện người dùng thiết yếu như trình đơn chọn, cửa sổ bật lên, chú giải công cụ, điều hướng, hộp xếp, thẻ, băng chuyền và nút bật/tắt.
Vì vậy, chúng tôi đã học được rất nhiều điều. Tôi cũng biết có những sáng kiến khác trong lĩnh vực này, chẳng hạn như CSS Houdini. Video dạng kể chuyện 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 Houdini hữu ích, nhưng nhiều tính năng quá cấp thấp để được áp dụng và hỗ trợ rộng rãi hơn. Chúng tôi nhận thấy việc triển khai API cấp thấp không nhất thiết phải giúp nhà phát triển giảm bớt sự phiền hà. 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 và các trang đích cần thiết để tạo ra 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/.
Nói về tính năng hỗ trợ trên nhiều trình duyệt, các sáng kiến như Interop 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. Bạn nghe thấy nhà phát triển nói gì?
Una: Một trong những vấn đề nhức nhối hàng đầu mà chúng tôi nhận được phản hồi của nhà phát triển là "làm cho thiết kế hoạt động giống 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 làm việc với các nhà cung cấp trình duyệt khác để ưu tiên và ra mắt một số tính năng được nhà phát triển yêu cầu nhiều nhất. Và chúng tôi nhận được phản hồi vô cùng 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 có tên là RenderingNG, chúng tôi có thể cung cấp một số tính năng này hiệu quả hơn nhiều. Các nhà phát triển rất vui mừng khi những tính năng được mong đợi từ lâu mà họ đã yêu cầu trong nhiều năm nay cuối cùng cũng được triển khai và ra mắt trên nhiều trình duyệt.
Nicole: Cộng đồng đang rất hào hứng. Bạn có thể xem video đó trên Twitter. :)
Việc làm việc với hệ sinh thái đã được chứng minh là yếu tố quan trọng đối với mọi thành công mà chúng tôi đạt được trong việc giúp nhà phát triển dễ dàng hơn. Tôi biết rằng nhóm của bạn đã làm rất nhiều việc ở đó. Bạn có thể chia sẻ một số thông tin chi tiết không?
Nicole: Trước tiên, tôi luôn cảm thấy thán phục những dự án mà nhà phát triển xây dựng trên web. Từ thư viện nhỏ nhất đến các khung đầy đủ, nhà phát triển đang tạo ra những điều tuyệt vời. Đây là một cộng đồng tuyệt vời dành cho nhà sáng tạo. Chrome đang thực hiện một loạt các bước để kết nối chặt chẽ 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à các siêu khung — ví dụ: Next, Nuxt và Gatsby. Năm ngoái, chúng tôi cũng bắt đầu làm như vậy 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 tới, 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 dễ dàng hơn. Tôi vừa xem Cassie Evans của GreenSock nói chuyện tại Hội nghị Smashing và tôi rất hào hứng khi được làm việc với những người trong lĩnh vực ảnh động.
Vậy đâu là cơ hội lớn nhất cho hệ sinh thái giao diện người dùng trên web?
Una: Về cơ hội lớn, tôi cảm thấy chúng ta mới chỉ bắt đầu khám phá những điều có thể làm được với 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 nội dung nghe nhìn theo lựa chọn ưu tiên của người dùng trong 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 hào hứng với trải nghiệm thiết kế cộng tác, giúp nhà phát triển và nhà thiết kế có thể làm việc cùng với người dùng truy cập vào trang web của họ.
Nicole, lộ trình tiếp theo của nhóm bạn là gì?
Nicole: Không phải tất cả dữ liệu khám phá đều có thể được vận chuyển, nhưng hiện tại, tôi rất hào hứng với nhiều điều:
Una đã đề cập đến điều đầu tiên, chúng tôi đang hỗ trợ thiết kế thích ứng, dựa trên thành phần. Công cụ này bao gồm các công cụ thiết kế hệ thống màu sắc để nhà thiết kế có thể đáp ứng các lựa chọn ưu tiên của người dùng như chế độ tối. Ví dụ: không gian màu OKLCH duy trì độ sáng nhất quán trên các sắc thái. 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 trông sặc sỡ!
Chúng tôi cũng đang nỗ lực phát triển 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 xếp chồng, bộ chọn mẹ (:has), kiểu theo 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 các hệ thống thiết kế linh hoạt, đầy đủ các thành phần có thể sử dụng lại.
Cuộn ảnh động được liên kết là một khu vực thú vị khác. Tôi rất thích bản minh hoạ của Steve Gardner. Anh có tính năng cuộn mượt mà và ảnh động máy bay tuyệt vời được kích hoạt khi cuộn. Mặc dù những tính năng này rất thú vị, nhưng bạn có thể gặp khó khăn khi thiết kế đúng cách, đặc biệt là khi chú ý đến khả năng hỗ trợ tiếp cận. Vì vậy, chúng tôi đang chạy thử nghiệm người dùng về khả năng hỗ trợ tiếp cận trên tính năng này.
Điều tôi cá nhân cảm thấy hào hứng nhất là các chế độ điều khiển giao diện người dùng web tích hợp sẵn. Nhà phát triển liên tục tạo lại cùng một nhóm thẻ, tôi nghĩ trình duyệt có thể giúp ích. Tại Open UI (Giao diện người dùng mở), chúng tôi đang làm việc trên các thành phần như selectmenu, popup, tooltip, tabs, nav, accordion và toggle. Chúng tôi đang tìm hiểu cách tích hợp tính năng hỗ trợ tiếp cận vào các thành phần gốc của trình duyệt này để theo thời gian, web có thể trở thành một nền tảng hỗ trợ tiếp cận theo mặc định. Sau đó, nhà phát triển có thể tập trung vào các vấn đề phức tạp và tinh tế hơn, trong khi trình duyệt có thể hỗ trợ các vấn đề cơ bản như cách tạo thẻ. Có lẽ vấn đề này cần một bài đăng riêng, vì vậy, tôi sẽ dừng lại ở đây!
Cuối cùng, chúng tôi sẽ tiếp tục đầu tư vào việc khả năng 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 nhân viên tại WebKit và Gecko để mang lại trải nghiệm nhất quán cho nhà phát triển. Chúng tôi đã nghe rõ ý kiến của các nhà phát triển rằng họ muốn điều này!
Nếu bạn chưa xem, Shared Element Transitions API (API chuyển đổi phần tử dùng chung) của nhóm Seamless Web sẽ thay đổi cách mọi người thiết kế cho web. Tất cả các hiệu ứng chuyển đổi nhỏ tinh tế cho phé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ỉ có thể 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 này diễn ra suôn sẻ, chúng tôi thậm chí có thể xem xét nhịp điệu dọc trong năm nay! Chúng ta có thể xây dựng dựa trên LayoutNG để mở khoá nhiều tính năng.
Cảm ơn cả hai bạn. Tôi chắc chắn rằng toàn bộ cộng đồng, giống như chúng tôi, đề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 được đưa vào thế giới giao diện người dùng web. Vẫn còn nhiều điều cần tìm hiểu, vậy bạn cho rằng người dùng 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 trình bày những điểm nổi bật của nhiều tính năng ra mắt trong năm nay. Adam Argyle cũng đã viết một bài viết hay về tất cả các trang đích CSS mới và sắp ra mắt. Hiện tại, tôi sẽ tập trung vào các bản phát hành ổn định và chỉ chú ý đến các công việc khác trong quy trình. Bạn có thể tham khảo loạt bài tuyệt vời Mới sử dụng nền tảng web để tìm hiểu thêm về vấn đề này. Việc đăng ký nhận bản tin web.dev cũng sẽ giúp nội dung này được gửi đến hộp thư đến của nhà phát triển. Đối với những nhà phát triển muốn tham gia và giúp đỡ trong tất cả những việc 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.
Các nội dung cập nhật chính sắp tới
Chúng tôi vẫn giữ truyền thống thông báo trước cho bạn về những 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 max-age cho cookie ở mức 400 ngày
- Nội dung cập nhật: Khi cookie được đặt bằng thuộc tính
Expires/Max-Agerõ ràng, giá trị hiện sẽ được giới hạn ở mức không 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 sau nhiều thiên niên kỷ trong tương lai. Mục tiêu của giới hạn này là tạo ra sự cân bằng giữa các mẫu sử dụng phổ biến và việc tôn trọng quyền riêng tư của người dùng. Mọi trang web được truy cập thường xuyên hơn 400 ngày đều có thể làm mới cookie để đảm bảo tính liên tục của dịch 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: Phát hành trong Chrome 104 (Bản ổn định vào ngày 2 tháng 8 năm 2022).
- Lời kêu gọi hành động dành cho nhà phát triển: Nhà phát triển có thể cần 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 400 ngày sau khi cookie được đặt ban đầu.
Tôi hy vọng bạn thích đọc số báo này của Chrome Dev Insider. Nếu bạn chưa xem, hãy xem bài đầu tiên. Chúng tôi rất mong được mang đến cho bạn nhiều tính năng hơn nữa trong quý tới.
Trong thời gian chờ đợi, 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 việc chúng tôi có thể làm để cải thiện phiên bản này.
Bạn cảm thấy thế nào về ấn bản này của The Chrome Dev Insider? Chia sẻ ý kiến phản hồi của bạn.