New book on WordPress Theme Development: WordPress Themes In Depth

Targeting External Links Intelligently

In the beginning… In the time of the dinosaurs, HTML authors controlled the way anchors opened by adding target=”_blank” as an attribute on an anchor tag. Then the molten mass of Internet began to cool into the thin crust of Web 2.0, the continents began to separate and there came a great migration of pages from HTML to the shinier, new XHTML. Most authors didn’t know what that meant, but it had an “X” in it, so it must be cool, they thought. Alas, there came a great despair as the beloved target=”_blank” attribute was no longer looked kindly upon […] Read more »

New and Improved JavaScript Clock

Earlier this year, I posted an article explaining how to implement an unobtrusive JavaScript dynamic clock. While not completely earth-shattering or cutting-edge or anything like that, the dynamic JavaScript clock has received some great feedback from users who found the script to be exactly what they were looking for. In fact, a couple of weeks ago, Bill Brown went above and beyond by taking the time to improve the script with some great new features, including a “blinking seconds separator (for kicks)” and removal of “the need for the noscript tag.” Here is the complete script sent by Bill in […] Read more »

Unobtrusive JavaScript: 5 Ways to Remove Unwanted Focus Outlines

I recently wrote about how to remove unwanted link outlines using a pure-CSS method that works on every modern browser except (wait for it) ..Internet Explorer 6! Yes, that’s right, another reason why (almost) everyone is pushing hard to eliminate Internet Explorer from existence. Nonetheless, removing those pesky unwanted link outlines in IE6 is not possible with CSS, but it’s a snap with a little JavaScript. Here are four unobtrusive JavaScript techniques (plus one CSS-only method thrown in for good measure) for removing unwanted focus outlines. Read more »

Save Bandwidth by Serving jQuery, MooTools, Prototype via Google’s AJAX Libraries API

A great way to save bandwidth is to take advantage of Google’s AJAX Libraries API to serve your favorite open-source JavaScript libraries. Here is how Google explains it in their official documentation: The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the google.load() method, your application has high speed, globally available access to a growing list of the most popular JavaScript open source libraries. Read more »

The Ultimate Guide to swfIR Image Replacement

In this ultimate guide to swfIR, you will learn how to use swfIR to replace your ordinary images with richer, stylized graphics. swfIR enables efficient, practical and scalable application of drop-shadows, rounded corners, and even image rotation to any number of specified images throughout your site. From concept and application to examples and recipes, this guide covers everything you need for successful swfIR implementation. The Challenge.. There are many ways to enhance the visual presentation of your images. Popular visual effects include rounded corners, drop shadows, and image rotation. To achieve these effects, designers often use either CSS, direct image […] Read more »

IE6 Support Spectrum

I know, I know, not another post about IE6! I actually typed this up a couple of weeks ago while immersed in my site redesign project. I had recently decided that I would no longer support that terrible browser, and this tangential post just kind of “fell out.” I wasn’t sure whether or not to post it, but I recently decided to purge my draft stash by posting everything for your reading pleasure. Thus, you may see a few turds in the next few weeks, but hopefully this isn’t one of them. In any case, here is my final post […] Read more »

How to Deal with IE 6 after Dropping Support

As announced at IE Death march*, I recently dropped support for Internet Explorer 6. As newer versions of Firefox, Opera, and Safari (and others) continue to improve consistency and provide better support for standards-based techniques, having to carry IE 6 along for the ride — for any reason — is painful. Thanks to the techniques described in this article, I am free to completely ignore (figuratively and literally) IE 6 when developing and designing websites. Now that I have dropped support for IE 6, I feel liberated, free of the constraints that once enslaved my time, energy, and resources. Working […] Read more »

Beware of Margins or Padding when Using the min-width Hack for IE

While we all watch as Internet Explorer 6 dies a slow, painful death, many unfortunate designers and developers continue to find themselves dealing with IE6’s lack of support for simple things like minimum and maximum widths. Fortunately, there are solutions to this problem, primarily in the form of CSS expressions such as this: /* set the minimum width for IE 6 */ #target_element { width: expression((document.body.clientWidth < 335)? “333px” : “auto”); /* min-width for IE6 */ min-width: 333px; /* min-width for all standards-compliant browsers */ } Although ugly, invalid, and resource-intensive, this technique works well at setting min-width properties for […] Read more »

Unobtrusive JavaScript: Auto-Clear and Restore Multiple Form Inputs on Focus

In an effort to organize my pile of offline notes, I will be posting a number of quick, “to-the-point” tutorials on a number of useful topics. In this post, I share an excellent method for auto-clearing and restoring multiple form field inputs using a bit of unobtrusive JavaScript. This method was discovered at xy.wz.cz. There are two steps to this technique, which should take no longer than five minutes to implement. Read more »

Use Your Browser to Edit Any Live Web Page Using a Single Line of JavaScript

This was just too juicy to pass up. Blogstorm recently blogged about an easy JavaScript technique for making any website editable (404 link removed 2012/06/04). After checking it out for myself, I just had to share it here at Perishable Press. Here it is: javascript:document.body.contentEditable=’true'; document.designMode=’on'; void 0 Paste that single line of code into the address bar of any modern browser and have fun editing the page. Obviously, any changes will only apply to the page as seen in your browser, not the original document. Even so, it’s a fun trick to play around with, snap screenshots, be creative, […] Read more »

CSS Hackz Series: Clearing Floats with the Clearfix Hack

I use the CSS clearfix hack on nearly all of my sites. The clearfix hack — also known as the “Easy Clearing Hack” — is used to clear floated divisions (divs) without using structural markup. It is very effective in resolving layout issues and browser inconsistencies without the need to mix structure with presentation. There are countless variations of the clearfix hack around the Web, and for some sad reason, I keep a file updated with all of them. Recent pruning of my clearfix collection yields two excellent float-clearing techniques: First clearfix method: addresses several reported rendering and display bugs […] Read more »

How to Cache Mint JavaScript

NOTE: This post was written many months ago under the erroneous assumption that caching Mint’s JavaScript was a good idea (for Y-Slow compliance, performance, et al); however, after a brief chat with the man himself, Shaun Inman, I was quickly informed that this was a bad idea: caching Mint JavaScript files will cause Mint to stop functioning. But, for what it’s worth, and for the sake of retaining potentially useful information, I present the original article here for your amusement.. Recently, I spent some time addressing a few of the performance issues pointed out by Yahoo!’s very useful YSlow extension […] Read more »

CSS Hackz Series: PNG Fix for Internet Explorer

In this CSS Hackz Series article, I outline several solutions for displaying alpha-transparent PNG (a.k.a. PNG-24 format) images in everybody’s favorite broken browser, Internet Explorer. Specifically, IE versions through 6 (excluding IE 5 for Mac) fail to support alpha-channel transparency for PNG images. In these versions of IE, every pixel containing alpha-transparency is displayed with an ugly, flat gray color. Fortunately, there are plenty of hacks and workarounds designed to “fix” IE’s PNG image-display problem. Unfortunately, every currently available solution requires the use of Microsoft’s proprietary AlphaImageLoader transparency filter 1. Thus, if you need to display translucent PNG images in IE, […] Read more »

CSS Hackz Series: Minimum Width, Maximum Width for Internet Explorer 6

Opening the CSS Hackz series is the infamous CSS-expression hack for achieving minimum and maximum widths in Internet Explorer 6. Here is how to set the maximum width for IE 6: #target_element { width: expression((document.body.clientWidth > 778)? “777px” : “auto”); max-width: 777px; } Here is how to set the minimum width for IE 6: #target_element { width: expression((document.body.clientWidth < 335)? “333px” : “auto”); min-width: 333px; } Read more »

Toggle Element Visibility via JavaScript

Recently, while restoring the popular Jupiter! WordPress theme, which several readers use to “skin” the Perishable Press website, I found myself searching for a simple, effective JavaScript technique for toggling element visibility. Specifically, I needed to accomplish the following design goals: Users should be able to toggle the visibility of any division containing post-meta information The post-meta information should remain visible by default and when JavaScript is unavailable The JavaScript should be as unobtrusive as possible, requiring minimal scripting in the markup Here are a couple of screenshots demonstrating this repetitious toggling functionality as employed in the Jupiter! theme (click […] Read more »

Unobtrusive JavaScript Dynamic Clock

In this tutorial, I present an easy way to add a little extra flair to your site by adding some dynamic clock functionality. Using unobtrusive JavaScript, a bit of (X)HTML markup, and a dash of PHP (optional), we will create a dynamic clock that degrades gracefully to a static date/time-stamp when JavaScript is unavailable. No need to get all verbose with this one, so let’s dive right in.. Read more »

Latest Tweets Taking some time at the end of the year to recharge, refresh, and renew. Gonna triple my efforts in 2015 :)