10 Web Development Tool For Developer

10 Web Development Tool For Developer


December, 4 2021

Libraries And Tools For Web Development

In this article, we will go into together to learn about libraries and how to use them to apply to web development to help you reduce time and effort in the process of coding.

Btn.css

Btn.css is a help you can design as well as create beautiful effects for buttons in the website easily. To use it directly on the HTML page, use the CDN link below:

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

After setting up, you just need to call the class of the buttons you want to be able to use it. To understand better, see the following example:

See the Pen btn css by haycuoilennao19 (@haycuoilennao19) on CodePen.

In addition, it also provides us with some basic colors so that you can easily choose the right one for your website. And to understand better, see the example below:

See the Pen color btn css by haycuoilennao19 (@haycuoilennao19) on CodePen.

In addition to setting the button size with CSS, this also provides us with some classes to adjust the size of the button. To understand better, see the following example:

See the Pen size btn css by haycuoilennao19 (@haycuoilennao19) on CodePen.

To see more effects, you can visit here!

Generator Shadow

If you need to set the shadow property for an object in the web page, you can use this tool. It gives you properties to customize the shadow and then generates the corresponding CSS code. To understand more, see the following image:

Generator Shadow

Sharect

Sharect helps you to select the content in the website and share it immediately on popular social networks like Facebook, Reddit, Twitter... To set up the website, insert the CDN link below.

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

Then you just need to call Sharect.init() to be able to set up content sharing for the website. And I have a small note that for this default setting, it will be shared on two social platforms, Facebook and Twitter. To understand better, see the following example:

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

In addition, it also provides you with some properties to redesign the color of the icon as well as the background of the share button with backgroundColor and iconColor. To understand better, see the example setup below:

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

And the results you see below:

See the Pen color with sharect by haycuoilennao19 (@haycuoilennao19) on CodePen.

If you want to learn more, you can visit here!

Matter

Matter is built using CSS with the aim of being Material Design for your website. With its compact size, you can optimize performance when using . And to set it up, you use the CDN below:

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

Then you just need to call the classes provided for the object in the web to be able to use it. To understand better, see the following example:

See the Pen matter library by haycuoilennao19 (@haycuoilennao19) on CodePen.

And to refer to other components, visit here!

shareon

Shareon makes it possible to easily create content sharing buttons for today's popular social networks such as Facebook, Twitter, Linkedin... And to set up we need to use two CDN links The following:

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>

For Javascript files, you should put them at the bottom of the page to optimize the performance of the site. And to make it easier to understand, see the following code:

See the Pen Sử dụng Shareon by haycuoilennao19 (@haycuoilennao19) on CodePen.

Here I have some notes:

  • data-url: is the path that you want users to share.
  • data-title: is the title for the shared link on social networks.

These buttons in my opinion are often used in blog posts or websites with the task of help users easily share articles on social networking sites to increase traffic for your website. And if you want to learn more then visit here!

Quotebacks

Quotebacks makes it possible to create beautiful quotes for your website. And to use it directly in the HTML page, you set up the CDN below:

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

And to make it easier to understand, take a look at the example below:

See the Pen Sử dụng Quotebacks by haycuoilennao19 (@haycuoilennao19) on CodePen.

Here I have some notes:

  • data-title: Title for the citation
  • data-author: Author name of the quote
  • href in the footer is the link of the article.

Because to facilitate the creation of citations, the author has created a tool that provides a full range of information above. You just need to input and the corresponding code will be output. To use that tool see here!

If you want to change some properties, it is not available yet, so you need to download the file Its javascript to edit offline. Javascript Quotebacks file path

SweetAlert

SweetAlert helps you create beautiful announcements for your website and provides many unique animation effects for your notifications. And to use it directly on the HTML page, set the CDN link below:

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

And to make it easier to understand, see the following example:

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

Here I note that the message generated from will have the following general structure swal("Message body").
If you want to create a message that is divided into 2 parts including including content and title, the following structure will be used:
swal({title: "Title"}, {text: "Content content"})

And to make it easier to imagine, see the following example:

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

In addition, this also provides us with some icons to help users easily understand the message type as

  • success: success
  • warning: warning
  • info: info
  • error: error

And we will have the structure when adding these icons: swal({title: "Title"}, {text: "Content"}, {icon: "Icon Name"}).
To make it easier to understand, see the following code:

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

If you want to learn more then go to here okay.

Csseffects

This is a collection of beautiful effects written in pure CSS that can easily be applied to many different types of web projects. You just need to select the effect, the CSS code will automatically copy to the computer's RAM memory (like when we use the copy function on the computer).

Csseffects

Tabler Icons

This is a collection of more than 500 icons for your website. In addition, it also has tools to help us adjust the color, size, and thickness of the icon easily. To make it easier to imagine, please see the image below!

 Tabler Icons

Summary:

I hope the article will provide you with useful tools and tools for web development and design, and if you have any questions, just send an email and I will respond as soon as possible. I hope you continue to support the site so that I can write more good articles. Have a nice day!