Giới thiệu Quiet UI
Gần đây, tôi đã phát hành một dự án phụ có tên là Quiet UI. Có thể bạn sẽ thắc mắc: "Một thư viện UI nữa? Tại sao lại như vậy?"
Tôi đã từng khởi xướng dự án mã nguồn mở Shoelace hơn 8 năm trước, và nó đã trở nên khá phổ biến trước khi được Font Awesome mua lại. Sau đó, tôi đã gia nhập đội ngũ và chúng tôi đã tổ chức một chiến dịch Kickstarter thành công để tái giới thiệu dự án dưới một cái tên mới: Web Awesome.
Trong ba năm qua, chúng tôi đã xây dựng một đội ngũ mơ ước để hỗ trợ Web Awesome và phát triển Web Awesome Pro, một bản nâng cấp tùy chọn để duy trì dự án mã nguồn mở.
Nhóm Web Awesome và tôi đã thiết kế hơn một chục chủ đề chuyên nghiệp, bộ sưu tập bảng màu được biên soạn chuyên nghiệp, thư viện mẫu ngày càng phong phú, các thành phần chuyên nghiệp mới, một trình tạo chủ đề tùy chỉnh, một ứng dụng web có xác thực/thanh toán, một bảng điều khiển tuyệt vời và cơ sở hạ tầng để hỗ trợ CDN miễn phí và pro của chúng tôi.
Quay trở lại những điều cơ bản
Giữa những nỗ lực và sự phấn khích đó, tôi nhận ra mình khao khát xây dựng một thứ gì đó chỉ để vui. Tôi thấy các Web API mới xuất hiện, nhưng không có thời gian hoặc không gian để khám phá chúng tại nơi làm việc do những ưu tiên khác. Hơn nữa, Web Awesome có những nhà thiết kế mà tôi không thể so sánh được. Những người có kỹ năng thiết kế thực sự đang phụ trách thiết kế hiện nay.
Tôi không phải là một nhà thiết kế hình ảnh, nhưng tôi có thể xây dựng các thành phần khá tốt. Tuy nhiên, tôi đã bỏ lỡ việc thiết kế chúng. Tôi muốn thử nghiệm với những tính năng tiên tiến chưa có sẵn trên tất cả các trình duyệt. Những điều như ElementInternals, Custom States, và Popover API là một vài ví dụ.
Khám phá màu sắc
Khoảng thời gian Evil Martian phát hành bảng màu Harmony, tôi đã bắt đầu thử nghiệm với color-mix() và không gian màu OKLAB/OKLCH. Năm ngoái, tôi đã cố gắng tạo bảng màu cho Shoelace 1.0 bằng HSL, nhưng kết quả thường không như mong đợi. Với OKLAB/OKLCH, kết quả tốt hơn nhiều.
Tôi đã dành một đêm để tái tạo từng mẫu trong mọi bảng màu của Harmony chỉ bằng CSS. Thật bất ngờ, tôi đã gần như hoàn thành!
Từ những kinh nghiệm với Shoelace và các dự án khác, tôi đã tạo ra các bảng màu sử dụng color-mix() và OKLCH. Mỗi bảng màu được tạo từ một màu trung tính duy nhất bằng CSS thuần túy.
Tên gọi của một dự án
Theo thời gian, tôi đã tiếp tục phát triển các thành phần mới, một số thành phần khác biệt hoàn toàn so với những gì tôi đã từng khám phá: một cần điều khiển cho thiết bị cảm ứng có vẻ thú vị; một mẫu “tem” có thể “đóng dấu” các mẫu có thể hữu ích; hoặc một trình tạo lorem ipsum có thể thú vị.
Khi càng nhiều thành phần được thêm vào, mọi thứ trước đó dần được hoàn thiện hơn. Khi tôi không cảm thấy muốn lập trình vào buổi tối, tôi sẽ đọc lại những gì đã có và sửa lỗi, cải thiện màu sắc hoặc các chi tiết nhỏ khác.
Sử dụng AI trong phát triển
Ngày nay, bạn không thể mở một tab trình duyệt mà không nghe về AI. Tôi đã từng tránh xa nó, nhưng giờ đây tôi cảm thấy rằng điều đó là không thể tránh khỏi. Quiet là nơi hoàn hảo để thử nghiệm với AI mà không ảnh hưởng đến người dùng thực tế. Đó là nơi tôi đã học được cách sử dụng (và không nên sử dụng) Claude, Grok, ChatGPT...
Kết luận
Quiet UI đã trải qua một chặng đường dài từ những thành phần lẻ tẻ trong một thư mục không tên đến một thư viện thú vị mà tôi thực sự tự hào. Nó đã dạy tôi rất nhiều điều trong vài năm qua, và vì tôi thích công việc này, tôi đã quyết định phát hành nó để người khác có thể sử dụng.
Nếu bạn đang tìm kiếm một thư viện UI mới, hãy thử nghiệm với Quiet UI và cho tôi biết ý kiến của bạn!
Lưu ý: Quiet UI không phải là sự cạnh tranh với Web Awesome. Đây là một không gian sáng tạo nơi tôi có thể thử nghiệm với các ý tưởng mới mà không bị ràng buộc bởi các yêu cầu nghiêm ngặt hơn của một thư viện lớn hơn.
Câu hỏi thường gặp
1. Quiet UI có mã nguồn mở không?
- Tôi đã chọn không phát hành Quiet dưới giấy phép mã nguồn mở. Thay vào đó, tôi đã làm cho nó có sẵn nguồn để mọi người có thể sử dụng trong các ứng dụng phi thương mại.
2. Làm thế nào để tôi có thể sử dụng Quiet UI trong dự án của mình?
- Bạn có thể tải xuống và tích hợp Quiet UI vào dự án của mình theo hướng dẫn trên trang chính thức.
3. Có kế hoạch nào cho việc phát triển thêm không?
- Chắc chắn rồi! Tôi đang tiếp tục phát triển và cải thiện thư viện với nhiều thành phần và tính năng mới.
Nếu bạn đang tìm kiếm một thư viện UI mới và sáng tạo, hãy xem qua Quiet UI và tham gia vào cuộc hành trình phát triển thú vị này!
