Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the web front-end tools". In the daily operation, I believe many people have doubts about the web front-end tools. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what are the web front-end tools?" Next, please follow the editor to study!

1. Ai2html

It was developed by developers in the editorial department of the New York Times, and it is described as follows:

Convert your Illustrator documents into open source Adobe Illustrator scripts for HTML and CSS.

2. Sloc

This is very neat. This is a command line tool that can help you generate statistics for the source code. By default, the output is just a simple list, but you can also convert it to CSV, JSON, CLI table format. After installing through npm, you can execute the following command:

Sloc index.html

I executed the above command on a larger HTML document and generated the following information:

-Result-Physical: 9788 Source: 6340 Comment: 645 Single-line comment: 0 Block comment: 645 Mixed: 642 Empty: 3445 Number of files read: 1--

The following command generates data in JSON format:

/ Command sloc-- format json index.html / / result {"files": [{"path": "index.html", "stats": {"total": 9788, "source": 6340, "comment": 6340, "single": 0, "block": 645, "mixed": 642 "empty": 3445}, "badFile": false}], "summary": {"total": 9788, "source": 6340, "comment": 645, "single": 0, "block": 645, "mixed": 642, "empty": 3445}}

3. Walkway

This is a very easy way to animate SVG elements, and I can make sure it's easy to use.

4. VisSense.js

This library may have many different use cases. It is described as:

A utility library that can observe changes in the visibility of DOM elements. You can immediately know that an element is hidden, partially visible, and fully visible.

You can view the results on the second demo page.

5. Is.js

This is described as a "micro-check library", which provides a good API that allows you to do all kinds of data testing.

Is.decimal (41.5); / true is.number ('hello'); / / false is.regexp (/ test/); / / true is.usZipCode (' 90201'); / / true is.socialSecurityNumber ('017-90-7890'); / / true is.hexColor (' # 333'); / / true is.odd (42); / / false is.domNode (el); / / depends on the value of el is.iphone (); / / depends on device is.ipad () / / depends on device is.inNextWeek (myDate); / / depends on date value

6. Grunt SassyClean

Grunt SassyClean is a Grunt task that allows you to delete any useless parts. That is, they may be in your file structure, but for whatever reason, you don't really use them in the project.

You need to include grunt.initConfig () in your Grunt file like this:

Sassyclean: {options: {modules: ['sass/modules/**/*.scss',' sass/themes/**/*.scss', 'sass/layout/**/*.scss',' sass/base/**/*.scss'], buildfiles: ['sass/**/*.scss'], remove: false, days: null},}

7. Sass Director

This is another very neat but small Sass tool. Sass Director generates a terminal command, which automatically generates the file structure and files after execution.

8. Awesomplete

This is a very easy to use, no dependency JavaScript auto-completion script, it provides all the auto-completion scripts need to do, but also can be customized. For example, after introducing the CSS and JS files, you can write the HTML structure as follows:

9. What Does My Site Cost?

The project, maintained by Tim Kadlec, provides a viable way to solve performance problems. The most important thing in terms of performance is the mobile network. Using this tool, it will tell you:

Find out the cost of using the mobile network to access your site around the world.

10. JSCS

It's to format "JavaScript code style", it's not a new project, but I found it this year, and I think every JS developer needs to know it exists.

Some other tools

Here are some "Honor Award" winners that may be worth a try:

Csswizardry-grids: responsive, mobility-first, * * nested, easy-to-use grid system

Xr: I like things that are simple but get things done. This is the super-simple way to wrap XMLHttpRequest.

Bootply:Bootstrap is a very popular framework, so this BootStrap editor is worth a try

You Might Not Need jQuery Plugins: simple jQuery plug-ins and scripts

Tota11y: use assistive technology to help visualize how your website works

At this point, the study on "what are the web front-end tools" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.