Yearly Archives: 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,…

Installing Multiple Ghost Blogs Behind NGINX on Ubuntu 12.04

Looking to set up a blog with Ghost? While it still has a few rough edges and missing features at the time of this writing, as it’s essentially in beta at this point (hence the “0.3” versioning), it definitely shows promise as a blogging…

Why Twitter’s New “More Visual Tweets” Are a Bad Idea

Starting this week, your Twitter feed is going to look a lot different. In their infinite wisdom, the social media titan has decided that their media previews should now be expanded by default in their web interface and iOS app. (You can disable it…

BlogBuzz November 2, 2013

Solar Theme for Ghost Blogs

Need a stylish new design for your Ghost blog? Looking for something that puts your content first, with an emphasis on reducing eye strain? Allow me to introduce my new theme (which is technically a port of the one I made for Jekyll), based…

GoDaddy Acquires Media Temple

I hope you’re not a Media Temple customer, because I have bad news. GoDaddy has just acquired the hosting company, according to the press release they put out today. SCOTTSDALE, Ariz. (Oct. 15, 2013) — GoDaddy, the Web’s largest platform for small businesses, has…

Export Your Markdown Posts from Jekyll to Ghost

Want to export your Markdown posts from Jekyll to a format that can be easily imported into Ghost, now that the new blogging platform has launched? By reverse-engineering the plugin the Ghost developers made for WordPress, I put together a Jekyll plugin that generates…