Web Development Tools

D

DevynCJohnson

Guest
The Internet is a very popular and essential part of modern society. Obviously, web-developers will want to design efficient web-pages and services quickly and easily. Thankfully, there are many tools for Linux (and online tools) that can assist web-developers in making more content for the Internet.

Code Compression
Compressing code or minifying code (making it smaller) can improve performance in some coding situations. CSS is an example of code that can be compressed to increase performance. Not all programming languages benefit from compression.

CSS-Compressor is an online tool (http://csscompressor.com/) that minifies CSS code. This is a free and safe website that reduces the size of (minifies) the CSS code. The user has some options that determine how much to compress the code and how to do so. For instance, unneeded backslashes and semicolons are removed as well as comments, most newlines, invalid properties, and more (depending on the chosen settings). DCJTech (http://dcjtech.info/) used CSS Compressor and the CSS was reduced by over 40%.

Graphics
Obviously, creating and modifying images may be needed. Two popular open-source tools for images includes GIMP and Inkscape.
  • GIMP - GIMP (http://www.gimp.org/) can be used to edit and create raster images
  • Inkscape - Inkscape (https://inkscape.org/) can be used to create and edit SVG images. Since SVG is used in the HTML5 standard, many web-developers may want to use SVG images rather than the large raster images (such as JPEG and PNG). SVG images are vector images made from plain-text markup-code. Thus, SVG images are smaller than their raster image counterparts and they compress very efficiently.

IDEs
Integrated Developer Environments (IDEs) provide many tools and features needed for code development. There are many IDEs that work well for web-development. Some recommended and popular IDEs include

Each IDE has its advantages and disadvantages. In addition, some developers prefer one IDE over another, so try various IDEs until the best one is found.

Miscellaneous
FileZilla (https://filezilla-project.org/) is a helpful tool that provides an easy way to upload, download, edit/modify, and view files on a server via FTP or some other secure protocol.

Syntax Analyzers
CSS Lint (https://github.com/CSSLint/csslint) is an online tool (http://csslint.net/) that helps to find various issues and bugs in CSS code.

HTML Tidy (http://www.html-tidy.org/) finds errors, legacy code, and "messy syntax" in HTML code. HTML Tidy is a command-line program that can be obtained from https://github.com/htacg/tidy-html5 or the default repositories.

"linklint" is a command-line tool that can find broken links. To use linklint, type "linklint -db3 -http -host HOST_NAME" to list information concerning the links.

RIPS (http://rips-scanner.sourceforge.net/) can find vulnerabilities in PHP code.

"xmllint" (http://xmlsoft.org/xmllint.html) is a command-line program that parses XML files and reports back errors or anything else (depending on the parameters used). "xmllint" is included with "libxml2" (http://xmlsoft.org/).

Yasca (http://www.scovetta.com/yasca.html) can be used to scan CSS, JavaScript, HTML, and PHP code (plus many other programming languages). Yasca can test and report conformance, performance, security, and quality issues, errors and problems.

Validators
Validators ensure that computer code is using the proper commands and syntax. Various validators are available.

Testing Browser Support
Sometimes, it may be important to test what features a web-browser is capable of rendering and processing. Doing so may prove or disprove the source of an issue or help web-developers know whether or not to add a particular feature to a website.

https://html5test.com/ can be used to test support for particular HTML5 features in a web-browser.

Acidtests are helpful tools that test a web-browser's overall compliance with a particular standard. Below is a list of various acidtests.
HTML Acidtests
MathML Acidtests

Various Tips
  • Less is more - Using less code makes migrations, debugging, etc. faster and easier. Plus, less code can usually execute faster than lengthy code.
  • Keep It Simple Stupid (KISS) - Keep the code design simple; do not use overly complicated code.
  • Test code performance - The best way to find bottle-necks is to test the code.
  • Use syntax and lint checkers often - This can help find over-looked bugs and problems.

Further Reading
 

Attachments

  • slide.jpg
    slide.jpg
    29.2 KB · Views: 70,439


Top