Điểm nổi bật
Chúng tôi đã ra mắt playground hai tuần trước. Tuần này là công việc tiếp nối: giải quyết ba điểm chưa hoàn thiện trước khi có thể coi là hoàn thành. Cookie hiện đã tuân thủ chính xác RFC 6265, nút expand đưa response vào một overlay toàn màn hình thực sự thay vì kéo giãn một ô grid, và toàn bộ tính năng cuối cùng đã hoạt động trên điện thoại.
Có gì mới
Cookie hiện đã tuân thủ RFC 6265
Cookie jar đã gặp một lỗi nhỏ âm thầm trong hai tuần qua. Các trang web upstream gửi Set-Cookie: ...; Domain=.example.com để áp dụng cookie cho cả subdomain (dấu chấm ở đầu biểu thị "cookie này sẽ đi kèm với apex và mọi subdomain"). Parser của chúng tôi đã loại bỏ dấu chấm đó và làm mất thông tin về việc thuộc tính Domain đã được thiết lập. Kết quả là một jar không thể phân biệt giữa host-only cookie (không có thuộc tính Domain) và domain cookie. Hai ảnh hưởng rõ rệt gồm:
- Chế độ xem raw hiển thị
Domain=example.com(không có dấu chấm), vì vậy khi bạn sao chép một cookie vào một lệnh curl, trang web nhận sẽ xử lý nó như một host-only cookie và không gửi nó ngược lại các subdomain. - Quá trình chuyển giao cookie của sản phẩm Browser dựa vào một phỏng đoán thiếu chắc chắn để quyết định loại cookie nào cần cài đặt vào trình duyệt, và nó đã hoạt động sai bất cứ khi nào bạn có cả apex và subdomain trong cùng một jar.
Chúng tôi đã thêm một giá trị boolean hostOnly trên mỗi cookie được phân tích cú pháp. Thuộc tính Domain xuất hiện, dù có hay không có dấu chấm, đồng nghĩa với hostOnly: false và cookie sẽ khớp với host cùng các subdomain của nó. Thuộc tính Domain vắng mặt đồng nghĩa với hostOnly: true và cookie sẽ chỉ giới hạn ở chính xác host đó. Chế độ xem raw sẽ hiển thị Domain=.example.com cho các domain cookie và bỏ qua hoàn toàn Domain đối với các host-only cookie, nhờ đó việc sao chép ra khỏi jar sẽ tạo ra một cookie hoạt động chính xác khi gửi ngược lại (roundtripping). Chế độ xem đã phân tích cú pháp hiển thị một huy hiệu HO nhỏ trên các hàng host-only, vốn là trường hợp ít gặp hơn khi bạn bắt đầu theo dõi chúng. Các jar hiện tại được lưu trước khi sửa lỗi vẫn giữ nguyên hành vi so khớp rộng cũ để không có dữ liệu nào bị mất một cách âm thầm.
Chế độ expand là một overlay toàn màn hình thực sự
Nút expand cũ đã kéo giãn thẻ response bên trong document flow. Điều đó có nghĩa là một response dài sẽ làm tăng chiều cao trang, phần body xuất hiện thanh cuộn, và bảng điều khiển request phía trên response bị dịch chuyển nhẹ khi bạn chuyển đổi. Bản thân các khung response cũng bị giới hạn ở mức 480 đến 560 pixel, khiến một cây JSON sâu để lại khoảng trống lớn bên dưới thẻ trên màn hình 1440p.
Giờ đây, nó là một overlay position: fixed được neo giữa cạnh phải của sidebar và cạnh viewport, từ trên xuống dưới. Phần body nhận thuộc tính overflow: hidden để trang ngừng cuộn phía sau overlay. Bên trong overlay, khung đang hoạt động sử dụng calc(100vh - 280px) và cookie jar cũng áp dụng mô hình cuộn tương tự. Phím ESC sẽ thu nhỏ trở lại split view. Tiêu đề của nút hiện hiển thị "Expand to full screen" hoặc "Collapse to split view" để không còn phải phỏng đoán nữa. Biểu tượng vốn là hình bốn mũi tên ngay từ đầu, điều mà lẽ ra chúng tôi nên làm rõ ràng hơn.
Playground hoạt động trên điện thoại
Hai lỗi trên di động cần được khắc phục trước khi việc tối ưu hóa các lớp responsive thực sự có giá trị. Nhãn của nút Send bị lệch về cạnh trái của nút thay vì căn giữa, và khi một response được hiển thị, trang web xuất hiện thanh cuộn ngang do một phần tử con có kích thước lớn (một URL dài, một cây JSON, hoặc một khối pre HTML raw) đã ép cột grid mở rộng vượt quá viewport. Cả hai lỗi đều đã được khắc phục: nút Send căn giữa chính xác, và cột grid sử dụng minmax(0, 1fr) để các phần tử con có kích thước lớn tự cuộn bên trong thẻ của chúng thay vì đẩy trang theo chiều ngang.
Bên cạnh đó, các lớp responsive mà chúng tôi chưa hoàn thiện hoàn toàn trước đây:
- Dưới 1023px, nút Expand sẽ ẩn đi (grid lúc này đã là một cột duy nhất).
- Dưới 767px, các khoảng đệm (padding) thu hẹp lại, menu thả xuống của method co lại còn 96px, và bộ chọn API-key tự động co giãn (flex).
- Dưới 640px, hàng URL được phân bổ lại thành hai hàng (method và Send ở trên, URL ở dưới), các nút công cụ của response tăng kích thước vùng chạm lên 32px, các tab cuộn theo chiều ngang, và bảng cookie trở thành một thẻ grid với các trường name, value, path, và expiry được xếp chồng lên nhau.
- Dưới 374px (phân khúc của iPhone SE), một lượt thu nhỏ bổ sung giúp mọi thứ vẫn nằm trong tầm thao tác.
Và các tooltip gợi ý giờ đây sẽ mở khi chạm trên các thiết bị có con trỏ không chính xác (pointer-coarse) và đóng lại khi chạm lần thứ hai vào cùng một điểm kích hoạt. Chúng tôi đã thử nghiệm tính năng này trên một chiếc iPhone SE mượn được khi đi tàu tuần này và mọi thứ đều vừa vặn mà không bị xê dịch theo chiều ngang.
Đây chính là quá trình đưa một công cụ từ trạng thái "bản thử nghiệm" thành "thứ bạn thực sự muốn sử dụng". Tuần này yên ắng hơn tuần ra mắt, nhưng lại là tuần mà playground không còn gây khó chịu cho chúng tôi nữa.