This is a modern motherfucking website

Improving site performance by shipping more CSS

Bối cảnh là một design system thực hiện những thay đổi lớn mà không làm gián đoạn hệ thống. Nguyên nhân kỹ thuật là họ đã áp dụng kỹ thuật Critical CSS để chỉ tải CSS cần thiết cho màn hình đầu tiên, trong khi gửi toàn bộ bộ CSS về sau. Hệ quả là trang tải nhanh hơn 30% nhờ giảm 45% kích thước CSS ban đầu. Điều đáng học là việc tách CSS thành hai phần quan trọng và sử dụng HTTP/2 cho việc gửi gom nhiều file nhỏ hiệu quả hơn. Phương pháp này giúp cải thiện performance mà không ảnh hưởng đến trải nghiệm người dùng cuối.

Bài viết này giúp lập trình viên hiểu cách tối ưu hiệu suất website bằng cách tối ưu hóa cách gửi CSS mà không làm hỏng giao diện hiện có.

Stop building side projects. Nobody cares — and here's the uncomfortable math.

Hầu hết các side project trên GitHub đều có README với commit "initial" và được gắn nhãn như ai, webdev, productivity - cho thấy chúng là dự án bỏ dở. Nguyên nhân chính là nhiều lập trình viên xây dựng side project để thể hiện kỹ năng thay vì giải quyết vấn đề thực tế, dẫn đến tỷ lệ hoàn thành dưới 20%. Kết quả là bạn tốn thời gian quý báu vào những dự án không mang lại giá trị thực sự và không gây được tiếng vang. Bài học đắt giá là nên tập trung vào một ý tưởng cốt lõi và hoàn thành nó thay vì dàn trải sang nhiều project nửa vời.

Bài này giúp lập trình viên nhận ra thực tế về sự đánh giá cao của cộng đồng đối với các dự án phụ để tập trung vào thứ thực sự tạo ra giá trị.

Detect when elements overlap with CSS

CSS anchor positioning và scroll-driven animations có thể được sử dụng để phát hiện khi hai phần tử chồng lên nhau. Giải pháp này tận dụng CSS anchor() để liên kết hai phần tử và theo dõi vị trí chúng tương đối với nhau. Khi các phần tử chồng chéo, CSS có thể kích hoạt animation để thay đổi thuộc tính như opacity hoặc background. Kỹ thuật này hiệu quả vì không cần JavaScript, chỉ dùng các thuộc tính CSS như scroll() và animation-timeline để xử lý sự kiện chồng chéo. Lập trình viên có thể học cách kết hợp CSS anchor với scroll-driven animations để tạo hiệu ứng tương tác phức tạp mà không cần code JS.

Phương pháp CSS mới này giúp bạn phát hiện chồng chéo phần tử mà không cần JavaScript, tối ưu hiệu năng ứng dụng web.

Are LLMs still surprisingly bad at some simple tasks?

Năm ngoái tác giả đã thực hiện thí nghiệm kiểm tra khả năng của các modern LLMs trong việc …

Community Spotlight: Ionic Theme iOS 27

Bối cảnh: Community Spotlight giới thiệu ionic-theme-ios27, một theme mới dành cho ứng dụng Ionic. Nguyên nhân kỹ thuật: Theme này được xây dựng để mang giao diện thiết kế iOS 27 vào ứng dụng Ionic, đi k với hiệu ứng Liquid Glass độc đáo. Hệ quả: Lập trình viên có thể tạo ra các giao diện ấn tượng và hiện đại cho ứng dụng di động của mình. Điều đáng học: Theme này cung cấp sẵn các thành phần UI được tối ưu cho thiết kế iOS, giúp tiết kiệm thời gian phát triển mà vẫn đảm bảo tính nhất quán và thẩm mỹ cao.

Bài viết này giúp bạn cập nhật giao diện iOS 27 và hiệu ứng Liquid Glass cho ứng dụng Ionic một cách dễ dàng.

AI Is Already Better at Coding Than Most Software Developers

Bối cảnh của bài viết là cuộc tranh luận về AI thay thế lập trình viên trong ngành công nghệ. Nguyên nhân kỹ thuật là các mô hình AI như GPT-4 đã đạt được khả năng code tự động vượt trội, có thể giải quyết các bài toán algorithm phức tạp trong thời gian ngắn. Hệ quả là nhiều công ty công nghệ đã bắt đầu giảm tuyển dụng lập trình viên thông thường và đầu tư vào các giải pháp AI để tối ưu hóa chi phí và tăng tốc độ phát triển. Điều đáng học là các nhà phát triển nên tập trung vào kỹ năng thiết kế hệ thống, quản lý dự án và tư duy chiến lược thay vì chỉ tập trung vào viết code thủ công.

Bài viết giúp lập trình viên hiểu rằng giá trị thực sự của phần mềm không nằm ở kỹ năng code thông thường mà ở khả năng giải quyết vấn đề sáng tạo.

Out-of-Order HTML Streaming Moves from JS Frameworks into the Browser

Out-of-order HTML streaming, một kỹ thuật cho phép người dùng xem và tương tác với trang …

Do you use :visited on links?

Trong CSS, thuộc tính :visited thường được thiết kế giống với link chưa truy cập nhưng cách tiếp cận này có thể ảnh hưởng bảo mật. Việc sử dụng :visited bị giới hạn nghiêm ngặt bởi trình duyệt - Firefox chỉ cho phép truy cập vào màu sắc của link trong khi Chrome hạn chế hơn nhiều. Hệ quả là các designer không thể tùy biến hoàn toàn giao diện cho link đã truy cập mà vẫn đảm bảo bảo mật. Bài viết này hữu ích để hiểu rõ những hạn chế kỹ thuật của :visited khi thiết kế giao diện web.

Tối ưu trải nghiệm người dùng bằng cách tận dụng :visited một cách hợp lý giúp bạn tạo ra giao diện web thông minh và dễ nhận biết hơn.