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 và tại Chrome. Đây là tập mới của câu chuyện của người trong cuộc về cách chúng tôi tiếp cận công việc của mình. Sau đây là phần 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, thuộc nhóm Quan hệ nhà phát triển Chrome. Tôi đã làm việc trên web trong hơn hai mươi năm, tập trung vào các tiêu chuẩn web mở và CSS. Tôi đồng thời là một thành viên của Nhóm hoạt động CSS.
Hai tháng trước, chúng tôi đã kết thúc sự kiện Google I/O, trong đó 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 trong việc xây dựng môi trường web nhanh hơn và mạnh mẽ hơn, trong khi vẫn đảm bảo thông tin người dùng luôn 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 đã chú ý!) là nhóm đã nỗ lực rất nhiều để 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ẽ chia sẻ với bạn những thông tin 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 việc sắp tới. Đó là lý do tôi rất vui mừng được tổ chức phiên bản Insider 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ố nội dung cập nhật về sáng kiến Compat 2021 và Interop 2022, trong đó các nhà cung cấp trình duyệt và người chơi trong hệ sinh thái đã và đang hợp tác để mang đến thêm nhiều tính năng cho môi trường web, được hỗ trợ trên mọi trình duyệt. Sáng kiến này tập trung chủ yếu vào CSS do khả năng 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 đối với hầu hết mọi người, nhưng thật vui khi thấy tiến độ mà chúng tôi đã đạt được trên các trình duyệt.
Đầu tháng trước, chúng tôi đã chứng kiến Safari công bố một bản phát hành đệm với Safari 16.0 Beta. Công cụ này có các tính năng thú vị như Truy vấn vùng chứa, hệ thống phụ và trình kiểm tra flexbox. 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ị. Mỗi tháng, tôi sẽ trình bày những nội dung quan trọng về trình duyệt ổn định và phiên bản beta trong loạt bài đăng mới về nền tảng web.
Tin sốt dẻo: Hỗ trợ nhà phát triển CSS và giao diện người dùng
Năm 2022 dự kiến sẽ là một năm sôi động đối với các tính năng CSS, chúng tôi nghĩ rằng đây là thời điểm thích hợp để giới thiệu với bạn những thông tin hậu trường. Una Kravets, trưởng nhóm DevRel, Trưởng nhóm giao diện người dùng web và công cụ cho nhà phát triển, cùng với Nicole Sullivan, Nhà quản lý sản phẩm chuyên trách về giao diện người dùng web, chuyên trách về các API CSS và HTML của Chrome để chia sẻ 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 cùng bắt đầu với cả hai bạn. Hãy chia sẻ đôi điều về bản thân bạn nhé?
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ư các nhà phát triển và nhà thiết kế xây dựng giao diện người dùng. Đó 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 độ theo chiều dọc (hy vọng là!)
Una: Tôi dẫn dắt nhóm Giao diện người dùng web và nhóm DevRel cho Công cụ cho nhà phát triển. 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ó các 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ông cụ cho nhà phát triển để xem các thay đổi và phản hồi đang hoạt động.
Sự hỗ trợ của Chrome cho các nhà phát triển giao diện người dùng đã rất nhanh chóng trong vài năm qua. Vì sao bạn nghĩ rằng phải mất nhiều thời gian để thiết lập được tính năng này? Thách thức lớn nhất là gì?
Una: Chúng tôi cần triển khai thêm một số biện pháp để chứng minh mức độ quan trọng của việc này và lý do nên ưu tiên việc này. Chúng tôi bắt đầu khảo sát ADN của MDN vào năm 2019. Khảo sát này xác định giao diện người dùng là một số vấn đề hàng đầu trên nền tảng này. Kể từ đó, chúng tôi tiếp tục 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ộ 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ể có được sự tham gia sâu sắc hơn của ban lãnh đạo và có thể ưu tiên công việc kỹ thuật đối với 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 cũng như phần lớn trọng tâm cho các sáng kiến như Compat 2021 và Interop 2022.
Nicole: Ngoài việc nhận được sự tham gia của người 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 lần đầu tham gia Chrome, tôi đã phức tạp trong dự án có tên là Layered APIs (API phân lớp) (hay gọi tắt là LAPI). LAPI hướng đến cung cấp cho nhà phát triển trải nghiệm thành phần thả xuống. Tôi vẫn nghĩ rằng đây là một kết quả tuyệt vời để đạt được, nhưng chúng tôi đã mắc nhiều sai lầm! Trước tiên, chúng tôi tập trung vào Thông báo ngắn và Danh sách ảo. Thông báo ngắn 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ó nhất để thực hiện đúng. Chúng tôi có ý định tốt nhưng không giúp được gì cho nhà phát triển, vì vậy chúng tôi đã dừng dự án này. Thật khó để học theo cách khó, nhưng mọi sai lầm lại đang thúc đẩy sự phát triển của CSS và HTML đang diễn ra hiện nay.
Hãy nói 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 dành cho nhà phát triển thành phần thả xuống, gần với việc xây dựng giao diện người dùng gốc hơn. Và rõ ràng là việc đổi mới các nhà phát triển đã cản trở các nhà phát triển. Tôi không thể đếm được số lượng thẻ đã 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 gửi JavaScript bằng trình duyệt vốn rất khó. Chưa có ai chuyển JavaScript vào trình duyệt trước đó 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 này. Chúng tôi đã lắng nghe các nhà cung cấp trình duyệt khác (cảm ơn Mozilla!) và bỏ qua phương pháp đó. Vì vậy, chúng tôi có thể tìm ra điều gì đó tốt hơn nhiều nhờ Open UI. Bằng cách khai thác HTML và CSS, chúng tôi đưa ra các giải pháp linh hoạt và mang tính khai báo. Vì đây là tính năng 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à sẽ không dễ thực hiện với JavaScript. Tôi rất hào hứng với kết quả sắp tới. Chúng tôi đang nỗ lực hỗ trợ trình đơn chọn, cửa sổ bật lên, chú giải công cụ, thành phần điều hướng, danh sách xếp dọc, thẻ, băng chuyền và nút bật/tắt. Đây là những mẫu thiết kế giao diện người dùng thực sự thiết yếu.
Chúng tôi đã học được rất nhiều điều. Tôi biết còn 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 hữu ích của Houdini, nhưng nhiều tính năng ở cấp độ quá thấp nên không được áp dụng và hỗ trợ rộng 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 sự 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ư hoạt động truy cập cần thiết để tạo ra thay đổi trong hệ sinh thái. Chúng tôi hiện đang theo dõi tiến độ tại https://ishoudinireadyyet.com/.
Về việc hỗ trợ trên nhiều trình duyệt, các sáng kiến như Interop 2022 và Open UI có vẻ như đang mang lại kết quả tích cực đáng kể cho cộng đồng. Bạn có phản hồi gì từ nhà phát triển?
Una: Một trong những vấn đề hàng đầu mà chúng tôi nhận được từ các nhà phát triển là "đảm bảo rằng 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à thực hiện một số tính năng được yêu cầu nhiều nhất dành cho nhà phát triển. Và chúng tôi nhận được ý kiến 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 quy mô lớn có tên là RenderingNG, chúng ta có thể đạt được một số tính năng trong số này với hiệu suất cao hơn rất nhiều. Các nhà phát triển rất vui mừng vì các tính năng được mong đợi từ lâu mà họ đã yêu cầu trong nhiều năm này cuối cùng cũng đã được làm việc và triển khai trên nhiều trình duyệt.
Nicole: Có thể cảm nhận được sự phấn khích trong cộng đồng. Bạn có thể thấy thẻ này trên Twitter. :)
Chứng minh rằng việc xử lý hệ sinh thái là vô cùng quan trọng đối với mọi thành công mà chúng tôi đạt được trong việc giúp cuộc sống của các 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ó muốn chia sẻ một số thông tin không?
Nicole: Trước tiên, tôi luôn cảm thấy kinh ngạc về các dự án mà nhà phát triển xây dựng trên web. Từ thư viện nhỏ nhất đến đầy đủ các khung, nhà phát triển đang xây dựng những điều tuyệt vời. Đó 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 nhiều bước để kết nối hiệu quả 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à siêu dữ liệu, ví dụ như Next, Nuxt và Gatsby. Năm ngoái, chúng tôi đã bắt đầu làm được đ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 tôi có thể hợp tác với GreenSock và các công cụ khác để giúp cuộc sống của các nhà phát triển dễ dàng hơn. Tôi vừa thấy Cassie7 đến từ GreenSock diễn thuyết tại Smashing Conference, tôi thực sự hào hứng khi được làm việc với các bạn trong ngành hoạt hình.
Vậy đâu là cơ hội lớn nhất cho hệ sinh thái giao diện người dùng web?
Una: Về mặt cơ hội lớn, tôi cảm thấy như chúng tôi mới chỉ khám phá được những gì có thể 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à tính năng đa phương tiện theo lựa chọn ưu tiên của người dùng 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 thích thú với trải nghiệm thiết kế mang tính cộng tác, cho phép các nhà phát triển và nhà thiết kế có thể hợp tác cùng những người dùng truy cập trang web của họ.
Và Nicole, tiếp theo là lộ trình phát triển nhóm của anh.
Nicole: Không phải mọi dữ liệu khám phá đều chuyển thành nội dung có thể giao hàng, nhưng có rất nhiều điều khiến tôi thực sự hào hứng ngay lúc này:
Trước tiên, chúng tôi đã cho phép thiết kế dựa trên thành phần, thích ứng. Trong đó có các công cụ thiết kế hệ thống màu để 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ụ: Hệ màu OKLCH giúp đảm bảo độ sáng nhất quán giữa các màu. Các nhà thiết kế có thể đi từ việc chọn màu đến thiết kế mối quan hệ giữa các màu mà không phải kết thúc với bảng màu trông khá rườm rà!
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 xếp tầng, bộ chọn gốc (:has), kiểu theo phạm vi và lồng ghép. Nhà phát triển cần những yếu tố này để có thể xây dựng những hệ thống thiết kế linh hoạt gồm nhiều thành phần có thể sử dụng lại.
Một mảng thú vị khác là ảnh động dạng cuộn được liên kết. Tôi rất thích bản minh hoạ của Steve Gardner. Anh ấy có khả năng cuộn mượt mà và các ảnh động thú vị trên máy bay được kích hoạt khi cuộn. Tuy rất thú vị, nhưng để làm được như vậy thì có thể không dễ dàng, đặc biệt là khi lưu ý đế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 người dùng về khả năng hỗ trợ tiếp cận trên tính năng này.
Điều mà cá nhân tôi thích nhất là các chế độ đ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 tiếp tục xây dựng cùng một nhóm thẻ nhiều lần, tôi cho rằng trình duyệt có thể giúp ích cho bạn. Tại phần Open UI, chúng ta đang làm việc với các thành phần như Selectmenu, cửa sổ bật lên, chú giải công cụ, thẻ, thành phần điều hướng, danh sách xếp dọc và nút bật/tắt. Chúng tôi đang tìm hiểu việc tích hợp khả năng hỗ trợ tiếp cận vào các dữ liệu nguyên gốc của trình duyệt để web có thể truy cập theo thời gian theo mặc định. Sau đó, các nhà phát triển có thể tập trung vào các vấn đề phức tạp và chi tiết hơn, trong khi trình duyệt có thể hỗ trợ các vấn đề cơ bản như cách hoạt động của thẻ. Việc này có thể cần bài đăng riêng, vì vậy tôi sẽ dừng ở đó ngay bây giờ!
Cuối cùng, chúng tôi sẽ tiếp tục đầu tư vào sự tương tác giữa các trình duyệt. Thật tuyệt khi làm việc với các nhân viên tại WebM 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 đã nghe nói rõ ràng rằng các nhà phát triển muốn điều này!
Nếu bạn chưa khám phá thì API Chuyển đổi phần tử được chia sẻ của nhóm Web liền mạch sẽ thay đổi cách mọi người thiết kế web. Tất cả nhữ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 sẽ không chỉ khả thi mà còn dễ dàng. Jake Archibald có bản minh hoạ tuyệt vời.
Năm nay, chúng tôi có thể xem xét nhịp điệu dọc nếu các tiêu chuẩn hoạt động hiệu quả! Chúng tôi có thể xây dựng dựa trên LayoutNG để mở ra rất nhiều tính năng.
Cảm ơn cả hai nhé. Tôi chắc chắn rằng cả 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à tính năng mới đến với thế giới giao diện người dùng web. Vẫn có rất nhiều vấn đề cần khám phá, vậy bạn sẽ bắt đầu hành trình của mình từ đâu?
Una: Phiên hội thảo về Tính năng mới cho nền tảng web của chúng tôi 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 tuyệt vời về tất cả những CSS mới và sắp ra mắt. Hiện tại, tôi sẽ liên tục tập trung vào các bản phát hành ổn định và sẽ sắp xếp công việc khác. Loạt Mới có trên nền tảng web tuyệt vời của bạn là một loạt chương trình rất phù hợp để theo dõi đó. Khi đăng ký nhận bản tin trên web.dev, nhà phát triển cũng sẽ nhận được nội dung này trong hộp thư đến của họ. Đối với các nhà phát triển muốn tham gia và hỗ trợ tất cả những vấn đề này, thì việc tham gia Open UI là một trong những cách hiệu quả nhất để hỗ trợ bạn trong quá trình này.
Nội dung cập nhật chính sắp ra mắt
Chúng tôi tiếp tục truyền thống của mình để thông báo trước cho bạn về thay đổi sắp tới mà bạn cần lưu ý khi xây dựng trải nghiệm web.
Giới hạn độ tuổi tối đa cho cookie ở mức 400 ngày
- Nội dung cập nhật: Khi bạn đặt cookie 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 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 sự cân bằng giữa kiểu 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 mỗi 400 ngày đều có thể làm mới cookie để đảm bảo dịch vụ tiếp tục diễn ra và người dùng có thể yên tâm, cookie sẽ không nằm lại trong trình duyệt của họ hàng thiên niên kỷ mà không được sử dụng. - Tiến trình dự kiến: Giao hàng trong Chrome 104 (Chính thức 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 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 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 đặt cookie ban đầu.
Tôi hy vọng bạn thấy thích khi đọc ấn bản này của Chrome Dev Insider. Nếu bạn chưa biết, thì đây là sự kiện đầu tiên. Chúng tôi mong muốn cung cấp thêm cho bạn nhiều kết quả khác trong quý tới.
Trước thời điểm đó, hãy cho chúng tôi biết suy nghĩ của bạn về phiên bản này của Chrome Dev Insider 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 nghĩ sao về ấn bản này của The Chrome Dev Insider? Chia sẻ ý kiến phản hồi của bạn.