Plugin Sale! Save 15% on pro plugins with discount code: FALL2020
Web Dev + WordPress + Security
Tag: ux
70 posts

Apple Nags Killing UX

Heads up! This post is a giant rant about Apple screwing up the user experience (UX). If that is not what you want to read, then now is your chance to hit that back button and escape. Otherwise, if you feel like hearing all about it, continue reading. With Apple devices in the past, you could log in to an Apple account or not. No hassles. No worries. Just enjoy the software. Enjoy that super smooth Apple user experience. Right? […] Continue reading »

Building the Perishable Press Bookstore

After six months of on-again, off-again hard work (and plenty of unexpected challenges), I am excited to launch the new Perishable Press Bookstore. The old bookstore was located on a separate domain, but I wanted it to be better integrated with the main site here at Perishable Press. So now there is the site blog at perishablepress.com and the store at books.perishablepress.com. Continue reading »

Redesign #25: Performance Over Perfection

Welcome to the 2020 (25th!) redesign for Perishable Press. Like many of the previous designs, the new design is super minimal and organic. The #1 goal this time around was to find an optimal balance between performance and aesthetics. Or put another way.. Continue reading »

Clearfix Hack Evolution: From Dumpster Fire to One Line of Code

Is the clearfix method of clearing floats still useful? It’s been years now and I think the answer is “yes”. For example, I use clearfix to clear floats in the site’s current design. It’s the “cleanest” way to clear floated elements without setting widths, hiding overflow, or floating (nearly) everything. I know what some of you are thinking: “Cleanest..? Clearfix is a hack. A total nightmare event.” Years ago that may have been the case, but not so much anymore.. Continue reading »

Metamorphosis

After 9 grueling weeks, I am happy to say that the 2018 Perishable Press redesign is complete. There are still a few small details that I am contemplating, but overall the work is finished and the site is back to full production capacity. From the old Wire theme rolled out in 2013 (five years ago!), to the minimalist, lightweight X Theme, Perishable Press has metamorphosed into a lean, mean, content sharing machine. This is the 24th time Perishable Press has […] Continue reading »

Target iPhone and iPad with CSS3 Media Queries

When designing a website, it’s always a good idea to test on as many different platforms, devices, and browsers as possible. These days, pimping your websites for the iPhone and iPad is an important step in the design process. Especially on the iPad, sites tend to look about 20% cooler than on desktop browsers, so you definitely want to take the time to fine-tune the details. And when dealing with iDevices, it’s often necessary to deliver some custom CSS to […] Continue reading »

Wrapping Long URLs and Text with CSS

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 »

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 […] Continue reading »

Visual Walkthrough of @font-face CSS Code

In my previous post on Quick and Easy CSS @font-face Code, I provide a choice set of CSS rules for embedding custom fonts into your web pages. It’s a solid, cross-browser technique that works great, but as Marty Thornley pointed out, it would be useful to have a more thorough explanation of how the code actually works. So, rather than going back and adding a bunch of additional information to the original post, I’m following up with a visual walkthrough […] Continue reading »

Quick and Easy CSS @font-face Code

I’ve been using custom fonts in my designs for quite a few sites now, and have refined what seems to be an ideal chunk of CSS code for implementing the @font-face rules. Some of the sites that include these rules include Perishable Press and Digging into WordPress, which look more stylish and refined with the custom fonts in effect. I’ve tested this code on quite a few browsers, including the following: Safari 3.1+ Opera 10+ Firefox 3.5+ Chrome 4.0+ Internet […] Continue reading »

Understanding CSS3 and CSS2.1 Border Properties

Even before CSS3 introduced a cornucopia of new border properties, CSS2.1 provided plenty of great functionality, enabling designers to style and enhance borders in many different ways. But now with the many new border properties available with CSS3, much more is possible, including everything from background border images, asymmetrical border radii, border transformations, custom fitting, and much more. While not every browser fully supports all of the awesome new styles, we can practice progressive enhancement to create beautiful, well-styled borders […] Continue reading »

CSS3 + Progressive Enhancement = Smart Design

Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.. CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. It’s awesome, but not all browsers are up to snuff. As designers, it’s up to us to decide which browsers to support for our projects. While everyone has their own particular strategy, there seem to […] Continue reading »

Better Image Preloading with CSS3

I recently added to my growing library of image-preloading methods with a few new-&-improved techniques. After posting that recent preloading article, an even better way of preloading images using pure CSS3 hit me: .preload-images { background: url(image-01.png) no-repeat -9999px -9999px; background: url(image-01.png) no-repeat -9999px -9999px, url(image-02.png) no-repeat -9999px -9999px, url(image-03.png) no-repeat -9999px -9999px, url(image-04.png) no-repeat -9999px -9999px, url(image-05.png) no-repeat -9999px -9999px; } Using CSS3’s new support for multiple background images, we can use a single, existing element to preload all […] Continue reading »

Really Simple Browser Detection with jQuery

For my Serious redesign, I push the envelope in terms of CSS’ advanced selector functionality. Stuff like: p:first-child p:first-child:first-letter p:first-child:after p:first-child:first-line Plus lots of other stylistic tricks that require CSS3 support in order to display as intended. Fortunately, most of the browsers to which I am catering with this new design have no problems with most of the advanced stuff. Of course, Internet Explorer chokes on just about everything, but fortunately IE’s proprietary conditional comments make it easy to fix […] Continue reading »

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

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

Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Banhammer: Protect your WordPress site against threats.
Thoughts
Watching. Waiting. Praying.
Got all of my free WordPress plugins updated for imminent WP 5.6 in early December. Pro plugin updates currently in the works.
7G Firewall now integrated into BBQ Firewall (free version). Pro version soon ;)
macOS Big Sur update complete. So far no crazy issues. Except TextEdit, which is completely screwed up and unusable. Replaced with free BBEdit.
Got so sick of macOS’ annoying “red dot” that I had to remove System Prefs from the dock. Come on Apple you can do better.
Beginning development of an Nginx version of 7G Firewall.
Happy Birthday to Perishable Press, celebrating 15 years online! :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.