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

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


Ngày 4 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 3) 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 2 thì truy cập đường dẫn bên dưới nhé!
Thư Viện Và Công Cụ Phát Triển Web (Phần 2)

Công Cụ Tabulator

Tabulator cho phép bạn tạo ra các bảng tương tác với dữ liệu một cách dễ dàng như là sắp xếp, thêm , sửa hay xóa cho bảng HTML. chúng ta có thể lấy dữ liệu cho bảng từ Javascript Array, nguồn dữ liệu từ AJAX, hoặc kiểu định dạng JSON. Ngoài ra nó cũng hỗ trợ hầu hết các trình duyệt phổ biến hiện nay như là Google Chrome, Firefox, Safari, Opera và Edege. Nó cũng có thể áp dụng cho các front-end framework javascript phổ biến hiện nay như là ReactJS, VueJS và AngularJS.

Tabulator

Nguồn

Thư Viện Textures JS

Textures JS là thư viện giúp bạn tạo SVG patterns một cách nhanh chóng và dễ dàng cho trang web. Nó được xây dựng dựa trên nền tảng của D3.js với mục đích trực quan hóa dữ liệu của bạn. Theo mình thấy nó được sử dụng khá nhiều trong việc phân chia các khu vực ở trong bản đồ bằng cách sử dụng các pattern tương ứng.

Textures JS

Nguồn

Thư Viện DOCX

DOCX là thư viện giúp bạn có thể tạo file .docx từ các phần tử trang web bằng Javascript hoặc Typescript. Nó hoạt động tốt được trên cả trình duyệt và phía server (với Nodejs). Theo mình thấy thì nó có rất nhiều ví dụ chi tiết cho từng thành phần của trang web cũng như các bài hướng dẫn cụ thể khi bạn áp dụng cho React, Vue hay angularJS.

DOCX

Nguồn

Keen-Slider

Keen-Slider là thư viện Javascript miễn phí giúp bạn có thể tạo ra component touch slider(thường áp dụng trên điện thoại) một cách nhanh chóng, dễ dàng và nhiều tính năng điều chỉnh hữu ích khác như là tạo slider theo chiều dọc, multiple slides, chế độ lazy load cho slides... Theo mình thấy thì thư viện này còn có một tính năng rất hay là tạo timepicker (chọn thời gian) theo thiết kế của IOS và hiệu ứng chuyển động background transition cho trang web.

Keen-Slider

Nguồn

Math JS

Math JS là một thư viện toán học mã nguồn mở với hơn 10.5k sao đánh giá trên Github dành cho ngôn ngữ Javascript và NodeJS(chạy phía server). Nó giúp bạn linh hoạt trong việc tính toán và xử lý với nhiều kiểu dữ liệu khác nhau như là numbers, big number(số lớn), complex number(số phức tạp), phân số, unit(đơn vị) và ma trận.

Math JS

Nguồn

Rough Notation

Rough Notation là một thư viện Javascript nhỏ gọn giúp bạn có thể tạo các chú thích cho các phần tử trong trang web với nhiều hiệu ứng đẹp mắt như là underline, box, circle, highlight, brackets...

Rough Notation

Nguồn

Flip

Flip là một plugin giúp bạn có thể tạo bộ đếm(counter) kèm theo hiệu ứng flip một cách nhanh chóng và dễ dàng cho trang web. Nếu bạn cần tạo ra các bộ đếm ngược thời gian của sự kiện, các chương trình khuyến mãi, chiến dịch gây quỹ thì theo mình nghĩ đây là thư viện tốt nhất dành cho bạn.

Flip

Nguồn

Quotebacks

Quotebacks là công cụ online giúp bạn có thể nhúng các trích dẫn với thiết kế đẹp mắt vào cho trang web một cách nhanh chóng. Chúng ta chỉ cần cung cấp cho chương trình 4 thông số cơ bản là đoạn văn trích dẫn, tên tác giả, tiêu đề và url của nguồn trích dẫn. Sau đó đoạn code sẽ được tự động tạo ra, bạn chỉ copy vào trang web mình muốn hiển thị là có thể sử dụng được rồi.

Quotebacks

Nguồn

SVG Path Visualizer

SVG Path Visualizer là công cụ giúp bạn có thể thấy ngay được hình ảnh SVG một cách nhanh chóng và trực quan bằng việc nhập thông tin SVG path data. Ngoài ra công cụ cũng cung cấp thêm các hướng dẫn chi tiết để bạn có thể hiểu được cách tạo các hình SVG cơ bản như là đường thẳng, hình curve, triangle(tam giác)...

SVG Path Visualizer

Nguồn

Toast UI Editor

Toast UI Editor là trình soạn thảo văn bản giúp bạn có thể chỉnh sửa Markdown documents cho chữ hoặc WYSIWYG ở trong trang web. Với việc chia nhỏ thư viện thành nhiều plugin khác nhau sẽ giúp chúng ta dễ dàng tối ưu hơn trong việc chỉ thêm chức năng cần thiết cho trang web của mình. Ví dụ như là plugin editor-plugin-chart : hiển thị biểu đồ cho trình soạn thảo, editor-plugin-code-syntax-highlight làm nổi bật các đoạn code, editor-plugin-color-syntax chỉnh sửa màu sắc cho chữ... Tuy nhiên hiện nay nó chỉ hỗ trợ cho javascript thuần, ReactJs, VueJs và Jquery thôi nhé!

Toast UI Editor

Nguồn

Jexcel

Jexcel là một thư vện Javascript nhỏ gọn giúp bạn tạo các bảng có tính tương tác cao cho trang web với dữ liệu có thể được lấy từ JS Array, JSON, CSV hoặc file XSLX. Theo mình thấy thì nó có một số tính năng rất hữu ích như là giao diện thân thiện với người dùng, dễ dàng tùy chỉnh và kết hợp với các plugin, thư viện khác, xử lý các dữ liệu phức tạp bằng các thao tác đơn giản, có thể tạo và chia sẻ bản tính trực tuyến.

Jexcel

Nguồn

Chocolat.js

Chocolat.js là một thư viện Javascript giúp bạn có thể hiển thị responsive lightbox một cách dễ dàng trên trang web. Ngoài ra bạn cũng có quyền thiết lập một hay nhiều hình ảnh trên cùng một trang, hiển thị hình ảnh toàn màn hình hoặc giới hạn trong thẻ div nào mà mình mong muốn.

Chocolat.js

Nguồn

Image Compare Viewer

Image Compare Viewer là một thư viện mã nguồn mở được xây dựng bằng Javascript giúp bạn có thể tạo ra component so sánh hai hình ảnh trực tiếp ở ngay trên trang web. Theo mình thấy nó thường được sử dụng để so sánh hình ảnh trước và sau khi chỉnh sửa để giúp người dùng có cái nhìn trực quan và phân biệt được rõ ràng hơn.

Image Compare Viewer

Nguồn

Trianglify

Trianglify là một thư viện giúp bạn có thể tạo ra các pattern background đẹp mắt cho trang web bằng việc kết hợp và xây dựng dựa trên các hình tam giác. Bạn chỉ cần lựa chọn thông số được cung cấp bởi thư viện như là độ rộng, chiều cao, palette, khoảng cách cell... mà mình mong muốn thiết lập cho pattern background. Thật đơn giản phải không nào!

Trianglify

Nguồn

Notyf

Notyf là thư viện Javascript giúp bạn tạo các thông báo dạng toast cho trang web với kích thước chỉ khoảng 3Kb. Nó được hiển thị responsive trên nhiều màn hình thiết bị khác nhau và dễ dàng sử dụng chung với các framework JS phổ biến hiện nay như React, Angular, Aurelia, Vue, và Svelte.

Notyf

Nguồn

Dinero.js

Dinero.js là một thư viện javascript cung cấp nhiều tính năng giúp bạn có thể làm việc và xử lý các vấn đề liên quan đến tiền tệ (currency) ở trong trang web.

Dinero.js

Nguồn

BEM CHEAT SHEET

BEM CHEAT SHEET là một trang web cung cấp cho bạn cách đặt tên class với các component trong trang web một cách tối ưu và nhất quán hơn. Việc đặt tên theo quy tắc này sẽ giúp các lập trình viên trong team có thể dễ dàng hiểu được chức năng của từng class cũng như làm việc với nhau được hiệu quả hơn.

BEM CHEAT SHEET

Nguồn

Rough.js

Rough.js là một thư viện đồ họa dùng để vẽ các hình draw lines, curves, arcs, polygons, circles, and ellipses ở trong trang web một cách nhanh chóng và dễ dàng. Ngoài ra nó cũng hỗ trợ cho SVG Path nữa nhé!

Rough.js

Nguồn

simpleParallax.js

simpleParallax.js là một thư viện mã nguồn mở javascript với kích thước nhỏ gọn, nó sẽ giúp bạn có thể tạo hiệu ứng chuyển động parallax cho hình ảnh của trang web một cách đơn giản và dễ dàng.

simpleParallax.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 thư viện hữu ích (phần 3)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ẻ!

Load WooCommerce Stores in 249ms!