<p>The most famous keyboard shortcut is probably <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>.</p>

The browser (by default) renders the kbd tags in a monotype font, just like code and pre. But if you’re already going to mark up keys like that for semantic reasons, why not apply a little styling and make it fancy? (I’ve seen a few sites do this, Stack Overflow being one of them.)

kbd {
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 0.1em 0.5em;
	margin: 0 0.2em;
	box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
	background-color: #f7f7f7;
}

While the tag isn’t solely meant for this use case—it can also be used for any user input, such as something you intend the reader to search on Google—I think it’s a great use. The code element tends to be used for the latter case more often, whether it’s considered appropriate or not, so styling it like so shouldn’t get in the way in most cases.

If you have need to display keyboard shortcuts periodically, it’s definitely a nice touch.

It also includes a templating system that makes it possible to allow the addition and editing of items, a pagination plugin, and a plugin that adds fuzzy search. (Also, they get bonus points for using characters from The Secret of Monkey Island as an example.)

The script looks very promising, though there is one caveat about the file size claim: the minified version is 5kb when served with gzip compression. If, for whatever reason, your server is not configured to do so, then it’s more to the order of 15kb. Still small, but not quite as amazingly so.

List.js [listjs.com]

It features a chapter on logically marking up page structure with the new semantic tags (header, nav, section, article, etc.), which explains the contexts they should be used in with a hands-on example of restructuring a blog without excessive divs. A lot of online tutorials make the error of suggesting the aside element for a blog sidebar, which the book helpfully points out as wrong. The section element is the proper tag for the job, as it denotes an arbitrary section of the page, whereas aside is for broken-out sections of your article content, such as pullquotes or diagrams.

From there the author moves on to some CSS3 tricks using newly-added selectors. He shows some simple methods to add zebra-striping to tables with pseudo-classes and add visible URLs to links via a print stylesheet with :after. There’s a brief section demonstrating media queries, as well some on the new JavaScript APIs—localStorage and history pushState, for example. There’s even a bit on using cache manifests to set up offline access.

Oh, and the deprecations. HTML5 deprecates a good many tags and attributes. There is a section listing those, as well as some modern alternatives, such as opening links in new windows without the deprecated target attribute. It can be done cleanly and semantically by using JavaScript, without impacting the user’s ability to middle-click a link and open a new tab…which far too many sites still do today. If you do that, you need to read this book just for that reason.

Let’s start with the basics of setting up the form, and handling the uploaded file. Then we can tackle some of the security issues.

For the upload to work, you must add enctype="multipart/form-data" to your form tag. This signals that the POST request will contain upload data as well as the form field values.

Among fields you’ll need are a hidden field named MAX_FILE_SIZE, which tells the client not to accept a file over a certain number of bytes (300000, or 300 kilobytes, in this example) as well as the file upload field itself.

<form method="post" enctype="multipart/form-data">
	<input type="hidden" name="MAX_FILE_SIZE" value="300000" />
	<input type="file" id="myupload" name="myupload" />
	<input type="submit" name="submit" value="Submit" />
</form>

This form is going to submit to itself (that is, the PHP file that outputs the form is also the script that processes the data) so it is unnecessary to specify an action value for the form.

The code that processes the upload is actually just a couple lines. The rest is error-checking.

if ($_POST['submit']) { //If the form was submitted, commence doing stuff

	if ($_FILES['myupload']['error'] != 0) {
		//The upload failed for some reason, so output a human-friendly error message for the corresponding error number.
		$errcode = array(
			"No errors",
			"File exceeded the PHP INI upload_max_filesize value.",
			"File exceeded the maximum allowed size.",
			"Partial upload.",
			"No file uploaded.",
			"UPLOAD_ERR_NO_TMP_DIR",
			"UPLOAD_ERR_CANT_WRITE",
			"UPLOAD_ERR_EXTENSION",
			"UPLOAD_ERR_EMPTY"
		);
		$error = $errcode[$_FILES['myupload']['error']];
		echo "Error: " . $error;
	}
	else {
		//No errors, so we can move the uploaded file to our uploads directory
		move_uploaded_file($_FILES['myupload']['tmp_name'], "./uploads/".$_FILES['myupload']['name']);
		unset($_FILES);
	}

}

The most important part here is the move_uploaded_file() function, which does what it says on the box. The first argument is the temporary path of the uploaded file (which $_FILES[‘myupload’][‘tmp_name’] contains) and the second is the destination. In the example, I set it to use the name of the uploaded file (you may want to rename it) and put it in ./uploads.

That should be enough for a basic file uploader, but it does absolutely nothing to check that the uploaded data is what you’re expecting. It could be exploited terribly easily.

To combat abuse, you should add some checks. A couple of good things to look for are:

• The MIME type. Inspect the uploaded file and make sure it’s an image file (or whatever kind of document you’re wanting).
• The existence of “.php” in the filename.

It’s also a good idea for you to set the permissions of your uploads folder to disallow execution of shell scripts.

Checking the MIME type of an image is surprisingly easy, since there’s a handy function built-in to retrieve that information from a valid image file.

$imgdata = getimagesize($_FILES['myupload']['tmp_name']);
if (!in_array($imgdata['mime'], array( 'image/gif', 'image/png', 'image/jpeg', 'image/pjpeg' ))) {
	//This isn't an image file. Better display an error and NOT move the image to its permanent spot. The temp file will be deleted automatically.
}

Preventing PHP files from being uploaded, fortunately, doesn’t require a scary Regular Expression. You can just use strpos() to check for the presence of a substring.

if (strpos(strtolower($_FILES['ad_img']['name']), '.php') !== false) {
	//Stop right there. Why does an image file have '.php' in it?
}

That’s enough to discourage your average script kiddie, though someone with real skill might be able to find a way to get around such checks. If anybody has something to add, I’d like to hear it.

It’s 2012, already! Why are we still relying on pictures of typographical symbols? Let’s do it with the power of CSS!

Let’s start with some simple HTML. Before we can style anything, we need to create our blockquote. While we’re at it, a cite element is a nice, semantic way to attribute the quote to its originator.

<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
<cite>Somebody famous</cite>
</blockquote>

Now some CSS to provide some basic styling for the blockquote. Leaving the default browser style isn’t going to look great, so we’ll use a largish serif font with a little extra line spacing. And a slightly lighter color. Extra-dark grey adds a subtle variation from your main body text.

blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}

Now for the fun part: the giant quotation mark. The :before pseudo-element can be used to dynamically insert content before the text of the element, and style the content you insert. This is great for decorative text, like stylistic curly-quotes. The trick is to use an escaped hexadecimal representation of the desired character, and a little bit of fiddly positioning stuff to make it sit in the right position.

blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}

That’s the most difficult part. You may have to experiment with the size and positioning until it looks right, though. Once everything looks nice, you can apply the same technique to style the citation. Using the :before pseudo-element, you can insert an em dash and a space before the text.

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

Easy, isn’t it? The effect should work in all modern browsers, and IE8. (IE8 will only process the pseudo-element if your document has a doctype declared, but you should have one of those already…) In browsers that don’t support it, the added content simply won’t appear, leaving the main text of the blockquote (and the citation) intact. The other styling will remain, of course, so it should still look good enough.

You can see a live demo here.

Its a nice long and informative article, and worth a look if you’re looking to do some performance optimization of web site. (Be sure to look into sprites after you’ve switched to loading JavaScript asynchronously!)

Thinking Async [CSS-Tricks]

This is great for two scenarios. You can use it to experiment with a bit of CSS or JavaScript for brainstorming purposes, or you can use it if you need to ask someone for help. (It’s a lot easier to figure out what’s going wrong with someone’s code or markup if you can jump right in and start messing with the code.) Chris Coyier (of CSS-Tricks) uses it all the time to show off CSS experiments that will likely be used in future posts of his.

<a href="https://twitter.com/share" data-count="vertical" data-via="redwall_hp">Tweet</a>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

I did too, and after a bit of Google searching, I found a post by John Resig (the creator of jQuery) that explains that they’re something called data attributes.

A new feature in HTML5, they provide a way to embed data in an element and access it from a script. (An accompanying JavaScript API makes it very easy to retrieve the data.)

HTML 5 data- Attributes [John Resig]

Everyone who uses Firebug regularly knows the basics. They know how to inspect and edit HTML and CSS, analyze page loading times and the like. There are a few neat tricks, though, that aren’t quite immediately apparent, but are very handy.

Quickly Copy a Background URL

I like to play around with background images when I’m experimenting with a design or learning from someone else’s. This often involves copying the URL of a background image from one element and pasting it to another. It’s a pain to carefully select the URL portion of a shorthand background attribute, which is what I did until recently. As it turns out, you can just right-click the attribute and choose “Copy Image Location” or “Open Image in New Tab.” Palm, meet forehead.

Specify a Pseudo-element

If you hover over a link (or any element with a :hover pseudo-element) while Firebug is open, the right-hand pane updates to show the relevant CSS. Wouldn’t it be useful if it didn’t disappear as soon as you moved the mouse? Fortunately, you can lock the hover state with the little dropdown arrow on the Style tab. Just put a check mark next to the “:hover” option.

See the Exact Style Applied to an Element

Next to the Style tab in the right-hand pane is one labeled Computed. This is useful for working out cascading issues, or checking the exact dimensions of an element.

Console Logging

Instead of spamming alert() dialogs across your screen when you’re debugging JavaScript, you can use Firebug’s Console tab instead. Calling the console.log() function will output whatever you pass to it in the Console tab. e.g. console.log(‘hi’). There’s a page about it on the Firebug website.

Joost de Valk has put together a good tutorial on how to fix that issue. It features code snippets that will load the widget JavaScript asynchronously, keeping the buttons from holding up the page loading. Also, it even adds Google Analytics and Clicky tracking so you can tell if people are actually using your buttons.

When Google released +1, I quickly identified how to track interaction with that button. The obvious “follow up” was questions from people on how to track interaction with other buttons. Not for each of these social buttons tracking of interaction is actually possible. It depends on how the button was designed whether this will work or not. I got it working for Twitter and Facebook, so I’ll share the code for tracking interaction with their respective social buttons below.

Social Buttons: Adding them to your site & Tracking them [Yoast]