Sunday, October 16, 2011

html5 boilerplate

UPDATE: here's a version updated to use handlebars as well...
(And semi-related: here is something similar for p5.js)

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 lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://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.

Follwup to the followup: replaced "whackwhack" with https://, since whackwhack doesn't work when doing stuff locally ala file://


FOLLOWUP: HERE'S THING MINUS JAVASCRIPT AND PUTTING THE CSS IN THE FILE ITSELF
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    background-color: white;
    color: black;
    font-family: sans-serif;    
}
a {
    color: black;
}
.content {
    width: 800px;
    margin: auto;
}
</style>
</head>
<body>
  <div class="content">
        Content Goes here
  </div>
</body>
</html>

FOLLOWUP 2:
Often when I am churning out a quick and dirty PHP page, I want to use one of these functions to read CGI params without generating noise in my log if some fields aren't present:

function getval($key, $default = ''){
    return isset($_GET[$key]) ? $_GET[$key] : $default;    
}
function postval($key, $default = ''){
    return isset($_POST[$key]) ? $_POST[$key] : $default;    
}
function requestval($key, $default = ''){
    return isset($_REQUEST[$key]) ? $_REQUEST[$key] : $default;    
}



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