Tools to Lint, Validate, && Minify

When you are coding, one thing you always want to do (and by always, I mean all the time at whatever stage) is validate your code. Invalid HTML, CSS, and JavaScript introduces bugs and not knowing the source of those bugs can put you on a wild goose chase trying to find it (although you can usually identify it quite easily by checking the console logs or the typeof error it is). However, it never hurts to have ways to validate your code for you and help prevent those errors.

By the way: In terms of programming, “lint” is invalid, unused, or ugly code (when checked against a baseline style guide). A “linter” is a program or website service (and sometimes both) that checks code for lint, known as “linting”.

To that end, here are my top recommendations for HTML, CSS, and JavaScript linters. I have all these myself and have found them to be of high quality. This list is by no means complete; the tool landscape will certainly change after this publishing. πŸ˜‰

Linting && Validating

  • HTMLHint: Simply paste your raw HTML code in the line-numbered, syntax-highlighted, responsive editor on the home page to check for any errors. You can also fix the errors straight in the box and have it checked in real time.
  • W3C Markup Validation Service: This is the official W3C HTML validator. W3C is the committee who standardizes the HTML andΒ  CSSΒ  specifications. You should most definitely validate your code here.
  • W3C CSS Validation Service: As the name suggests, this is the official W3C CSS validator. Yet again, most definitely validate your CSS here. Even if you are not using any of the new features, you have no reason to not validate at the CSS3 level.
  • CSSLint: When configured correctly, this can be a great tool for CSS linting. Some of the default settings, such as disallowing the use of ID selectors completely (which goes directly against the fundamental aspect of CSS), is quite silly and will need to be changed. After that, however, it works quite well. I recommend reading “Should You Start Using CSSLint?” to get a better idea of why some default settings need changing.
  • JSHint: A spinoff of JSLint, JSHint is actively updated and supports more linting directives and tolerances than its older siblings. Most JSLint directives are supported by JSHint, so inline directives will work in either one. The online version also automatically checks each function’s complexity and averages out the scores, handy for knowing if you may need to break up your code a bit.
  • JSONLint: With a website and input field similar to but not exactly like HTMLHint, you should be able to use JSONLint. As all these names imply, this one checks your JSON files. If you don’t know what the format syntax is like, it is basically an object (that requires no var statement!) used to store related information for parsing with Ruby, jQuery, PHP and other languages, mainly with the goal of displaying that content on a website. The Brackets IDE site stores the newest sprint’s highlights with JSON, allowing for dynamic and multilingual displaying.

Minifying

After finalizing your code, you should create a minified version of the CSS and JavaScript for deployment. “Minification” simply refers to removing all white space, comments, and blank lines to create a smaller file. Smaller files means you site is smaller, which in turn makes your site faster. There are plenty of reasons to minify your code. Yahoo! gives reasons to minify, as does Google. It should go without saying the unminified copy must be saved for continued development. Otherwise, I would love to see you actively develop with a minified file. πŸ˜› Traditionally, minified resources have .min in the file name to distinguish it from the development version. An example would be mysite.css and mysite.min.css. I usually do it a bit differently by naming the full stylesheet style.css and the full one after the project, such as CRTC.min.css. JavaScript is almost always named after the project for both files.

So what do I recommend to use to minify CSS and JavaScript? I will tell you. However, I must say that there are more options than what I list. These are simply the ones I personally use or have heard good things about. I encourage you to research other alternatives and decide what works best for you. πŸ™‚

  • Microsoft Ajax Minifer: Created by Microsoft as part of their open-source projects, this, Windows-only command-line program minifies both CSS and JavaScript. Although I am using Grunt for most of my minifying now (see the next point), I still have this installed and use it for a few projects. I have not any issues with it aside from it breaking some more obscure CSS. Until you can use Grunt or do not run Windows, this is a good place to begin minifying.
  • Grunt, or more specifically the official cssmin and uglify tasks. Once set up, these two tasks will minify your CSS and JavaScript, respectively. Both tasks allow a banner to be added at the beginning of the file, and both also allow multiple full files to be merged into a single minified file, which can help with site efficiency at times. If you already have Grunt up and running, I completely recommend using these. Both of these tasks are based on excellent tools. I have never had any issues with these, so you can be sure your minified code is valid. πŸ˜€
  • Feed The Bot Minify CSS tool: This quick little online tool simply takes the CSS you paste in and out comes the minified code in a box below. Good for quick on-the-fly checking. I have not used this myself, but a quick look over reveals valid code except for a unicode character I used in that particular stylesheet.

-le717

Advertisements

2 thoughts on “Tools to Lint, Validate, && Minify

Triangular Reactions

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s