Một sự kiện ngoài 2022 Denver đã gói gọn vào ngày hôm qua. Và mặc dù lần này tôi không thể đến được cả ba ngày, nhưng tôi đã nắm bắt được hành động của ngày hôm qua - và đó là tuyệt vời. Tôi không phải là người thích xã giao hay hòa đồng, nhưng đây là hội nghị đầu tiên tôi tham dự trong ít nhất vài năm, và được gặp trực tiếp mọi người thật vô cùng sảng khoái.
Tôi đã ghi chú, tất nhiên! Tôi nghĩ tôi sẽ đăng chúng ở đây vì chia sẻ là quan tâm. Ít nhất, đó là điều mà đứa con sáu tuổi của tôi đã nói với tôi vào ngày hôm trước khi yêu cầu ăn một miếng tráng miệng của tôi vào đêm qua.
Tôi sẽ chia nhỏ điều này qua loa. Cảnh báo đúng: Tôi là tất cả về ghi chú viết tay và một người đẹp trực quan, vì vậy ghi chú của tôi có xu hướng ít… cấu trúc hơn hầu hết. Và những ghi chú này chỉ là những thứ nổi bật đối với tôi. Chúng thậm chí có thể không phải là ý tưởng chính của người thuyết trình, nhưng chúng đã thu hút sự chú ý của tôi!
Chris Coyier: Các trang web hiện đang hoạt động tốt
Chris đã nói chuyện này trước đây (chúng tôi đã liên kết nó với chỉ tuần trước), nhưng lần này đã mở rộng đáng kể, đặc biệt là với các chi tiết về đơn vị tương đối container mà khi kết hợp với clamp(), tạo ra khả năng phản hồi chính xác hơn vì các giá trị liên quan đến vùng chứa hơn là chế độ xem. Vì vậy, bạn biết chúng tôi thường sử dụng chiều rộng khung nhìn như thế nào (vh) đơn vị cho loại chất lỏng?
font-size: clamp(1rem, 1rem + 2vw, 2rem);Chà, chúng ta có thể sử dụng một đơn vị tương đối của vùng chứa như truy vấn vùng chứa inline-size (cqi) thay vào đó, ở đâu 1cqi bằng 1% kích thước nội dòng của vùng chứa (đây là thông số kỹ thuật dự thảo về điều đó):
font-size: clamp(1rem, 1rem + 1cqi, 2rem);Chris cũng đã nói khá nhiều về lợi ích hiệu suất của lưu trữ ở rìa. Có lẽ không có gì ngạc nhiên vì anh ấy viết về nó tại đây hơn một vài lần. Ngay cả với tư cách là một người đã đọc những bài báo đó, tôi thực sự không nhận ra khái niệm đầy đủ về máy tính ở rìa.
Ý tưởng rất đơn giản: CDN toàn cầu có thể phân phối tài sản nhanh chóng vì họ lưu trữ chúng về mặt địa lý gần với người dùng. Đó là thực hành khá tiêu chuẩn để phục vụ hình ảnh raster. Nhưng nó đã mở rộng sang các tệp tĩnh, chẳng hạn như các tệp HTML, CSS và JavaScript giống nhau cung cấp năng lượng cho một trang web - xây dựng chúng trước và phục vụ các tệp đã được biên dịch và tối ưu hóa từ CDN toàn cầu nhanh chóng. Đó là toàn bộ khái niệm Jamstack!
Nhưng nếu bạn vẫn yêu cầu phản hồi của máy chủ từ nó thì sao? Đó không phải là rất cạnh-y, phải không? Chà, bây giờ chúng ta có các trình xử lý có khả năng chạy trên một URL tìm nạp trước dữ liệu và đưa nó vào trước khi kết xuất - trực tiếp từ CDN. Chắc chắn, có nhiều công việc đang diễn ra trong nền. Tuy nhiên, thực tế là chúng tôi có thể tìm nạp dữ liệu động, đưa nó vào, tạo trước nó, phân phát nó một cách tĩnh theo yêu cầuvà để nó chạy gần hơn về mặt địa lý với người dùng làm cho việc này trở nên cực kỳ nhanh chóng.
Tolu Adegbite: Cách giành chiến thắng tại ARIA và ảnh hưởng đến khả năng truy cập web
Good gosh, đây là một bài thuyết trình xuất sắc! Tolu Adegbite đã dạy tôi rất chăm chỉ về WAI-ARIA đến nỗi tôi đã rất khó khăn để ghi lại tất cả những viên ngọc mà cô ấy đã chia sẻ - Vai trò! Những trạng thái! Ghi nhãn! Mô tả! Mọi thứ đều được che đậy một cách phi thường, và những thứ mà tôi biết rằng tôi sẽ quay lại hết lần này đến lần khác.
Nhưng một điều cụ thể thu hút sự chú ý của tôi là khả năng truy cập của SVG nội tuyến. Mặc dù SVG có liên quan đến các loại nội dung thiết kế khác, thực tế là nó được đánh dấu vào cuối ngày khiến nó trở nên khác biệt vì nó không phải lúc nào cũng được xác định là một hình ảnh.
Công nghệ hỗ trợ có nhiều khả năng đọc SVG nội tuyến dưới dạng hình ảnh bằng cách cấp cho nó một vai trò và nhãn có thể truy cập thích hợp:
Miriam Suzanne: Các lớp xếp tầng của! Thể thao
Này, một kỹ thuật viên CSS-Tricks khác! Miriam đã dành rất nhiều thời gian và nỗ lực cho Đặc tả Lớp xếp tầng. Cô ấy cũng đã viết một hướng dẫn lớn về chúng ở đây tại CSS-Tricks và nói về chúng tại An Event Apart.
Điều khiến tôi bị mắc kẹt nhất là sự thay đổi tinh thần này lớn đến mức nào. Khái niệm này không phức tạp. Tuyên bố @layer ở đầu tài liệu CSS, liệt kê các lớp theo thứ tự cụ thể, sau đó viết các kiểu trong các lớp đó. Nhưng đối với một con khủng long già như tôi, người đã viết CSS được một thời gian, tôi sẽ phải làm quen với thực tế là Cascade Layers giúp một bộ chọn lớp đơn giản có thể đánh bại thứ gì đó thường đòi hỏi độ cụ thể cao hơn, giống như một ID.
🤯
Miriam cũng nhắc nhở mọi người rằng Lớp xếp tầng chỉ là một công cụ mà chúng tôi có trong bộ công cụ quản lý tính cụ thể của mình, ngoài các bộ chọn ảnh hưởng đến tính cụ thể (ví dụ: :is(), :where()và :has()).
Ồ, và đây là một mẩu tin thú vị. Khi Miriam xem qua lịch sử của tính cụ thể trong CSS, cô ấy nhớ lại rằng !important ban đầu được thiết kế như một công cụ để người dùng ghi đè tác nhân người dùng và kiểu tác giả. Nhưng ở đâu đó, chúng tôi đã áp dụng nó để buộc phong cách tác giả lên hàng đầu. Lớp xếp tầng giúp loại bỏ tha Cần sử dụng !important bởi vì chúng cung cấp cho chúng tôi sức mạnh để “ưu tiên các lớp và bảo vệ tài sản thừa kế".
Điều đó được nói rất hay, Miriam!
Dave Rupert: Mở khóa Backlog hỗ trợ tiếp cận của bạn
Hãy tưởng tượng một ngày bạn thức dậy với hàng trăm thông báo GitHub về các vấn đề được báo cáo trên trang web của bạn. Bạn thậm chí bắt đầu từ đâu? Có thể đóng máy tính xách tay của bạn và lấy một ống tủy thay thế? Điều đó đã xảy ra với Dave! Một cuộc kiểm tra khả năng tiếp cận tự động đã trả lại một đống lỗi lớn và chỉ định chúng làm vé để Dave sửa.
Nhưng anh ấy nhận thấy một mẫu sau khi lấy một bảng tính Excel về những vấn đề đó, chuyển chúng sang Notion để có cái nhìn tốt hơn, ẩn các cột không cần thiết, phân loại mọi thứ và hiển thị kết quả theo các nhóm logic. Nhiều vấn đề được báo cáo là cùng một vấn đề được lặp lại trên nhiều trang. Chỉ vì một thử nghiệm tự động trả về một số ít lỗi không có nghĩa là tất cả chúng đều là duy nhất. Điều đó đã làm giảm một phần lớn số lượng vé.
Anh ấy tiếp tục chỉ ra cách - với tương đối ít nỗ lực - các vấn đề tồn đọng đã giảm gần 50%.
Có rất nhiều thứ để thu thập ở đó, đặc biệt là về cách chúng tôi xử lý và tổ chức công việc của mình. Bài học kinh nghiệm lớn nhất đối với tôi là khi Dave nói rằng chúng ta phải nhấn mạnh đến các cá nhân và sự tương tác qua các quy trình và công cụ. Các công cụ như quét lỗi trợ năng rất hữu ích, nhưng chúng có thể không kể toàn bộ câu chuyện. Thay vì nghe theo lời họ, bạn nên đặt câu hỏi và tìm hiểu thêm ngữ cảnh trước khi đi sâu vào mớ hỗn độn.
Như một phần thưởng, việc sắp xếp lại các vấn đề trong Notion cho phép Dave nhóm các vấn đề theo cách thể hiện rõ ràng những khuyết điểm nào mà sản phẩm của anh ấy đang bị phân biệt đối xử một cách tích cực, giúp anh ấy đồng cảm hơn với những sai sót đó và cách ưu tiên chúng.
Thêm một phiên ảo nữa của Hui Jing Chen đã giới hạn trong ngày, nhưng phải thừa nhận rằng, tôi đã bỏ lỡ khoảng một nửa vì tôi đang có một cuộc trò chuyện ngoài hành lang. Cuộc trò chuyện rất đáng giá, mặc dù tôi hơi bối rối vì tôi đã bỏ lỡ bài thuyết trình. Tôi sẽ xem video về nó khi nó được xuất bản!
