Dec 27, 2013 by Matt | Posted in Coding
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
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.)
border: 1px solid #ccc;
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;
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.
Dec 11, 2013 by Matt | Posted in Software & Scripts
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.
Apr 3, 2013 by Matt | Posted in Design
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 (
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
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
Jul 17, 2012 by Matt | Posted in Coding, Featured
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 →
Apr 24, 2012 by Matt | Posted in Design, Featured
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 →
Mar 16, 2012 by Matt | Posted in Coding
Thinking Async [CSS-Tricks]
Jan 5, 2012 by Matt | Posted in Coding
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.
Nov 21, 2011 by Matt | Posted in Coding
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>
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.
HTML 5 data- Attributes [John Resig]
Nov 14, 2011 by Matt | Posted in Design
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 →
Jul 15, 2011 by Matt | Posted in Social Media
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]