Monthly Archives: December 2013

Illustrating Keyboard Shortcuts with the <kbd> Tag and a Bit of CSS

The HTML spec has long had a (much underutilized) tag called kbd, which is intended to be used for marking up user input. For example, you could write something like this:

<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.

Visualizing Directory Structures with the Tree Command

Sometimes good old ls just doesn’t cut it when you’re browsing directories from the command line. Sometimes you just need a more visual overview of the nested files and directories. Well, it turns out there’s a useful command for those cases, and it’s available…

List.js: Table and List Sorting in 5kb of JavaScript

List.js is a tiny (five kilobytes!) library that can add dynamic sorting, searching and pagination to HTML lists and tables. It requires no dependencies, and claims to be able to handle lists with “thousands of items.” It also includes a templating system that makes…

Take the Vim Challenge!

If you’re at all familiar with the Linux/Unix world, it’s safe to say you’ve probably heard of vim. The mode-based editor is famed for both its power and frustrating learning curve. Unlike most editors, which default to a mode where you can type text,…