Tecate.js
Writing HTML is hard. Let's go shopping
Usage
You have an HTML file and you want to check if you made a mistake writing the
HTML tags. Drop tecate.js into the <head> of your HTML document, like
this:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/kevinburke/tecate/master/tecate.js"></script>
<!-- ... more files in the head ... -->
</head>
<body>
<!-- ... the body content ... -->
</body>
</html>Then if there's a problem with your HTML, you'll start getting nice error messages, like this:
But you shouldn't put Javascript in the <head>
I agree. The problem is if you load the tecate.js file after, say,
an unclosed link tag:
<a href="foo
<script src="tecate.js"></script>It won't load properly and you'll never get the message telling you it didn't
load! That's why I recommend putting tecate.js in the <head> of your HTML
file.
Catching Bugs
Tecate will display an error message straight to the page if you messed up your HTML. Here are some of the bugs it can catch for you:
Missing a Closing Bracket
Say you forgot to end a tag with a bracket, or closed it badly:
<div class="foo"
Some text
</div>Missing Equals Sign For Attribute
<div class"foo">
Some text
</div>Missing Opening or Closing Attribute Quotes
These are some of the most pernicious.
<div class=foo">
<a href="blah>Some text</a>
</div>
Invalid Element Name
Say you mixed up your "m" and your "n":
<form class="foo">
<imput type="text" />
</form>Reporting Bugs
Please create a new issue here and I will take a look.
Guidelines
Tecate parses HTML with regex, which is never a good idea. Given the vast, wide array of ways this can fail, the aim of Tecate is that it's better to not warn you about errors than it is to erroneously warn about things that are actually okay.