Spring Sale! Save 15% on my WordPress books with coupon code: SPRING2018 Shop Books »

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: 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 »

Optimizing Google Analytics Performance

It has occurred to me lately that I no longer use Google Analytics for Perishable Press. Instead, I find myself keeping an eye on things using Mint almost exclusively. So, the question now is: do I continue serving the GA JavaScript to keep the profile active just in case I ever need the additional stats? I mean, Mint already does a great job at recording all of information I could ever need, so I no longer see the use for Google Analytics. I do wonder, however, if Google ranks GA-enabled sites a bit higher than non-GA sites. Hmmm.. it seems […] Read more »

Quick JavaScript Tip: Auto-Highlight Form Inputs and Textareas

I realize that probably everybody already knows this elementary and absolutely dead-simple JavaScript tip, but I was surfing around the other day and encountered a page that made great use of some auto-highlighted textarea content. The idea is simple, include a snippet of JavaScript to enable users to automatically highlight/select upon focus any chunk of text located within a form input or textarea element. Read more »

RefreshMints: Refresh Stats Bookmarklets for Mint 2

Last week, I finally got around to upgrading to Mint 2.14. The new version is quite impressive, and well worth the time (and cash) spent upgrading. In the process, however, one of my favorite, most heavily used bookmarklet things ceased to work. Before the upgrade, I had been enjoying the highly useful Refresh-All bookmarklet by Jonathan Snook. Snook’s Mint-refresh bookmarklet made it super-easy to update all Mint data panels without having to refresh the entire page. Using the bookmarklet is much faster that reloading the browser, and there is even an alternate version that will refresh panels automatically at user-specified […] Read more »

Prevent JavaScript Elements from Breaking Page Layout when Following Yahoo Performance Tip #6: Place Scripts at the Bottom

By now, everyone is familiar with the Yahoo Developer Network’s 14 best-practices for speeding up your website. Certainly, many (if not all) of these performance optimization tips are ideal for high-traffic sites such as Yahoo or Google, but not all of them are recommended for smaller sites such as Perishable Press. Nonetheless, throughout the current site renovation project, I have attempted to implement as many of these practices as possible. At the time of this writing, I somehow have managed to score an average 77% (whoopee!) via the YSlow extension for Firebug. Read more »

The Ultimate JavaScript Library for Embedding Flash Content

Earlier this year, Geoff Stearns and Bobby van der Sluis teamed up to create the “ultimate JavaScript library for embedding Flash content” into web documents. For those of you familiar with techniques for embedding Flash, these two names are instantly recognizable. Geoff Stearns is the author of SWFObject and Bobby van der Sluis is the author of UFO. Easily, SWFObject and UFO are the two best and most widely used techniques for detecting and embedding Flash content. Needless to say, when I heard that these two great minds were collaborating on an even better method to embed Flash, I was […] Read more »

Slideshow Code for Dead Letter Art

Pardon this post! I am posting this information online for personal references purposes. I may need to revisit this code at some point in the future, and if I post it here I will always know where to find it (trust me, it would disappear into the abyss if I tried storing it offline). So, although it is intended solely for myself, feel free to extract and use anything you like, as long as commented attribution remains. What we have here are two different methods for including a slideshow on a web page. The first method employs the techniques discussed […] Read more »

Another Mystery Solved..

Recently, after researching comment links for an upcoming article, I realized that my default <input /> values were being submitted as the URL for all comments left without associated website information. During the most recent site redesign, I made the mistake of doing this in comments.php: … <input class=”input” name=”url” id=”url” value=”[website]” onfocus=”this.select();” type=”text” tabindex=”3″ size=”44″ maxlength=”133″ alt=”website” /> … Notice the value=”[website]” attribute? It seemed like a good idea at the time — I even threw in a nice onfocus auto-highlighting snippet for good measure. I ran the form with this in place for around eight weeks before finally […] Read more »

Absolutely Fabulous Browser Bookmarklet Things

..Or something. Frankly, I just needed an excuse to post these steaming little beauties online. Please note that I don’t lay claim to most of these browser bookmarklet/favelet tricks, but I do find them extremely useful. They are posted here for the sake of convenience and for reference purposes, so use at your own risk (i.e., I am not responsible if they crash your browser). Although I use most of these bad boys with Firefox, I wouldn’t be terribly surprised if they also functioned properly in other modern browsers. Nonetheless, along with each bookmarklet/favelet thing, I try to provide as […] Read more »

CSS Throwdown: Preload Images without JavaScript

Clean, easy, effective. You don’t need no stinking JavaScript to preload your images. Nope. Try some tasty CSS and (X)HTML instead! Here’s how.. (only two steps!) Step 1 — Place this in your CSS file: div#preloaded-images { position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px; } Step 2 — Place this at the bottom of your (X)HTML document: <div id=”preloaded-images”> <img src=”https://perishablepress.com/image-01.png” width=”1″ height=”1″ alt=”” /> <img src=”https://perishablepress.com/image-02.png” width=”1″ height=”1″ alt=”” /> <img src=”https://perishablepress.com/image-03.png” width=”1″ height=”1″ alt=”” /> </div> ..and that’s a wrap! All images are preloaded and ready for calling as you please. Completely valid, […] Read more »

Compressed JavaScript Compression

In this article, we extrapolate our favorite CSS-compression technique for JavaScript. Below, we outline the steps required to auto-compress your JavaScript documents via gzip and PHP. Two different compression methods are presented. The first method does not require htaccess, but rather involves the manual editing of JavaScript files. The second method employs htaccess to do all the work for you, thus requiring much less effort to implement. In either case, the result is the same: automatically compressed content delivered only to supportive browsers, resulting in reduced bandwidth, faster loading times, and smiling visitors :) Read more »

Embed Flash or Die Trying

Embed Flash or Die Tryin’ Web designers and developers looking to embed Flash content into a web page currently enjoy a wide variety of methods from which to choose. The most common methods vary along several key dimensions, including standards-compliance, user-friendliness, and universal support. Some methods make it easy to provide alternative content, others enable auto-activation of Flash content, while others feature plugin-detection functionality. In an attempt to round-up the myriad techniques, this article presents nine of the most useful, practical, and popular methods for embedding Flash content. Read more »

Flash-Detection Triple-Threat

In our previous article, Alternate JavaScript Slideshow for SlideshowPro, we present an elaborate method for providing alternate content specifically for SlideshowPro. Although the method points toward a more generalized adaptation, its overall functional implementation remains focused on the presentation of slideshows. Read more »

Latest Tweets About halfway thru new design of Perishable Press. Turning out to be a LOT more work than originally planned.. upda… twitter.com/i/web/status/10142…