You know when you you’re working on a project and get stuck on something, so you scour the Web for solutions only to find that everyone else seems to be experiencing the exact same thing. Then, after many hours trying everything possible, you finally stumble onto something that seems to work. This time, the project was setting up a secure downloads area for Digging into WordPress. And when I finally discovered a solution, I told myself that it was definitely something I had to share here at Perishable Press.
Apparently, there is much to be desired when it comes to sending proper HTTP headers for file downloads. Different browsers (and not just IE) require different headers, and will error if not present exactly the way they expected. Confounding that equation is the fact that different file types also require specific headers. Then there are issues with sending an accurate (or should I say “acceptable”?) Content-Length headers when file compression is involved. Needless to say, finding a set of headers that works for all file types in all browsers is next to impossible. And I won’t even get into the issues involved with readfile() and large-download file-sizes.
A good designer knows that tables should not be used for layout, but rather for displaying columns and rows of data. HTML enables the creation of well-structured, well-formatted tables, but they’re used infrequently enough to make remembering all of the different elements and attributes rather time-consuming and tedious. So to make things easier, here is a clean HTML5 template to speed-up development for your next project:
<table dir="ltr" width="500" border="1"
summary="purpose/structure for speech output">
<caption>Here we assign header information to cells
by setting the scope attribute.
</caption>
<colgroup width="50%" />
<colgroup id="colgroup" class="colgroup" align="center"
valign="middle" title="title" width="1*"
span="2" style="background:#ddd;" />
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Side</th>
<th scope="col">Role</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Darth Vader</td>
<td>Dark</td>
<td>Sith</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Obi Wan Kenobi</td>
<td>Light</td>
<td>Jedi</td>
</tr>
<tr>
<td>Greedo</td>
<td>South</td>
<td>Scumbag</td>
</tr>
</tbody>
</table>
Ahh, gives me goose bumps just looking at it. You can use this code with any markup language, whether HTML5, HTML 4.1, or any flavor of XHTML. Here is how this basic template looks in the current web page 1 (using different data and with styles removed):
To wrap long URLs, strings of text, and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags):
pre {
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
By default, the white-space property is set to normal. So you might see something like this when trying to force long URLs and other continuous strings of text to wrap:
An excellent way to simplify and streamline your Cascading Style Sheets (CSS) is to take advantage of the many different shorthand properties available to you. Working with a lot of CSS, you eventually memorize these different shortcuts, but every now and then, I find myself needing a quick, straightforward reference for some of the more elaborate property combinations. In this post, I’ll show you the shorthand rules for the following properties:
These are the top 5 on my list of most complicated and frequently used shorthand properties. There are others as well, even in CSS3, but I’ll save those for another post. Alright enough of my narcissistic ramblings – let’s do this thing!
Styling fonts involves a number of individual properties. You can save quite a bit of space using shorthand notation, but be careful to include at leastfont-size and font-family (in that order). Here are all 6 of the font properties along with their default values:
/* font properties with default values */
font-variant: normal
line-height: normal
font-family: varies
font-weight: normal
font-style: normal
font-size: medium
These 6 declaration blocks can be combined into a single shorthand rule, ordered according to W3C specifications:
As you can see, a single line of code is used to replace an entire block. Far more elegant, if not slightly awkward looking. The more I use this syntax, the more I like it.
Many bloggers, designers, and developers take advantage of Google’s free Analytics service to track and monitor their site’s statistics. Along with a Google account, all that’s needed to use Google Analytics is the addition of a small slice of JavaScript into your web pages. For a long time, there was only one way of doing this, and then in 2007 Google improved their GATC code and established a new way for including it in your web pages. Many people switched over to the newer optimized method, but may not realize that there are now three different ways to track your pages with Google Analytics. The latest method uses asynchronous tracking to minimize negative impact on user experience. Let’s take a look at each of these three methods for tracking your web pages with Google Analytics..
Say goodbye to the age-old clearfix hack and hello to the new and improved clearfix method..
The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. I have written about the original method and even suggested a few improvements. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. Specifically, Internet Explorer 5 for Mac is now history, so there is no reason to bother with it when using the clearfix method of clearing floats.
If you operate a website that features lots of code examples, you know how important it is to spend some quality time styling the <pre> element. When left unstyled, wild <pre> tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the <pre> tag quite differently, varying greatly in their default handling of font-sizing, scrollbar-rendering, and word-wrapping. Indeed, getting your preformatted code to look consistent, usable, and stylish across browsers is no easy task, but it certainly can be done. In this article, I’ll show you everything you need to create perfect <pre> tags.
First thangs first
Before getting into it, let’s take a moment to ensure we’re all on the same page. The (X)HTML <pre> element is used to display preformatted text, code, or just about anything else. pre tags are ideal for multiple lines of code or text that need to retain character spacing, display unformatted characters, keep inherent line breaks, and so on.
Web designers can do some pretty cool stuff with HTML 4 and CSS 2.1. We can structure our documents logically and create information-rich sites without relying on archaic, table-based layouts. We can style our web pages with beauty and detail without resorting to inline <font> and <br> tags. Indeed, our current design methods have taken us far beyond the hellish era of browser wars, proprietary protocols, and those hideous flashing, scrolling, and blinking web pages.
As far as we’ve come using HTML 4 and CSS 2.1, however, we can do better. We can refine the structure of our documents and increase their semantic precision. We can sharpen the presentation of our stylesheets and advance their stylistic flexibility. As we continue to push the boundaries of existing languages, HTML 5 and CSS 3 are quickly gaining popularity, revealing their collective power with some exciting new design possibilities.
In addition to your choice collection of “Share This” links, you may also want to provide visitors with a link that enables them to quickly and easily send the URL permalink of any post to their friends via email. This is a great way to increase your readership and further your influence. Just copy & paste the following code into the desired location in your page template:
<a href="mailto:?subject=Fresh%20Linkage%20@%20Perishable%20Press&body=Check%20out%20<?php the_permalink(); ?>%20from%20Perishable%20Press" title="Send a link to this post via email" rel="nofollow">Share this post via email</a>
Within the code, you will need to edit both instances of the string “Perishable%20Press” to reflect your own site name. Note that the “%20” is the encoded equivalent of a blank space, and is required to ensure validation of parameterized query strings. As is, the code will generate an email that is populated with the following information:
Most of us learned how to use “echo()” in one of our very first PHP tutorials. That was certainly the case for me. As a consequence, I never really had a need to visit PHP’s documentation page for echo(). On a recent visit to Perishable Press, I saw a Tumblr post from Jeff about the use of PHP’s shortcut syntax for echo() but somewhere deep in my memory, there lurked a warning about its use. I decided to investigate.
Working a great deal with blacklists, I am frequently trying to isolate and identify problematic code. For example, a blacklist implementation may suddenly prevent a certain type of page from loading. In order to resolve the issue, the blacklist is immediately removed and tested for the offending directive(s). This situation is common to other coding languages as well, especially when dealing with CSS. Identifying problem code is more of an art form than a science, but fortunately, there are a few ways to improve your overall code-sleuthing strategy.
One of the original purposes of Perishable Press involved serving as a “virtual dumpster” for all of my miscellaneous code snippets. Over time, I continued elaborating to greater degrees on the various code recipes that I was posting, until eventually those brief snippet posts evolved into complete, richly detailed articles (at least from my point of view). Now that I enjoy the luxury of writing for an incredible audience, I try to avoid posting anything that doesn’t include an accompanying explanation. “If it’s worth posting, it’s worth explaining,” I always say. When you have people reading your stuff, there is little room for superfluous nonsense, unexplained code snippets, and long-winded introductions. ;)
Even so, every now and then you need to break the rules, shake up the routine, rock the boat, drop some acid, that kind of thing. Lately, I have been doing some deep archiving and have amassed a considerable collection of completely miscellaneous and unrelated chunks of code. There are too many random snippets to spend time sewing together similar functionality, and I really hate deleting perfectly good code. I also hate keeping misfit code chunks lying around in my otherwise pristine digital archive (joking). Fortunately, this dilemma is easily resolved by loosening up and simply dumping the information right here on the site. After all, that’s what it was originally designed for — in fact, the further you dig back into the archives, the more apparently pointless code snippets you will find. So without further ado, I now present a completely random, unexplained, miscellaneous collection of potentially useful code snippets!
Recently, Joost de Valk shared an excellent technique for adding spam and delete buttons to comments on your WordPress-powered blog. The idea is to save administration time by providing links to either “spam” or “delete” individual comments without having to navigate through the WordPress admin area. Joost provides the following plug-n-play solution:
When building web pages, it is often necessary to add links that require parameterized query strings. For example, when adding links to the various validation services, you may find yourself linking to an accessibility checker, such as the freely available Cynthia service:
With the explosion of social media, networking, and bookmarking services, there are a zillion ways to add “Share This Post” functionality to your WordPress-powered sites. In addition to the myriad services and plugins, we can also add these links directly, using nothing more than a little markup and a few choice PHP snippets. Such individual links provide full control over the selection, layout, and styling of each link without requiring the installation of yet another WordPress plugin.
This article shares SEO-friendly code snippets for ten of the most popular social media sites using completely valid XHMTL-Strict markup. All of the following code snippets feature:
My favorite series of articles here at Perishable Press, the “Obsessive CSS Code Formatting” articles explore the esoteric minutia involved with producing clean, well-formatted CSS code. From indention and spacing to opening and closing brackets, the obsessive CSS code series explores techniques and tricks used to transform ordinary stylesheets into streamlined masterpieces of inspiring beauty. Creating poetic CSS integrates the high art of employing consistent coding patterns and formatting methods with the practical functionality of proper syntax, logical structure, and concise delivery. These posts are extremely subjective, opening dialogue concerning the obsessive-compulsive behavior many of us embrace while implementing the powerful and essential coding language that is CSS. So, without further ado, here is a periodically updated list showcasing the all of the currently available articles in the series..
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 :)
In today’s highly competitive blogosphere, every edge counts. There are many aspects of a site or blog that can be easily acquired. Fancy themes may be purchased, nifty plugins are freely downloaded, and even snazzy content is immediately available. Indeed, setting up a decent-looking blog is so easy that virtually anyone can do it. Even so, just spend a little time at most sites and check out a few of the details. How is the writing — grammar, syntax, and punctuation? What about links and images — are they equipped with intelligent titles and alt attributes? As you read through a few posts, do you get a sense that the author has taken the time to fine-tune the content? Unfortunately, many bloggers fail to take the time to focus on the details. Bloggers that do take the time to embellish their content with details provide quality and value to their readers. Fortunately, managing the details is a snap once you find your groove. To begin this series of articles on “Pimping the Details,” let’s focus on one of the more prominent areas of concern: the content of your posts. How many of the following details have found their way into your blogging routine?
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. Over the course of the past few years, I have taken note of several useful bits of information regarding the Easy Clear Method. In this article, I summarize these lessons learned and present a (slightly) enhanced version of the clearfix hack..
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 to me that there are several options going forward..
Option 1: Continue with Google Analytics
The easiest thing for me to do at this point would be to just leave it alone: continue serving the extra 6.3K/21.4K GA JavaScript (i.e., urchin.js) to site visitors. Sure, I may never actually use the volumes of data I am collecting via Analytics, but hey, who cares, right? Of course, delivering the urchin.js file requires bandwidth and other server resources, and also tends to slow things down a bit, especially on those rare occasions when the Google server bogs down.
As some of you (e.g., Louis) may have noticed during the recent site redesign, I decided to switch the default doctype from XHTML 1.0 Strict to XHTML 1.1. Just in case you were wondering, XHTML 1.1 is different than XHTML 1.0 in three important ways 1:
On every element, the lang attribute has been removed in favor of the xml:lang attribute
On the a and map elements, the name attribute has been removed in favor of the id attribute
The “ruby” collection of elements has been added
Beyond these three differences, XHTML 1.1 is identical to XHTML 1.0. Personally, I chose to markup my current design with XHTML 1.1 because of its advancement of the web-standards paradigm: complete separation of structure, behavior, and presentation.
Recently, reader Luke Knowles asked how to customize the sort order of his posts in WordPress. Looking into a solution to this question proved quite enlightening. Within moments I was able to discern 4 methods for modifying post order, and then several days later I discovered 2 additional custom sorting techniques. After updating the reply to Luke’s comment, it seemed like some good information that other WordPressers may find useful. So, here are six ways to customize the sort order of posts in WordPress..
In this article, my goal is to help you optimize WordPress by replacing a few common plugins with their correspondingly effective code equivalents. As we all know, WordPress can be a very resource-hungry piece of software, especially when running a million extraneous plugins. Often, many common plugins are designed to perform relatively simple tasks, such as redirect a feed, display a random image, or return a database value. For those of us comfortable with editing PHP and htaccess code, there is no need to bloat WordPress with additional plugins for the sake of a few routine tasks. For each of the “pure code” alternatives presented below, we are able to drop an unnecessary plugin without editing the WordPress core. In fact, all of the plugin replacements presented here affect only theme files, thereby keeping WordPress updates nice and easy. Well, okay, one or two methods require editing your root htaccess file, but we are all okay with that, right?
A great to way to share your PHP code with visitors is to display it directly in the browser with automatically generated syntax highlighting. Here is a screenshot showing an example of syntax-highlighted PHP code:
Displaying your PHP scripts in syntax-highlighted form is an excellent way to share source code details directly with your readers. Rather than zipping the script and requiring users to download, unzip, and open the file in an editor, displaying your code directly saves you and your visitors time, effort, and hassle. Plus, in my opinion, looking at syntax-highlighted PHP code is a beautiful sight, day or night ;)
In this article, we will explore 5 different ways to display the syntax-highlighted source of your PHP scripts. Three of the methods are designed to highlight entire files, and the other two are aimed directly at highlighting individual strings of PHP code. All of these methods employ PHP’s built-in syntax highlighter.
Of the handful of these tips that I am able (or willing) to follow, number 6 — move scripts to the bottom — is definitely one of the easiest. The reason for doing this is at least twofold:
[…] it’s better to move scripts from the top to as low in the page as possible. One reason is to enable progressive rendering, but another is to achieve greater download parallelization. — Yahoo! Developer Network
Many people mistakenly assume that the <script> element (and associated contents) must be located squarely in the document <head>, however, this simply isn’t true. As outlined in the official HTML 4.01 Document Type Definition and also in the official XHTML 1.1 Document Type Definition, the <script> element is allowed:
A good designer knows that tables should not be used for layout, but rather for displaying columns and rows of data. HTML enables the creation of well-structured, well-formatted tables, but they’re used infrequently enough to make remembering all of the different elements and attributes rather time-consuming and tedious. So to make things easier, here is a clean HTML5 template to speed-up development for your next project:![[ Google Analytics ]](http://perishablepress.com/press/wp-content/images/2010/misc-chunks/google-analytics.png)
Many bloggers, designers, and developers take advantage of ![[ Electrical Surge ]](http://perishablepress.com/press/wp-content/images/2009/misc-chunks/html-css-power.jpg)
![[ ~{*}~ ]](http://perishablepress.com/press/wp-content/images/2009/misc-chunks/email-permalinks.gif)
In addition to your ![[ Echo Shortcut Code ]](http://perishablepress.com/press/wp-content/images/2009/misc-chunks/echo-shortcut.gif)
Most of us learned how to use “![[ Miscellaneous Color Slices ]](http://perishablepress.com/press/wp-content/images/2008/misc-chunks/misc-snippets.jpg)
One of the original purposes of ![[ ~{*}~ ]](http://perishablepress.com/press/wp-content/images/2008/misc-chunks/social-media-deco.gif)
With the explosion of social media, networking, and bookmarking services, there are a zillion ways to add “Share This Post” functionality to your WordPress-powered sites. In addition to the myriad ![[ Globe Icon ]](http://perishablepress.com/press/wp-content/images/2008/misc-chunks/global-reset_.gif "Global Styles")
Just a note to let everyone know that I have updated my previous CSS reference article, ![[ ~{*}~ ]](http://perishablepress.com/press/wp-content/images/2008/misc-chunks/details-deco.gif)
In today’s highly competitive ![[ Image: Global Map Icon ]](http://perishablepress.com/press/wp-content/images/2008/misc-chunks/google-analytics_.gif)
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 ![[ Graphic: Inverted Triangular Fractal ]](http://perishablepress.com/press/wp-content/images/2008/misc-chunks/customized-fractal.gif "Organizational Bliss")
Recently, reader ![[ Photo: Macro shot of a Yttrium claw ]](http://perishablepress.com/press/wp-content/images/2007/misc-chunks/yttrium-plugin.jpg "Unplug Unnecessary Plugins")
In this article, my goal is to help you optimize WordPress by replacing a few common plugins with their correspondingly effective code equivalents. As we all know, ![[ Screenshot: PHP code snippet in syntax-highlighted form ]](http://perishablepress.com/press/wp-content/images/2007/misc-chunks/syntax-highlight.gif "The colors applied to the various code elements are automatically generated via the PHP engine")
