Why did I upgrade The Q library to 2.0 instead of calling it version 3 (1.0/v3) after 1.0/v2?

Tại sao mình lại nâng cấp The Q library thành 2.0 chứ không gọi là phiên bản 3 (1.0/v3) nối tiếp 1.0/v2?

After gaining more practical experience in the working process, as well as using version 1.0 to work on some small and large projects, I re-evaluated and realized that version 1.0 still had many shortcomings for both the design process and hand-off with developers. Besides, when wanting to scale up, there would be problems with changing the theme (Theming). An small example that if used for Light theme only, it works well, but when creating Dark mode, the variables that have been created and assigned to components (component specific token) will have some problems when placed on the background colors of the dark theme, leading to the color of this component when applied, it will display well, but the color of the other component will have the same background color with body when switching to the dark theme. From there, I decided to upgrade, replace them with better things, after testing with personal projects and freelance job for a while, now this version is better than 1.0.

Sau khi trải qua thêm 1 số kinh nghiệm thực tế trong quá trình làm việc, cũng như đưa bản 1.0 vào sử dụng để làm việc cho 1 vài dự án cả nhỏ và lớn thì mình đã đánh giá lại và nhận ra bản 1.0 còn khá nhiều thiếu sót cho cả quá trình design và hand-off cho devs. Bên cạnh đó, khi muốn mở rộng thêm cũng sẽ có vấn đề về thay đổi chủ đề (Theming). Một ví dụ nhỏ có thể thấy là nếu sử dùng cho mỗi chủ đề Sáng thì hoạt động tốt nhưng khi tạo thêm chế độ tối (Dark mode) để sử dụng thì những variables đã được tạo và gán vào những components (component specific token) sẽ bị phát sinh vấn đề lúc đặt lên các màu nền của chủ đề tối, dẫn tới việc có màu của component này khi áp dụng vào thì hiển thị tốt nhưng có màu của component kia thì bị chìm vào cùng màu nền với màu của body lúc đổi qua chủ đề tối. Từ đó mình quyết định thay áo mới, những gì đã cũ sẽ để đấy, thay thế bằng những thứ tốt hơn, và sau khi đưa vào sử dụng thử ở những dự án cá nhân và freelance job một thời gian, thì tới nay, phiên bản này đã tốt hơn 1.0 nhiều.

Some main keys in 2.0

Một số ý chính trong bản 2.0

1. Better scalability and apply to more use cases (of course, you will have to create more and edit when using for any product with other requirements about variable and component). And dark mode? Sure, upgrade for better!

1. Khả năng mở rộng tốt hơn và sử dụng cho nhiều trường hợp hơn (tất nhiên là vẫn sẽ phải tạo thêm và chỉnh sửa khi đưa vào sử dụng cho 1 sản phẩm nào đó có nhiều yêu cầu khác về variable và component). Còn chế độ tối? Chắc chắn rồi, nâng cấp để tốt hơn!

For example

2. Components have been separated into atoms clearly, restricting grouping in the same component set and assigning booleans property in an all-in-one manner and lacks logic as in the old version.

2. Component đã được phân tách atoms rõ ràng, hạn chế gộp trong cùng 1 component set và gán boolean theo kiểu tận dụng và thiếu logic như ở bản cũ.

For example

3. Add more sizes for components as well as text styles including for App design, while 1.0 almost focused on Web design. Besides, the color tones were re-adjusted.

3. Bổ sung thêm kích cỡ cho các component cũng như text styles bao gồm cả cho việc thiết kế App, trong khi trước đây chỉ tập trung phần lớn là Web. Bên cạnh đó, các sắc độ màu cũng đã được điều chỉnh lại.

4. Reorganize types of variables more clearly, create some variables that represent one for all, when declaring again, just change in one place, other places assigned the same value will also be automatically updated, saving editing time instead of having to rearrange the color order in Global each time you change and then find the right place in the list of variables to assign again.

4. Quy hoạch lại các loại variable rõ ràng hơn, tạo thêm những variable mang tính đại diện một cho tất cả, khi khai báo lại chỉ việc đổi ở 1 nơi, các nơi khác được gán cùng giá trị đó cũng sẽ tự động cập nhật theo, tiết kiệm thời gian chỉnh sửa thay vì mỗi lần thay đổi phải sắp xếp lại trật tự màu trong Global rồi tìm đúng chỗ trong danh sách variables để khai báo lại.

In conclusion, these are some things that I do based on my personal experience and work experience as well, then create something good and contribute to the community.

Tổng kết lại thì đây là những thứ mình làm dựa theo kinh nghiệm cá nhân tự tích luỹ và học hỏi cũng như kinh nghiệm làm việc rồi sau đó tạo ra 1 thứ gì đó tốt đẹp và đóng góp tới cộng đồng.

Funt facts

1. I used to build code CSS and SCSS for Global and Alias tokens but when creating Component specific token, i don't have time to focus, therefore, it was pending now.

Mình đã từng viết xong code CSS và SCSS cho Global và Alias token của Q-lib nhưng lúc làm tới Component specific token thì lại bận khá nhiều việc nên không có nhiều thời gian để làm, vì vậy nó đang tạm hoãn.

2. There were several times I thought about giving up on upgrading this library for some reasons but luckily, now I have released this new version.

Có vài lần mình tính từ bỏ việc nâng cấp thư viện này vì một số lí do nhưng may mắn thay, tới giờ mình đã phát hành được phiên bản mới này.

Scroll to top

Back to Home