Những tiện ích tuyệt vời của Chrome dành cho designer và dev (Phần 1)
- Ngoc Huynh
1. CSS-Shack
Công cụ mạnh mẽ này cho phép bạn tạo ra các thiết kế, và export chúng sang file CSS để sử dụng trên website của bạn. CSS-Shack hỗ trợ layer và có nhiều tính năng thường thấy của một công cụ chỉnh sửa ảnh (photo editor).
2. Marmoset
Tiện ích thông mình này sẽ có thể giúp bạn xuất code snapshots để đưa vào demo và mockup. Bạn cũng có thể thêm theme và hiệu ứng hình ảnh cho promo và portfolio online của bạn.
3. iMacros for Chrome
Là một nhà phát triển web, chắc hẳn bạn sẽ cần phải thực hiện test các trang web của mình. Tuy nhiên việc làm này cứ lặp lại nhiều lần, do đó sẽ mang đến sự nhàm chán dành cho bạn. iMacros là một tiện ích hữu dụng của Chrome sẽ giúp bạn ghi lại và lưu thao tác mà đã thực hiện trước đó. Và giờ đây chỉ với một cú click chuột, bạn có thể test các trang web bao nhiêu lần cũng được, từ đó bạn có thể tiết kiệm thời gian và tập trung vào những vấn đề quan trọng hơn.
4. Font Playground
Mọi developer và designer đều sẽ thấy được sự tuyệt vời của tiện ích này. Font Playground sẽ cho phép bạn có thể trải nghiệm thỏa thích với các font hiện có và thư viện Google font mà không cần phải thực hiện bất kỳ sự thay đổi nào. Điều tuyệt vời nhất của Font Playground đó là nó có tất cả các font weight, style và text effect khác nhau để bạn có thể thoải mái lựa chọn cho trang web của mình.
5. Window Resizer
Tiện ích của Chrome này thật sự là một công cụ hữu ích khi nó có thể resize lại cửa sổ trình duyệt, từ đó giúp bạn theo dõi design của mình chuẩn xác hơn. Bạn có thể chọn từ một danh sách các kích thước và độ phân giải chuẩn của màn hình đang có hiện nay.
6. Project Naptha
Nhờ vào công nghệ OCR thông minh, Project Naptha cho phép người dùng highlight, copy, paste, và thậm chí dịch text ra từ ảnh.
7. What Font
What Font là một tiện ích rất hữu ích của Chrome khi nó giúp các developer và designer xác định font đang được sử dụng trên một trang web. Vì vậy, nếu bạn có gặp vài font đẹp hay ho và muốn lưu lại để sử dụng cho các dự án trong tương lai, thì bạn chỉ cần rê chuột vào đoạn text để biết được font đó là gì.
8. Yslow
Công cụ này không chỉ giúp bạn kiểm tra tốc độ load của web, mà còn cho bạn biết lý do web chạy chậm, nếu có. Yslow sẽ kiểm tra đối chiếu dựa theo 23/34 quy luật do nhóm performance của Yahoo đưa ra. Đây cũng là công cụ phân tích và tối ưu web vô cùng hiệu quả nhằm giúp cải thiện hiệu suất.
9. Web Developer
Là một nhà phát triển web, có thể đôi lúc bạn sẽ tự hỏi liệu sẽ thế nào nếu không có tiện ích này. Web Developer thêm toolbar vào Chrome với nhiều công cụ lập trình web hữu ích.
10. Page Ruler
Page Ruler là công cụ đo lường chuẩn xác các thành phần trên web, sau đó tiến hành thao tác đặt thước và lấy thông tin của thành phần đó.
11. Web Developer checklist
Công cụ này sẽ cho phép bạn kiểm tra trang web của bạn về mọi mặt như: SEO, khả năng khả dụng, khả năng truy cập, tốc độ. Do đó, chẳng hạn như nếu bạn không có H1 tag trên page hoặc thiếu meta title hay meta description, thì công cụ sẽ thông báo bạn ngay. Nếu bạn nhấp chuột vào liên kết ‘more info and help’ ở cuối của tiện ích, thì bạn sẽ thấy checklist chi tiết hơn.
12. DevTools Autosave
DevTools AutoSave cho phép bạn tự động lưu bất cứ thay đổi nào mà bạn đã thực hiện với CSS và JS thông qua môi trường Chrome Dev Tools vào file nguồn. Công cụ rất dễ thiết lập và sử dụng, đặc biệt nó sẽ giúp bạn tiết kiệm rất nhiều thời gian.
13. Instant Wireframe
Biến bất cứ web nào thành wireframe chỉ với một cú click chuột. Tiện ích của Chrome này sẽ giúp các nhà phát triển web và các designer kiểm tra các trang web, local lẫn live, qua wireframe nhanh chóng.
14. ColorZilla
Tiện ích ColorZillar là một tập hợp eyedropper (đo màu), colour picker(bảng màu), gradient generator (đổ bóng) cùng nhiều công cụ khác cho công việc design.
15. Ripple Emulator
Ripple Emulator là một công cụ giả lập môi trường mobile đa nền tảng, có thể giúp bạn test ứng dụng web trên một số thiết bị và độ phân giải màn hình khác nhau. Rippe có thể được sử dụng để kết hợp với các công cụ lập trình hiện có để thực hiện debug, kiểm tra DOM và test tự động.