Articles tagged as “code”

Here is a list of all articles tagged as “code”. If you enjoy the high-quality content that I provide here at Perishable Press, you may want to subscribe to our main content feed to stay current.

HTML5 Table Template

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: Update, June 9th: Here is an absolute basic vanilla template for any markup language. Update, June 9th: Here is a better template for HTML5. For ...

Wrapping Long URLs and Text Content with CSS

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 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+ */ } See ...

Top 5 CSS Shorthand Properties

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: Font Properties List Properties Background Properties Border and Outline Properties Transition Properties (CSS3) These are the top 5 on my list of most complicated ...

3 Ways to Track Web Pages with Google Analytics

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 ...

The New Clearfix Method

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 ...

Perfect Pre Tags

If you operate a website that features lots of code examples, you know how important it is to spend some quality time styling the element. When left unstyled, wild tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the 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 tags. First thangs first Before getting into it, let’s take a moment to ensure we’re all ...

The Power of HTML 5 and CSS 3

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 and 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 ...

WordPress Tip: Valid, SEO-Friendly Email Permalink Buttons

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

PHP Short Open Tag: Convenient Shortcut or Short Changing Security?

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. My first ...

The Halving Method of Identifying Problematic Code

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. Firstly, think. I know this sounds trivial, but too many times do we as designers and developers get ...

Miscellaneous Code Snippets for WordPress, Windows, and Firefox

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 ...

Backwards-Compatible Spam and Delete Buttons for WordPress

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: // add this code to your theme's function.php file:...

How to Write Valid URL Query String Parameters

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: WCAG Accessibility Check Another example is seen when linking your feed to a feed validation service: RSS Feed Validation And one final example showing a more complex query string: Bookmark at Delicious As is, however, these links won’t validate due to a number of issues. Let’s fix ‘em up with a few quick-and-easy changes. Replace ampersands with & One of the reasons these links aren’t ...

Fully Valid, SEO-Friendly Social Media Links for WordPress

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 ...

Series Summary: Obsessive CSS Code Formatting

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 ...

More Killer CSS Reset Styles

Just a note to let everyone know that I have updated my previous CSS reference article, A Killer Collection of Global CSS Reset Styles. The updated version features two more excellent CSS resets, as well as the updated Meyer reset and a link to Eric’s official CSS Reset page. The two new reset styles are the Tripoli Reset and Tantek’s Reset: Tantek’s CSS Reset Dubbed “...

Pimping the Details, Part 1: Post Content

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 ...

Lessons Learned Concerning the Clearfix CSS 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. 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 ...

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 ...

What is the Difference Between XHTML 1.0 Strict and XHTML 1.1?

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 ...

6 Ways to Customize WordPress Post Order

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 ...

Optimize WordPress: Pure Code Alternatives for 7 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, 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 ...

5 Easy Ways to Display Syntax Highlighted PHP Code

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 ...

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!) ...

A Killer Collection of Global CSS Reset Styles

Using CSS to style semantically meaningful (X)HTML markup is an important key to modern web design practices. In a perfect world, every browser would interpret and apply all CSS rules in exactly the same way. However, in the imperfect world in which we live, quite the opposite frequently happens to be the case: many CSS styles are displayed differently in virtually every browser. Many, if not all, major modern browsers (e.g., Firefox, Opera, Internet Explorer, Netscape, et al) implement their own generalized CSS rules, which ...