Sunday, October 16, 2011

html5 boilerplate

UPDATE: here's a version updated to use handlebars as well...

I have a homebrew online database (in practice each db looks like a spreadsheet page, and then it autobuilds a form to let me edit and add entries. All backed by my old friends Perl CGI and flat files...) One of my databases is "jquery", and that's the one I'm hoping to convert an entry at a time to this blog.

Enough jawing, lets get to the meat of the thing!

One of the things I like about jQuery is that it's low overhead, you don't have to type too much to get things going. (My memory is verb-based rather than noun, good at remembering how things interact rather than exact syntaxes, so I appreciate easy-to-remember things like that.) Still, I find it handy to have the "boilerplate", the barebones code ready to go for a new HTML page that uses it.:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="//code.jquery.com/jquery-1.9.1.min.js
"></script>
<script>
  $(document).ready(function() {
    alert('Hello world!');
  });
</script>
</head>
<body>

  <div class="content">
    Content Goes Here

  </div>
</body>
</html>


And while we're at it, here's a style.css with some things I use a lot:
body {
    background-color: white;
    color: black;
    font-family: sans-serif;    
}
a {
    color: black;
}
.content {
    width: 800px;
    margin: auto;
}


That's a good start! There might be some meta tags I'm leaving out, I'll look to improve it. But that boilerplate lets you know that hey, things are working, and it reminds me of the syntax for the link and script tags. (Followup: I also like this javascript Singleton pattern as a page controller object.)


As a note, I used to think it was cool to link directly to remote .js files when invited to do so, but now having been burnt a few times by URLs that went away, I'm a big fan of pulling down the file, and making sure your page is self-contained. and as free of external dependencies as possible.

Another followup: remember that OSX et al have a nice little webserver builtin:
python -m SimpleHTTPServer 8081
or with CGI:
python -m CGIHTTPServer 8081

Yet another followup: replaced http://code.jquery.com with //code.jquery.com - now that my sites are https, they balk at running stuff from untrusted places, and whackwhack fixes that.

2 comments:

  1. I would at least at least include
    <!doctype html>
    <html> (and the corresponding </html> at the end)
    and
    <meta charset="utf-8"> before the <title> tag.
    The doctype makes sure the user's browser isn't running in Quirks Mode, and the charset apparently avoids an attack vector.
    (I recently took a crash-course in HTML5 :) )


    I agree about using your own copies of JS libraries .. it may be slightly slower sometimes, but you don't have to worry about the CDN going down, or worse, getting some sort of script injection problem from them.
    Plus, you can package it up exactly as you need it.

    ReplyDelete
  2. Thanks Ossian, I put in your recommendations. Nice blog you have there, I need to dive into its backlog

    ReplyDelete