Background Image Refraction in CSS – Master.dev Blog

Frontend Dependency Injection: From Context API to Composition Root

Bài viết bắt đầu bằng việc mô tả cách nhiều dự án React hiện nay sử dụng Context API để thực hiện dependency injection, nhưng nhanh chóng chỉ ra hạn chế của cách này như việc lồng.provider sâu dẫn tới re‑render không mong muốn và khó kiểm tra đơn vị. Sau đó, tác giả giới thiệu mô hình Composition Root – nơi tất cả các phụ thuộc được tạo và kết nối ở một điểm duy nhất, thường là tệp index.js hoặc App.tsx, giúp làm rõ đồ thị phụ thuộc và giảm bớt việc truyền props qua nhiều lớp component. Khi áp dụng Composition Root, các dịch vụ có thể được thay thế bằng mocks hoặc triển khai khác mà không cần thay đổi mã component, từ đó cải thiện độ bao phủ test đơn vị lên khoảng 20‑30% trong các trường hợp thử nghiệm thực tế. Bài cũng nhấn mạnh việc kết hợp với TypeScript và các container DI nhẹ như tsyringe hoặc inversifyJS để quản lý vòng đời (singleton, transient) một cách tự động. Kết luận là, cho dự án lớn hoặc dự kiến mở rộng, chuyển từ Context API sang Composition Root không chỉ giảm lỗi thời gian chạy mà còn làm cho kiến trúc frontend dễ duy trì và mở rộng hơn.

Bài viết này giúp lập trình viên hiểu rõ cách triển khai Dependency Injection trong frontend từ Context API đến Composition Root để xây dựng ứng dụng dễ bảo trì và mở rộng.

Stop Building AI Slop: Build High-End Web Apps with AI

Nhiều lập trình viên hiện nay dùng công cụ mã hoá AI để tạo nhanh các giao diện chung chung, thiếu sáng tạo và thường không hoàn chỉnh. Nguyên nhân kỹ thuật là họ dựa vào AI để sinh code mà không có quá trình thiết kế UX/UI chi tiết, dẫn đến các thành phần lặp lại và thiếu tính linh hoạt. Hệ quả là các ứng dụng web kết quả cảm thấy vô cảm, khó duy trì và thường cần phải làm lại nhiều phần sau khi triển khai. Bài học đáng rút ra là AI nên được dùng như một trợ giúp trong việc tăng tốc độ viết code, nhưng không thay thế cho sự suy nghĩ thiết kế và việc chọn lựa công cụ phù hợp như React, Next.js hoặc Tailwind khi xây dựng ứng dụng web cao cấp. Khi kết hợp AI với quy trình thiết kế có cấu trúc, developers có thể tránh tạo ra “AI slop” và thay vào đó sản xuất ra những sản phẩm web thật sự chuyên nghiệp và hoàn thiện.

Bài viết này sẽ giúp lập trình viên tránh tạo ra các ứng dụng web AI kém chất lượng bằng cách xây dựng những ứng dụng cao cấp có giá trị thực.

Feature Detecting “Undetectable” CSS Features with @supports named-feature()

Trước đây @supports chỉ có thể kiểm tra tính năng dựa trên tên thuộc tính hoặc giá trị, không thể phát hiện các hành vi phụ thuộc vào triển khai như tương tác giữa hai thuộc tính hoặc hỗ trợ một phần. Để khắc phục, CSS Working Group đã chấp nhận đề xuất của David Baron và thêm hàm @supports named-feature() với hai từ khóa mới: anchor-position-follows-transforms (được hỗ trợ trong Chrome 150, Firefox 156, Safari Technology Preview) và single-axis-scroll-container (được hỗ trợ trong Chrome 153, chưa có trong Firefox hoặc Safari). Với hàm này, nhà phát triển có thể viết điều kiện chính xác hơn để áp dụng các quy tắc CSS chỉ khi tính năng thực sự hoạt động trong môi trường cụ thể, tránh những trường hợp giả dương như Flexbox gap hoạt động với Grid nhưng không với Flex. Điều đáng học là khi làm việc với các tính năng mới hoặc chưa đồng nhất giữa các trình duyệt, việc kiểm tra qua named-feature() giúp giảm thiểu lỗi giao diện và giảm phụ thuộc vào polyfill hoặc hack dựa trên user-agent. Tác giả cũng đã đề xuất cả hai từ khóa và làm việc trực tiếp với đội ngũ Safari để đưa chúng vào bản phát hành.

Lập trình viên nên đọc bài này vì @supports named-feature() cho phép phát hiện các hành vi CSS cụ thể của trình duyệt mà cách kiểm tra truyền thống không thể, giúp viết CSS tương thích tốt hơn trên mọi nền tảng.

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 …

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 …

I Added a CDN Cache to My Site and It Got Slower. Here's the Math I Should Have Done First.

Tác giả đã thêm CDN cache vào trang static site nhưng hiệu suất lại giảm đáng kể với 38 trang bị đánh dấu là chậm. Nguyên nhân kỹ thuật do việc cấu hình TTL (Time To Live) quá thấp khiến CDN phải liên tục kiểm tra origin server, gây ra 2 RTT (Round Trip Time) cho mỗi request thay vì chỉ 1 RTT như không dùng CDN. Hệ quả là thời gian tải trang tăng từ 200ms lên 350ms, làm trải nghiệm người dùng xấu đi đáng kể. Bài viết nhấn mạnh việc tính toán trước khi triển khai CDN và quan trọng hơn là thiết kế chiến lược caching phù hợp với đặc thù traffic website.

Bài viết này giúp bạn hiểu rõ những sai lầm toán học khi triển khai CDN để tránh làm giảm hiệu suất trang web.

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ả các class có tiền tố phân cách bằng dấu gạch ngang (như .btn-primary, .btn-secondary) mà không cần liệt kê riêng lẻ hay thêm class cơ sở. Đề xuất này do Lea Verou đưa ra năm 2024, vừa được nhóm CSS Working Group thông qua tháng 8/2026 nhưng hiện chưa có trình duyệt nào hỗ trợ, dự kiến sẽ mất nhiều năm mới triển khai thực tế.

Lập trình viên nên đọc bài này để hiểu cách tương lai của CSS sẽ giúp tối ưu hóa quản lý các lớp CSS liên quan với các tiền tố giống nhau, giảm thiểu việc viết nhiều selector rườm rà và làm cho mã nguồn trở nên sạch đẹp hơn trong tương lai sớm.

CSS Infinity Use Cases – Master.dev Blog

CSS cho phép sử dụng giá trị infinity bên trong hàm calc() cho các thuộc tính như border-radius. Công nghệ này mở ra nhiều ứng dụng sáng tạo cho các nhà phát triển web.

Bài viết này giúp bạn khám phá những ứng dụng sáng tạo và thú vị của giá trị vô cực trong CSS để nâng cao kỹ năng thiết kế giao diện.