Wrapping up 2012, I finally launched xyCSS, which is all about responsive, grid-based design. To showcase xy.css, I used it to design WP-Mix.com, which also serves to house a growing collection of choice code snippets. Currently WP-Mix features over 100 snippets, tutorials, and other useful bits to help with WordPress development and web design in general. The topics are similar to those at Perishable Press (e.g., WordPress, PHP, JavaScript, CSS, etc.), but the posts are less-involved and aimed at intermediate […] Continue reading »
My previous theme sports the now-infamous colorized categories, which aim to help visitors navigate featured content. In addition to the colors, featured categories display contextually relevant navigation, popular posts, and related tags. It’s a great way to improve organization and get more of your content in front of the visitor. To make it happen, a variety of tasty WordPress code snippets are used, including versatile theme functions that enable getting the first category link, displaying sub-categories of the current category, […] Continue reading »
Converting small images to data-URLs is a great way to eliminate HTTP requests and decrease loading time for your pages. Using PHP‘s base64_encode() and base64_decode() functions, we have the power to convert images to data-URLs and vice-versa. This article explains how it all works, and shows some different ways of converting back and forth between original and encoded images. Continue reading »
Adding box shadows is a great way to bring depth and focus to your design. You have probably seen this trick before: .selector { -webkit-box-shadow: 0 3px 5px #333; -moz-box-shadow: 0 3px 5px #333; box-shadow: 0 3px 5px #333; } Continue reading »
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 […] Continue reading »
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.. Continue reading »
Quick tutorial post today. 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></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+ […] Continue reading »
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: Continue reading »
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 […] Continue reading »
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 previously about the original clearfix 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 […] Continue reading »
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></pre> element. When left unstyled, wild <pre></pre> tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the <pre></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 […] Continue reading »
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></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. Thankfully, those days are over. As […] Continue reading »
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 […] Continue reading »
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. Continue reading »
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 […] Continue reading »
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 […] Continue reading »