In this article, I discuss the different MIME types available for XHTML and explain a method for serving your documents with the optimal MIME type, depending on the capacity of the user agent. Using either htaccess or PHP for content negotiation, we can serve complete, standards-compliant markup for our document’s header information. This is especially helpful when dealing with Internet Explorer while serving a DOCTYPE of XHTML 1.1 along with the recommended XML declaration.
According to the RFC standards 1 produced by IETF 2, web documents formatted as XHTML 3 may be served as any of the following three MIME types:
In a previous article, I explain how to redirect your WordPress feeds to Feedburner. Redirecting your WordPress feeds to Feedburner enables you to take advantage of their many freely provided, highly useful tracking and statistical services. Although there are a few important things to considerbeforeoptimizing your feeds and switching to Feedburner, many WordPress users redirect their blog’s two main feeds — “main content” and “all comments” — using either a plugin or directly via htaccess. Here is the htaccess code as previously provided here at Perishable Press:
Dubbed “undohtml.css”, Tantek’s CSS Reset is a solid choice for removing many of the most obtrusive default browser styles. This reset removes underlines from links and borders from linked images, eliminates padding and margins for the most common block-level elements, and sets the font size to 1em for headings, code, and paragraphs. As an added bonus, Tantek’s reset also “de-italicizes” the infamous address element! Nice :)
Alright, time for another “How’d-you-do-that-thing-on-your-site?” post. This question comes from the one and only Mr. Graham of ImJustCreative.com. In a recent email, Graham literally begged me to share my “secret recipe” for displaying my latest Twitter Tweets (wow, did I actually just say that?) right here on Perishable Press:
…Would be really really decent of you if you could let me know how to do it? Pretty please? How do you call the last twitter feed, what commands do you need etc?
In case you have no idea what we’re talking about here, scroll down to the bottom of any page on the site (using the current theme) and observe the savviness and sophistication of my latest Twitter post, updated automagically every fifteen minutes. Or, for those of you too lazy to “go there,” here is a screenshot demonstrating the perpetual Twitter display:
Recently, a reader named Donasked about this theme’saccessibility(accesskey) jump menulocated at the top of each page. Several people have commented that they like the way the jump menu “lights up” upon gaining focus. Whenever a user hovers their cursor over the region at the top of the page, all links in the jump menu change to a more visible color. Then, as the cursor moves over the various menu items, each jump link is further highlighted with an even brighter color and an underline. This progressive focusing is best seen in browsers that support the CSS :hover pseudo-class (e.g., Firefox, Opera, etc.), however the menu remains useful even in CSS-challenged browsers (e.g., Internet Explorer). In this article, I explain how the Perishable Press jump menu is built using Web standards via CSS and (X)HTML, and then provide the specific code required to emulate the jump menu as it appears here at Perishable Press.
We all know how important it is to deliver sensible, helpful 404 error pages to our visitors. There are many ways of achieving this functionality, including the well-known htaccess trick used to locally redirect users to custom error pages:
..and so on. These directives basically tell Apache to deliver the designated documents for their associated error types. Many webmasters and developers employ this trick to ensure that visitors receive customized error pages that are generally more user-friendly or design-specific than the rather unfriendly Apache defaults. Serving custom error pages is an excellent way to enhance overall site usability and accessibility, but there are several other useful techniques to consider as well.
After upgrading WordPress from version 2.0.5 to 2.3.3, I did some experimenting with the “post autosave” feature. The autosave feature uses some crafty ajax to automagically save your post every 2 minutes (120 seconds by default). Below the post-editing field, you will notice a line of text that displays the time of the most recent autosave, similar to the following:
Surely, this relatively new feature provides an added layer of protection against lost work, but all is not perfect (yet) in the world of automatically saved content.
Several months ago, I lost several hours of work because the autosave feature completely failed to work, despite the periodically reassuring “Saved at..” message. After working for several hours with a false sense of security, WordPress choked and my post had vanished. In shock, I scoured the database for any trace of my recent efforts, but to no avail. The entire post had disappeared into the void. Utterly devastated and disillusioned, I decided to investigate the so-called “autosave” feature, learn what had happened, and take steps to avoid such travesty in the future. Here is a summary of my investigation..
Not too long ago, I played with the idea of releasing article content under a Creative Commons (Attribution-NonCommercial-ShareAlike 2.0) License. At the time, I wanted to host my own copies of the two associated CC license pages. During the process of uploading the pages to my own server, several minor adjustments (regarding image paths, etc.) needed to be made to the source code. After tweaking a few things in the XHTML code, I began snooping around in the pages’ CSS files. Eventually, I found myself rewriting the entire CSS and XHTML files for both documents. Although this sort of activity is not unusual for me to do, I admit that it is borderline obsessive/compulsive and perhaps even a bit paranoid. Nonetheless, the reworked CSS and XHTML documents are cleaner, less redundant, and better optimized (in my humble opinion) than the originals. Further, the remixed pages are fine-tuned with a hyper-critical design aesthetic. To my eye, they present much tighter than the original versions. But hey, that’s what the spirit of Creative Commons is all about, right? Sharing, remixing, and improving content? In any case, redesigning these pages was good fun and good practice, even though I have since decided against licensing any of my content via Creative Commons 1. So, rather than simply deleting these brief redesign exercises, I have decided to post them online and share them with anyone who might be interested in such esoteric dabblings. You never know who might find them useful! ;)
This article will help beginners understand a few “feed” essentials: what they are, how they work, and how to use them..
So you are a little new to the Web. As you surf around, you keep noticing these little orange squares and multicolored boxes placed next to phrases such as these:
Subscribe via RSS
Subscribe via XML
Subscribe via Atom
Subscribe via Feedburner
Subscribe to My Feed
Subscribe to Main Content
Subscribe to Comments
..and so on. Although these invitations to “subscribe” come in many flavors, they are all basically doing the same thing: enabling visitors to receive information from the site without having to manually visit the site itself. By subscribing to your favorite sites, you can stay current with updated content delivered to the “feed reader” of your choice. There are many feed readers freely available around the Web. In many cases, you can even have feed subscriptions delivered directly to your email account. We’ll talk more about different types of feed readers here in a bit. For now, let’s examine a few different types of feeds and how they might be used.
After investigating some unusual 404 errors the other day, I found myself digging through the WordPress Admin trying to locate the “Subscribe to Comments” options panel. As it turns out, administrative options for the Subscribe to Comments plugin are split into two different areas. First, the S2C plugin provides configuration options under “Options>SubscribetoComments”, which enables users to tweak everything from subscription messages to custom CSS styles. New to me was the other half of the S2C administration area: the Subscription Manager! Carefully hidden under “Manage>Subscriptions”, the Subscription Manager provides several useful ways to filter your email subscribers:
For future reference, this article covers each of the many ways to access your WordPress-generated feeds. Several different URL formats are available for the various types of WordPress feeds — posts, comments, and categories — for both permalink and default URL structures. For each example, replace “http://domain.tld/” with the URL of your blog. Note: even though your blog’s main feed is accessible through many different URLs, there are clear benefits to using a single, consistent feed URL throughout your site.
Welcome to the Perishable Press “Blacklist Candidate” series. In this post, we continue our new tradition of exposing, humiliating and banishing spammers, crackers and other worthless scumbags..
Imagine, if you will, an overly caffeinated Bob Barker, hunched over his favorite laptop, feverishly scanning his server access files. Like some underpaid factory worker pruning defective bobble heads from a Taiwanese assembly line, Bob rapidly identifies and isolates suspicious log entries with laser focus. Upon further investigation, affirmed spammers, scrapers and crackers are swiftly blacklisted from future access. For the most heinous offenders, we suddenly hear Rod Roddy’s guzzling voice echo throughout the room:
“Candidate number 2008-03-09, COME ON DOWN!! — you’re the next contestant to get blacklisted from the site!”
Every week, I dig through my access and errorlogs to learn from the spammers, scrapers, and other cracker whores. Typically, attempts to exploit potential security vulnerabilities demonstrate the following characteristics:
Believe it or not, one of my most popular posts here at Perishable Press is an article I wrote about a counterfeit Slifer Yu-Gi-Oh! card. Since its publication, I have received some very interesting information regarding the apparently extensive market for fake Yu-Gi-Oh! cards. Recently, reader Deana wrote to share her experience with an eBay purchase of a “very good counterfeit” Slifer card on eBay.
As a savvy Yu-Gi-Oh! collector, Deana has purchased “some really great cards” on eBay. For example, she once scored an authentic, 70-dollar DDS-001 Blue-Eyes White Dragon card for about 35 bucks. She says that obtaining legitimate high-value cards through eBay is “really and truly a luck of the draw.” Even worse, many eBay shoppers may have purchased counterfeit Yu-Gi-Oh! cards without even realizing it. As Deana explains, the subtle differences between “real” and “fake” cards are not “something you would notice unless you are a collector.”
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..
Ever since writing that last review article, I have been feeling the need to cut loose, relax, and blog about something a little more “down-to-earth,” like recent things that have been happening around here. If you are new to Perishable Press, rest assured that I try to keep these “site/personal news” update posts down to a minimum. Whenever possible, I save up a bunch of interesting off-topic things that I want to talk about, and then cram them all together into a multipurpose article like this one. I have found that consolidating and summarizing multiple news items into one post helps keep noise to a minimum while providing a more complete “snapshot” of current events. That said, let’s see what’s been happening ‘round here lately..
Toggle High Contrast Style
Due topopulardemand, I have implemented an alternate “high-contrast” CSS stylesheet for the current theme. If you find the content difficult to read due to the low-contrast, “grey-text-on-black-background,” click on the small sun icon located in the lower-right corner of the browser window to brighten things up a bit. Conversely, to restore the original (dark) appearance, click on the moon icon in the same location. This “toggle-contrast” functionality has been around for awhile, but I have not found the opportunity to mention it until now.