Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Những Thư Viện Và Công Cụ Cho Phát Triển Web (2020)

Những Thư Viện Và Công Cụ Cho Phát Triển Web (2020)


Ngày 24 Tháng 7 Năm 2020

Những Thư Viện Và Cách Sử Dụng Cho Phát Triển Web (2020)

Trong bài này chúng ta sẽ cùng nhau đi vào tìm hiểu các thư viện cũng như cách sử dụng của nó để áp dụng vào việc phát triển web nhằm giúp bạn có thể giảm được thời gian và công sức trong quá trình viết mã. Nào bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu nhé!

Thư Viện Btn.css

Btn.css là một thư viện giúp bạn có thể thiết kế cũng như tạo ra các hiệu ứng đẹp mắt cho button trong trang web một cách dễ dàng. Để sử dụng trực tiếp vào trang HTML thì bạn sử dụng đường dẫn CDN ở dưới đây nhé:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">

Sau khi thiết lập xong thì bạn chỉ cần việc gọi class của các button mình muốn là có thể sử dụng được rồi. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

See the Pen Một số kiểu button của thư viện btncss by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ngoài ra nó cũng cung cấp cho chúng ta một số màu cơ bản để bạn có thể dễ dàng lựa chọn phù hợp cho trang web của mình Và để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

See the Pen Màu sắc button của thư viện btn css by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ngoài việc thiết lập kích cỡ button bằng CSS thì thư viện này cũng cung cấp cho chúng ta một số class để điều chỉnh kích thước của button. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

See the Pen Kích thước của button thư vien btn css by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để xem thêm nhiều hiệu ứng khác thì bạn có thể truy cập ở đây nhé!

Công Cụ Generator Shadow

Nếu như bạn cần thiết lập thuộc tính shadow cho một đối tượng trong trang web thì có thể sử dụng công cụ này nhé. Nó cung cấp cho bạn các thuộc tính để có thể tình chỉnh shadow và sau đó sẽ generator đoạn mã CSS tương ứng. Để hiểu rõ hơn bạn xem hình sau đây nha:

Generator Shadow

Thư Viện Sharect

Sharect giúp bạn có thể lựa chọn nội dung trong trang web và chia sẽ ngay lập tức trên các mạng xã hội phổ biến hiện nay như Facebook, Reddit, Twitter... Để thiết lập cho trang web thì bạn chèn đường dẫn CDN ở dưới đây nhé:

<script src="https://unpkg.com/[email protected]/dist/sharect.min.js"></script>

Khi đó bạn chỉ cần gọi Sharect.init() là đã có thể thiết lập chia sẻ nội dung cho trang web rồi. Và mình có lưu ý nhỏ là đối với kiểu thiết lập mặc định này thì nó sẽ được chia sẻ trên hai nên tảng mảng xã hội là Facebook và Twitter. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

See the Pen Sử dụng thư viện Sharect by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ngoài ra thư viện cũng cung cấp cho bạn một số thuộc tính để thiết kế lại màu sắc cho icon cũng như background của nút chia sẻ với backgroundColoriconColor. Để hiểu rõ hơn bạn xem ví dụ cách thiết lập dưới đây nhé:

Sharect.config
({
  facebook: true,
  twitter: true,
  backgroundColor: '#1E90FF',
  iconColor: '#FFF',
}).init()

Và kết quả bạn xem dưới đây nhé:

See the Pen thay doi mau cho icon và background cua thu vien sharect by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm thì có thể truy cập ở đây nhé!

Thư Viện Matter

Matter được xây dựng bằng CSS với mục đích là hướng tới thiết kế Material cho trang web của bạn. Với kích thước nhỏ gọn giúp bạn có thể tối ưu hiệu suất khi sử dụng thư viện. Và để thiết lập thì bạn sử dụng CDN dưới đây nhé:

<link href="https://res.cloudinary.com/finnhvman/raw/upload/matter/matter-0.2.2.min.css" rel="stylesheet">

Sau đó bạn chỉ cần gọi các class được thư viện cung cấp cho đối tượng trong web là có thể sử dụng được rồi. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

See the Pen gOPERqa by haycuoilennao19 (@haycuoilennao19) on CodePen.

Và để tham khảo thêm những component khác thì bạn truy cập ở đây nhé!

Thư Viện shareon

Shareon giúp bạn có thể tạo ra những nút chia sẻ nội dung một cách dễ dàng cho những mạng xã hội phổ biến hiện nay như là Facebook, Twitter, Linkedin... Và để thiết lập thì chúng ta cần sử dụng hai đường dẫn CDN sau đây:

CSS

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/shareon.min.css" rel="stylesheet">

Javascript

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/shareon.min.js" type="text/javascript"></script>

Đối với file Javascript thì bạn nên đặt dưới cùng của trang để tối ưu hiệu suất cho trang web. Và để dễ hình dung bạn xem đoạn code sau nhé:

See the Pen Sử dụng Thư Viện Shareon by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ở đây mình có một số lưu ý là:

  • data-url: là đường dẫn mà bạn muốn người dùng chia sẻ.
  • data-title: là tiêu đề cho đường dẫn được chia sẻ trên mạng xã hội.

Các nút này theo mình thấy là hay được sử dụng trong các bài viết trên blog hoặc website với nhiệm vụ là giúp người dùng dễ dàng chia sẻ bài viết lên các trang mạng xã hội nhằm tăng thêm lưu lượng truy cập cho trang web của bạn. Và nếu bạn muốn tìm hiểu thêm thì truy cập ở đây nhé!

Thư Viện Quotebacks

Thư viện Quotebacks giúp bạn có thể tạo trích dẫn đẹp cho trang web của bạn. Và để sử dụng trực tiếp trong trang HTML thì bạn thiết lập đoạn CDN dưới đây nhé:

<script note="" src="https://cdn.jsdelivr.net/gh/Blogger-Peer-Review/[email protected]/quoteback.js"></script>

Và để dễ hình dung bạn xem qua ví dụ dưới đây nhé:

See the Pen Sử dụng thư viện Quotebacks by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ở đây mình có một số lưu ý là:

  • data-title: Tiêu đề cho trích dẫn
  • data-author: Tên tác giả của trích dẫn
  • href trong footer chính là đường dẫn của bài viết.

Do để thuận lợi cho việc tạo trích dẫn thì tác giả của thư viện đã tạo một công cụ cung cấp đầy đủ các thông tin ở trên. Bạn chỉ việc nhập vào và đoạn mã tương ứng sẽ được xuất ra. Để sử dụng dụng công cụ đó bạn xem ở đây nhé!

Nếu bạn muốn thay đổi một số thuộc tính thì thư viện chưa cung cấp được, do đó bạn cần tải file javascript của nó về để chỉnh sửa nhé. Đường dẫn file Javascript thư viện Quotebacks

Thư Viện SweetAlert

SweetAlert giúp bạn tạo ra thông báo đẹp mắt cho trang web cũng như cung cấp nhiều hiệu ứng animation độc đáo cho thông báo của bạn. Và để sử dụng trực tiếp vào trang HTML thì bạn thiết lập đường dẫn CDN dưới đây nhé:

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Và để dễ hình dung bạn xem ví dụ sau đây nhé:

See the Pen Sử dụng sweetalert cơ bản by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ở đây mình có lưu ý là thông báo được tạo từ thư viện sẽ có cấu trúc chung như sau swal("Nội dung thông báo").
Nếu bạn muốn tạo một thông báo được chia thành 2 phần bao gồm nội dung và tiêu đề thì sẽ sử dụng cấu trúc sau:
swal({title: "Tiêu đề"}, {text: "Nội dung"})

Và để dễ dàng hình dung bạn xem ví dụ sau đây nhé:

See the Pen su dung sweetalert phan 2 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ngoài ra thư viện này còn cung cấp cho chúng ta một số icon giúp người dùng có thể dễ dàng hiểu được loại thông báo như là

  • success: thành công
  • warning: cảnh báo
  • info: thông tin
  • error: lỗi

Và chúng ta sẽ có cấu trúc khi thêm các icon này là: swal({title: "Tiêu đề"}, {text: "Nội dung"}, {icon: "Tên Icon"}).
Để dễ hình dung bạn xem đoạn code sau đây nhé:

See the Pen su dung sweetalert phan 3 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn không thấy rõ thì chuyển sang chế độ 0.5x và 0.25 nha. Nếu bạn muốn tham khảo thêm thì truy cập ở đây nhé.

Csseffects

Đây là một bộ sưu tập những hiệu ứng đẹp mắt được viết bằng CSS thuần nên dễ dàng có thể áp dụng cho nhiều loại dự án web khác nhau. Bạn chỉ việc chọn hiệu ứng thì đoạn mã CSS sẽ tự động copy vào bộ nhớ RAM của máy tính(như khi ta dùng chức năng copy trên máy tính).

Csseffects

Tabler Icons

Đây là một bộ sưu tập hơn 500 icon cho trang web của bạn. Ngoài ra nó còn có công cụ giúp chúng ta có thể chỉnh sủa màu sắc, kích thước, độ dày của icon một cách dễ dàng. Để dễ hình dung bạn xem hình ảnh bên dưới nhé!

 Tabler Icons

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 và công cụ 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ẻ!

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.