Tag Archives: web development

I got to help UXmatters with print styling

Posted on by
2

UXMatters print pageA few months ago I contacted UXmatters online magazine to let them know of a problem I had printing out articles with Firefox. The first page would print, but that was all. I could switch to Safari and print fine, but that just didn’t seem right.

I found out that they were a little shorthanded on specialized web help, so I  volunteered to assist. Pabini Gabriel-Petit, the publisher and editor-in-chief, graciously accepted my offer.

Creating print CSS is usually simpler than web page layouts, because the goal is typically to have the content of the page print out well on standard size paper. Multiple columns and site navigation are usually uncalled for.

My first try was to revise the existing print CSS file. After half an hour at that, I decided it would be simpler to start from scratch. The original print CSS was quite complex, and it seemed I was searching for one issue: why did the pages stop printing after page 1?

So I rewrote the CSS, simplifying the CSS code greatly. I had the layout in good shape, but oddly still had the 1 page issue.

I went back to the main screen CSS file and begin sifting through it, looking for clues. Then on a hunch, I found the issue.

The global CSS file is thick. There’s a ton going on there to defend against various cross browser issues. One particular rule I saw repeatedly was the use of overflow: hidden. That rule is used for a few reasons, but one of them is to force a floated box (div or what have you) to expand when it wants to collapse, vertically. This allows things like backgrounds to show through properly.

One of the selectors that this rule was used on was actually a wrapper for much of the page content. It made sense to me, in a way, that this could confound a browser into hiding paged content that went beyond a page.

So the real key to the much simpler CSS file was to add in an overflow: visible to a large set of selectors to override that overflow: hidden for printed pages.

I sent Pabini the new code, and over the following weeks she tested it and added some details I had missed. About a month ago she deployed the new print CSS code  to the website.

This little evening project was a fun puzzle, and I’m glad I was able to help make such great content on the UXmatters website print out better for more people.

(Back in 2002 or 2003, I forget when, I wrote an article on print styling for web pages.)

Nephtali web framework creator talks FP

Posted on by
Reply

Nephtali project website screenshotAdam Richardson of Envision Internet Consulting has been a long-time collaborator and good friend of mine, and over the last few years I’ve seen him pursue knowledge in web programming with persistence that I’ve never seen from anyone else.

One of Adam’s projects is Nephtali: a web framework that focuses on security and considers the usability of the framework itself. Adam has labored over details in his latest version of Nephtali that will make life better for developers. For instance, he planned the naming convention and namespaces for functions so that in an IDE like NetBeans, the functions appear grouped logically in an easy-to-access format.

Nephtali is up to version 3.0.5 at the time of this writing, and the earlier versions were completely Object Oriented PHP. In version 3, Adam re-thought Nephtali away from the OOP base and rewrote it utilizing FP, Functional Programming.

For the last month or so, Adam has been lobbying various hosts to upgrade to PHP 5.3 or higher, because Nephtali requires at least that version. It is right on the cutting edge. I asked Adam a few questions about Nephtali, and that dialogue follows.

Davin: Nephtali requires the latest version of PHP, version 5.3 or higher, but many hosting providers don’t provide that yet. What about PHP 5.3 is worth waiting for?

Adam: PHP 5.3 includes many enhancements and bug fixes, but the features that facilitated Nephtali’s general approach and architecture were support for namespaces and the new Functional Programming (FP) capabilities.

Davin: I’m familiar with object oriented programming, but you’re talking about “functional programming.” Can you summarize the difference, and explain why you decided to go with FP instead of OOP with Nephtali?

Adam: Most programming languages offer the ability to define functions, however that doesn’t necessarily make them functional programming languages.  It’s easy to to get into flame wars over what a “true” functional language is, but I’ll lay out some general principles:

  • Functions can be passed around just like other datatypes.
  • Closures allow variables that are in scope when a function is declared to be accessed and carried around within the function.
  • Side effects (changing the value of a variable within a function) are limited.
  • Many FP languages natively support currying (the ability to define a subset of a functions arguments and then allow other functions to finish defining the others.)

PHP now supports the first 2, and with some discipline, you can limit the impact of side-effects within your code (there are even some clever hacks for the currying issue.)  But the big question is, “What does this buy you?”

Simplicity.

Object Oriented Programming (OOP) bundles variables with the functions (methods) that directly interact with the variables.  This does provide a degree of encapsulation, as the accessor methods make sure that instance and class variables contain what is expected.  However, the issue often isn’t “What” a variable is changed to, but rather  “When” a variable is changed.  This problem of “When” is most glaring for OOP developers when implementing parallel processing, an issue that has produced many complex, clunky answers.

Taking an FP approach simplifies the question of “When”, as you move from a paradigm of altering variables to one of acting on values returned from functions.  Relatively speaking when following general FP conventions, writing unit tests is simple, writing parallel processing apps is simple (see Scala, Clojure, Erlang, etc.), and as it turns out, writing a capable web framework is simple, too.

Davin: What about models? So many of us in the web field have become familiar with the MVC (model, view, controller) architecture in frameworks, and it seems like Nephtali doesn’t use the models concept at all. Is that right, and if so, what do you do about databases?

Adam: Simplicity.

In terms of DB interaction, I like PHP’s PDO capabilities and security.  Performing simple DB work is easy in Nephtali, as you can generate code very quickly using the Nedit, the online code generator for Nephtali.  Nephtali provides some simple enhancements (functions that automatically table inserts, updates, and deletes; easy connection management; etc.), but you’re always working close enough to the basic PDO capabilities that it’s still very easy to perform transactions, connect to multiple DB’s, work with existing tables that don’t follow particular naming conventions, and whatever else your unique environment may entail.  One line of code is all it takes to grab a set of rows from a DB.

Second, utilizing the parallel processing capabilities of CURL, Nephtali provides some special capabilities for web requests.  A couple lines of code can retrieve a web request (in parallel with any other web requests) and format the retrieved data into whatever container (object or array) you’d like.

Davin: I saw the post on the Nephtali blog about Nephtali’s parallel processing for web requests. Can you explain when that would be useful, and when I should not run ahead and parallel process everything?

Adam: If you have a page that only makes use of one web service, you don’t gain anything.  However, if you have a page like Nephtali’s homepage, which makes a request to Google Code for the latest download and also makes a request to the WordPress blog for recent entries, you can gain a significant performance improvement by processing those requests in parallel.  Instead of ending up with serial calls to the two services (GoogleCodeRequestTime + WordPressRequestTime), the parallel request now equals the greater of the two requests (GoogleCodeRequestTime -OR- WordPressRequestTime.)

Nephtali handles the processing for you automatically.  Always use the request() and response() functions, and Nephtali will make things faster when they can be faster.  That’s it.

More about Nephtali

Learn more about Nephtali at nephtaliproject.com. When you’re there, check out the screencasts on using Nephtali. One of the great features on that site is NEdit, a tool that you can use to write up a lot of the code you’ll need for Nephtali pages.

Oh, and don’t hesitate to use the contact form. Adam loves talking with people about Nephtali, and I’m sure he’ll happily answer questions or respond to comments about the framework.

How WordPress falters as a CMS: Multiple content fields

Posted on by
14

WordPress is amazing and keeps getting better, but I want to be clear about an inherent limitation that WordPress has as a content management system (CMS). That limitation is that WordPress doesn’t handle multiple content regions on web pages.

Too strong? With WordPress, you can try to use custom fields or innovative hacks like Bill Erickson’s approach to multiple content areas using H4 elements in his excellent theme “Thesis”. Unfortunately, neither of those approaches really deals with the depth of the design problem that often requires multiple content areas for pages.

As an information architect/user experience designer, I’ve been involved in many projects that required more types of content on any single screen than WordPress is designed to handle.

Let me draw out what I’m talking about here.

Exhibit A: Page content that WordPress is designed to handle

In a standard WordPress page or post, you’ll see these author-controlled pieces of content.

  • Post/page Title
  • Body
  • Excerpt (often not-used)
Standard WordPress content fields include the title, excerpt, and body.

Standard WordPress content fields include the title, excerpt, and body.

There are other sets of data for a page or post that an author can control, too, but these are meta-data such as tags, categories, slug (shows up in the URL), and possibly search engine optimization information like title, description, and keywords.

For a normal blog, many online trade journals, and a lot of basic websites, this really covers the bases. The body contains the bulk of the content including images, video, and audio that can be intermingled with the text itself. This model is very flexible, and it has definitely proven itself.

Exhibit B: Page content that pushes WordPress too far

In 2009, there was a small project at work to develop the website Covenant Musicians, and because the person who would keep the site updated was already using WordPress, we made the decision to build this site with WordPress too.

Well, if you look at one of the destination pages for this site, the musician profile page (here’s one for example), you’ll notice some different pieces of content which may or may not be present on any particular musician profile page. When they are present, they need to be in certain places and sometimes with certain content.

This custom WordPress page uses fields in addition to the standard options: Musician Image, URL, and Video.

This custom WordPress page uses fields in addition to the standard options: Musician Image, URL, and Video.

The problem is, to control those extra pieces of content: the video, the band image, the link to the band’s website, the site owner needs to use WordPress’s custom fields in very precise ways, without the benefit of WordPress’s content editing tools. What a drag!

To make life easier for the site owner, we ended up recording screencast instructions on how to use these fields and delivered those help files with the site itself. (We used Jing by Techsmith, by the way.)

It would’ve been better had the interface been clear enough so that we didn’t feel the need to document the process of updating these destination pages, but that’s the trouble with stretching WordPress beyond its default content fields.

Ask too much of WordPress and ease-of-use is the casualty

Do you see the difference? When an effective design solution requires multiple types of content per page, using WordPress will actually make your website difficult to manage. WordPress is usually so easy to use that when you hit this wall, it is very apparent.

When you’re at that point, WordPress is probably not the right CMS to choose.

Should WordPress improve in this area?

Whether through the core application or through an excellent plug-in (is there one already that I missed?), if WordPress is going to grow in the content management systems field, this shortfall will need to be addressed.

However, WordPress is really excellent at what it does already, and the better course might be to decide to keep the features in check and let other systems compete in the mid-to-enterprise scale CMS arena. Scope creep never stops, and a good application strategy knows when to say “no.”

Am I wrong?

Am I off-base here? This is just one aspect of WordPress that should limit its use. Another that should cause designers to think twice is when dealing with faceted-navigation which requires more than one dimension (tags can probably handle one dimension). But, again, those are more complex design requirements.

I’m not a WordPress consultant, and I’ll bet some of you would like to point to the errors in my thinking. Let’s hear it.