Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
15 Công Cụ Lập Trình Thiết Kế Website Miễn Phí (Phần 2)

15 Công Cụ Lập Trình Thiết Kế Website Miễn Phí (Phần 2)


Ngày 2 Tháng 11 Năm 2020

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu nhưng công cụ, thư viện hay và hữu ích dành cho việc phát triển và thiết kế web (phần 2) nhé!


Nếu bạn muốn tham khảo các công cụ và thư viện phát triển web phần 1 thì truy cập đường dẫn bên dưới nhé!
25 Thư Viện Và Công Cụ Giúp Bạn Thiết Kế Web Tốt Hơn Năm 2020

Day.js

Day.js là một thư viện Javascript được tối giản chỉ với dung lượng khoảng 2Kb. Nó có thể làm việc được trên kể trình duyệt và NodeJs (phía server). Nó khá giống với moment js nên bạn hoàn toàn yên tâm khi chuyển sang sử dụng thư viện này nhé. Ngoài ra nó cũng có thể chạy hầu hết trên các trình duyệt phổ biến hiện nay như là Chrome trên Windows XP, IE 8, 9, và 10 trên Windows 7, IE 11 trên Windows 10, Firefox mới nhất trên Linux, và Safari mới nhất trên OSX 10.8 và 10.11.

Thư Viện Day.js

Nguồn

Mono Icon

Mono Icon Là một mã nguồn mở icon giúp bạn có thể dễ dàng áp dụng vào trang web một cách nhanh chóng và hoàn toàn miễn phí. Bạn có thể nhúng trực tiếp vào trang HTML thông qua CDN hoặc cài đặt thông qua npm cho dự án web nhé!

Mono Icon

Nguồn

Visual Extension Code Cho Microsoft Edge

Với sự phát triển của trình duyệt Edge thì VS Code cũng mới phát hành một tiện ích mở rộng mới dành cho việc kiểm thử và chạy dự án web trên edge ở ngay trong VS Code mà không cần phải cài đặt trình duyệt này trên máy tính của bạn.

 Visual Extension Code Cho Microsoft Edge

Nguồn

Blob generator

Blob generator là một công cụ online giúp bạn có thể tạo các hình dạng phức tạp dành cho trang web thông qua việc chỉnh sửa SVG. Bạn chỉ cần thay đổi các thuộc tính được cung cấp sẵn và đoạn mã sẻ được tự động tạo ra. Thật dễ dàng phải không nào.

Blob generator

Nguồn

Library Detector

Library Detector là một tiện ích mở rộng của Google Chorme, giúp bạn có thể dễ dàng biết một trang web đang sử dụng công nghệ Javascript nào.

Library Detector

Nguồn

tsParticles - TypeScript Particles

tsParticles - TypeScript Particles là một thư viện được viết lại dựa trên particles.js với mục đích giúp bạn có thể dễ dàng tạo được nhiều hiệu ứng chuyển động background hơn cũng như cung cấp thêm nhiều tiện ích và chức năng hỗ trợ khác. Điểm mình thích ở thư viện này là có thể sử dụng cho nhiều framework khác nhau như reactjs, vuejs, angularjs, Jquery…

tsParticles

Nguồn

CSS Value

CSS Value là một trang web có chức năng giúp bạn có thể dễ dàng xác định giá trị của một thuộc tính CSS nào đó. Ví dụ bạn chọn thuộc tính text-decoration thì nó sẽ tự động hiển thị các thuộc tính liên quan là text-decoration, text-decoration-color, text-decoration-line, text-decoration-skip, text-decoration-style, text-decoration-thickness.

CSS Value

Nguồn

RunJS

RunJS là một ứng dụng trên desktop giúp bạn có thể code chuyên về Javascript và Typescript. Một số điểm mạnh của nó là giúp bạn có thể test các đoạn mã một cách nhanh chóng, import và kiểm tra mã với các thư viện dễ dàng, có thể chỉnh sửa lại giao diện, theme và font chữ phù hợp với sở thích của mình.

RunJS

Nguồn

Duet Date Picker

Duet Date Picker Là một mã nguồn mở được phát triển bởi Duet Design System’s. Nó cho phép bạn có thể xây dựng component date picker(Chọn thời gian) một cách dễ dàng cho trang web mà không cần phải sử dụng thêm thư viện bổ sung nào. Một số tính năng mà mình cảm thấy thích ở thư viện này là có dark và light theme, có thể thiết lập khoảng cách thời gian mà người dùng được phép chọn, thiết lập ngày tháng năm theo khu vực…

Duet Date Picker

Nguồn

urlcat

urlcat là một thư viện Javascript nhỏ gọn với kích thước chỉ khoảng 0.8kb, không sử dụng bất kỳ thư viện bổ sung nào. Nó giúp bạn có thể xây dựng các query trên URL một cách nhanh chóng và dễ dàng đồng thời cũng hạn chế những sai lầm phổ biến khi chúng ta xây dựng url cho trang web.

urlcat

Nguồn

ztext.js

ztext.js là một thư viện javascript giúp bạn có thể dễ dàng xây dựng chữ 3D cho trang web và có thể sử dụng với mọi loại font. Ngoài ra bạn cũng có thể tạo hiệu ứng 3D cho các thành phần khác như là SVG, Hình ảnh, emoji.

ztext.js

Nguồn

GitHub Profile README Generator

GitHub Profile README Generator là một công cụ web online giúp bạn có thể xây dựng trang profile của mình trên github một cách đầy đủ và chi tiết nhất bao gồm tiêu đề, công việc , kỹ năng về ngôn ngữ lập trình,(front-end , backend, framework…), các đường dẫn liên kết mạng xã hội….

GitHub Profile README Generator

Nguồn

Wrap SVG Online

Wrap SVG Online là một ứng dụng giúp bạn có thể dễ dàng chỉnh sửa hình ảnh SVG cho trang web thông qua việc drag and drop(kéo và thả) hình ảnh được tải lên từ máy tính.

Wrap SVG Online

Nguồn

3D Book Image CSS Generator

3D Book Image CSS Generator là một công cụ online giúp bạn có thể tạo ra bìa sách 3D một cách nhanh chóng và dễ dàng áp dụng vào trang web. Bạn chỉ cần cung cấp hình ảnh của sách và chỉnh sửa các thuộc tính CSS được cung cấp sẵn như là Width(độ rộng sách), Height(độ cao sách), Thickness(độ dày sách)... theo ý muốn của mình thì đoạn mã HTML, CSS sẽ được tự động tạo ra tương ứng.

3D Book Image CSS Generator

Nguồn

Print.js

Print.js là một thư viện Javascript nhỏ gọn giúp bạn có thể in file trực tiếp ngay trên trang web mà không cần phải chuyển hướng hay sử dụng nhúng(embeds). Nó hỗ trợ in được rất nhiều dạng như là PDF, HTML (Ví dụ như form...), hình ảnh, JSON... Ngoài ra thì nó cũng chạy được hầu hết trên các trình duyệt phổ biến hiện nay như là Google Chrome, Firefox, Safari, Edge và Opera.

Print.js

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những công cụ và thư viện (phần 2) hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!