Google released a tool called Modern Web Guidance at Google I/O — a collection of nested Markdown files that AI agents can use as context when generating HTML, CSS, and JavaScript code. The skill helps AI produce more accurate, up-to-date web code by bridging the gap between platform releases and model training cutoffs. It covers topics like CSS animations to and from the top layer, including mandatory requirements such as using overlay in transition lists, allow-discrete for display transitions, and respecting prefers-reduced-motion for accessibility. The author notes it handles fallbacks and user preferences reasonably well, but cautions that developers should still understand what they're doing rather than blindly trusting AI output.
Nguồn: https://master.dev/blog/modern-web-guidance. 8sync News chỉ tóm tắt và dẫn link; bản quyền nội dung thuộc tác giả và nguồn gốc.
Juan Mathews Rebello Santos trở thành người đầu tiên ở Brazil tốt nghiệp ngành an ninh mạng khi bị khiếm thị, đồng thời là nhà nghiên cứu mù đầu tiên công bố CVE (CVE-2025-26326) trên NVD của Mỹ. Anh phát hiện lỗ hổng trên các sản phẩm của Google, Microsoft, Nubank và Smiles chỉ bằng công cụ screen reader, đồng thời sáng lập BNVD.org, viết sách an ninh mạng bằng tiếng Bồ Đào Nha dành cho người khiếm thị và sở hữu hơn 50 chứng chỉ. Bài viết cũng nhấn mạnh những rào cản tiếp cận trong ngành công nghệ đối với người khiếm thị, từ hệ thống đại học không thân thiện đến hàng trăm đơn xin việc không hồi âm, và kêu gọi thiết kế bao dung là yếu tố bắt buộc, không phải sự ưu ái.

Thư viện Prop For That của Adam Argyle cung cấp các CSS custom properties động, cho phép truy cập vào những thuộc tính CSS thông thường không thể truy xuất như vị trí con trỏ, tốc độ cuộn, trạng thái form hay thời gian hiện tại. Nhà phát triển chỉ cần thêm thuộc tính data vào HTML, sau đó sử dụng trực tiếp các biến CSS này trong stylesheet mà không cần viết JavaScript.
Lập trình viên nên đọc bài này để khám phá cách Prop For That giúp tối ưu hóa giao diện người dùng bằng cách kết nối trực tiếp CSS với dữ liệu động từ HTML mà không cần JavaScript, mở rộng khả năng tùy biến UI một cách đơn giản và hiệu quả.
Kỹ thuật CSS thuần tạo thanh trượt (range slider) dạng lượn sóng bằng phần tử HTML input gốc, sử dụng các tính năng hiện đại như border-shape, Scroll-Driven Animations và @property mà không cần JavaScript hay HTML bổ sung. Chỉ hoạt động trên Chrome, cho phép tùy biến dễ dàng qua CSS variables và có công cụ hỗ trợ tạo đường lượn sóng.
Lập trình viên nên đọc bài này để khám phá cách tạo hiệu ứng slider dải nhập gợn sóng chỉ bằng CSS hiện đại, tiết kiệm thời gian và không cần JavaScript, giúp tối ưu hóa hiệu suất và mở rộng khả năng thiết kế UI cho ứng dụng Chrome.
Việc đo lường năng suất lập trình viên thông qua các chỉ số như lines of code …
Bài viết bàn về sự thay đổi trong phương pháp CSS từ các quy ước nghiêm ngặt như BEM, SMACSS, ITCSS sang cách tiếp cận linh hoạt hơn nhờ các tính năng hiện đại như cascade layers, @scope, @container và :where. Tác giả chia sẻ sở thích cá nhân khi viết hoa tên class component (ví dụ: class="Post") để tăng tính rõ ràng, đồng thời nhắc nhở về hạn chế của việc phụ thuộc quá nhiều vào class selectors theo đặc tả CSS Level 1.
Bạn nên đọc bài này để hiểu cách CSS đã thay đổi từ quy tắc cứng nhắc truyền thống sang sự linh hoạt mới mẻ nhờ công nghệ hiện đại, giúp bạn tối ưu hóa cách viết mã CSS hiệu quả hơn mà không cần lo lắng về các quy ước cũ.
CSS Grid Lanes giới thiệu hệ thống layout mới với hai trục căn chỉnh: trục grid (xếp lane) và trục xếp chồng (các item nằm trong lane). Căn chỉnh theo trục grid tương tự CSS Grid tiêu chuẩn (dùng justify-*/align-* cho chiều ngang/dọc), còn căn chỉnh trục xếp chồng (như align-items: stretch) cho phép các item lấp đầy khoảng trống. Tính năng này đang được triển khai trên Chromium và Safari, với hỗ trợ gần hoàn thiện trên Chromium.
Lập trình viên nên đọc bài này để hiểu cách tối ưu hóa bố cục grid với các tính năng mới như align-items trên trục xếp chồng và cách điều khiển align-content cho không gian dư thừa, giúp thiết kế UI đẹp hơn và hiệu suất cao hơn trong các trình duyệt hiện đại.
Locofy.ai là công cụ AI chuyển đổi thiết kế Figma thành code frontend hoàn chỉnh, tập trung vào developer-first với workflow agentic qua CLI, Cursor và Claude Code. Nó đóng vai trò trung gian giữa Figma và các trợ lý coding AI (Cursor/Claude), đảm bảo độ trung thực UI và cấu trúc thiết kế.
Nếu bạn là lập trình viên Frontend muốn tiết kiệm thời gian và đảm bảo tính chính xác của UI từ thiết kế đến mã, Locofy.ai là công cụ AI mới giúp tự động hóa quá trình chuyển đổi từ Figma sang code mà không cần phụ thuộc vào các nhà thiết kế.
Việc nhồi nhét 200 dòng hướng dẫn vào file CLAUDE.md đã gây ra hậu quả khi chiếm dụng quá nhiều ngữ cảnh, hạn chế dung lượng cho code và logic thực tế. Tốt nhất nên giữ file này ngắn gọn, chỉ bao gồm các quy tắc bắt buộc, lệnh quan trọng (lint, test, build) và quy ước dự án, đồng thời liên tục cập nhật để loại bỏ những hướng dẫn lỗi thời.
Lập trình viên nên đọc bài này để tránh rơi vào sai lầm của một file CLAUDE.md quá dài, làm giảm hiệu suất làm việc và gây khó khăn khi cần linh hoạt trong quá trình phát triển.