Tag Archives: (x)html

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

Dec 27, 2013 by Matt | Posted in Coding 6 Comments

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.

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

Dec 11, 2013 by Matt | Posted in Software & Scripts 32 Comments

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

HTML and CSS: Develop with Tomorrow’s Standards Today by Brian P. Hogan

Apr 3, 2013 by Matt | Posted in Design No Comments

I recently unearthed a review copy of a book that somehow got lost in the shuffle a couple of years ago, HTML5 and CSS3: Develop with Tomorrow’s Standards Today by Brian P. Hogan, which is too bad, since it’s one of the better books I’ve seen on the subject. It’s a comprehensive primer on the changes in HTML5 and CSS3. I enjoyed reading through the book after I unburied it last week.

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.

Handling File Uploads with PHP

Jul 17, 2012 by Matt | Posted in Coding, Featured 5 Comments

So you want to add a file uploader to your site. It’s quite easy to do with PHP, but first you must understand the inherent risks. You’re going to allow just anyone to take a file and put it on your server. That file could be anything. It could be an image like you may intend, or someone could get clever and try to upload a malicious PHP script, which could then be run when called by the appropriate URL. Or a user could upload larger files than you intended and waste your server’s storage space. (This is assuming you intend to have a public-facing uploader, of course. It’s less of an issue if its a back-end feature.)

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.

Continue reading →

Pure CSS Blockquote Styling

Apr 24, 2012 by Matt | Posted in Design, Featured 51 Comments

Ever since the days of print, it has been common to style quotations and cover blurbs with oversized quotation marks floating along the left side. The practice is alive and well in the internet age, though the technique usually used is a background image.

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.

Continue reading →

Thinking Async

Mar 16, 2012 by Matt | Posted in Coding No Comments

I’ve written about loading JavaScript asynchronously in the past, as it’s a great way to decrease load times and prevent hang-ups when third-party scripts don’t load properly. But Chris Coyier has went and compiled the definitive guide. It covers the basic concepts and reasons for doing it, as well as different methods for implementing it; the easy HTML5 way and using embedded scripts to inject a non-blocking call to an external script.

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]

JSFiddle: A Playground for Web Developers

Jan 5, 2012 by Matt | Posted in Coding No Comments

JSFiddle is a sort of interactive pastebin site that I’ve been finding useful lately. It features three panes for entering HTML, CSS and JavaScript, and a fourth where the resulting output is rendered. If you save the workspace, it generates a URL like http://jsfiddle.net/fLP64/ and will even save each revision as you update it. You can share the URL to show off the result, and the other user can play with the code as well.

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.

HTML5 Data Attributes

Nov 21, 2011 by Matt | Posted in Coding No Comments

Have you ever looked at the HTML snippet for Twitter’s Tweet button and wondered what those data-something="loremipsum" attributes were?

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

Awesome Firebug Tricks You May Have Missed

Nov 14, 2011 by Matt | Posted in Design No Comments

Firebug is probably the most invaluable tool in my web development arsenal. (Well, aside from Photoshop. But that has a value: freaking expensive.) I’m not terribly picky about my text editor—after all, I used Notepad for years—though BBEdit is my tool of choice. I still haven’t found anything that works nearly as well as Firebug, and that’s probably the biggest reason why I couldn’t give up Firefox for Chrome.

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.

Continue reading →

Tag Archives: (x)html

TweetRoll