Pottery, Theater, CSS Collaboration, and the Ethics of AI

Designing Ephemeral Video Chat Sessions with WebRTC and JavaScript

Bài viết mô tả cách xây dựng phiên trò chuyện video tạm thời trên trình duyệt bằng WebRTC, WebSockets và Node.js, với mục tiêu giảm thiểu dữ liệu lưu trữ sau khi cuộc gọi kết thúc. Nó giải thích việc tách luồng média ra khỏi kênh tín hiệu, yêu cầu quyền truy cập camera/mic chỉ khi người dùng thực hiện hành động, và sử dụng máy chủ để ghép phiên dựa trên thông báo qua WebSocket. Khi thiết lập kết nối peer‑to‑peer, bài viết chi tiết quá trình trao đổi SDP offer/answer và ứng viên ICE, lý do STUN thường không đủ và cần TURN làm phương án dự phòng để vượt qua NAT/firewall. Các phiên được mô hình như máy trạng thái rõ ràng, đảm bảo việc ngắt kết nối đúng cách bao gồm đóng RTCPeerConnection, dừng các MediaTrack và xóa trạng thái phiên ở phía server để tránh rò rỉ tài nguyên. Ngoài ra, bài viết đề xuất thêm các hook kiểm duyệt, giám sát trạng thái kết nối và deliberately test các đường dẫn lỗi (mất ICE, thất bại TURN) để nâng cao độ ổn định và bảo mật của hệ thống chat video tạm thời.

Bài viết này giúp bạn nắm vững cách xây dựng hệ thống video chat an toàn, hiệu quả bằng cách giải quyết các vấn đề kỹ thuật phức tạp trong giao tiếp WebRTC.

Scroll-driven CSS animations

Bài viết giới thiệu cách tạo hoạt ảnh dựa trên vị trí cuộn mà không cần JavaScript bằng cách sử dụng các tính năng mới của CSS. Nguyên nhân kỹ thuật là появление свойства animation-timeline cùng với các hàm scroll() và view() trong tiêu chuẩn CSS Scroll-driven Animations, cho phép liên kết timeline của hoạt ảnh trực tiếp với tiến trình cuộn trang. Hệ quả là các nhà phát triển có thể thực hiện các hiệu ứng parallax, reveal hoặc các hiệu ứng cuộn phức tạp chỉ bằng CSS, giảm phụ thuộc vào script và cải thiện hiệu suất render. Tuy nhiên, bài cũng nhắc kiểm tra mức độ hỗ trợ của trình duyệt hiện tại vì tính năng này mới chỉ được triển khai trong một số phiên bản mới nhất của các trình duyệt chính. Điều đáng học là trước khi áp dụng trong sản phẩm, cần xác định mức độ hỗ trợ và przygotować dự án fallback hoặc sử dụng polyfill để tránh trải nghiệm bị hỏng đối với người dùng trên trình duyệt cũ.

Hướng dẫn tạo hiệu ứng động dựa trên vị trí cuộn trang mà không cần JavaScript qua CSS mới nhất.

Blender to Three.js and Back: 10 Tips for a Better Workflow

Nhiều nhà phát triển thường tạo mô hình trong Blender rồi xuất sang Three.js để chạy trên web, nhưng quy trình xuất‑nhập thủ công thường làm chậm vòng lặp phát triển. Bài viết đưa ra 10 mẹo thực tiễn sử dụng AI và plugin Blender MCP để tự động hoá việc xuất glTF/GLB, nén texture và thiết lập cảnh trực tiếp từ Blender. Khi áp dụng những mẹo này, người dùng cho thấy thời gian chuẩn bị tài sản giảm tới 40 % và giảm đáng kể sự không khớp giữa cảnh Blender và kết quả render trong Three.js, giúp xem trước real‑time mượt mà hơn. Bài học chính là việc kết hợp quy tắc đặt tên do AI tạo ra và các file cấu hình từ Blender MCP vào quy trình làm việc sẽ tạo ra một pipeline lặp lại, giảm thiểu thao tác thủ công và giữ mã Three.js sạch sẽ. Nếu bạn đang cân nhắc đọc bài gốc để cải thiện quy trình 3D‑to‑web, các con số cụ thể và tên công cụ như Blender, Three.js, AI và Blender MCP làm cho bài viết đáng để tham khảo.

Bài viết này giúp bạn tối ưu hóa quy trình làm việc giữa Blender và Three.js bằng cách kết hợp với AI và Blender MCP.

I still like writing websites by hand

Tác giả từng hand‑code một trang web cho Alex vào năm 2020, sau khi họ quen nhau từ năm 2017, và trang đó vẫn không bị thay đổi tới nay. Ông chọn viết bằng HTML thuần, CSS và vanilla JavaScript, không dùng bất kỳ framework hoặc công cụ build nào, nhằm tối ưu độ đơn giản và khả năng duy trì lâu dài. Sau hơn ba năm, trang web vẫn hoạt động ổn định mà không cần cập nhật, cho thấy việc tránh phụ thuộc vào thư viện bên thứ ba giảm thiểu rủi ro lỗi và công việc bảo trì. Điều này cho thấy khi mục tiêu là một trang web tĩnh thay đổi hiếm, việc hand‑code giúp kiểm soát hoàn toàn mã nguồn, giảm kích thước tải và dễ dàng di chuyển giữa các host. Bài viết nhắc nhở lập trình viên cân nhắc trade‑off giữa tốc độ phát triển bằng framework và lợi ích lâu dài của mã nguồn hand‑written, đặc biệt cho các dự án có thời gian sống dài.

Bài viết này giúp bạn hiểu được giá trị của việc viết website thủ công trong kỷ nguyên framework hiện đại.

Visual playback of the user journey: Introducing Session Replay in Grafana Cloud Frontend Observability

Các đội sử dụng Grafana Cloud Frontend Observability trước đây chỉ có thể dựa vào metrics và logs để đoán xem gì xảy ra trên giao diện. Session Replay bổ sung khả năng ghi lại toàn bộ DOM snapshot, tương tác của người dùng, các yêu cầu mạng và log console cho mỗi lượt truy cập, sau đó dựng lại như một bản phát video để xem lại hành trình người dùng. Nhờ đó, kỹ sư có thể ngay lập tức nhìn thấy trạng thái chính xác dẫn tới lỗi, giảm đáng kể thời gian tái tạo lỗi và thường cắt giảm MTTR xuống hàng chục phần trăm. Điều này cho thấy việc thêm lớp replay trực quan vào hệ thống quan sát hiện tại biến dữ liệu trừu tượng thành bằng chứng cụ thể, giúp팀 ưu tiên và xác nhận sửa lỗi hiệu quả hơn. Việc bật tính năng này trên Grafana Cloud chỉ cần tích hợp SDK nhẹ và có overhead thấp, nên là một nâng cấp chi phí thấp để tăng tốc độ debug.

Session Replay giúp đội ngũ kỹ thuật trực quan hóa hành trình người dùng, giúp xác định nhanh các lỗi UI và cải thiện trải nghiệm người dùng.

Script tags are deprecated and will stop running on March 1, 2027

Shopify vừa công bố trong changelog rằng bắt đầu từ ngày 1 / 3 / 2027 thẻ <script> trong cửa hàng online sẽ được đánh dấu là lỗi thời và ngừng chạy. Nguyên nhân là nền tảng đang chuyển sang mô hình mở rộng dựa trên App Blocks, Sections và Shopify Functions, nhằm giảm sự phụ thuộc vào script tùy chỉnh chèn trực tiếp vào theme. Hệ quả là mọi đoạn mã JavaScript được thêm qua ScriptTag API hoặc qua việc chỉnh sửa theme sẽ không còn được thực thi sau ngày cutoff, có thể làm hỏng các tính năng như tracking, popup hoặc tích hợp bên thứ ba. Điều đáng học là các nhà phát triển cần尽早 di chuyển sang các giải pháp chính thức như App Embed, web pixel manager hoặc các extension mới và kiểm tra tính tương thích trên môi trường phát triển trước khi ngày hết hạn đến. Việc theo dõi changelog và tham gia các bản preview sẽ giúp kịp thời thích ứng với thay đổi này mà không gián đoạn kinh doanh.

Lập trình viên nên đọc bài này để biết về sự thay đổi quan trọng của Shopify liên quan đến tag script bị lỗi thời và sẽ ngừng hoạt động.

Your alt text passes automated checks. That doesn’t mean it’s any good.

Nhiều công cụ tự động kiểm tra accessibility chỉ xác định xem thuộc tính alt có tồn tại hay không, nên chúng thường báo “pass” ngay cả khi mô tả không ý nghĩa. Để khắc phục hạn chế này, nhóm phát triển đã tạo một plugin cho GitHub Accessibility Scanner mà thực hiện phân tích ngữ cảnh và độ dài của alt text, đồng thời đánh giá mức độ mô tả dựa trên heuristic như từ khóa liên quan và tránh lặp lại tên file. Plugin này sẽ đánh dấu các trường hợp alt text quá ngắn (dưới 5 ký tự), quá chung chung (ví dụ “image” hoặc “picture”) hoặc chứa từ ngữ không liên quan, giúp nhà phát hiện lỗi trước khi code được merge. Khi tích hợp vào workflow CI, plugin sẽ làm giảm tỷ lệ lỗi accessibility liên quan đến alt text xuống khoảng 30% so với chỉ dựa vào các quy tắc tự động cơ bản. Bài học là: tự động kiểm tra là bước đầu tiên, nhưng cần bổ sung bằng các quy tắc ngữ cảnh và審閱 con người để đảm bảo alt text thực sự hữu ích cho người dùng screen reader.

Đây giải thích tại sao alt text đạt kiểm tra tự động không đồng nghĩa với nó thực sự hiệu quả và dễ truy cập.

The Future of CSS: Target Multiple Classes with the Class Prefix Selector

CSS sắp bổ sung bộ chọn Class Prefix Selector (.prefix-*) cho phép nhắm mục tiêu tất cả …