Ellipses and interrobangs and em-dashes, oh my!
Typography is one of the most overlooked aspects of Web design—and I'm not talking about fonts, kerning, and x-heights. I'm talking about proper use of glyphs—the individual letters, numerals, and (especially) punctuation marks that make up all written text. There are proper and improper ways to use each glyph—and even large, well-funded websites often get it wrong.
This isn't surprising—even if a site's designer is trained in the specialized discipline of typography (which is unlikely), the person who actually marks up the content (or pastes it into the content management system) probably isn't. But the fact remains that poor typography is one of the most common and most easily avoided blemishes on the web.
Password Security for Web Applications 101
User registration and login is a standard feature on interactive Web sites, and passwords are the standard way to protect those accounts. But a password is only effective as long as it's kept secret—and you might not be doing everything you can to protect yours.
Let's say you've finished building the HTML and the server-side validation code for your registration form, and you're now ready to write the code which stores the user's information (probably in a database). How should you handle the password?
Conditional comments for iPhone
You're probably familiar with IE's conditional comments. They allow us to feed special code to that special browser to overcome its many bugs and deficiencies.
Is there something similar for iPhone? Not exactly, but we can achieve the same end:
<!--[if !IE]><!--> <link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" /> <!--<![endif]-->
Simulating HTML5's placeholder attribute with jQuery
I recently discussed the placeholder attribute in HTML5. Today, I needed exactly such a behavior for a site I'm working on, so I knocked together a reusable, unobtrusive solution with jQuery.
Forms in HTML5
The HTML5 spec continues to grind inexorably toward publication. I've just spent a while with the latest draft, and at least with respect to forms, I like what I see. Here's a roundup.
Toward Better Buttons
I see this a lot:
<input type="submit" class="button" value="Save Changes" />Because the <input /> element can represent many things other than a button—and because many browsers still don't support attribute selectors, such as input[type=button]—the author has added class="button" for the sole purpose of giving the stylesheet something to match on.
May I suggest a better way?
target="_blank" for XHTML Strict
For better or for worse, it's a widespread convention for offsite links to open in a new window. This is usually achieved by setting the attribute target="_blank" on the link in question.
Of course, the target attribute is illegal in XHTML Strict—so this bit of functionality of will invalidate your pages.
I whipped up a simple fix to this problem. Here's the demo and download page.
Three essential Firefox extensions for web developers
Firefox is beloved by web developers for its compliance with W3C standards, its open-source nature, and its general awesomeness. But its vast library of genuinely useful extensions and Greasemonkey scripts is surely a big part of the attraction, too. Here are three that I couldn't live without.
Styling horizontal rules in Internet Explorer 6 & 7
Scott Klarr has a nice post about the difficulties of styling horizontal rules with CSS—owing mainly, of course, to problems in Internet Explorer.
In short, IE 6 and 7 insist on putting a border around horizontal rules, no matter how you set up your stylesheet.
Scott offers a simple but elegant solution which relies on jQuery. That's fine if you're already using jQuery in your project, but if you're not, it's hard to justify the extra payload to fix a simple cosmetic issue.
I've written a standalone version of Scott's script. At less than 350 bytes, it's a very lightweight solution, and it's easy to implement. Here's a demo page. As Scott's post explains, it simply replaces all <hr /> elements with <div class="iehrfix"></div> in the affected versions of IE.
PECL DLLs
After searching high and low for a DLL version of the PDFLib PECL extension (pecl4win.php.net is down, and apparently has been for a while), I stumbled across this blog post, which offers ZIP files of both thread-safe and non-thread-safe versions of all PECL DLLs.
