Useful Snippets to Cut Down Development Time

Whenever you start a new theme or design, it can be annoying to have to write everything from scratch again. In that sense, it would be useful to have archived snippets you can just copy and paste and be on your merry way.

Here is a snippet for a page using an HTML 4.01 Strict Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="css/styles.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
</head>
<body>

</body>
</html>

Of course, most people like to use XHTML now, so here’s the equivalent using XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>

</body>
</html>

If you use jQuery a lot, you might want to consider having this handy:

<script type="text/javascript" src="/js/jquery.js"></script>
<script>
$(function() {

});
</script>

or if you want to import jQuery from Google AJAX Library, you can use this:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function() {

});
</script>

Or, if you’re working on the CSS side of things, you might want to keep a copy of CSS Hard Reset handy:

* {
	margin:0;
	padding:0;
}

or if that’s too much for you, a copy of Eric Meyer Reset might do the trick instead:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

BONUS

Instead of keeping a text file of these snippets, you can use a little program called Texter (Windows only) to enter the code for you.

For example, you can define a Text called ‘xhtml’ and put in the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/styles.css" type="text/css">
<title>%|</title>
</head>
<body>

</body>
</html>

The ‘%|’ places your cursor at that location, so you don’t need to waste any time moving the cursor up.