Giới thiệu

GODRICH mang đến cho những người xây dựng website các animation CSS/SCSS và component giao diện dưới dạng demo chạy thật kèm mã nguồn hoàn chỉnh.

Vì sao trang này tồn tại

Code tìm được qua tìm kiếm thường chỉ là một mảnh nhỏ. Dán vào là không chạy, hoặc không biết phải sửa chỗ nào để có kết quả khác. Mỗi bài viết ở đây được viết ra để lấp khoảng trống đó: một demo chạy thật, mã nguồn đầy đủ, và số liệu đo được, tất cả gộp trong một chỗ — để thứ bạn copy là một mảnh chạy được, không phải một phỏng đoán.

Điều này quan trọng nhất với những ai dùng công cụ AI để code — Cursor, Claude Code, v0 và tương tự — để tạo bản nháp đầu tiên cho một trang. Các công cụ đó giỏi tạo ra thứ trông có vẻ ổn; chúng kém hơn ở việc cho bạn biết animation có thật sự mượt không, có xử lý tốt cho người bật reduced motion không, hay nó âm thầm hỏng ở đâu. Phần phán đoán đó là thứ mỗi bài viết cố gắng thêm vào bên trên đoạn code.

Một bài viết được làm ra như thế nào

Từ khóa tìm kiếm được đo thực tế riêng cho từng ngôn ngữ từ gợi ý tự động hoàn thành của Google mỗi lần, không dịch từ ngôn ngữ này sang ngôn ngữ khác.
Mỗi demo được xây bằng HTML + SCSS (kèm bản React). Không dùng thư viện ngoài hay CDN.
Demo được render trên trình duyệt thật và chuyển động của nó được đo — diện tích thay đổi theo thời gian và số khung hình — số liệu đó được đưa vào bài viết.
Các khối code trong bài được copy trực tiếp từ đúng đoạn trong mã nguồn của demo, không viết lại cho khác đi.
Bài viết của mỗi ngôn ngữ được viết mới hoàn toàn bằng ngôn ngữ đó, và được biên tập theo chuẩn riêng của ngôn ngữ đó.
Demo, mã nguồn và prompt được đóng gói vào một file zip, sau đó kiểm tra cả hai chiều — mở được với mật khẩu đúng, và không mở được với mật khẩu sai.
Bài viết, demo và file zip đều phải vượt qua một loạt kiểm tra tự động trước khi được đăng. Nếu một kiểm tra nào đó không đạt, bài viết sẽ không lên trang.
Công cụ AI được dùng để viết bản nháp bài viết và xây demo. Việc đo lường và kiểm chứng do script thực hiện. Quyết định cuối cùng về việc có đăng bài hay không là của người vận hành trang.

Một bài viết có gì

Một demo chạy thật, kèm số liệu đo được ngay bên cạnh
Giải thích vì sao dùng thuộc tính CSS đó, không chỉ nói là dùng nó
Một tình huống thực tế mà cách làm đó bị lỗi
Một biến thể chỉ đổi một giá trị duy nhất
Xử lý cho prefers-reduced-motion
File zip và mật khẩu — được đặt trong một câu ở giữa bài viết, không đóng khung hay in chữ to. Zip chỉ hữu ích khi đi cùng ngữ cảnh của bài viết (đổi chỗ nào thì cái gì thay đổi), nên hai thứ này được để cạnh nhau có chủ đích.

Ai viết

Một người vận hành trang này. Không có mục giới thiệu tác giả hay tiểu sử riêng cho từng bài.

Những gì không có ở đây

Không có phần bình luận.
Quảng cáo dự kiến dùng quảng cáo tự động của Google AdSense; cách hoạt động được mô tả trong chính sách bảo mật.
Không thu thập dữ liệu cá nhân của người truy cập ngoài những gì đã nêu trong chính sách bảo mật.

Giấy phép

Code trong các file zip theo giấy phép MIT. Dùng thoải mái cho website thương mại. Với bài có hình ảnh, bản quyền từng ảnh được ghi trong README bên trong zip.

Liên hệ

Có thắc mắc, xem trang liên hệ.