Một số công cụ hữu ích dành cho Web Developer

Hiện nay lĩnh vực công nghệ đang ngày càng phát triển một cách vượt bậc, chính vì vậy mà sự trải nghiệm người dùng cũng theo đó mà tăng lên đáng kể. Đằng sau những giao diện thu hút người xem là những ý tưởng mới mẻ, tốn rất nhiều công sức của một người Developer.

Dưới đây là một số công cụ hữu ích dành cho một Frontend Developer/Designer được tổng hợp và chọn lọc từ nhiều nguồn khác nhau.

Font

Trong một layout website thường sẽ có những Icon giúp cho website trở nên thu hút và thân thiện hơn. Bên cạnh đó, chúng còn có tác dụng điều hướng người dùng.

Để tạo các Icon đó, trước đây chúng ta phải thực hiện cắt chúng ra từ file PSD và dùng CSS để gán vào background hoặc dùng thẻ "img" để đưa Icon đó vào. Tuy nhiên, hiện tại chúng ta đã có giải pháp khác đơn giản và tiện lợi hơn, đó là sử dụng Symbol Font (font chữ kiểu ký hiệu).

Hiện nay có rất nhiều thư viện Symbol Font nhưng phát triển mạnh nhất và được nhiều người sử dụng nhất vì tính đơn giản và dễ sử dụng là Font Awesome, Material Icon… 

Font Awesome

Font Awesome là một trong những icon font phổ biến nhất hiện nay. Với phiên bản mới nhất hiện tại là 5.5.0, Font Awesome hỗ trợ trên 1400 icon miễn phí, thỏa sức cho bạn sử dụng.

IcoMoon Font

IcoMoon là một ứng dụng cho phép bạn tuỳ chỉnh icon font, import SVG để tạo ra font riêng, chuyển đổi font sang SVG, PDF, XAML, CSH… 

Bên cạnh đó, công cụ này còn cung cấp hơn 5000 icon free bằng cách tối ưu từ nhiều thư viện miễn phí khác nhau.

CSS Generator

CSS tool

Đây là một công cụ tổng hợp không thể thiếu dành cho CSS Developer. Nó có chứa rất nhiều công cụ dùng để tạo box-shadow, background gradient, text effect, transform… 

Image Sprites

Image Sprites là một kỹ thuật chắc chắn không hề xa lạ đối với bất kỳ một Frontend Developer nào.

Đây là một phương pháp giúp tối ưu website hiệu quả, tuy nhiên để xác định tọa độ (background-position) thì lại là một điều khó khăn.