Tái cấu trúc Glyph Catalog: Hành trình và Bài học 🛠️

Nếu bạn đã xem bản cập nhật gần đây của Glyph Catalog, bạn sẽ nhận thấy rằng nó nhanh hơn, sạch hơn và được tổ chức tốt hơn. Nhưng phía sau sự phát hành suôn sẻ đó là một nỗ lực tái cấu trúc lớn. Trong bài viết này, tôi sẽ chia sẻ những gì đã thay đổi, tại sao tôi lại thay đổi và những gì tôi đã học được trong suốt quá trình.

Đây không chỉ là một thông báo về “những gì mới” mà còn là một nhật ký của lập trình viên.

Vấn đề với cấu trúc cũ

Khi tôi lần đầu xây dựng Glyph Catalog, mục tiêu rất đơn giản: hiển thị các ký hiệu với mã Unicode và mã HTML trong định dạng bảng. Điều này hoạt động tốt ban đầu, nhưng khi bộ sưu tập phát triển, những vấn đề bắt đầu xuất hiện:

Cấu trúc bảng lồng nhau → Tôi đã sử dụng cấu trúc Danh mục → Chính → Phụ nhưng hiển thị mọi thứ trong một bảng lớn. Mục lục nhảy qua lại giữa các danh mục thay vì có các trang riêng biệt. Điều này nhanh chóng trở nên lộn xộn và khó duy trì.
L Routing tất cả → Tôi đã sử dụng các đoạn catch-all của Next.js để xử lý các danh mục, chính và phụ trong một tệp duy nhất. Điều này hoạt động, nhưng mã nguồn trở nên phình to và khó quản lý.
Không có trang ký hiệu riêng → Mỗi ký hiệu chỉ xuất hiện trong một hàng bảng. Không có trang chi tiết nào hiển thị cách sử dụng, ví dụ hoặc liên kết tham khảo.
Quản lý dữ liệu lộn xộn → Tôi đã lưu trữ dữ liệu dưới dạng nhiều đối tượng TypeScript trong các thư mục khác nhau. Điều này khiến cho việc cập nhật trở nên đau đớn, các danh mục không nhất quán và việc thêm mã mới trở nên khó khăn.
Giới hạn tìm kiếm → Tìm kiếm được tích hợp trong một hộp thoại, hiển thị tất cả kết quả cùng một lúc. Nó không thể lưu trạng thái, gặp lỗi khi chuyển đến kết quả, và không mở rộng được.
Vấn đề phát triển cơ sở dữ liệu → Việc seed không có xác thực. Dữ liệu được lưu trữ từ nhiều nguồn khác nhau trước khi được seed, với ít metadata và không có nhật ký. Thêm mã mới hoặc sửa lỗi trở nên khó chịu.

Hành trình tái cấu trúc

Dưới đây là cách tôi xử lý từng bước:

1. Xác thực dữ liệu

Tôi đã thêm một lớp xác thực để kiểm tra:

Các trường trống.
Mã điểm trùng lặp (được phép nếu chúng xuất hiện trong các danh mục khác nhau).
Ký tự bị hỏng hoặc không hợp lệ.

Bây giờ, mọi ký hiệu trong cơ sở dữ liệu đều sạch sẽ, nhất quán và đáng tin cậy.

2. Cấu trúc đường dẫn

Tôi đã thay thế đường dẫn catch-all lộn xộn bằng các trang động:
[danh mục] → [chính] → [phụ] → [ký hiệu].

Mỗi ký hiệu bây giờ có một trang riêng với cách sử dụng, ví dụ và liên kết tham khảo.
Các bảng đã bị loại bỏ. Thay vào đó, tôi sử dụng thẻ cho các danh mục, chính và phụ, giúp cải thiện khả năng đọc và điều hướng.
Logic được chia thành nhiều trang với ít sự dư thừa.

3. Cấu trúc lại cơ sở dữ liệu

Tôi đã viết lại kịch bản seeding để:

Tải dữ liệu từ một nguồn JSON duy nhất.
Xác thực, phân loại và gán metadata tự động.
Lưu trữ metadata và liên kết tham khảo riêng biệt để linh hoạt.

Bằng cách này, việc thêm các định dạng mới (như nhị phân) sẽ không làm hỏng cấu trúc, và việc duy trì dữ liệu trở nên dễ dàng hơn.

4. Cải tiến tìm kiếm

Tìm kiếm bây giờ có trang riêng.
Trạng thái được lưu trong URL để giữ nguyên.
Thêm bộ lọc để tinh chỉnh kết quả.
Kết quả hiển thị nhiều mục hơn với ngữ cảnh rõ ràng.
Hỗ trợ tìm kiếm theo cả mô tả (“mũi tên”) và mã (“U+2192” hoặc →).

Nó vẫn đang phát triển, nhưng đã tốt hơn rất nhiều so với hộp thoại cũ đầy lỗi.

5. SEO & Truy cập

Mỗi ký hiệu bây giờ có trang riêng → cải thiện khả năng lập chỉ mục và điều hướng.
Hơn 1,800 ký hiệu hiện có (tăng từ dưới 200).
Metadata và khả năng tiếp cận đã được cải thiện.
Thêm một module blog (được điều chỉnh từ trang portfolio của tôi).

Thay đổi về thiết kế & UX

Giao diện sạch hơn: Thiết kế tối giản, nhiều khoảng trống hơn và phân cấp trực quan tốt hơn.
Nhiều định dạng mã hơn: Unicode, Alt Code, HTML Hex, HTML Dec, Nhị phân (có ví dụ sử dụng). Còn nhiều nữa trong tương lai.
Thiết kế có thể mở rộng: Bố cục hỗ trợ thêm định dạng mới mà không gây lộn xộn.

👉 Ngoài những cập nhật lớn này, còn nhiều sửa đổi nhỏ nhưng có ý nghĩa: chế độ tối đã được thay đổi từ menu thả xuống thành công tắc, màu chính được điều chỉnh nhẹ, chủ đề và từ ngữ được tinh chỉnh, và các chi tiết UI nhỏ được cải thiện. Những điều này có thể có vẻ nhỏ, nhưng tổng thể chúng tạo ra trải nghiệm mượt mà hơn.

Mục tiêu: làm cho Glyph Catalog hữu ích cho cả lập trình viên, nhà thiết kế và người dùng thông thường.

Những gì tôi đã học

Xác thực là tất cả → Nếu không có các kiểm tra nghiêm ngặt, dữ liệu xấu sẽ lan rộng nhanh chóng.
Nguồn duy nhất của sự thật → Một tệp JSON trung tâm làm cho việc cập nhật trở nên dễ quản lý.
Khả năng mở rộng đòi hỏi lựa chọn từ sớm → Những sửa chữa cấu trúc nhỏ bây giờ giúp tiết kiệm nhiều rắc rối lớn sau này.
Thiết kế tối giản là tốt nhất → Ít lộn xộn giúp khám phá ký hiệu dễ dàng hơn.
SEO rất quan trọng → Các trang và metadata riêng biệt cải thiện đáng kể phạm vi tiếp cận.
Đối tượng là chìa khóa → Các tính năng nên được hướng dẫn bởi việc sử dụng thực tế và nhu cầu.
Nội dung là quan trọng → Một blog không chỉ là thêm vào — nó giúp tăng khả năng hiển thị và xây dựng uy tín.

Những gì tiếp theo

Thêm hỗ trợ cho nhiều định dạng mã và metadata ký hiệu.
Giới thiệu tìm kiếm nâng cao (dựa trên ý định, kết quả thông minh hơn, lựa chọn ký tự).
Cải thiện hướng dẫn về khả năng tiếp cận.
Khám phá cách làm cho Glyph Catalog trở nên cộng đồng hơn.
Tập trung vào tăng lưu lượng truy cập thông qua blog, SEO và cải tiến liên tục.
Tối ưu hóa xử lý dữ liệu → Hiện tại, tất cả các ký hiệu được lưu trữ trong một tệp duy nhất, điều này gây ra tải nặng khi mở, tìm kiếm và thay thế (chỉ ở bản địa). Điều này cần được cấu trúc lại để hiệu suất mượt mà hơn.

Những suy nghĩ cuối cùng

Việc tái cấu trúc không có gì hào nhoáng — đó là một quá trình suy nghĩ lại và viết lại — nhưng kết quả là một nền tảng vững chắc hơn cho Glyph Catalog.

Nếu bạn thường xuyên sử dụng nó, tôi rất muốn nghe ý kiến của bạn. Và nếu bạn là một lập trình viên, có thể cái nhìn từ phía sau này sẽ giúp bạn có những ý tưởng cho các dự án của riêng bạn.

👉 Hãy thử Glyph Catalog đã được cập nhật và cho tôi biết phản hồi của bạn!

Tái cấu trúc Glyph Catalog: Hành trình và Bài học