Chào mừng bạn đến với số 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ểm mới và thú vị trong cộng đồng cũng như tại Chrome. Đây là một tập mới trong loạt 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, cũng như một cái nhìn tổng quan về 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, thuộc nhóm Quan hệ nhà phát triển của Chrome. Tôi đã làm việc trên web 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 về CSS.
Hai tháng trước, chúng tôi đã kết thúc sự kiện Google I/O. Tại đây, 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 hoạt động nhanh hơn và hiệu quả hơn, đồng thời đả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 khi cộng đồng đã nhận thấy!) 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ố phát này của Chrome Dev Insider, chúng tôi sẽ giới thiệu cho bạn 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 dẫn dắt bản tin này.
Đị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à những người tham gia hệ sinh thái đã hợp tác để mang đến nhiều tính năng hơn cho web, được hỗ trợ trên tất cả các trình duyệt. Sáng kiến này tập trung mạnh mẽ 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 nhà phát triển CSS.
Mặc dù đây có thể không phải là tin mới đối với hầu hết mọi người, nhưng chúng tôi rất vui khi thấy những tiến bộ mà chúng tôi đã đạt được trên các trình duyệt.
Đầu tháng trước, chúng tôi nhận thấy Safari thông báo về một bản phát hành lớn với Safari 16.0 Beta, trong đó có các tính năng thú vị như Container Queries, subgrid và flexbox inspector. 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ị. Hằng tháng, tôi sẽ đề cập đến những điểm chính trong các trình duyệt ổn định và beta trong loạt bài đăng mới đối 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 là một năm đầy thú vị đối với các tính năng của CSS, vì vậy chúng tôi nghĩ rằng đây là thời điểm thích hợp để đưa bạn khám phá hậu trường. Tôi đã trò chuyện với Una Kravets, trưởng nhóm Quan hệ với nhà phát triển cho Giao diện người dùng web và Công cụ cho nhà phát triển, cùng Nicole Sullivan, Quản lý sản phẩm của chúng tôi cho Giao diện người dùng web, người tập trung vào CSS và API HTML, để nói về hành trình hỗ trợ nhà phát triển giao diện người dùng của Chrome.
Hãy bắt đầu với cả hai bạn. Hãy cho chúng tôi biết thêm một chút về các 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 đặ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ư Container Queries, Scope và (hy vọng!) vertical rhythm.
Una: Tôi là trưởng nhóm DevRel về Giao diện người dùng 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ó những công cụ cần thiết để thành công. Điều này bao gồm các 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 để xem các thay đổi và ý kiến phản hồi đang hoạt động.
Chrome đã tăng cường hỗ trợ cho nhà phát triển giao diện người dùng trong vài năm qua. Theo bạn, tại sao phải mất nhiều thời gian như vậy để đến được đây? Thách thức lớn nhất là gì?
Una: Chúng tôi cần phải 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 nên là ưu tiên hàng đầu. Chúng tôi bắt đầu với khảo sát DNA của 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 khó khă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 hướng dẫn thông qua MDN và các cuộc khảo sát nội bộ của riêng chúng tôi về mức độ hài lòng của nhà phát triển. Kết quả là chúng tôi đã nhận được sự ủng hộ sâu sắc hơn từ ban lãnh đạo và có thể ưu tiên công việc kỹ thuật xung quanh 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, đồng thời cũng 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 ra cách phù hợp để cung cấp các API này cho nhà phát triển. Khi mới tham gia Chrome, tôi đã làm hỏng việc này trong một dự án có tên là Layered APIs (hay LAPIs cho ngắn gọn). LAPIs nhằm mang đến cho nhà phát triển trải nghiệm về 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 tới, nhưng chúng tôi đã mắc rất nhiều sai lầm! Trước tiên, chúng tôi tập trung vào Thông báo dạng thông báo tạm thời và Danh sách ảo. Thông báo dạng toast gần như không thể truy cập được và danh sách ảo là một trong những thành phần khó tạo nhất. Mặc dù có ý định tốt nhưng dự án này không giúp ích được cho nhà phát triển, nên chúng tôi đã ngừng dự án. Rất khó để học theo cách khó khăn, nhưng mọi sai lầm đề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 về LAPI. Điều gì đã xảy ra ở đó?
Nicole: Đối với LAPI, chúng tôi biết rằng web cần một trải nghiệm phát triển thành phần thả và kéo gần với việc xây dựng giao diện người dùng gốc. Và rõ ràng là việc phát minh lại những thứ đã có đang cản trở các nhà phát triển. Tôi không thể đếm được số lượng thẻ mà mình đã tạo trong sự nghiệp! Tuy nhiên, chúng tôi đã cố gắng giải quyết vấn đề đó bằng cách phát hành JavaScript cùng với trình duyệt, nhưng việc này rất khó. Trước đó, chưa ai phát hành JavaScript trong trình duyệt và không 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 ý kiến của các nhà cung cấp trình duyệt khác (cảm ơn Mozilla!) và rút lại phương pháp đó. Nhờ vậy, chúng tôi đã có thể tìm ra một giải pháp tốt hơn nhiều với Open UI. 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, khai báo. Vì có 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à JavaScript không thể làm được. Tôi rất hào hứng với những gì đang diễn ra. Chúng tôi đang nỗ lực hỗ trợ selectmenu, popup, tooltip, nav, accordion, tabs, carousel và toggle. Đây là những mẫu thiết kế giao diện người dùng thực sự cần thiết.
Vì vậy, chúng tôi đã học được rất nhiều. Tôi biết có những sáng kiến khác trong không gian 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 được từ cộng đồng. Có rất nhiều tính năng hữu ích của Houdini, nhưng nhiều tính năng có cấp độ quá thấp để được áp dụng và hỗ trợ rộng rãi hơn. Chúng tôi nhận thấy rằng việc triển khai các 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 và những điểm dừng chân 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ề khả năng hỗ trợ trên nhiều trình duyệt, các sáng kiến như Interop 2022 và Open UI dường như đang mang lại những kết quả tích cực đáng kể cho cộng đồng. Bạn nghe thấy gì từ các nhà phát triển?
Una: Một trong những vấn đề nhức nhối nhất mà chúng tôi nhận được từ các nhà phát triển là "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 hợp tác với các nhà cung cấp trình duyệt khác để ưu tiên và triển khai một số tính năng được nhà phát triển yêu cầu nhiều nhất. Và cộng đồng đã phản hồi rất tích cực về việc này. Ngoài ra, thông qua một nỗ lực tái cấu trúc lớn có tên là RenderingNG, bạn có thể triển khai 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 mà họ đã mong đợi từ lâu và yêu cầu trong nhiều năm cuối cùng cũng được triển khai và xuất hiện trên nhiều trình duyệt.
Nicole: Cộng đồng đang rất hào hứng. Bạn có thể xem thông báo này trên Twitter. :)
Việc hợp tác với hệ sinh thái đã chứng minh là yếu tố then chốt cho mọi thành công mà chúng tôi đạt được trong việc giúp cuộc sống của nhà phát triển trở nê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 hết, tôi luôn ngưỡng mộ những dự án mà các nhà phát triển xây dựng trên web. Từ thư viện nhỏ nhất đến các khung hình đầy đủ, các nhà phát triển đang xây dựng những điều tuyệt vời. Đây là một cộng đồng tuyệt vời dành cho những nhà sáng tạo. Chrome đang thực hiện một số bước để kết nối nhiều 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 khung siêu dữ liệu (ví dụ: Next, Nuxt và Gatsby). Năm ngoái, chúng tôi bắt đầu làm điều 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 tới, chúng ta có thể cộng tác với GreenSock và các công cụ khác giúp cuộc sống của nhà phát triển trở nên dễ dàng hơn. Tôi vừa xem Cassie Evans của GreenSock trình bày tại Smashing Conference và điều đó khiến tôi rất hào hứng khi làm việc với những người trong lĩnh vực hoạt hoạ.
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ề những cơ hội lớn, tôi cảm thấy chúng ta mới chỉ khai thác được một phần nhỏ những gì có thể làm được 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 trong CSS đang định nghĩa lại cách nhà phát triển xem xét thiết kế thích ứng. Tôi cũng rất hào hứng với những 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 cùng với những người dùng truy cập vào trang web của họ.
Còn Nicole, bước tiếp theo trong lộ trình của nhóm bạn là gì?
Nicole: Không phải ý tưởng khám phá nào cũng có thể trở thành sản phẩm hữu hình, nhưng hiện tại có rất nhiều điều khiến tôi hào hứng:
Una đã đề cập đến điều đầu tiên, đó là chúng tôi đang triển khai thiết kế thích ứng dựa trên thành phần. Thư viện này bao gồm các công cụ để thiết kế hệ thống màu sắc, nhờ đó nhà thiết kế có thể đáp ứng các lựa chọn ưu tiên của người dùng, chẳng hạn 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 độ. 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 mà không tạo ra bảng màu trông nhợt nhạt!
Chúng tôi cũng đang 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, các lớp xếp tầng, bộ chọn cấp trên (:has), kiểu có phạm vi và lồng ghép. Các 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 với đầy đủ các thành phần có thể dùng lại.
Ảnh động được liên kết với thao tác cuộn là một khía cạnh thú vị khác. Tôi rất thích bản minh hoạ của Steve Gardner. Trang web này có hiệu ứng cuộn mượt mà và ảnh động máy bay thú vị xuất hiện khi người dùng cuộn. Mặc dù rất thú vị, nhưng bạn có thể gặp khó khăn khi thực hiện đúng các thao tác này, đặc biệt là khi bạn quan tâm đến khả năng tiếp cận. Vì vậy, chúng tôi đang tiến hành kiểm thử khả năng hỗ trợ 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 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. Các nhà phát triển cứ phải tạo đi tạo lại cùng một nhóm thẻ, tôi nghĩ trình duyệt có thể giúp họ. Tại Open UI, chúng tôi đang phát triể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 khả năng hỗ trợ tiếp cận vào các thành phần cơ bản của trình duyệt này để web có thể hỗ trợ tiếp cận theo mặc định theo thời gian. 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 những vấn đề cơ bản như cách các thẻ hoạt động có thể được trình duyệt hỗ trợ. Có lẽ tôi cần một bài đăng riêng cho vấn đề này, 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 khả năng tương tác giữa các trình duyệt. Chúng tôi rất vui khi được hợp tác với các đồng nghiệp 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 và thấu hiểu rằng các nhà phát triển muốn có tính năng này!
À, và nếu bạn chưa xem, thì Shared Element Transitions API (API hiệu ứng 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ả những hiệu ứng chuyển đổi nhỏ tinh tế đó sẽ không chỉ có thể mà còn dễ dàng giúp nhà thiết kế định hướng thiết kế của họ trong không gian thực. Jake Archibald có một bản minh hoạ tuyệt vời.
Nếu các tiêu chuẩn được áp dụng hiệu quả, 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 dựa trên LayoutNG, một công cụ có rất nhiều tính năng.
Cảm ơn cả hai bạn. Tôi tin rằng toàn bộ cộng đồng cũng hào hứng như chúng tôi khi thấy tốc độ cải tiến và các tính năng mới được triển khai cho giao diện người dùng trên web. Vẫn còn rất nhiều điều cần tìm hiểu, vậy bạn nghĩ mọi người nên bắt đầu hành trình của mình từ đâu?
Una: Phiên thảo luận Những điểm mới của nền tảng web tại I/O sẽ đề cập đến những điểm nổi bật của nhiều tính năng sẽ 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ỉ cần biết về những công việc khác sắp tới. Loạt video Mới ra mắt trên nền tảng web của bạn là một loạt video tuyệt vời để theo dõi. Việc đăng ký nhận bản tin của web.dev cũng sẽ giúp nhà phát triển nhận được nội dung này trong hộp thư đến. Đối với những nhà phát triển muốn tham gia và hỗ trợ tất cả những việc này, việc 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 tiếp tục truyền thống thông báo trước cho bạn về một thay đổi sắp tới mà bạn nên lưu ý khi xây dựng trải nghiệm trên web.
Giới hạn max-age cho cookie là 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ẽ bị giới hạn 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ỷ. Mục tiêu của giới hạn này là cân bằng giữa các kiể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 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. - Dòng thời gian dự kiến: Phát hành 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 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 đây 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ừ khi cookie được đặt lần đầu.
Tôi hy vọng bạn thích đọc phiên bản này của Chrome Dev Insider. Nếu bạn bỏ lỡ, thì đây là bản tin đầu tiên. Chúng tôi rất mong được mang đến cho bạn nhiều thông tin hơn nữa trong quý tiếp theo.
Trong thời gian chờ đợi, hãy cho chúng tôi biết ý kiến của bạn về bản tin Chrome Dev Insider này và những điểm chúng tôi có thể cải thiện.
Bạn cảm thấy thế nào về bản tin The Chrome Dev Insider này? Chia sẻ ý kiến phản hồi của bạn.